@font-face {
    font-family: 'texgyreheros';
    src: url('/static/fonts/texgyreheros-regular-webfont.eot');
    src: url('/static/fonts/texgyreheros-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/texgyreheros-regular-webfont.woff') format('woff'),
         url('/static/fonts/texgyreheros-regular-webfont.ttf') format('truetype'),
         url('/static/fonts/texgyreheros-regular-webfont.svg#texgyreherosregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'texgyreheros';
    src: url('/static/fonts/texgyreheros-italic-webfont.eot');
    src: url('/static/fonts/texgyreheros-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/texgyreheros-italic-webfont.woff') format('woff'),
         url('/static/fonts/texgyreheros-italic-webfont.ttf') format('truetype'),
         url('/static/fonts/texgyreheros-italic-webfont.svg#texgyreherositalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'texgyreheros';
    src: url('/static/fonts/texgyreheros-bold-webfont.eot');
    src: url('/static/fonts/texgyreheros-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/texgyreheros-bold-webfont.woff') format('woff'),
         url('/static/fonts/texgyreheros-bold-webfont.ttf') format('truetype'),
         url('/static/fonts/texgyreheros-bold-webfont.svg#texgyreherosbold') format('svg');
    font-weight: bold;
    font-style: normal;

}



body {
	font-family: 'texgyreheros', sans-serif;
	color: #000;
}
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {
    from { padding:0; }
    to { padding:0; }
}
body.player--inline {
  overflow-y: scroll;
}
html {
	font-family: 'texgyreheros', sans-serif;
	scroll-padding: 120px 0 100px 0;
}

/* only when Vue is not fetching so it doesn't mess with its programmatic scroll reset */
html:not(.fetching) {
  scroll-behavior: smooth;
}

/* workaround chromium bug: smooth scroll makes 'required' hint balloons disappear,
   note: this does not degrade experience on firefox, which matches this behavior automagically */
html:has(#friends_submit) {
  scroll-behavior: auto;
}

input {
	border-radius: 0;
	font-family: 'texgyreheros', sans-serif;
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    box-sizing : border-box;

}

/* normalize iOS 15 User Agent Style Sheet */
input[type="submit"] {
  color: inherit;
}

p {
    line-height: 145%;
}
*:focus {
    outline: 0;
}

button {
  color: inherit;
}

/* from bootstrap */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#content > .pure-g, #home-wrapper > .pure-g {
	width: 100%;
}
.pure-g {
}
.pure-g [class*="pure-u"] {
	font-family: 'texgyreheros', sans-serif;
}
.g-sl {
	white-space: nowrap;
}
.g-sl [class*="pure-u"] {
	white-space: normal;
}
@media screen and (min-width: 35.5em) {
	.g-sl-sm {
		white-space: nowrap;
	}
	.g-sl-sm [class*="pure-u"] {
		white-space: normal;
	}
}
@media screen and (min-width: 48em) {
	.g-sl-md {
		white-space: nowrap;
	}
	.g-sl-md [class*="pure-u"] {
		white-space: normal;
	}
}
.g-middle {
	vertical-align: middle;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	/*
	-ms-align-content: center;
	*/
}
.g-middle [class*="pure-u"] {
        -webkit-flex: 1 auto;
        -ms-flex: 1 auto;
	flex: 1 auto;
	vertical-align: middle;
}
.g-bottom [class*="pure-u"] {
	vertical-align: text-bottom;
	-webkit-align-items: flex-end;
	-ms-align-items: flex-end;
	align-items: flex-end;
	-webkit-align-content: flex-end;
	-ms-align-content: flex-end;
	align-content: flex-end;
}
.g-top [class*="pure-u"] {
	vertical-align: text-top;
}
@media screen and (min-width: 35.5em) {
	.g-sm-bottom [class*="pure-u"] {
		vertical-align: text-bottom;
	}
	.g-sm-top [class*="pure-u"] {
		vertical-align: text-top;
	}
}
@media screen and (min-width: 48em) {
	.g-md-bottom [class*="pure-u"] {
		vertical-align: text-bottom;
	}
	.g-md-top [class*="pure-u"] {
		vertical-align: text-top;
	}
}
.rtl {
	direction: rtl;
}
.rtl [class*="pure-u"] {
	direction: ltr;
}

.primary-seo-heading {
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
}

#home-wrapper {
	margin-left: 2px;
	margin-right: 2px;
}
#home-wrapper > .pure-g > [class*="pure-u"] > *:not(.no-margin-right), #home-wrapper > a > .pure-g > [class*="pure-u"] > *:not(.no-margin-right), #home-wrapper > form > .pure-g > [class*="pure-u"] > *:not(.no-margin-right) {
	margin-right: 3px;
}
#home-wrapper > .pure-g > [class*="pure-u"] > *:not(.no-margin-left), #home-wrapper > a > .pure-g > [class*="pure-u"] > *:not(.no-margin-left), #home-wrapper > form > .pure-g > [class*="pure-u"] > *:not(.no-margin-left) {
	margin-left: 3px;
}
#content > .pure-g > [class*="pure-u"] > *:not(.no-margin-right), #content > a > .pure-g > [class*="pure-u"] > *:not(.no-margin-right), #content > form > .pure-g > [class*="pure-u"] > *:not(.no-margin-right) {
	margin-right: 5px;
}
#content > .pure-g > [class*="pure-u"] > *:not(.no-margin-left), #content > a > .pure-g > [class*="pure-u"] > *:not(.no-margin-left), #content > form > .pure-g > [class*="pure-u"] > *:not(.no-margin-left) {
	margin-left: 5px;
}

/* hack to simplify main content alignment */
.pure-u-content {
  margin-left: 5px;
}

a:active:not(.shows-listened), a:link:not(.shows-listened), a:hover:not(.shows-listened), a:visited:not(.shows-listened) {
}
a:active, a:link, a:hover, a:visited {
	color: #000;
	text-decoration: none;
	outline: none;
}
a.underline {
    text-decoration: underline;
}
a.h-underline:hover {
    text-decoration: underline;
}
.links-underlined a {
  text-decoration: underline;
}
.friends-bonus a:hover, .broadcast-description a:hover, .team-description a:hover, .friends-bonus a, .broadcast-description a, .team-description a {
    text-decoration: underline;
}
strong {
	font-weight: 700;
}

/*
 * Menu bar
 */

label {
	cursor: pointer;
}
hr {
	margin-top: 3px;
	margin-bottom: 3px;
	border: none;
	height: 1px;
	border-color: #000;
	background-color: #000;
	color: #000;
}
hr.no-margin-top {
	margin-top: 0px;
}
hr.no-margin {
	margin: 0px;
}
#content {
	position: relative;
}
::-webkit-input-placeholder {
	color: #555;
}

:-moz-placeholder { /* Firefox 18- */
	color: #555;
}

::-moz-placeholder {  /* Firefox 19+ */
	color: #555;
}

:-ms-input-placeholder {
	color: #555;
}

/*
 * Landing page
 */

.section {
	position: relative;
	padding-bottom: 114.2857%;
	font-size: 13px;
}
.section img {
	width: 100%;
	height: auto;
}
.teaser {
	position: relative;
}
.home-testimonial {
  transition: opacity 2s ease-in-out;
  visibility: hidden;
  z-index: 0;
}
.home .teaser > a {
  transition: opacity 2s ease-in-out;
}

.home-testimonial:nth-last-child(1),
.home-testimonial:nth-last-child(2),
.teaser .teaser-inner:nth-last-child(1),
.teaser .teaser-inner:nth-last-child(2) {
  visibility: visible;
}

/* "medium rectangle", 600:500 */
.teaser.A1,
.teaser.A2,
.teaser.A3,
.teaser.A4,
.teaser.B2,
.teaser.B3 {
  padding-bottom: 83.33%;
}
/* "album rectangle", 600:320 */
.teaser.B1,
.teaser.C1,
.teaser.C1M {
  padding-bottom: 53.33%;
}
.teaser .teaser-inner {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: white;
}
.teaser-img {
	width: 100%;
	height: auto;
	display: block;
}
/*
.PP .teaser-img {
	width: 270;
	height: 220;
}
*/
@media screen and (min-width: 20em) {
    .teaser-text {
        font-size: 1.5em;
    }
}
@media screen and (min-width: 24em) {
    .teaser-text {
        font-size: 1.8em;
    }
}
@media screen and (min-width: 28em) {
    .teaser-text {
        font-size: 2.1em;
    }
}
@media screen and (min-width: 32em) {
    .teaser-text {
        font-size: 2.4em;
    }
}
@media screen and (min-width: 35.5em) {
    .teaser-text {
        font-size: 1.331em;
    }
}
@media screen and (min-width: 40em) {
    .teaser-text {
        font-size: 1.5em;
    }
}
@media screen and (min-width: 44em) {
    .teaser-text {
        font-size: 1.65em;
    }
}
@media screen and (min-width: 48em) {
    .teaser-text {
        font-size: 1.2em;
    }
}
@media screen and (min-width: 54em) {
    .teaser-text {
        font-size: 1.35em;
    }
}
@media screen and (min-width: 60em) {
    .teaser-text {
        /*
        font-size: 1.5em;
*/
    }
}
@media screen and (min-width: 66em) {
    .teaser-text {
        /*
        font-size: 1.65em;
        */
    }
}
@media screen and (min-width: 70em) {
    .teaser-text {
        /*
        font-size: 1.75em;
        */
    }
}


/*
 * Concert page
 */

.concert_heading {
	text-align: center;
	font-size: 19px;
}
.concert_inner {
	padding: 10px;
}
.concert_artist {
	padding: 10px 5px;
}

/*
 * page2
 */

#page2-player-live, #page2-player-archive, #page2-player-live td, #page2-player-archive td {
    font-size: 0.8em;
}
.page2-spacer-top {
    line-height: 32px;
}
#page2-player-live table {
    height: 2em;
}
#page2-player-live, #page2-player-archive {
	/*
    margin-right: 1.5em;
    */
}
.player-start-stop {
    overflow: hidden;
}
.player-start, .player-stop {
    float: right;
}
.player-quality {
    float: left;
}
.player-part {
    float: left;
}
.player-select-active {
        margin-top: 0.35em;
	padding: 0.3em 0em;
	font-size: 1.2em;
	font-weight: 700;
}
.player-select-active span {
	padding: 0.2em 0.3em;
	border: 1px solid black;
        display: inline-block;
}
.player-select-inactive {
        margin-top: 0.35em;
	padding: 0.3em 0em;
	font-size: 1.2em;
	font-weight: 700;
}
.player-select-inactive span {
	padding: 0.2em 0.3em;
	border: 1px solid white;
        display: inline-block;
}
.player-parts-inactive div {
        margin-top: 0.35em;
        padding: 0.6em 0.4em;
	font-size: 1.2em;
	font-weight: 700;
        color: #888;
}
.part-inactive, .part-inactive a {
    color: #888;
}
.listen-again {
	font-weight: 700;
	letter-spacing: 0.08em;
}
.listen-again a {
	border: 1px solid #000;
	padding: 0em 0.7em 0em 0.8em;
	line-height: 200%;
	display: inline-block;
}

.page2-header {
	position: relative;
}

.page2-header-main {
	margin: 0px 2px;
}
.page2-heading-bar {
	margin-top: calc(var(--header-height) + 1em);
}
#page2-search-header-inner, #page2-search-menu div {
	padding-bottom: 1px;
	border-bottom: 1px solid #000;
}
#page2-search-menu div {
	display: none;
}
#page2-search-header input {
	width: 204px;
	border: 0px;
	border-radius: 0;
}
#page2-search-menu input {
	width: 15em;
	border: 0px;
	border-radius: 0;
}
#page2-search-header input:active {
	border: 0px;
}
#page2-search-header-after {
	font-size: 0px;
}
.page-top {
	margin-top: 4em;
}
@media screen and (min-width: 35.5em) {
	.page-top {
		margin-top: 5em;
	}
}
.u-mobile-1-4 {
        width: 25%;
        *width: 24.9690%;
}
.u-mobile-3-4 {
        width: 75%;
        *width: 74.9690%;
}
#page2-logo {
        margin-left: 3px;
	margin-top: 32px;
	float: left;
}
#page2-logo img {
	display: block;
}
/* note override in TileFooternav */
.page2-footer {
	line-height: 150%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
}
.page2-footer ul {
	padding: 0 0 0 0;
	list-style-type: none;
	margin: 0;
}
.page2-footer-item--short {
  display: inline-block;
}
.page2-footer-item--short + .page2-footer-item--short::before {
  content: '/ ';
}
.page2-footer ul li a {
	text-decoration: none;
}
.page2-footer ul li a:hover {
	text-decoration: underline;
}
.page2-footer-logo {
  width: 4em;
  display: block;
  position: relative;
  top: 0.075em;
}
.page2-footer-logo img {
  width: 100%;
  height: auto;
}
.page2-social img {
	width: 40px;
	height: 40px;
	margin-right: 0.4em;
}
.page2-separator {
        margin: 0em 0.32em;
}
.page2-separator hr {
        margin-top: 0em;
	height: 1px;
	border: none;
	border-color: #000;
	background-color: #000;
	color: #000;
}
#page2-heading {
	font-size: 2.6em;
	font-weight: normal;
	font-style: normal;
	border-style: none;
	letter-spacing: normal;
	margin: 0.12em 5px 0em 5px;
	padding: 0.5em 0.1538em 0em 0.1538em;
	background-color: #f8ffde;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page2-additional-heading.h-alpha {
	font-size: 3.2em;
	font-weight: normal;
	margin: 0.12em 5px 1.72em;
	padding: 0.5em 0.1538em 0em 0.1538em;
	background-color: #f8ffde;
}
#page2-heading.reduced-font-size {
	font-size: 2.2em;
	padding-top: 0.7em;
	padding-bottom: 0.2em;
	letter-spacing: normal;

}
@media screen and (min-width: 35.5em) {
	#page2-heading.reduced-font-size {
		font-size: 2.6em;
		padding-top: 0.5em;
		padding-bottom: 0em;
	}
}
#content,
.page-content,
body > #page2-footer {
	font-size: 0.8rem;
}
.highlighted {
	font-weight: 700;
}
.home-playlist-row-now {
	padding: 0.85em 0.5em 0em 0.5em;
	overflow: hidden;
	border-top: 1px solid #000;
	background-color: #f8ffde;
        position: relative;
        height: 2.525em;
}
.home-playlist-row {
	padding: 0.6em 0.5em;
	padding-bottom: 0.5em;
	overflow: hidden;
	border-top: 1px solid #000;
        position: relative
}
.home-playlist-row strong {
	display: block;
	margin-bottom: 0.5em;
}
.home-playlist-row div {
	margin-bottom: 0.1em;
}
.home-playlist-show {
    vertical-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5em;
}
.home-playlist-show div {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-playlist-time {
    text-align: right;
    vertical-align:center;
    white-space: nowrap;
    position: absolute;
    right: 0.5em;
}
.home-current-title, .home-previous-title-1, .home-previous-title-2, .home-previous-title-3, .home-previous-title-4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-playlist-row a:hover, .home-playlist-row-now a:hover {
    text-decoration: underline;
}
.home-hr {
	margin: 0.6em 0em;
}
.home-spacing-1 {
	margin-bottom: 3em;
}
.home-spacing-2 {
	margin-bottom: 4em;
}
.home-bar-middle-top {
	height: 3.5em;
	margin-bottom: 6.5em;
	margin-top: 0em;
}
.home-bar-middle-bottom {
	height: 3.5em;
	margin-top: 0.6em;
}
.home-bar-right-top {
	height: 0.4em;
	margin-top: 0.1em;
	margin-bottom: 0.6em;
}
.home-bar-right-bottom {
	height: 3.5em;
	margin-top: 0.5em;
	margin-bottom: 1em;
}
.home-heading {
	margin-top: 0.6em;
	margin-bottom: 0.5em;
	text-align: right;
}
.home-heading-b2 {
	margin-top: 1.0em;
	margin-bottom: 0.5em;
	text-align: right;
}

.home-testimonials {
  width: auto;
  padding-bottom: 53.33%;
  position: relative;
}

.home-testimonial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
}

.home-heading-blog {
	border-top: 1px solid #000;
	padding-top: 3em;
	margin-top: 0em;
	margin-bottom: 0.5em;
	text-align: right;
}
.home-blog {
	border-top: 1px solid #000;
	padding-top: 1em;
	padding-bottom: 2.3em;
}
.home-blog-0 {
	border-top: 5px solid #000;
}
.home-blog table {
	margin-bottom: 0.7em;
}
.home-blog-0-url, .home-blog-1-url, .home-blog-2-url {
	position: relative;
	display: block;
}
.home-blog-0-image, .home-blog-1-image, .home-blog-2-image {
	width: 100%;
	height: auto;
	display: block;
	padding-bottom: 0.7em;
}
.home-blog-header {
	margin-bottom: 1em;
}
.home-blog-0-title, .home-blog-1-title, .home-blog-2-title {
	line-height: 145%;
	font-size: 1.3em;
	margin-bottom: 0.2em;
}
.home-blog-0-text, .home-blog-1-text, .home-blog-2-text {
	margin-bottom: 0.7em;
	line-height: 145%;
}
.home-blog-title {
	vertical-align: bottom;
}
.home-blog-more {
	text-align: right;
	padding-right: 2em;
}
.home-newsletter {
	padding: 0em 2.5px;
}
.home-md .home-newsletter {
	margin-top: 0em;
}
.home-sm .page2-social {
	margin-top: 0.3em;
}
.home-newsletter__message {
	margin-top: .3em;
}
.home-newsletter div {
	margin-top: 0.5em;
}
.home-newsletter-mail {
	vertical-align: bottom;
}
.home-newsletter-mail input {
	padding-bottom: 0.2em;
}
.home-sm .home-newsletter {
	margin-top: 0em;
	margin-bottom: 0em;
}
.home-hr-a-1 {
	margin-top: 0.5em;
}
.home-hr-a-2 {
	margin-top: 2em;
	margin-bottom: 2em;
}
.home-hr-a-3 {
	margin-top: 6.5em;
	margin-bottom: 1em;
	height: 0.4em;
}
.home-hr-a-4 {
	margin-top: 2em;
}
.home-hr-a-5 {
	margin-top: 0.7em;
	margin-bottom: 3em;
}
.home-hr-a-6 {
	margin-top: 10em;
}
.home-hr-b-1 {
	margin-top: 13em;
}
.home-sm .home-hr-b-1 {
	margin-top: 7em;
}
.home-hr-b-2 {
	margin-top: 3.5em;
	height: 0.4em;
}
.home-sm .home-hr-b-2 {
	margin-bottom: 0.4em;
}
.home-hr-b-3 {
	margin-top: 2em;
}
.home-hr-b-4 {
	margin-top: 0.7em;
}
.home-hr-b-5 {
	margin-top: 7em;
	margin-bottom: 6em;
}
.home-hr-b-6 {
	margin-top: 3.5em;
	margin-bottom: 1em;
}
.home-hr-b-7 {
	margin-top: 3em;
	margin-bottom: 2em;
}
.home-hr-c-1 {
	margin-top: 10em;
}
.home-hr-c-2 {
	margin-top: 2em;
	margin-bottom: 2em;
}
.home-hr-c-3 {
	margin-top: .6em;
	margin-bottom: 3em;
}
.home-hr-c-4 {
	margin-top: 18em;
}
.home-hr-m-2 {
	height: 3.5em;
	margin-bottom: 1em;
	margin-top: 1em;
}
.home-hr-m-3 {
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	height: 0.3em;
}
.home-hr-m-5 {
	margin-top: 3em;
	margin-bottom: 1em;
	height: 0.4em;
}
.home-hr-m-6 {
	margin-top: 5em;
}
.home-hr-m-7 {
	margin-top: 3em;
}
.home-hr-m-8 {
	margin-top: 1em;
}
.home-hr-m-9 {
	margin-top: 5em;
	margin-bottom: 2em;
}
.home-hr-m-10 {
	margin-top: 3em;
	margin-bottom: 2em;
}
.home-hr-sm-a-0 {
	margin-top: 0em;
	margin-bottom: 3px;
}
.home-hr-sm-a-1 {
	margin-top: 0.4em;
	margin-bottom: 1.5em;
	height: 0.4em;
}
.home-hr-sm-a-3 {
	height: 0.4em;
	margin-bottom: 0.4em;
}
.home-hr-sm-b-0 {
	margin-top: 2em;
	margin-bottom: 0.6em;
}
.home-hr-sm-b-1 {
	height: 3.5em;
	margin-top: 0em;
	margin-bottom: 4.5em;
}
.home-hr-sm-b-2 {
	margin-top: 1em;
	margin-bottom: 1em;
}
.home-hr-sm-b-3 {
	margin-top: 0.3em;
	height: 0.4em;
}
ul#id_action {
	list-style-type: none;
	padding: 0px;
}
.snippet-content {
	margin-top: 1em;
	margin-bottom: 1em;
}
.snippet-content ul,
.snippet-content ol {
  padding-left: 2em;
}
.video-intrinsic > div,
.snippet-content .video-container-16-9,
.video-16-9 {
    padding-top: 56.25%;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.video-intrinsic iframe,
.snippet-content .video-container-16-9 iframe,
.video-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    border: none;
}
.video-16-9 br { /* unorthodox, but helps with editor/nl2br artifacts */
  display: none;
}
.info_box {
	margin-bottom: 1em;
	margin-top: .5em;
}
.letter-bar {
	text-align: center;
	margin-bottom: 1.2em;
	width: 100%;
	position: relative;
}
.letter {
	margin: 0px;
	padding: 0px;
	display: inline-block;
	border: 1px solid #fff;
	line-height: 37px;
	font-size: 1.25em;
	vertical-align: center;
}
@media screen and (min-width: 53em) {
	.letter {
		margin: 0px 1px;
	}
}
@media screen and (min-width: 56em) {
	.letter {
		margin: 0px 2px;
	}
}
@media screen and (min-width: 59em) {
	.letter {
		margin: 0px 3px;
	}
}
@media screen and (min-width: 62em) {
	.letter {
		margin: 0px 4px;
	}
}
@media screen and (min-width: 65em) {
	.letter {
		margin: 0px 5px;
	}
}
@media screen and (min-width: 69em) {
	.letter {
		margin: 0px 6px;
	}
}
@media screen and (min-width: 71em) {
	.letter {
		margin: 0px 7px;
	}
}
.letter a {
	padding: 0em .4em;
	margin: 0px;
	display: inline;
}
.letter:hover {
	border: 1px solid #000;
}
.letter-selected {
	border: 1px solid #000;
	font-weight: 700;
}
@media screen and (min-width: 1em) {
	.alphabet_genre_toggle_container {
	    display: none;
	}
}
.week-cell-today {
	background-color: #f8ffde;
	border-left: 1px solid #000;
}
.week-cell {
	height: 140px;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	border-top: 1px solid #000;
	padding: 0.5em 0.5em 4px 0.5em;
}
.week-cell-1 {
	height: 140px;
}
.week-cell-2 {
	height: 280px;
}
.week-cell-3 {
	height: 420px;
}
.week-cell-4 {
	height: 560px;
}
.week-cell-5 {
	height: 700px;
}
.week-cell-6 {
	height: 840px;
}
.week-cell-7 {
	height: 980px;
}
.week-cell-8 {
	height: 1120px;
}
.week-cell-9 {
	height: 1260px;
}
.week-cell-10 {
	height: 1400px;
}
.week-cell-11 {
	height: 1540px;
}
.week-cell-12 {
	height: 1680px;
}
.week-cell-13 {
	height: 1820px;
}
.week-cell-14 {
	height: 1960px;
}
.week-cell-15 {
	height: 2100px;
}
.week-cell-16 {
	height: 2240px;
}
.week-cell-17 {
	height: 2380px;
}
.week-cell-18 {
	height: 2520px;
}
.week-cell-19 {
	height: 2660px;
}
.week-cell-20 {
	height: 2800px;
}
.week-cell-21 {
	height: 2940px;
}
.week-cell-22 {
	height: 3080px;
}
.week-cell-23 {
	height: 3220px;
}
.week-cell-24 {
	height: 3360px;
}
.week-cell.week-cell-separator-before.week-cell-today {
	height: 136px;
}
.week-cell-1.week-cell-separator-before.week-cell-today {
	height: 136px;
}
.week-cell-2.week-cell-separator-before.week-cell-today {
	height: 276px;
}
.week-cell-3.week-cell-separator-before.week-cell-today {
	height: 416px;
}
.week-cell-4.week-cell-separator-before.week-cell-today {
	height: 556px;
}
.week-cell-5.week-cell-separator-before.week-cell-today {
	height: 696px;
}
.week-cell-6.week-cell-separator-before.week-cell-today {
	height: 836px;
}
.week-cell-7.week-cell-separator-before.week-cell-today {
	height: 976px;
}
.week-cell-8.week-cell-separator-before.week-cell-today {
	height: 1116px;
}
.week-cell-9.week-cell-separator-before.week-cell-today {
	height: 1256px;
}
.week-cell-10.week-cell-separator-before.week-cell-today {
	height: 1396px;
}
.week-cell-11.week-cell-separator-before.week-cell-today {
	height: 1536px;
}
.week-cell-12.week-cell-separator-before.week-cell-today {
	height: 1676px;
}
.week-cell-13.week-cell-separator-before.week-cell-today {
	height: 1816px;
}
.week-cell-14.week-cell-separator-before.week-cell-today {
	height: 1956px;
}
.week-cell-15.week-cell-separator-before.week-cell-today {
	height: 2096px;
}
.week-cell-16.week-cell-separator-before.week-cell-today {
	height: 2236px;
}
.week-cell-17.week-cell-separator-before.week-cell-today {
	height: 2376px;
}
.week-cell-18.week-cell-separator-before.week-cell-today {
	height: 2516px;
}
.week-cell-19.week-cell-separator-before.week-cell-today {
	height: 2656px;
}
.week-cell-20.week-cell-separator-before.week-cell-today {
	height: 2796px;
}
.week-cell-21.week-cell-separator-before.week-cell-today {
	height: 2936px;
}
.week-cell-22.week-cell-separator-before.week-cell-today {
	height: 3076px;
}
.week-cell-23.week-cell-separator-before.week-cell-today {
	height: 3216px;
}
.week-cell-24.week-cell-separator-before.week-cell-today {
	height: 3356px;
}
.week-cell.week-cell-separator-after.week-cell-today {
	height: 144px;
}
.week-cell-1.week-cell-separator-after.week-cell-today {
	height: 144px;
}
.week-cell-2.week-cell-separator-after.week-cell-today {
	height: 284px;
}
.week-cell-3.week-cell-separator-after.week-cell-today {
	height: 424px;
}
.week-cell-4.week-cell-separator-after.week-cell-today {
	height: 564px;
}
.week-cell-5.week-cell-separator-after.week-cell-today {
	height: 704px;
}
.week-cell-6.week-cell-separator-after.week-cell-today {
	height: 844px;
}
.week-cell-7.week-cell-separator-after.week-cell-today {
	height: 984px;
}
.week-cell-8.week-cell-separator-after.week-cell-today {
	height: 1124px;
}
.week-cell-9.week-cell-separator-after.week-cell-today {
	height: 1264px;
}
.week-cell-10.week-cell-separator-after.week-cell-today {
	height: 1404px;
}
.week-cell-11.week-cell-separator-after.week-cell-today {
	height: 1544px;
}
.week-cell-12.week-cell-separator-after.week-cell-today {
	height: 1684px;
}
.week-cell-13.week-cell-separator-after.week-cell-today {
	height: 1824px;
}
.week-cell-14.week-cell-separator-after.week-cell-today {
	height: 1964px;
}
.week-cell-15.week-cell-separator-after.week-cell-today {
	height: 2104px;
}
.week-cell-16.week-cell-separator-after.week-cell-today {
	height: 2244px;
}
.week-cell-17.week-cell-separator-after.week-cell-today {
	height: 2384px;
}
.week-cell-18.week-cell-separator-after.week-cell-today {
	height: 2524px;
}
.week-cell-19.week-cell-separator-after.week-cell-today {
	height: 2664px;
}
.week-cell-20.week-cell-separator-after.week-cell-today {
	height: 2804px;
}
.week-cell-21.week-cell-separator-after.week-cell-today {
	height: 2944px;
}
.week-cell-22.week-cell-separator-after.week-cell-today {
	height: 3084px;
}
.week-cell-23.week-cell-separator-after.week-cell-today {
	height: 3224px;
}
.week-cell-24.week-cell-separator-after.week-cell-today {
	height: 3364px;
}
.week-cell:not(.week-cell-before-today), .week-cell-empty:not(.week-cell-before-today) {
	border-right: 1px solid #000;
}
a.week-cell:hover, a.week-cell-empty:hover {
	background-color: #f8ffde;
}
.week-cell-separator-after {
	border-top: 4px solid #000;
}
.week-cell-last {
	border-bottom: 1px solid #000;
}
.week-cell-last-column {
	border-right: 0px;
}
.week-cell-time {
	background-color: #fff;
}
.week-cell-heading {
	height: 2.7em;
	overflow: hidden;
	padding-top: 4px;
	padding-bottom: 0.5em;
	text-align: center;
}
.week-cell-heading-today {
	padding-top: 0px;
}
.week-heading-spacer {
	height: 4px;
}
.week-heading-spacer-border {
	height: 4px;
	border-right: 1px solid #000;
}
.week-news {
	margin-bottom: .5em;
}
.week-broadcast-title {
	display: block;
}

.shows-info, .broadcasts-info, .broadcasts-info-active {
	overflow: hidden;
	white-space: nowrap;
}
.shows-info {
	border-bottom: 1px solid #000;
}
.shows-margin-left {
	margin-left: 0.4em;
}
.broadcast-more .shows-margin-left {
	margin-left: 0em;
}
.shows-more a:active, .shows-more a:link, .shows-more a:hover, .shows-more a:visited, .shows-more a {
	color: #fff;
}
.shows-more {
	color: #fff;
	font-size: 1.3em;
	font-weight: 700;
}
.shows-more-g {
	background-color: #000;
	color: #fff;
}
.shows-more-after {
    width: 0px;
    height: 5em;
}
.shows-more-content {
	height:400px;
	overflow-y: scroll;
}
.broadcasts-info {
	border-bottom: 1px solid #000;
}
.broadcast-title.h-beta {
  display: inline-block;
}
.broadcast-live-button {
  display: inline-block;
  position: relative;
  top: -3px;
}
.broadcast-live-button a {
  background-color: #000;
  color: #fff;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .5px;
  padding: 2px 6px 3px 6px;
  margin-left: 4px;
}
.show-inline-subtitle {
	overflow-x: hidden;
	overflow-y: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}
.program-info, .program-info-first {
	border-top: 1px solid #000;
}
.program-info-final {
	border-top: 4px solid #000;
}
.program-after {
    width: 0px;
    height: 5em;
}
@media (min-width: 35.5em) {
  .program-info__slot-nth .program-info-col-time-channel .broadcasts-title {
    display: none;
  }
}
.shows-subtitle, .broadcasts-title {
	font-size: 1.3em;
	font-weight: 700;
        line-height: 100%;
}
.broadcasts-channel {
  font-size: 83.33%;
  text-transform: uppercase;
}
.shows-date-moderator, .broadcasts-moderator-subtitle {
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.program-info div {
}
.broadcasts-play.shows-listened, .broadcasts-play-active.shows-listened, .shows-play.shows-listened {
	background-color: #d9d9d9;
}
.broadcasts-arrow-mobile {
	padding: 0em 0.6em;
	text-align: right;
	border-top: 1px solid #000;
}
.broadcasts-arrow {
	padding-top: 0.85em;
	padding-left: 0.6em;
}

.broadcasts-mobilelist-dividingheading {
  font-size: 1.3em; /* = .broadcasts-title */
  margin-left: 5px; /* :285 */
  margin-right: 5px; /* :282 */
  margin-bottom: 0;
  padding-bottom: 1.35em;
  margin-top: 1.35em; /* = (.program-after.height * 0.8em - 1.3em) / 2 */
  font-weight: normal;
  border-bottom: 1px solid black; /* = .broadcast-info */
}

.letter-line {
    padding: 0.5em 0em 0.7em 26px;
    font-size: 1.9em;
}
.letter-line-letter {
	padding: 0.5em 0em 0.7em 0em;
	width: 68px;
	text-align: center;
	font-size: 1.9em;
}
@media screen and (min-width: 35.5em) {
	.show-inline-subtitle {
		display: inline;
		white-space: normal;
		overflow: visible;
	}
	.broadcast-more .shows-margin-left {
		margin-left: 1.6em;
	}
	.shows-margin-left {
		margin-left: 2em;
	}
	.letter-line {
		padding: 0.6em 1.6em;
		font-size: 1em;
		font-weight: 700;
	}
	.broadcasts-info {
		border-top: 1px solid #000;
                border-bottom: 0px;
	}
	.shows-more {
		padding-left: 1.6em;
		font-size: 1em;
		font-weight: normal;
	}
	.shows-more-margin {
		padding-left: 3.2em;
		font-size: 1em;
		font-weight: normal;
	}
	.shows-more-after {
		height: 2.2em;
	}
	.program-after {
		height: 2.5em;
	}
	.shows-subtitle {
		overflow: hidden;
		white-space: nowrap;
		font-weight: normal;
	}
	.shows-block-date, .broadcasts-date, .broadcasts-date-active {
		margin: 0em;
		padding: 0.6em 0.6em 0.6em 0em;
		text-align: right;
	}
	.broadcasts-date {
		border-top: 1px solid #000;
	}
	.broadcasts-info, .broadcasts-info-active {
		padding: 0.6em 1em 0.6em 1.6em;
	}
	.program-info, .program-info-first, .program-info-final, .shows-info {
                padding-left: 1.6em;
	}
        .shows-info div {
            overflow: hidden;
            text-overflow: ellipsis;
        }
	.program-info-final {
		border-top: 1px solid #000;
	}
	.program-info-first {
		border-top: 5px solid #000;
	}
	.shows-subtitle {
	}
	.shows-info.shows-last, .shows-play.shows-last, .shows-block-date.shows-last {
		border: none;
	}
	.shows-subtitle, .broadcasts-title {
		font-size: 1em;
                line-height: normal;
	}
	.shows-date-moderator, .broadcasts-moderator-subtitle {
		margin-top: 0em;
		display: block;
		white-space: normal;
		overflow: visible;
	}
	.shows-play, .broadcasts-play, .broadcasts-play-active {
		padding: 0.6em;
		text-align: center;
	}
	.shows-play, .broadcasts-play {
		border-bottom: 1px solid #000;
	}
	.broadcasts-info .broadcasts-moderator-subtitle, .broadcasts-info-active .broadcasts-moderator-subtitle, .program-info .broadcasts-moderator-subtitle, .program-info-first .broadcasts-moderator-subtitle {
		display: inline;
	}
	.shows-spacer {
		border-bottom: 3px solid #000;
	}
}
.broadcasts-old .broadcasts-title {
	font-weight: normal;
}
.broadcasts-listened a {
	color: #888;
}
.shows-listened a, a.shows-listened, .shows-listened {
	color: #888;
}
@media screen and (min-width: 48em) {
    .alphabet_genre_toggle_container {
        min-height: 5em;
        margin-left:auto;
        margin-right:0;
        padding-right: 5px;
        display: block;
    }
}
.alphabet_genre_toggle {
	text-align: center;
	font-weight: 700;
	padding: 0.8em 0.5em;
	margin: 1.5em 0 0.5em 0.5em;
	border: 1px solid transparent;
	float: right;
	width: 175px;
}
.alphabet_genre_toggle:hover,
.alphabet_genre_toggle.selected {
	border: 1px solid black;
}
ul.genres {
    padding:0;
    margin-top:5px;
}
ul.genres li {
    display: inline-block;
    border: 1px solid transparent;
    margin: 1px 0px;
}
ul.genres li:hover,
ul.genres li.selected {
    border: 1px solid black;
}
ul.genres li a {
    padding: 0em 0.4em;
    line-height: 200%;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.broadcast-hr {
        margin: 0.6em 0em;
	height: 0.32em;
}
.information-hr {
        margin: 0.6em 0em;
	height: 0.32em;
}
@media screen and (min-width: 35.5em) {
    .information-hr {
        margin-bottom: 0px;
    }
}
.broadcast-stripe-large {
    padding: 0.8em 0em;
    font-weight: 700;
}
.broadcast-stripe-small {
    padding: 0.6em 0em;
    font-weight: 700;
}
.broadcast-stripe-small img {
    margin-bottom: -0.2em;
    margin-right: 0.7em;
}
@media screen and (min-width: 35.5em) {
	.broadcast-stripe-small {
		padding: 0.6em 0.6em;
	}
	.stripe-top {
		height: 1px;
	}
}
.broadcast-list {
	display: inline-block;
	vertical-align: top;
	padding-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 1.35em;
}
.broadcast-list > div:hover {
	line-height: 1.35em;
	text-decoration: underline;
}
.broadcast-list__item--live {
  font-weight: bold;
}
.broadcast-list-container {
    display: inline-block;
}
.broadcast-list-container--loading {
  opacity: 0;
}
.broadcast-subtitle.h-gamma {
	font-style: normal;
	border-style: none;
	font-weight: 700;
	font-size: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.broadcast-moderator {
    margin-top: 1em;
}
.broadcast-moderator:hover .broadcast-moderator-name {
	text-decoration: underline;
}
.broadcast-moderator img {
	width: 100%;
	height: auto;
}
.broadcast-moderator-text {
	margin-left: 0.5em;
}
.broadcast-playlist {
}
.broadcast-playlist-table {
    margin: 1em 0em;
    vertical-align: top;
}
.broadcast-playlist-table td {
    vertical-align: top;
}

.more-open, .broadcast-more {
	display: none;
}
#more-toggle:checked ~ div .more-open {
	display: block;
}
#more-toggle:checked ~ div .more-close {
	display: none;
}
#more-toggle:checked ~ div .broadcast-more {
	display: block;
}
@media screen and (min-width: 35.5em) {
    .more-close {
            display: none;
    }
    .more-open, .broadcast-more {
            display: block;
    }
    /*
    #more-toggle:checked ~ div .more-open {
            display: none;
    }
    #more-toggle:checked ~ div .more-close {
            display: block;
    }
    #more-toggle:checked ~ div .broadcast-more {
            display: none;
    }
    */
}

.playlist-open, .broadcast-playlist {
        display: none;
}
#playlist-toggle:checked ~ div .playlist-open {
	display: block;
}
#playlist-toggle:checked ~ div .playlist-close {
	display: none;
}
#playlist-toggle:checked ~ .broadcast-playlist {
	display: block;
}
@media screen and (min-width: 35.5em) {
    .playlist-close {
            display: none;
    }
    .playlist-open, .broadcast-playlist {
            display: block;
    }
    #playlist-toggle:checked ~ div .playlist-open {
            display: none;
    }
    #playlist-toggle:checked ~ div .playlist-close {
            display: block;
    }
    #playlist-toggle:checked ~ .broadcast-playlist {
            display: none;
    }
}

.comments-title {
  font-size: 100%;
  margin: 0;
  padding: 10px 0;
}

.broadcast-comments-list {
	max-height: 20em;
	overflow-y: auto;
	overflow-x: hidden;
}
.broadcast-comments-new {
	border-top: 0.4em solid #000;
	padding-top: 1.5em;
}
.broadcast-comments-comment {
	margin: 1em 0em;
}
.broadcast-comments-comment:first-child {
  margin-top: 0;
}
.broadcast-comments-name {
	font-weight: 700;
	color: #555;
}
.broadcast-comments-time {
	color: #555;
}
.broadcast-comments-separator {
	border-color: #555;
	background-color: #555;
	color: #555;
}
.broadcast-comments-show a {
	text-decoration: underline;
}
.broadcast-comments-new textarea {
	box-sizing: border-box;
	width: 100%;
	height: 7em;
	resize: none;
	border: 1px solid #000;
}
.broadcast-submit-wrapper {
	text-align: right;
	margin-top: 0.7em;
}
.broadcast-submit {
	padding: 0.3em 0.5em;
	background-color: #fff;
	border: 1px solid #000;
	font-size: 1.5em;
	font-weight: 700;
}
.broadcast-submit {
	border: 1px solid #fff;
}
.broadcast-submit:hover {
	border: 1px solid #000;
}

#player {
    width: 270px;
    margin-right: auto;
    padding: 15px;
    font-size: 0.8em;
}
#player-volume-panel {
    height: 30px;
    cursor: pointer;
}
#player-volume-panel:hover ~ #player-volume {
    top: 0px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#player-volume {
    z-index: -10;
    top: -20px;
    position: fixed;
    border-left: 1px solid #000;
    height: 25px;
    padding-top: 5px;
    padding-left: 3px;
    font-size: 0.8em;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#player-container {
    height: 100%;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.player-header {
    margin-top: 0px;
    margin-bottom: 40px;
}
#player-menu {
	padding: 0 0 0 0;
}
#player-menu li {
	display: inline-block;
        padding: 0em 0.9em;
	margin: 0em 0em;
	border: 1px solid #fff;
}
#player-menu li a, #player-menu li span {
	text-decoration: none;
	font-size: 1em;
	font-weight: 700;
        line-height: 240%;
}
#player-menu .player-disabled a {
    color: #CCC;
}
.player-info-box {
    color: #aaa;
}
.player-info-box a {
    color: #aaa;
}
#player-menu li:not(.player-disabled):hover {
	border: 1px solid #000;
}
#player-menu .player-active {
	border: 1px solid #000;
}
.player-social img {
    margin: 0em 0.4em 0em 0em;
}
.player-current-title {
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
}
.player-hr {
    margin: 0.8em 0em;
}
.player-previous {
    height: 7.5em;
    overflow: hidden;
    white-space: nowrap;
}
.player-current-show {
    margin-bottom: 0.5em;
    font-weight: 700;
}
.player-scroll-container {
	overflow: hidden;
	margin: 0px auto;
        line-height: 145%;
}
.player-scroll {
	margin: 0px 0px;
	white-space: nowrap;
}
.player-current-time {
    margin-bottom: 1em;
}
.player-archive-date {
}
#page2-player-archive .player-timeline {
    text-align: center;
    margin-left: -100%;
    margin-right: 0%;
    height: 1.5em;
    line-height: 1.5em;
}
#page2-player-archive .player-timeline-marker {
    border-right: 1px solid #000;
}
#page2-player-archive .player-timeline-wrapper {
    background-color: #dddddb;
    border-bottom: 1px solid #000;
}
#page2-player-archive .player-timeline-marker {
    font-size: 1em;
    line-height: 150%;
}
.page2-player-title div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 16px;
	height: 16px;
}
.player-time-wrapper {
	height: 2.5em;
}
.player-timeline-wrapper {
}
.player-timeline-time {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

#player-container .player-timeline {
    text-align: center;
    margin-left: -100%;
    margin-right: 0%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: -10;
    cursor: pointer;
}
#player-container .player-timeline-marker {
    font-size: 7px;
    border-right: 1px solid #000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: -10;
    cursor: pointer;
}

.player-button, .player-button-active, .player-button-inactive {
	padding: 0em 0em;
	font-weight: 700;
}
.player-button-inactive a {
	padding: 0em 0.9em;
        display: inline-block;
        line-height: 240%;
}
.player-button-inactive span {
	border: 1px solid #fff;
	display: inline-block;
}
.player-button-active a {
	padding: 0em 0.9em;
        display: inline-block;
        line-height: 240%;
}
.player-button-active span {
	border: 1px solid #000;
        display: inline-block;
}

/* Friends-like forms not on the Friends pages, includes base styles for Polls */

.friends-submit, .friends-login-submit, .friends-inactive span, .player-button-inactive span:not(:hover) {
	border: 1px solid #fff;
}
.friends-inactive {
	padding: 0.3em 0em;
	font-size: 1.5em;
	font-weight: 700;
}
.friends-inactive span {
	padding: 0em 0.5em;
	border: 1px solid #fff;
        display: inline-block;
        line-height: 170%;
}
.friends-inactive:not(.friends-choose) span {
	border: 1px solid #000;
}
.friends-error label, .friends-error .friends-has-error {
	color: var(--bfm-text-magenta);
}
.friends-error input {
  border-bottom: 1px solid var(--bfm-text-magenta);
}
.friends-error-box {
	margin-top: 2em;
	color: var(--bfm-text-magenta);
}
.friends-error-box p {
	margin: 0.4em 0em;
}
.friends-submit, .friends-login-submit {
	padding: 0.15em 0.5em;
	background-color: #fff;
	border: 1px solid #000;
	font-size: 1.5em;
	font-weight: 700;
        line-height: normal;
}
.friends-submit, .friends-login-submit, .friends-inactive span, .player-button-inactive span:not(:hover) {
	border: 1px solid #fff;
}
.friends-submit:hover, .friends-login-submit:hover, .friends-inactive span:hover, .player-button-inactive span:hover {
	border: 1px solid #000;
}
.friends-login-submit {
    text-align: right;
}
.friends-form-input input,
.friends-form-input select {
  border: 0px;
  border-bottom: 1px solid #000;
  width: 100%;
}
.friends-form-input select,
.friends-data-field select {
  -webkit-appearance: none;
  appearance: none;
  color: inherit; /* for safari */
  background: center right 0.3em / 0.8em 0.8em no-repeat;
  /* need the nbsp/&#160 to fix some rendering artefacts */
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext y='12'%3E▼&%23160;%3C/text%3E%3C/svg%3E");
  font-family: inherit;
}
.friends-form-row {
	margin-top: 0.7em;
}
.friends-form-input {
	margin-top: -0.1em;
}
#content .friends-form-input.username {
  /* manually tested; always in columns */
  margin-top: 18px;
}

/*
 * Friends page
 */

.friends {
  --friends-indent: 1rem;
}

 @media (min-width: 400px) {
  .friends {
    --friends-indent: 2rem;
  }
}

.friends-section {
  padding: 0;
  padding-left: var(--friends-indent);
  border: none;
  margin: 2rem 0;
  max-width: 60em;
}

.friends-section__bonus {
  /* max-width: none; */
}

.friends-heading {
  width: 100%;
  width: calc(100% + var(--friends-indent));
  max-width: 60em;
  max-width: calc(60em + var(--friends-indent));
  margin: 2em 0 1em 0;
  margin-left: calc(-1 * var(--friends-indent));
}

.friends-heading h2 {
  font-size: 150%;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  padding: 0 0 0.1em 0;
  border-bottom: 3px solid #1d9ce6;
}

.friends-heading-number {
  width: 2rem;
}

.friends-heading-text {
  flex-grow: 1;
}

.friends-heading-check {
  width: 2em;
}

.friends h3 {
  font-size: 150%;
  font-weight: normal;
}

.friends .friends-heading-smaller {
  font-size: 125%;
  font-weight: normal;
  margin: 1em 0 0.5em 0;
}

.friends-smallprint {
  margin: 2rem 0;
  width: 100%;
  max-width: 50em;
}

.friends-smallprint p {
  margin: 0.25rem 0;
  line-height: 1.2;
}

.friends-fields__line .friends-field {
  display: block;
  white-space: nowrap;
  margin: 0 0 0.5rem 0;
}

@media (min-width: 40em) {
  .friends-fields__line {
    display: flex;
  }

  .friends-fields__line > * {
    margin: 0 1em 0.5rem 0;
    flex-grow: 1;
  }
}

.friends-field__link input {
  pointer-events: none;
}

.friends-field__big {
  font-size: 150%;
}

.friends-field__big small {
  font-size: 66.667%;
  display: block;
}

.friends-field__bigtext {
  font-size: 150%;
}

.friends-field__margin {
  margin: 1rem 0;
}

.friends-field__multiline {
  display: flex;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.friends-field__multiline-indent {
  display: block;
  padding-left: 1.5rem;
}

.friends-field-supplementallabel__big {
  font-size: 150%;
}

.friends [type="radio"],
.friends [type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

.friends .friends-bonus-item [type="radio"],
.friends .friends-bonus-item [type="checkbox"] {
  width: 0.5rem;
  margin-right: 0;
  top: -0.25rem;
}

.friends [type="radio"]::before,
.friends [type="radio"]::after,
.friends [type="checkbox"]::before,
.friends [type="checkbox"]::after {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
}

.friends [type="radio"]::before,
.friends [type="radio"]::after {
  border-radius: 50%;
}

.friends [type="radio"]::before {
  border: 4px solid white;
  background: white;
}

.friends [type="radio"]:checked::before {
  border: 4px solid white;
  background: #1d9ce6;
}

.friends [type="checkbox"]:checked::before {
  border: none;
  background: #1d9ce6;
}

.friends [type="radio"]::after,
.friends [type="checkbox"]::after {
  border: 2px solid black;
}

.friends [type="checkbox"]::after {
  background-color: white;
}

.friends label:hover [type="radio"]::after,
.friends label:hover  [type="checkbox"]::after,
.friends .friends-field:hover [type="radio"]::after,
.friends .friends-field:hover [type="checkbox"]::after {
  border-color: #1d9ce6;
}

.friends [type="radio"]:checked::after {
  border-color: #1d9ce6;
}

.friends [type="checkbox"]:checked::after {
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path style='stroke:white;stroke-width:2px;fill:none;' d='M 2,8 6,12 14,4' /></svg>");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.friends [type="radio"]:focus::after,
.friends [type="checkbox"]:focus::after {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.friends [type="text"],
.friends [type="number"],
.friends [type="email"],
.friends [type="password"],
.friends [type="date"],
.friends textarea {
  border: 2px solid black;
  background: white;
  border-radius: 0;
  font-size: 90%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.166em 0.33em;
}

.friends [type="date"] {
  border-color: #eee;
}

.friends [type="text"]:focus,
.friends [type="number"]:focus,
.friends [type="email"]:focus,
.friends [type="password"]:focus,
.friends [type="date"]:focus,
.friends textarea:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.friends button:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.33);
}

.friends select {
  /* base custom select style see above: .friends-form-input select */
  border: 2px solid black;
  border-radius: 0;
  font-size: 90%;
  padding-top: 0.166em;
  padding-bottom: 0.166em;
  padding-left: 0.33em;
}

.friends [type="date"] {
  width: 9em;
}

.friends input[type="radio"][name="rate_select"][value="0"]:not(:checked) + input {
  border-color: #eee;
}

.friends-data-field input[type],
.friends-data-field textarea,
.friends-data-field select {
  border-width: 1px;
}

.friends-data-field input[type]:focus,
.friends-data-field select:focus {
  outline: 1px solid black;
}

.friends-data-field.friends-data-field__errors input[type],
.friends-data-field.friends-data-field__errors select {
  border-color: var(--bfm-text-magenta);
  outline-color: var(--bfm-text-magenta);
}

.friends-data-field.friends-data-field__errors input[type]:focus,
.friends-data-field.friends-data-field__errors select:focus {
  outline: 3px solid black;
}

.friends-bonus {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.friends-bonus-item {
  display: block;
  width: 100%;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

@media (min-width: 640px) {
  .friends-bonus__bonuses {
    display: flex;
    flex-wrap: wrap;
  }

  .friends-bonus__bonuses .friends-bonus-item {
    display: inline-block;
    width: 50%;
    width: calc(50% - 1.5rem);
    margin: 0 1.5rem 1rem 0;
  }
}

@media (min-width: 480px) {
  .friends-bonus__cds {
    display: flex;
    flex-wrap: wrap;
  }

  .friends-bonus__cds .friends-bonus-item {
    display: inline-block;
    width: 50%;
    width: calc(50% - 1.5rem);
    margin: 0 1.5rem 1rem 0;
  }
}

@media (min-width: 480px) {
  .friends-bonus__cds .friends-bonus-item {
    width: 33.3%;
    width: calc(33.3% - 1.5rem);
    margin: 0 1.5rem 1rem 0;
  }
}

.friends-bonus-item label {
  display: flex;
}

.friends-bonus-item-image {
  width: auto;
  margin-right: 0.5rem;
  width: 4em;
  min-width: 4em;
  max-width: 4em;
  height: 4em;
  min-height: 4em;
  max-height: 4em;
  object-fit: contain;
  object-position: center;
}

.friends-bonus-item-heading {
  display: inline;
  margin: 0 0.33em 0 0;
}

.friends summary {
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
  margin-bottom: 1em;
  transition: opacity 500ms;
}

.friends summary:focus {
  text-decoration-thickness: 2px;
}

.friends details[open] summary {
  opacity: 0.5;
}

.friends-data-field {
  display: flex;
  flex-direction: column;
  padding: 0.25em 0;
}

.friends-data-field input,
.friends-data-field textarea,
.friends-data-field select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 400px) {
  .friends-data-field {
    flex-direction: row;
  }
  .friends-data-field-label {
    width: 40%;
  }

  .friends-data-field input,
  .friends-data-field select {
    width: 60%;
  }

  .friends-data-field textarea {
    width: 60%;
    min-width: 60%;
    max-width: 60%;
    height: 4em;
    min-height: 4em;
  }
}

.friends #id_song {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
}

.friends button,
.poll button {
  background: black;
  padding: 0.33em 1.5em;
  color: white;
  font-family: inherit;
  font-size: 125%;
  font-weight: bold;
  border: none;
}

.friends-captcha {
  margin: 2em 0;
}

.friends a:link,
.friends a:visited,
.friends a:active,
.friends-errors-link,
a.friends-errors-link {
  text-decoration: underline;
}

.friends a:focus {
  text-decoration-thickness: 2px;
}

.friends a.friends-mode-link {
  text-decoration: none;
}

.friends a.friends-mode-link:focus {
  text-decoration: solid underline black 2px;
}

.friends-errors-skip,
.friends-errors,
.friends-field-errors,
.poll-errors {
  padding-left: 1em;
  border-left: 3px solid var(--bfm-text-magenta);
  margin: 1em 0;
}

.poll-errors {
  font-size: 125%;
}

@media (min-width: 48em) {
  .friends-errors-skip {
    display: none;
  }
}

.friends-field-errors ul.errorlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.friends-field-errors ul.errorlist li {
  margin: 0;
  padding: 0;
}

.friends-intro ul {
  margin: 0.5em 0;
  padding: 0;
  list-style-type: none;
}

.friends-intro li {
  margin: 0;
  padding: 0 0 0 1em;
  position: relative;
}

.friends-intro li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.66em;
  display: block;
  background: black;
  border-radius: 100%;
  width: 5px;
  height: 5px;
}

/* Poll page */

.poll {
  margin: 0 5px;
  padding: 4em 0;
}

.poll-header {
  font-size: 125%;
  margin-bottom: 4em;
}

.poll-col {
  margin-bottom: 5em;
}

@media (min-width: 800px) {
  .poll-row {
    display: flex;
    margin: 0 -2em;
  }

  .poll-col {
    width: 50%;
    padding: 0 2em;
  }

  .poll-header {
    max-width: 50%;
  }
}

.poll hr {
  color: transparent;
  background-color: transparent;
  height: 1em;
}

.poll-field {
  margin: 0 0 1.5em 0;
}

.poll-row__spacy .poll-field {
  margin: 0 0 3em 0;
}

.poll-field label,
.poll-field-label {
  font-size: 150%;
  display: block;
  margin-bottom: 0.25rem;
}

.poll-field__select label {
  font-size: 125%;
}

.poll ::placeholder {
  opacity: 0.6;
}

.poll [type="text"]{
  width: 100%;
  max-width: 100%;
  font-size: 125%;
}

.poll textarea {
  font-size: 125%;
  height: 5em;
  min-height: 3em;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.poll-fields-other [type="text"] {
  width: calc(100% - 2rem);
  max-width: 24em;
}

.poll ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.poll li {
  padding: 0 0 0 0.5em;;
  margin: 0.5em 0;
}

.poll-footer {
  margin-top: -3em;
  text-align: center;
}

/*
 * Program page
 */
.program_titlebar_left {
	text-align: left;
}
.program_titlebar_right {
	text-align: right;
}
.program_titlebar_middle {
	text-align: center;
}
.program_titlebar {
	white-space: nowrap;
	margin-bottom: 1em;
}
.program_title {
	display: block;
}
.program_dash {
	display: none;
}
#program_info {
	display: none;
	text-decoration: underline;
}
.program_line {
	margin: 0px 5px;
	padding: 5px 0px;
	border-top: 1px solid #000;
}
.program_separator {
	margin: 1px 5px;
}
.program_large_separator {
	margin: 1px 5px;
	height: 2px;
}
.odd {
	background-color: #f5f7ed;
}
#program_outer {
}

.program-channel-toggle {
  border: 1px solid black;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  white-space: nowrap;
  display: flex;
  width: 12em;
  user-select: none;
  line-height: 240%;
  border: none;
}

.program-channel-toggle-option {
  border: 1px solid transparent;
  flex-grow: 1;
  cursor: pointer;
  text-align: center;
}

.program-channel-toggle-info {
  padding-left: 0.5em;
  padding-right: 0.5em;
  cursor: pointer;
  opacity: 0.6;
}

body[data-channel="hh"] .program-channel-toggle [data-channel="hh"],
body[data-channel="web"] .program-channel-toggle [data-channel="web"] {
  border-color: black;
}

.week-cell__channel-hh {
  display: none;
}

.week-cell-channel {
  text-transform: uppercase;
  font-size: 83.33%;
  font-weight: normal;
}

body[data-channel="web"] .week-cell__channel-hh,
body[data-channel="hh"] .week-cell__channel-web {
  display: none;
}

body[data-channel="web"] .week-cell__channel-web,
body[data-channel="hh"] .week-cell__channel-hh {
  display: block;
}

/* additional class __channel-switched, added by frontend.js,
 * prevents triggering animation on load */
body.__channel-switched[data-channel="web"] .week-cell__channel-hh .week-cell-channel,
body.__channel-switched[data-channel="hh"] .week-cell__channel-web .week-cell-channel {
  animation: none;
}

body.__channel-switched[data-channel="web"] .week-cell__channel-web .week-cell-channel,
body.__channel-switched[data-channel="hh"] .week-cell__channel-hh .week-cell-channel {
  animation: 200ms linear 200ms 2 alternate highlight-week-channel;
}

@keyframes highlight-week-channel {
  from { background-color: transparent; color: inherit; }
  50% { background-color: black; color: white; }
  to { background-color: transparent; color: inherit; }
}

.broadcast_letter > div {
	background-color: #f5f7ed;
	height: 75px;
	line-height: 75px;
	font-size: 25px;
	padding: 0px 8px;
	border-bottom: 1px solid #000;
}
.broadcast_entry > div {
	padding: 5px 2px;
	height: auto;
	border-bottom: 1px solid #000;
}
.broadcast_spacer_sm > div, .broadcast_spacer_md > div {
	height: 135px;
	border-bottom: 1px solid #000;
}
.broadcast_spacer_sm, .broadcast_spacer_md {
	display: none;
}
.broadcast_info, .broadcast_info2 {
	padding-top: 12px;
	text-decoration: underline;
}
.g-highlight .u-highlight {
        background-color: #f8ffde;
}
.g-highlight,
.g-highlight .shows-subtitle {
  font-weight: bold;
}
.u-hover:hover > * {
        background-color: #f8ffde;
}
.u-no-hover:hover > * {
        background-color: #fff;
}
@media screen and (min-width: 35.5em) {
    .g-hover:hover .u-highlight {
            background-color: #f8ffde;
    }
}
.u-bottom {
    /*
	vertical-align: bottom;
        */
}
.u-hide {
	display: none;
}
.u-show {
	display: inline-block;
}
.g-show {
	display: block;
}
@media screen and (min-width: 35.5em) {
	.u-sm-hide {
		display: none;
	}
	.u-sm-show {
		display: inline-block;
	}
	.b-sm-show {
		display: block;
	}
	.g-sm-show {
		display: block;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		display: -ms-flexbox;
		-ms-flex-flow: row wrap;
	}
	.section {
		padding-bottom: 57.1428%;
	}
	#page_search {
		border-top: 2px solid #000;
		border-bottom: 2px solid #000;
		margin-top: 33px;
	}
	#page_right div {
		border-top: 2px solid #000;
		margin-top: 42px;
	}
	.program_title {
		display: inline;
	}
	.program_dash {
		display: inline;
	}
	.broadcast_spacer_sm {
		display: inline-block;
	}
	.broadcast_entry > div {
		height: 125px;
	}
	.broadcast_letter > div {
		height: 135px;
		line-height: 135px;
	}
}
@media screen and (min-width: 48em) {
	.u-md-hide {
		display: none;
	}
	.u-md-show {
		display: inline-block;
	}
	.g-md-show {
		display: block;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		display: -ms-flexbox;
		-ms-flex-flow: row wrap;
	}
	.b-md-show {
		display: block;
	}
	.section {
		padding-bottom: 38.0952%;
	}
	#page_middle {
		display: inline-block;
	}
	#program_info {
		display: inline-block;
	}
	.broadcast_spacer_sm {
		display: none;
	}
	.broadcast_spacer_md {
		display: inline-block;
	}
	.broadcast_info {
		display: none;
	}
}
@media screen and (min-width: 64em) {
	.u-lg-hide {
		display: none;
	}
	.u-lg-show {
		display: inline-block;
	}
	.g-lg-show {
		display: block;
		display: -webkit-flex;
		-webkit-flex-flow: row wrap;
		display: -ms-flexbox;
		-ms-flex-flow: row wrap;
	}
	.b-lg-show {
		display: block;
	}
	.teaser_inner {
		font-size: 1.28em;
	}
}

/* Account verwalten */

.account-change-form details {
  margin: 0.5em 0;
  padding: 0.5em 0;
}
.account-change-form details[open] label {
  /* indenting the label hackiliy is easier then messing around with pure-* columns */
  padding-left: 1em;
  display: inline-block;
}
.account-change-form summary {
  cursor: pointer;
  user-select: none;
}
.account-change-form summary {
  /* reset pure's reset */
  display: list-item;
}
.account-change-form .friends-form-row--password label::after {
  content: ' (Pflicht)';
  color: var(--bfm-text-magenta);
}

/* show confirm-password when any or both of the details are open
   = hide it when both are closed */
.account-change-form
  details[name="password"]:not([open])
  ~ details[name="email"]:not([open])
  ~ .friends-form-row--password {
  display: none;
}

.account-change-form .pure-g > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Artist pages */
.artist-page img.artist {
    width: 99%;
}
.artist-page__search-heading.h-beta {
  margin: 1em 0;
}
.artist-page .search-result {
  margin-bottom: 0.6em;
}
.artist-page .concert-sidebar__title {
  margin: 1.33em 0;
}
.artist-page .image-caption {
    font-size: 10px;
}
.concert-sidebar {
    width: 97%;
    margin-bottom: 1em;
}
.concert-sidebar th,
.concert-sidebar td.date {
    text-align: right;
}
.concert-sidebar td {
    padding: 0.5em 0 0.5em 0;
}
.h-beta.artist-page__heading {
  letter-spacing: 0em;
  margin: -0.3em 0 0.67em 5px;
  font-size: 2em;
}
.artist-page.pure-g {
    letter-spacing: normal;
}
@media screen and (max-width: 35.5em) {
    .artist-page .main {
        width: 100%;
    }
}
.artist-page .main a {
    text-decoration: underline;
}
.artist-page .main .search-results a {
    text-decoration: none;
}
/* links to an Artist page should always be underlined: */
a.artist_page {
    text-decoration: underline;
}
.artist-page .pagination img {
    height:42px;
    width:23px;
}
.artist-page .pagination img.previous {
    float:left;
}
.artist-page .pagination img.next {
    float:right;
}
@media screen and (max-width: 47.995em) {
  .artist-page .home-playlist-row-now,
  .artist-page .home-playlist-row,
  .artist-page .home-bar-right-top {
    display: none;
  }
  .artist-page .search-result {
    margin-bottom: 1.33em;
  }
}
.artist-page__social-links:before {
  content: '';
  display: block;
  background: black;
  height: 1px;
  width: 100%;
  max-width: 10em;
  margin-bottom: 0.2em;
}
.artist-page__social-links dt,
.artist-page__social-links dd {
  display: inline;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
.artist-page__social-links dd + dt:before {
  content: '\a';
  white-space: pre;
}
.artist-page .main .artist-page__social-links a {
  text-decoration: none;
}
.artist-page .main .artist-page__social-links a span {
  text-decoration: underline;
}
.artist-page .concert-canceled {
  text-decoration: rgba(255, 0, 0, .33) .125em line-through;
}

/*
 * Artists pages
 */

.artists-page .main .search-results a {
  text-decoration: underline;
}
.artists_pagination_left {
  text-align: left;
}
.artists_pagination_right {
  text-align: right;
}
.artists_pagination_middle {
  text-align: center;
}
.artists_pagination {
  white-space: nowrap;
  margin-bottom: 1em;
}
.artists-page.pure-g {
    letter-spacing: normal;
}
.artists-page__heading {
  letter-spacing: 0em;
  margin: -0.3em 0 0.67em 5px;
  font-size: 1.8em;
}
.artists-page-letter-bar__heading {
  text-align: right;
  margin-bottom: 5px;
}
@media screen and (max-width: 47.995em) {
  .artists-page .home-playlist-row-now,
  .artists-page .home-playlist-row {
    display: none;
  }
}
.artists-artist {
  margin-bottom: 2rem;
}
.artists-artist-title {
  margin: 0.5rem 0;
}
.artists-artist-image {
  width: 100%;
  height: auto;
}
.artists-artist p {
  margin: 0;
}
.artists-artist p + p {
  margin-top: 0.5em;
}
.artists-artist-more {
  text-decoration: none !important;
  white-space: nowrap;
}
.artists-separator {
  display: none;
  height: 5px;
  margin: 0.1em 0 0.6em 0;
  clear: both;
}
@media (min-width: 400px) {
  .artists-artist {
    margin-bottom: 1rem;
  }
  .artists-artist-title {
    margin: 0.83rem 0;
  }
  .artists-artist-image {
    width: 40%;
    float: right;
    margin: 0 0 0.5em 1em;
  }
  .artists-separator {
    display: block;
  }
}

#app-toggle {
  position: fixed;
  bottom: 1rem;
  left: 0;
  display: none;
  width: 2em;
  height: 3em;
  overflow: hidden;
  background: white;
  box-shadow: 0 0.15em 0.3em 0.05em rgba(0, 0, 0, 0.2);
  transition: width 400ms, left 400ms;
  z-index: 10;
}

body[data-view="home"].player--window #app-toggle {
  left: -2em;
}

body[data-view="home"].player--window.scrolled #app-toggle {
  left: 0;
}

.player--window #app-toggle {
  display: block;
}

#app-toggle:hover,
#app-toggle:focus {
  width: 10em;
}

.app-toggle-button {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  height: 3em;
  width: 2em;
  min-width: 2em;
  background: black;
  color: white;
}

.app-toggle-button::after,
.app-toggle-button::before {
  font-size: 200%;
  box-sizing: border-box;
  position: absolute;
  top: 0.55em;
  content: '';
  border-left: 0.35em solid white;
  border-top: 0.2em solid transparent;
  border-bottom: 0.2em solid transparent;
  border-right: 0;
  transition: transform 400ms;
}

.app-toggle-button::after {
  left: 0.45em;
}

.app-toggle-button::before {
  left: 0.25em;
}

#app-toggle-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  height: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  font-size: 80%;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: underline;
}

.cookie-banner {
  background: black;
  color: white;
  align-items: center;
  justify-content: flex-end;
  font-size: 70%;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  text-align: center;
  display: none;
}

.cookie-banner--site {
  max-width: 100%;
  right: 0;
}

.cookie-banner--standaloneplayer {
  left: 0;
  width: 100%;
}

body.ga--undefined .cookie-banner {
  display: block;
}

body.player--inline .cookie-banner--site {
  bottom: 51.2px;
}

.cookie-banner > * + * {
  margin: 1em 0 0 0;
}

@media (min-width: 400px) {
  body.ga--undefined .cookie-banner {
    display: flex;
    text-align: left;
  }

  .cookie-banner {
    padding-bottom: 0.5rem;
  }

  .cookie-banner > * + * {
    margin: 0 0 0 0.5em;
  }

  .cookie-banner .cookie-banner-buttons {
    display: flex;
  }

  .cookie-banner .cookie-banner-button {
    margin-left: 0.5em;
  }
}

@media (min-width: 32em) {
  .cookie-banner-text {
    hyphens: none;
  }
}

@media (max-width: 50em) {
  .cookie-banner br {
    display: none;
  }
}

.cookie-banner--site::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -1em;
  height: 100%;
  width: 1em;
  background: black;
  transform-origin: bottom right;
  transform: skewX(-10deg);
  z-index: -1;
}

.cookie-banner a {
  color: white;
  text-decoration: underline;
}

.cookie-banner-button {
  border: 1px solid white;
  color: white;
  background: none;
  border-radius: 0;
  font-family: inherit;
}

.privacy-ga-allow,
.privacy-ga-deny {
  display: none;
}

body.ga--allow .privacy-ga-deny,
body.ga--deny .privacy-ga-allow,
body.ga--undefined .privacy-ga-allow {
  display: inline;
}

.podcasts-separator {
  margin: 2em 0;
}

.home-podcasts-icons {
  vertical-align: middle;
  position: relative;
  top: -1px;
}


@media (min-width: 300px) {
  .sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    left: 0;
  }
}

@media (min-width: 568px) {
  .sticky-header {
    top: 76px;
  }
}

@media (min-width: 48em) {
  .sticky-header {
    top: 100px;
  }
}

/* broadcasts list */

.broadcasts-toggle {
  margin: 2em 0 0 0;
  text-align: right;
}

.broadcasts-toggle-item {
  display: inline-block;
  white-space: nowrap;
  padding: 0.8em 0.5em;
  min-width: 15em;
  text-align: center;
  font-weight: bold;
  border: 1px solid transparent;
  margin-bottom: 0.33em;
}

.broadcasts-toggle-item:hover,
.broadcasts-toggle-item__active {
  border-color: black;
}

@media (min-width: 300px) { /* becomes sticky */
  .broadcasts-nav.sticky-header {
    margin: 0;
    border-top: 20px solid white;
    background: white;
    -webkit-box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(0, 0, 0, 0.5);
    box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(0, 0, 0, 0.5);
  }
}

.broadcasts-nav__genre {
  text-align: left;
}

.broadcasts-nav__genre input[type="radio"] {
  display: none;
  background: red;
}

.broadcasts-nav__genre label {
  display: inline-block;
  padding: 0.25em 0.5em 0.3em 0.5em;
  margin: 0.1em 0;
  white-space: nowrap;
  border: 1px solid transparent;
}

.broadcasts-nav__genre label:hover,
.broadcasts-nav__genre input:checked + label {
  border-color: black;
}

.broadcasts-nav__genre {
  margin-top: 2rem;
}

.broadcasts-heading {
  margin: 3rem 0 0 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid black;
}

.broadcasts-legend {
  margin-top: 2em;
  max-width: 48em;
}

.broadcasts-legend + .broadcasts-legend {
  margin-top: 1em;
}

.broadcasts-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 125%;
}

@media (min-width: 30em) {
  .broadcasts-list {
    columns: 2;
  }
  .broadcasts-container__highlight {
    animation: highlight-yellow 500ms linear 500ms;
  }
}

@media (min-width: 50em) {
  .broadcasts-list {
    columns: 3;
  }
}

.broadcasts-list-item-link {
  display: inline-block;
  padding: 0.5rem 0;
}


.broadcasts-list__old .broadcasts-list-item-link,
.broadcasts-legend em {
  font-style: inherit;
  font-weight: inherit;
  color: #888;
}

@keyframes highlight-yellow {
  0% { background-color: white; }
  25% { background-color: #f8ffde; }
  50% { background-color: white; }
  75% { background-color: #f8ffde; }
  100% { background-color: white; }
}

/* page2-heading subnav */

.page2-heading-subnav {
  margin: 0 5px 0em 5px;
  padding: 0.25em 0.1538em 0.25em 0.7em; /* 0.7em eyeballed */
  background-color: #f8ffde;
  border-top: 1px solid transparent;
  font-size: 0.8em;
}

.page2-heading-subnav a,
.page2-heading-subnav button {
  margin-right: 2em;
  white-space: nowrap;
  display: block;
  padding: 0.2em 0;
}

.page2-heading-subnav button {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* block button needs extra */
  width: 100%;
  text-align: left;
}

a[name] { /* very generic and oldschool, but works well & only used with subnav */
  position: relative;
  top: -100px;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 400px) {
  .page2-heading-subnav {
    columns: 2;
  }
}

@media (min-width: 600px) {
  .page2-heading-subnav {
    columns: auto;
  }
  .page2-heading-subnav a,
  .page2-heading-subnav button {
    display: inline-block;
  }
  .page2-heading-subnav button {
    width: auto;
  }
}

/* generic play icons */

.button-play-icon {
  border: none;
  padding: 0;
  font-size: 24px;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: white;
  color: white;
  position: relative;
  margin-left: 15px;
}

a:hover > .button-play-icon,
.button-play-icon:hover {
  background: black;
}

a:hover > .button-play-icon::after,
.button-play-icon:hover::after {
  border-left-color: white;
}

.button-play-icon__listened:not(:hover)::after {
  border-left-color: #aaa;
}

.button-play-icon__listened:not(:hover) + .button-play-label {
  color: #aaa;
}

a:hover > .button-play-icon__listened + .button-play-label {
  color: black;
}

.button-play-icon::after {
  box-sizing: border-box;
  position: absolute;
  top: 0.25em;
  left: 0.3125em;
  content: '';
  border-left: 0.4875em solid black;
  border-top: 0.25em solid transparent;
  border-bottom: 0.25em solid transparent;
  border-right: 0;
}

/* archiv/mitgliederbereich */

.archiv-list {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 4em;
}

.archiv-list-item-title > * {
  padding: 0.6em 0;
}

.archiv-list a u {
  text-decoration: underline;
}

.archiv-list a:hover {
  text-decoration: underline;
}

.archiv-list-item {
  position: relative;
  border-top: 1px solid black;
  padding-bottom: 1em
}

.archiv-list-item-play {
  position: absolute;
  top: 0.5em;
  left: -4em;
}

.archiv-list-item-title {
  display: flex;
}

.archiv-list-item-title > :last-child {
  margin-left: auto;
  padding-left: 1em;
}

/* channels */

.channels-info {
  color: #666;
}

.channels-info p { /* from fckeditor */
  margin: 0;
  padding: 0;
  display: inline;
}

.channels-info strong {
  font-weight: normal;
  font-size: 83.333%;
  text-transform: uppercase;
}

.channels-info-name {
  text-transform: uppercase;
}

.channels-info--indented {
  position: relative;
  padding-left: 1.5em;
}

.channels-info a {
  text-decoration: underline;
  color: inherit;
  white-space: nowrap;
}

.channels-info .svg-inline--fa {
  opacity: 0.6;
}

.channels-info--indented .svg-inline--fa {
  position: absolute;
  left: 0;
  top: 0.2em;
}

/* fontawesome minimal
 * .svg-inline--fa et al. come from vue,
 * doesn't support CSS color inheritance */
.svg-inline--fa::before {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.fa-info-circle::before {
  content: url('/static/images/fa-info-circle-solid.svg');
}
.fa-ish-arrow-right::before {
  content: url('/static/images/fa-ish-arrow-right-solid.svg');
}
.fa-ish--small {
  font-size: 80%;
  position: relative;
  top: 0.1em;
}

.newsletter-form {
  margin-top: 5em;
}

.newsletter-form .g-recaptcha {
  margin: 0 0 3em 0;
}

.newsletter-form [type="submit"] {
  border: 1px solid black;
}

.newsletter-form .embed-wrap {
  margin: 0 0 2em 0;
}

.vueerror {
  margin-top: 170px; /* see page2-heading-bar */
}

.vueerror a {
  text-decoration: underline;
}

/* CKEditor5 "content styles"
 * cf. https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/css.html#why-do-i-need-content-styles
 * (but just looking at the code, the linked theme css wouldn't have sufficed) */

figure.image {
  max-width: 100%;
}

figure.image img {
 width: 100%;
 height: auto;
 display: block;
}

figure.image-style-block-align-left {
  /* noop */
}

figure.image-style-block-align-right {
  margin-left: auto;
}

figure.image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}