.getTuneInButton,
.logo,
.title {
    text-decoration: none
}

@-webkit-keyframes horizontalScrollFade {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    90% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1
    }
    91% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
    92% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 0
    }
    93% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes horizontalScrollFade {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    90% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1
    }
    91% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
    92% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 0
    }
    93% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes loading-animation {
    0%,
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px)
    }
}

@keyframes loading-animation {
    0%,
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    50% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px)
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes live-dot {
    from {
        opacity: .3
    }
    to {
        opacity: 1
    }
}

@keyframes live-dot {
    from {
        opacity: .3
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes button-mode-inactive {
    0% {
        border-radius: 50%
    }
    100% {
        border-radius: 3px
    }
}

@keyframes button-mode-inactive {
    0% {
        border-radius: 50%
    }
    100% {
        border-radius: 3px
    }
}

@-webkit-keyframes button-mode-active {
    0% {
        border-radius: 3px
    }
    100% {
        border-radius: 50%
    }
}

@keyframes button-mode-active {
    0% {
        border-radius: 3px
    }
    100% {
        border-radius: 50%
    }
}

@-webkit-keyframes slow-fade-in {
    0% {
        opacity: 0;
        width: 16px;
        height: 16px;
        top: 8px
    }
    100% {
        opacity: 1;
        width: 32px;
        height: 32px;
        top: 0
    }
}

@keyframes slow-fade-in {
    0% {
        opacity: 0;
        width: 16px;
        height: 16px;
        top: 8px
    }
    100% {
        opacity: 1;
        width: 32px;
        height: 32px;
        top: 0
    }
}

@-webkit-keyframes zoom-in {
    0% {
        width: 0;
        height: 0
    }
    100% {
        width: 48px;
        height: 48px
    }
}

@keyframes zoom-in {
    0% {
        width: 0;
        height: 0
    }
    100% {
        width: 48px;
        height: 48px
    }
}

@-webkit-keyframes zoom-out {
    0% {
        width: 48px;
        height: 48px
    }
    99% {
        width: 0;
        height: 0
    }
    100% {
        width: 0;
        height: 0;
        border: none
    }
}

@keyframes zoom-out {
    0% {
        width: 48px;
        height: 48px
    }
    99% {
        width: 0;
        height: 0
    }
    100% {
        width: 0;
        height: 0;
        border: none
    }
}

@-webkit-keyframes shrink {
    0% {
        width: 56px;
        height: 56px
    }
    100% {
        width: 48px;
        height: 48px
    }
}

@keyframes shrink {
    0% {
        width: 56px;
        height: 56px
    }
    100% {
        width: 48px;
        height: 48px
    }
}

@-webkit-keyframes grow {
    0% {
        width: 48px;
        height: 48px
    }
    100% {
        width: 56px;
        height: 56px
    }
}

@keyframes grow {
    0% {
        width: 48px;
        height: 48px
    }
    100% {
        width: 56px;
        height: 56px
    }
}

@-webkit-keyframes knob-zoom-in {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes knob-zoom-in {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes knob-zoom-out {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes knob-zoom-out {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

[class*=" icon-"],
[class^=icon-] {
    font-family: ti-font!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-alert:before {
    content: "\e901"
}

.icon-audiobook:before {
    content: "\e902"
}

.icon-baseball:before {
    content: "\e903"
}

.icon-book:before {
    content: "\e904"
}

.icon-bridge:before {
    content: "\e905"
}

.icon-chat:before {
    content: "\e906"
}

.icon-cutlery:before {
    content: "\e907"
}

.icon-dog:before {
    content: "\e908"
}

.icon-google-play:before {
    content: "\e909"
}

.icon-medical:before {
    content: "\e90a"
}

.icon-piggybank:before {
    content: "\e90b"
}

.icon-playback:before {
    content: "\e90c"
}

.icon-player-popout:before {
    content: "\e90d"
}

.icon-popout:before {
    content: "\e90e"
}

.icon-sports:before {
    content: "\e90f"
}

.icon-umbrella:before {
    content: "\e910"
}

.icon-weight:before {
    content: "\e911"
}

.icon-alarm:before {
    content: "\e912"
}

.icon-align-center:before {
    content: "\e913"
}

.icon-align-justify:before {
    content: "\e914"
}

.icon-align-left:before {
    content: "\e915"
}

.icon-align-right:before {
    content: "\e916"
}

.icon-anchor:before {
    content: "\e917"
}

.icon-apple:before {
    content: "\e918"
}

.icon-archive:before {
    content: "\e919"
}

.icon-arrow-down:before {
    content: "\e91a"
}

.icon-arrow-left:before {
    content: "\e91b"
}

.icon-arrow-right:before {
    content: "\e91c"
}

.icon-arrow-thin-down:before {
    content: "\e91d"
}

.icon-arrow-thin-left:before {
    content: "\e91e"
}

.icon-arrow-thin-right:before {
    content: "\e91f"
}

.icon-arrow-thin-up:before {
    content: "\e920"
}

.icon-arrow-up:before {
    content: "\e921"
}

.icon-article:before {
    content: "\e922"
}

.icon-backspace:before {
    content: "\e923"
}

.icon-basket:before {
    content: "\e924"
}

.icon-basketball:before {
    content: "\e925"
}

.icon-battery-empty:before {
    content: "\e926"
}

.icon-battery-full:before {
    content: "\e927"
}

.icon-battery-low:before {
    content: "\e928"
}

.icon-battery-medium:before {
    content: "\e929"
}

.icon-bell:before {
    content: "\e92a"
}

.icon-blog:before {
    content: "\e92b"
}

.icon-bluetooth:before {
    content: "\e92c"
}

.icon-bold:before {
    content: "\e92d"
}

.icon-bookmark:before {
    content: "\e92e"
}

.icon-bookmarks:before {
    content: "\e92f"
}

.icon-box:before {
    content: "\e930"
}

.icon-briefcase:before {
    content: "\e931"
}

.icon-brightness-low:before {
    content: "\e932"
}

.icon-brightness-max:before {
    content: "\e933"
}

.icon-brightness-medium:before {
    content: "\e934"
}

.icon-broadcast:before {
    content: "\e935"
}

.icon-browser-upload:before {
    content: "\e936"
}

.icon-browser:before {
    content: "\e937"
}

.icon-brush:before {
    content: "\e938"
}

.icon-calendar:before {
    content: "\e939"
}

.icon-camcorder:before {
    content: "\e93a"
}

.icon-camera:before {
    content: "\e93b"
}

.icon-card:before {
    content: "\e93c"
}

.icon-cart:before {
    content: "\e93d"
}

.icon-checklist:before {
    content: "\e93e"
}

.icon-checkmark:before {
    content: "\e93f"
}

.icon-chevron-down:before {
    content: "\e940"
}

.icon-chevron-left:before {
    content: "\e941"
}

.icon-chevron-right:before {
    content: "\e942"
}

.icon-chevron-up:before {
    content: "\e943"
}

.icon-circle-check:before {
    content: "\e944"
}

.icon-clipboard:before {
    content: "\e945"
}

.icon-clock:before {
    content: "\e946"
}

.icon-cloud-download:before {
    content: "\e947"
}

.icon-cloud-upload:before {
    content: "\e948"
}

.icon-cloud:before {
    content: "\e949"
}

.icon-code:before {
    content: "\e94a"
}

.icon-compass:before {
    content: "\e94b"
}

.icon-contract-2:before {
    content: "\e94c"
}

.icon-contract:before {
    content: "\e94d"
}

.icon-conversation:before {
    content: "\e94e"
}

.icon-copy:before {
    content: "\e94f"
}

.icon-crop:before {
    content: "\e950"
}

.icon-cross:before {
    content: "\e951"
}

.icon-crosshair:before {
    content: "\e952"
}

.icon-device-desktop:before {
    content: "\e953"
}

.icon-device-mobile:before {
    content: "\e954"
}

.icon-device-tablet:before {
    content: "\e955"
}

.icon-direction:before {
    content: "\e956"
}

.icon-disc:before {
    content: "\e957"
}

.icon-document-delete:before {
    content: "\e958"
}

.icon-document-edit:before {
    content: "\e959"
}

.icon-document-new:before {
    content: "\e95a"
}

.icon-document-remove:before {
    content: "\e95b"
}

.icon-document:before {
    content: "\e95c"
}

.icon-dot:before {
    content: "\e95d"
}

.icon-dots-2:before {
    content: "\e95e"
}

.icon-dots-3:before {
    content: "\e95f"
}

.icon-download:before {
    content: "\e960"
}

.icon-duplicate:before {
    content: "\e961"
}

.icon-enter:before {
    content: "\e962"
}

.icon-exit:before {
    content: "\e963"
}

.icon-expand-2:before {
    content: "\e964"
}

.icon-expand:before {
    content: "\e965"
}

.icon-experiment:before {
    content: "\e966"
}

.icon-eye:before {
    content: "\e967"
}

.icon-facebook:before {
    content: "\e968"
}

.icon-flag:before {
    content: "\e969"
}

.icon-flashlight:before {
    content: "\e96a"
}

.icon-folder-open:before {
    content: "\e96b"
}

.icon-folder:before {
    content: "\e96c"
}

.icon-forward:before {
    content: "\e96d"
}

.icon-gaming:before {
    content: "\e96e"
}

.icon-google-plus:before {
    content: "\e96f"
}

.icon-graduation:before {
    content: "\e970"
}

.icon-graph-bar:before {
    content: "\e971"
}

.icon-graph-line:before {
    content: "\e972"
}

.icon-graph-pie:before {
    content: "\e973"
}

.icon-heart-empty:before {
    content: "\e974"
}

.icon-heart0full:before {
    content: "\e975"
}

.icon-help:before {
    content: "\e976"
}

.icon-home:before {
    content: "\e977"
}

.icon-hourglass:before {
    content: "\e978"
}

.icon-inbox:before {
    content: "\e979"
}

.icon-information:before {
    content: "\e97a"
}

.icon-instagram:before {
    content: "\e97b"
}

.icon-italic:before {
    content: "\e97c"
}

.icon-jewel:before {
    content: "\e97d"
}

.icon-lifting:before {
    content: "\e97e"
}

.icon-lightbulb:before {
    content: "\e97f"
}

.icon-link-broken:before {
    content: "\e980"
}

.icon-Link:before {
    content: "\e981"
}

.icon-linkedin:before {
    content: "\e982"
}

.icon-list:before {
    content: "\e983"
}

.icon-loading:before {
    content: "\e984"
}

.icon-location:before {
    content: "\e985"
}

.icon-lock:before {
    content: "\e986"
}

.icon-mail:before {
    content: "\e987"
}

.icon-map:before {
    content: "\e988"
}

.icon-menu:before {
    content: "\e989"
}

.icon-message:before {
    content: "\e98a"
}

.icon-meter:before {
    content: "\e98b"
}

.icon-minus:before {
    content: "\e900"
}

.icon-monitor:before {
    content: "\e98c"
}

.icon-move:before {
    content: "\e98d"
}

.icon-network-1:before {
    content: "\e98e"
}

.icon-network-2:before {
    content: "\e98f"
}

.icon-network-3:before {
    content: "\e990"
}

.icon-network-4:before {
    content: "\e991"
}

.icon-network-5:before {
    content: "\e992"
}

.icon-newspaper:before {
    content: "\e993"
}

.icon-pamphlet:before {
    content: "\e994"
}

.icon-paperclip:before {
    content: "\e995"
}

.icon-paperplane:before {
    content: "\e996"
}

.icon-pause-circle-outline:before {
    content: "\e997"
}

.icon-pause-circle-solid:before {
    content: "\e998"
}

.icon-pencil:before {
    content: "\e999"
}

.icon-phone:before {
    content: "\e99a"
}

.icon-photo:before {
    content: "\e99b"
}

.icon-photos:before {
    content: "\e99c"
}

.icon-pill:before {
    content: "\e99d"
}

.icon-pin:before {
    content: "\e99e"
}

.icon-play-circle-outline:before {
    content: "\e99f"
}

.icon-play-circle-solid:before {
    content: "\e9a0"
}

.icon-plus:before {
    content: "\e9a1"
}

.icon-podcast:before {
    content: "\e9a2"
}

.icon-power:before {
    content: "\e9a3"
}

.icon-premium-solid:before {
    content: "\e9a4"
}

.icon-premium:before {
    content: "\e9a5"
}

.icon-print:before {
    content: "\e9a6"
}

.icon-pulse:before {
    content: "\e9a7"
}

.icon-question:before {
    content: "\e9a8"
}

.icon-recordings:before {
    content: "\e9a9"
}

.icon-reply-all:before {
    content: "\e9aa"
}

.icon-reply:before {
    content: "\e9ab"
}

.icon-rocket:before {
    content: "\e9ac"
}

.icon-scale:before {
    content: "\e9ad"
}

.icon-search:before {
    content: "\e9ae"
}

.icon-share:before {
    content: "\e9af"
}

.icon-shopping-bag:before {
    content: "\e9b0"
}

.icon-skip:before {
    content: "\e9b1"
}

.icon-stack:before {
    content: "\e9b2"
}

.icon-star:before {
    content: "\e9b3"
}

.icon-stopwatch:before {
    content: "\e9b4"
}

.icon-store:before {
    content: "\e9b5"
}

.icon-suitcase:before {
    content: "\e9b6"
}

.icon-swap:before {
    content: "\e9b7"
}

.icon-tag-delete:before {
    content: "\e9b8"
}

.icon-tag:before {
    content: "\e9b9"
}

.icon-tags:before {
    content: "\e9ba"
}

.icon-thumbs-down:before {
    content: "\e9bb"
}

.icon-thumbs-up:before {
    content: "\e9bc"
}

.icon-ticket:before {
    content: "\e9bd"
}

.icon-time-reverse:before {
    content: "\e9be"
}

.icon-to-do:before {
    content: "\e9bf"
}

.icon-toggles:before {
    content: "\e9c0"
}

.icon-trash:before {
    content: "\e9c1"
}

.icon-tumblr:before {
    content: "\e9c2"
}

.icon-tunein-bug:before {
    content: "\e9c3"
}

.icon-tunein-logo:before {
    content: "\e9c4"
}

.icon-twitter:before {
    content: "\e9c5"
}

.icon-upload:before {
    content: "\e9c6"
}

.icon-user-id:before {
    content: "\e9c7"
}

.icon-user-private:before {
    content: "\e9c8"
}

.icon-user:before {
    content: "\e9c9"
}

.icon-users:before {
    content: "\e9ca"
}

.icon-vibrate:before {
    content: "\e9cb"
}

.icon-view-apps:before {
    content: "\e9cc"
}

.icon-view-list-large:before {
    content: "\e9cd"
}

.icon-view-list:before {
    content: "\e9ce"
}

.icon-view-thumb:before {
    content: "\e9cf"
}

.icon-wallet:before {
    content: "\e9d0"
}

.icon-warning:before {
    content: "\e9d1"
}

.icon-web:before {
    content: "\e9d2"
}

.icon-wifi:before {
    content: "\e9d3"
}

.icon-wrong:before {
    content: "\e9d4"
}

.icon-zoom-in:before {
    content: "\e9d5"
}

.icon-zoom-out:before {
    content: "\e9d6"
}

.icon-circle:before {
    content: "\e9d7"
}

.icon-clockwise:before {
    content: "\e9d8"
}

.icon-headphones:before {
    content: "\e9d9"
}

.icon-loop:before {
    content: "\e9da"
}

.icon-microphone:before {
    content: "\e9db"
}

.icon-music:before {
    content: "\e9dc"
}

.icon-mute:before {
    content: "\e9dd"
}

.icon-next:before {
    content: "\e9de"
}

.icon-pause:before {
    content: "\e9df"
}

.icon-play:before {
    content: "\e9e0"
}

.icon-previous:before {
    content: "\e9e1"
}

.icon-return:before {
    content: "\e9e2"
}

.icon-retweet:before {
    content: "\e9e3"
}

.icon-shuffle:before {
    content: "\e9e4"
}

.icon-stop:before {
    content: "\e9e5"
}

.icon-volume-full:before {
    content: "\e9e6"
}

.icon-volume-low:before {
    content: "\e9e7"
}

.icon-volume-medium:before {
    content: "\e9e8"
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    font-family: Calibre-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.logo-container {
    position: absolute;
    top: 0;
    right: 0;
    margin: 8px 8px 0 0
}

.play-button-container {
    height: 100%
}

.titles-container {
    position: relative;
    height: 100%;
    width: calc(100% - 75px);
    margin: 0 8px 0 16px;
    overflow: hidden
}



.title-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.title-container.not-live-title-width {
    width: calc(100% - 16px)
}

.title-wrapper {
    position: relative;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden
}

.title-wrapper .title-gradient {
    top: 0;
    bottom: auto
}

.title {
    line-height: 16px;
    font-family: Calibre-Medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #1c203c;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    vertical-align: text-top
}

.title.scroll {
    -webkit-animation: horizontalScrollFade 20s linear infinite;
    animation: horizontalScrollFade 20s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.title.scroll:hover {
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.live-text-container {
    padding-left: 8px
}

.top-container>.live-text-container {
    display: none
}

.live-text-container .live-text {
    color: #fc685f;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap
}



.live-text-container .live-text .live-dot {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: live-dot;
    animation-name: live-dot;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    vertical-align: middle;
    font-size: 16px
}

.live-text-container .live-text .live-word {
    vertical-align: middle;
    margin: 1px 0 0 4px;
    display: inline-block;
    font-family: Calibre-Semibold, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 0
}

.subtitle.scroll {
    -webkit-animation: horizontalScrollFade 20s linear infinite;
    animation: horizontalScrollFade 20s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.seek-bar,
.time {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.subtitle.scroll:hover {
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.subtitle>a,
.subtitle>span {
    font-family: Calibre-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    max-width: calc(100% + 72px);
    display: inline-block;
    color: #a4a6b1;
    margin-top: 2px;
    text-decoration: none;
    white-space: nowrap
}

.title-gradient {
    position: absolute;
    right: 0;
    bottom: 2px
}


.title-gradient svg .svg-icon {
    stop-color: #fff
}

.scrubber-container {
    display: none;
    position: relative;
    width: calc(100% - 42px)
}


#seekBarContainer {
    position: relative;
    height: 100%;
    width: 100%;
    margin-left: 0
}

#seekBarContainer.disabled {
    cursor: default;
    width: 100%;
    margin: 0
}



.artwork-container {
    display: none;
    margin-right: auto
}



.overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f8f6;
    color: #1c203c;
    z-index: 15
}



.overlay.openOverlay {
    -webkit-transition: all .45s cubic-bezier(.2, 0, .1, 1);
    transition: all .45s cubic-bezier(.2, 0, .1, 1)
}

.overlay.closedOverlay {
    -webkit-transition: all .4s cubic-bezier(.4, 0, .14, 1);
    transition: all .4s cubic-bezier(.4, 0, .14, 1)
}

.overlay .closeButtonSvg {
    position: absolute;
    top: 6px;
    right: 6px;
    background: url(/resources/img/close-button-ink.svg) no-repeat;
    background-size: contain;
    width: 10px;
    height: 10px;
    z-index: 21;
    cursor: pointer
}

.logo,
.time.right-section {
    right: 0
}

.share-container {
    margin-right: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.share-container .share-button {
    width: 20px;
    height: 20px;
    margin-left: auto;
    border: none;
    cursor: pointer
}



.share-container .share-button:hover svg {
    fill: #eaeaea
}

.share-container .share-button svg {
    fill: #f6f8f6
}

.share-container .share-button svg .svg-icon {
    fill: #1c203c
}

.share-icon-container {
    -webkit-transition: all .4s cubic-bezier(.2, 0, .1, 1);
    transition: all .4s cubic-bezier(.2, 0, .1, 1);
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: 32px;
    height: 44px
}



.share-icon-container.active {
    height: 54px;
    margin: 0 4px
}



.share-icon-container.disabled {
    opacity: .2
}

.ad-timer-container {
    margin-right: 5px;
    font-size: 11px;
    padding: 3px;
    border-radius: 3px;
    border: .5px solid #eeefee;
    color: #d0d1d1
}

.share-overlay {
    position: relative;
    height: 100%;
    text-align: center
}

.share-overlay .share-overlay-content {
    height: 100%;
    display: inline-block;
    margin-top: 20px
}

.share-overlay .share-overlay-content .share-overlay-description {
    font-size: 14px;
    color: #d0d1d1
}

.share-overlay .share-overlay-content .share-overlay-icons .button-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    height: 54px
}



.share-overlay .share-overlay-content .copied-text {
    font-family: Calibre-Medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin-top: 18px
}

.overlayGetTuneIn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.overlayGetTuneIn h1 {
    font-size: 13px;
    width: calc(100% - 30px);
    font-family: Calibre-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-width: 400px;
    text-align: center;
    font-weight: 600;
    line-height: 18px
}

.getTuneInButton span,
.share-text span {
    font-family: Calibre-Semibold, "Helvetica Neue", Helvetica, Arial, sans-serif
}



.getTuneInButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    height: 24px;
    margin-top: 5px;
    padding: 0 8px;
    background-color: #11d7cc;
    color: #1c203c;
    border: none;
    border-radius: 3px;
    cursor: pointer
}

#topicList .topic .action .publish-date .day,
.time {
    font-family: Calibre-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center
}

.logo {
    position: relative;
    display: block;
    top: 0;
    width: 40px;
    height: 18px;
    background: url(/resources/img/tunein-ink-logo-v2.svg) no-repeat;
    background-size: contain;
    font-size: 50px;
    z-index: 1
}



.time {
    display: none;
    position: absolute;
    top: 50%;
    width: 44px;
    height: 12px;
    color: #a4a6b1;
    font-size: 12px;
    line-height: 12px
}



.play-button,
.share-icon,
.time span {
    display: inline-block
}

.time span {
    line-height: normal;
    vertical-align: middle
}

.infinity-ico {
    top: 0
}

.infinity-ico:before {
    content: '\221E';
    font-size: 21px;
    font-weight: 300;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}

#topicList .topic .action .icon i.spinner:before,
.spinner:before {
    content: "";
    box-sizing: border-box
}

.play-button {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
    border-radius: 50%;
    vertical-align: top
}

.play-button-vertical-l {
    position: relative;
    height: 40px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
    border-radius: 50%;
    vertical-align: top
}



.play-button svg {
    fill: #1c203c;
    width: 100%
}

.play-button svg .svg-icon {
    fill: #fff
}

.play-button:hover svg {
    fill: #4b4f6d
}

#topicList .topic .action .play-button svg circle,
.artwork-container .play-button svg circle {
    fill: transparent
}

.play-button.connecting,
.play-button.error,
.play-button.preroll,
.play-button.waiting {
    background-color: #1c203c
}

.artwork-container .play-button {
    margin: 0;
    border: 2px solid #fff;
    background-color: rgba(0, 0, 0, .34);
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .26);
    width: 48px;
    height: 48px
}

.artwork-container .artworkOverlay .play-button {
    -webkit-animation: shrink .26s cubic-bezier(.2, 0, .1, 1) forwards;
    animation: shrink .26s cubic-bezier(.2, 0, .1, 1) forwards
}

.artwork-container .artworkOverlay.visible .play-button:hover {
    -webkit-animation: grow .42s cubic-bezier(.4, 0, .14, 1) forwards;
    animation: grow .42s cubic-bezier(.4, 0, .14, 1) forwards
}



.scrubber {
    height: 100%
}

.seek-bar {
    position: absolute;
    top: 50%;
    height: 4px;
    width: 100%;
    border-radius: 4px;
    background-color: #f6f8f6;
    z-index: 0;
    margin-top: 1px
}

.elapsed-bar,
.knob {
    background-color: #1c203c
}

.elapsed-bar {
    width: 0;
    height: inherit;
    border-radius: 4px
}

.spinner {
    position: relative;
    border-top-color: rgba(255, 255, 255, .9);
    border-bottom-color: rgba(255, 255, 255, .5);
    border-right-color: rgba(255, 255, 255, .5);
    border-left-color: #fff
}

.spinner:before {
    width: 14px;
    height: 14px;
    border-radius: 20px;
    border-width: 2px;
    border-style: solid;
    border-top-color: inherit;
    border-bottom-color: inherit;
    border-right-color: inherit;
    border-left-color: inherit;
    position: absolute;
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.knob,
.share-icon {
    border-radius: 50%
}

.knob,
.share-text {
    position: relative
}

.middle-container .spinner:before {
    left: -12px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-width: 4px
}

.overlay-spinner .spinner:before {
    width: 40px;
    height: 40px;
    border-width: 4px
}

.knob {
    top: -4px;
    left: -6px;
    width: 12px;
    height: 12px;
    margin-left: auto;
    margin-right: -12px;
    -webkit-transform: scale(0);
    transform: scale(0);
    z-index: 1;
    -webkit-animation: knob-zoom-out .26s cubic-bezier(.2, 0, .1, 1) forwards;
    animation: knob-zoom-out .26s cubic-bezier(.2, 0, .1, 1) forwards
}

#seekBarContainer:hover .knob {
    -webkit-animation: knob-zoom-in .42s cubic-bezier(.4, 0, .14, 1) forwards;
    animation: knob-zoom-in .42s cubic-bezier(.4, 0, .14, 1) forwards
}

.share-icon {
    width: 26px;
    height: 26px;
    cursor: pointer
}



.share-icon svg {
    white-space: nowrap;
    width: 100%;
    height: 22px
}



.share-icon.share-facebook {
    background-color: #3b5998
}

.share-icon.share-twitter {
    background-color: #1da1f2
}

.share-icon.share-tumblr {
    background-color: #000
}

.share-icon.share-html,
.share-icon.share-link {
    background-color: #f0f2f0;
    border: 1px solid #d0d1d1;
    box-sizing: border-box
}

.share-icon:hover {
    opacity: .7
}

.share-icon .hidden-share-input {
    opacity: 0
}

.share-text {
    width: auto;
    height: 12px;
    margin-top: 5px;
    opacity: 0;
    -webkit-transition: opacity .4s cubic-bezier(.2, 0, .1, 1) 50ms;
    transition: opacity .4s cubic-bezier(.2, 0, .1, 1) 50ms;
    display: block
}

.artwork,
.artwork .artworkOverlay {
    height: 80px;
    width: 80px;
    padding: 2px;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
    cursor: pointer
}

.share-text span {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 11px
}

.active .share-text {
    opacity: 1
}

.artwork {
    display: inline-block;
    margin: 6px 0 0 6px;
    box-shadow: 0 0 7px #ddd;
    z-index: 1
}

.artwork .artworkOverlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    opacity: 1;
    box-sizing: border-box;
    z-index: 10
}

.artwork .artworkOverlay .overlay-spinner {
    display: none;
    width: 40px;
    height: 40px
}

.artwork .artworkOverlay.visible .overlay-spinner,
.loading-player {
    display: block
}



.artwork img {
    height: inherit;
    width: inherit;
    border-radius: 3px
}

.loading-player .titles-container img {
    height: 100%;
    margin-top: 3px
}

.loading-player .scrubber-container {
    width: calc(100% - 12px)
}

.loading-player .text-container {
    background: url(/resources/img/loading-title.gif) 0/contain no-repeat
}

#topicList {
    overflow: scroll;
    height: calc(100% - 101px);
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fcfcfc
}

#topicList .year {
    height: 27px;
    padding-left: 8px;
    background-color: #f7f7f7
}

#topicList .year .text {
    font-family: Calibre-Medium, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #a4a6b1;
    line-height: 27px;
    vertical-align: middle
}

#topicList .year+.topic .topic-content {
    border-top: none
}

#topicList .year.affixed {
    position: absolute;
    width: 100%;
    z-index: 1
}

#topicList .year.affixed+.topic {
    margin-top: 27px
}

#topicList .topic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 0 8px;
    height: 48px
}

#topicList .topic .action {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-color: #1c203c;
    position: relative;
    -webkit-animation: button-mode-inactive .1s cubic-bezier(.4, 0, .14, 1) forwards;
    animation: button-mode-inactive .1s cubic-bezier(.4, 0, .14, 1) forwards
}

#topicList .topic .action .equalizer,
#topicList .topic .action .icon,
#topicList .topic .action .publish-date {
    width: 100%;
    height: 100%
}

#topicList .topic .action .publish-date {
    text-align: center;
    padding: 3px 6px 3px 7px;
    box-sizing: border-box
}

#topicList .topic .action .publish-date .month {
    width: 19px;
    height: 9px;
    font-family: Calibre-Semibold, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 8px;
    letter-spacing: .6px;
    text-align: center;
    color: #11d7cc;
    display: inline-block;
    margin-top: 1px
}

#topicList .topic .action .publish-date .day {
    width: 19px;
    height: 19px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    display: inline-block
}

#topicList .topic .topic-content .duration,
#topicList .topic .topic-content .text {
    font-family: Calibre-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px
}

#topicList .topic .action .equalizer,
#topicList .topic .action .icon,
#topicList .topic .action .play-button {
    display: none;
    position: relative
}

#topicList .topic .action .equalizer {
    position: relative
}

#topicList .topic .action .equalizer img,
#topicList .topic .action .icon i {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#topicList .topic .action .equalizer img {
    width: 20px;
    height: 20px
}

#topicList .topic .action .icon i.spinner {
    position: relative;
    border-bottom-color: rgba(255, 255, 255, .5);
    border-right-color: rgba(255, 255, 255, .5);
    border-left-color: #fff;
    border-top-color: #fff
}

#topicList .topic .action .icon i.spinner:before {
    border-radius: 20px;
    border-style: solid;
    border-top-color: inherit;
    border-bottom-color: inherit;
    border-right-color: inherit;
    border-left-color: inherit;
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: block;
    left: initial;
    top: initial;
    position: inherit;
    width: 18px;
    height: 18px;
    border-width: 3px
}

#topicList .topic .action .play-button {
    margin: auto;
    width: 100%;
    height: 100%;
    opacity: 0
}

#topicList .topic .action .play-button svg {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#topicList .topic .topic-content {
    position: relative;
    width: 100%;
    margin-left: 16px;
    height: 100%;
    border-top: 1px solid #eeefee
}

#topicList .topic .topic-content .text {
    color: #1c203c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 125px);
    line-height: 48px;
    letter-spacing: .25px
}

#topicList .topic .topic-content .duration {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    width: 46px;
    text-align: right;
    color: #a4a6b1;
    margin-right: 16px
}

#topicList .topic.active.warning,
#topicList .topic:hover {
    background-color: #f6f8f6
}

#topicList .topic.active.warning .action,
#topicList .topic:hover .action {
    -webkit-animation: button-mode-active .1s cubic-bezier(.2, 0, .1, 1) forwards;
    animation: button-mode-active .1s cubic-bezier(.2, 0, .1, 1) forwards
}

#topicList .topic.active.warning .action .play-button,
#topicList .topic:hover .action .play-button {
    -webkit-animation: slow-fade-in .2s cubic-bezier(.2, 0, .1, 1) forwards;
    animation: slow-fade-in .2s cubic-bezier(.2, 0, .1, 1) forwards
}

#topicList .topic.active.warning .topic-content,
#topicList .topic.active.warning+.topic .topic-content,
#topicList .topic:hover .topic-content,
#topicList .topic:hover+.topic .topic-content {
    border-color: #f6f8f6
}

#topicList .topic.active .topic-content .text,
#topicList .topic:hover .topic-content .text {
    font-family: Calibre-Medium, "Helvetica Neue", Helvetica, Arial, sans-serif
}

#topicList .topic.active.loading .action .icon,
#topicList .topic.active.playing .action .equalizer,
#topicList .topic.active.warning .action .play-button,
#topicList .topic:hover .action .play-button {
    display: block
}

#topicList .topic.active.loading .action .equalizer,
#topicList .topic.active.loading .action .play-button,
#topicList .topic.active.loading .action .publish-date,
#topicList .topic.active.playing .action .publish-date,
#topicList .topic.active.warning .action .publish-date,
#topicList .topic:hover .action .publish-date,
#topicList .topic:hover.active .action .equalizer {
    display: none
}

#topicList #loadMore {
    width: 100%;
    height: 35px;
    color: #858585;
    cursor: pointer;
    text-align: center;
    position: relative
}

#topicList #loadMore .text {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 13px;
    height: 14px;
    width: 100%;
    text-align: center;
    left: 0
}

#topicList>:not(.year) {
    cursor: pointer
}

.link,
a {
    text-decoration: underline;
    color: #11d7cc;
    cursor: pointer
}

#embed-player {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 1px;
    min-width: 100%;
    background-color: #fcfcfc;
    z-index: 2
}

.player {
    position: relative;
    overflow: hidden;
    min-width: 150px;
    height: 100px;
    box-sizing: border-box;
    box-shadow: none;
    border: none;
}

.player .content {
    position: relative;
    height: 100%
}



.classic {
    background-color: #fff
}

.classic .top-container {
    position: relative;
    height: 30px;
    width: 100%
}



.classic .middle-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    width: 100%;
    margin-bottom: 4px;
    padding-left: 12px
}



.classic .bottom-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 20px;
    width: 100%
}


.mini {
    height: 40px
}

.mini .loading-player {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.mini .loading-player .content {
    width: 100%
}

.mini .loading-player .play-button-container {
    display: inline;
    font-size: 0
}

.mini .loading-player .titles-container {
    display: inline
}

.mini .loading-player .titles-container img {
    height: 67%
}

.mini .loading-player .middle-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.mini .loading-player .bottom-container,
.mini .subtitle {
    display: none
}

.mini .loading-player .text-container {
    /* height: calc(100% - 16px); */
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 1px
}

.mini .play-button {
    width: 28px;
    height: 28px;
    margin-top: 5px;
    margin-left: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mini .play-button .spinner:before {
    left: -9px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-width: 3px
}

.mini .titles-container {
    width: 100%;
    margin: 0
}

.mini .text-container,
.mini .title,
.mini .title-container {
    width: auto
}

.mini .text-container {
    height: auto;
    width: calc(100% - (28px + 44px));
    margin-top: 11px;
    margin-left: 10px;
    margin-bottom: 0
}

.mini .title {
    font-family: Calibre-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px
}

.mini .logo-container {
    margin: 0
}

.mini .logo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 20px
}

.mini .live-text-container {
    height: 14px
}



.mini .artwork .artworkOverlay,
.mini .artwork-container {
    display: none
}

.mini .artwork {
    height: 20px;
    width: 20px
}

.mini>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.player.dark {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #303030
}

.player.dark .artwork-container {
    border: 1px solid #303030;
    background-color: #1a1a1a;
    box-sizing: border-box
}

.player.dark .artwork-container .artwork {
    border-color: #303030;
    box-shadow: none
}

.player.dark .artwork-container.artwork-overlay {
    background-color: #242424;
    border-color: #303030
}

.player.dark .darkCloseButton {
    background: url(/resources/img/close-button-white.svg) no-repeat;
    background-size: contain
}

.player.dark .bottom-container .scrubber-container .scrubber .seek-bar,
.player.dark .play-button.connecting,
.player.dark .play-button.error,
.player.dark .play-button.preroll,
.player.dark .play-button.waiting {
    background-color: #363636
}

.player.dark .logo {
    background-image: url(/resources/img/tunein-white-logo-v2.svg)
}

.player.dark .play-button .spinner {
    border-right-color: rgba(255, 255, 255, .1);
    border-bottom-color: rgba(255, 255, 255, .1)
}

.player.dark .play-button svg {
    fill: #363636
}

.player.dark .play-button:hover svg {
    fill: #525252
}

.player.dark .titles-container .title {
    color: #fff
}

.player.dark .titles-container .subtitle>a,
.player.dark .titles-container .subtitle>span {
    color: #a4a6b1
}

.player.dark .title-gradient svg .svg-icon {
    stop-color: #1a1a1a
}

.player.dark .bottom-container .scrubber-container .scrubber .seek-bar .elapsed-bar,
.player.dark .bottom-container .scrubber-container .scrubber .seek-bar .elapsed-bar .knob {
    background-color: #f6f8f6
}

.player.dark .bottom-container .share-container .share-button svg {
    fill: #363636
}

.player.dark .bottom-container .share-container .share-button svg .svg-icon {
    fill: #f6f8f6
}

.player.dark .bottom-container .share-container .share-button:hover {
    cursor: pointer
}

.player.dark .bottom-container .share-container .share-button:hover svg {
    fill: #525252
}

.player.dark .overlay .share-overlay .share-overlay-icons .share-tumblr {
    background-color: #f6f8f6;
    border-color: #fff
}

.player.dark .overlay .share-overlay .share-overlay-icons .share-tumblr svg path {
    fill: #363636
}

.player.dark .overlay .share-overlay .share-overlay-icons .share-html,
.player.dark .overlay .share-overlay .share-overlay-icons .share-link {
    background-color: #363636;
    border-color: #303030
}

.player.dark .overlay .share-overlay .share-overlay-icons .share-html svg,
.player.dark .overlay .share-overlay .share-overlay-icons .share-link svg {
    fill: #f6f8f6
}

.player.dark .share-popout {
    background-color: #1a1a1a
}

.player.dark .controls-container {
    background-color: #1a1a1a;
    border-color: #404040
}

.player.dark .button {
    border-color: #404040;
    color: #b1b1b1
}

#topicList.dark,
#topicList.dark .topic .topic-content {
    border-color: #303030
}

.player.dark .button:hover {
    background-color: #525252
}

.player.dark .button.disabled:hover {
    cursor: initial;
    background-color: #1a1a1a
}

.player.dark .button.disabled i {
    color: #404040
}

.player.dark .tiBadge {
    background-image: url(/resources/img/tunein-grey-badge-v2.svg)
}

.player.dark .title,
.player.dark a {
    color: #fff
}

.player.dark .subtitle {
    color: #f6f8f6
}

.player.dark .loading-player .text-container {
    background-image: url(/resources/img/loading-title-dark.gif)
}

#topicList.dark {
    background-color: #1a1a1a;
    color: #fff
}

#topicList.dark .year {
    color: #a4a6b1;
    background-color: #242424
}

#topicList.dark .topic .action,
#topicList.dark .topic:hover {
    background-color: #363636
}

#topicList.dark .topic .topic-content .text {
    color: #d0d1d1
}

#topicList.dark .topic:hover .action {
    background-color: #525252
}

#topicList.dark .topic:hover+.topic .topic-content {
    border-color: #1a1a1a
}

#topicList.dark #loadMore .text {
    color: #fff
}

.overlay.dark {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #303030
}