:root {
	/* Colors */
	--bg: black;
	--surface: #1a100d; /* the page column; also baked into background.png and footer.png */
	--surface-alt: #341e17; /* highlighted rows and boxes */
	--text: white;
	--muted: #734b3e;
	--text-dim: rgba(255, 255, 255, 0.5); /* placeholders */
	--field-bg: var(--bg);
	--field-border: var(--muted);
	--accent: #f0b327;
	--accent-hover: #f6c654;
	--accent-tint: rgba(240, 179, 39, 0.15);
	--on-accent: #1b1110; /* text on an accent background */
	--danger: red;

	/* Fonts */
	--font-body: Verdana, Arial, Helvetica, sans-serif;
	--font-display: RePublicText, Verdana, Arial, Helvetica, sans-serif;
	--font-mono: "Courier New", Courier, monospace;

	/* Type sizes */
	--text-xs: 10px;
	--text-sm: 11px;
	--text-base: 12px;
	--text-md: 14px;
	--text-lg: 16px;
	--text-xl: 18px;
	--text-2xl: 24px;
	--leading: 165%;
	--leading-heading: 150%;
	--leading-control: 16px; /* buttons and one-line fields */

	/* Spacing, on a 4px grid; the number is the multiple of 4px */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;

	--radius: 2px;
}

* { font-family: var(--font-body); }
@font-face { font-family: RePublicText; src: url(RePublicText.ttf); }
body { margin: 0; padding: 0; border: 0; background-color: var(--bg); }
/* Phones get their own sizes (see the phone rules below), so Safari mustn't enlarge text by itself in landscape; it enlarges long text more than short, so boxes side by side end up mismatched. */
html { margin: 0; padding: 0; font-size: var(--text-base); line-height: var(--leading); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1 { width: 1026px; height: 188px; margin: 0 0 var(--space-4) 0; padding: 0; background-repeat: no-repeat; background-position: 0 0; background-image: url(h1.jpg); }
h1 span { display:none; }
h1 a { display: block; width: 1026px; height: 188px; }
h2 { font-size: var(--text-xl); font-weight: normal; color: var(--text); }
h3 { font-size: var(--text-xl); font-weight: normal; color: var(--accent); }
h3 a { font-weight: normal; color: var(--accent); }
h2, h3, h2 *, h3 * { font-family: var(--font-display); }
h2, h3, h4, h4 * { line-height: var(--leading-heading); }

/* Vertical rhythm: text blocks keep space only below them; headings sit close to what they introduce and keep a section's worth of space above. */
p, ul, ol, dl, blockquote, pre, table { margin-top: 0; margin-bottom: var(--space-4); }
ul, ol { padding-left: var(--space-8); }
h2, h3 { margin-top: var(--space-8); margin-bottom: var(--space-2); }
h4 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
h2:first-child, h3:first-child, h4:first-child, h2 + h3, h2 + h4, h3 + h4 { margin-top: 0; }


div.wrap { text-align: center; margin: 0; padding: 0; }
div.page { margin: 0 auto; width: 1026px; text-align: left; background-repeat: repeat-y; background-position: 0 0; background-image: url(background.png); }
div.mainmenu { width: 205px; float: left; }
div.mainmenu h2 { margin-left: 15px; }
div.mainmenuinside { margin-left: 15px; }
/* Background is cut into three slices; the middle one stretches to fit the items and tucks 1px under the others to avoid seams. */
div.mainmenu ul { box-sizing: border-box; width: 190px; margin: 0; padding: var(--space-3) 0 14px 0; color: var(--text); list-style: none; background: url(podmainmenu-top.png) 0 0 no-repeat, url(podmainmenu-bottom.png) 0 100% no-repeat, url(podmainmenu-middle.png) 0 39px / 100% calc(100% - 78px) no-repeat; }
/* Paddings and side margins keep the hover highlight inside the solid black of the background. */
div.mainmenu li { margin: 0 var(--space-3) 0 10px; padding: 0; line-height: 160%; }
div.mainmenu li a { display: block; padding: 0 6px; border-radius: 2px; color: var(--text); }
div.mainmenu li a:hover { text-decoration: none; background-color: var(--accent-tint); }
div.mainmenu li a.englishinfo { padding-left: 26px; background-repeat: no-repeat; background-position: 6px center; background-image: url(jm.gif); }
div.rightcolumn { width: 230px; float: right; }
div.rightcolumn a { font-weight: normal; }
div.rightcolumn table { margin: 0 15px var(--space-6) 0; font-size: var(--text-sm); border: 2px solid var(--accent); color: var(--text); border-spacing: 0; border-collapse: collapse; text-transform: uppercase; }
div.rightcolumn th, div.rightcolumn td { padding: var(--space-1); }
div.rightcolumn th { text-align: left; font-weight: bold; background-color: var(--accent); color: var(--on-accent); }
div.rightcolumn th a { color: var(--on-accent); font-weight: bold; }
div.rightcolumn td { border-top: 1px solid var(--accent); }
div.rightcolumn td b { font-weight: normal; color: var(--accent); }
div.rightcolumn td.link { padding: 0; }
div.rightcolumn td.link a { display: block; padding: var(--space-1); }
div.rightcolumn td.link a:hover { text-decoration: none; background-color: var(--accent-tint); }
div.rightcolumn td.release a { display: flex; align-items: center; gap: var(--space-1); }
div.rightcolumn td.release span.cover { flex: none; width: 45px; height: 45px; }
div.rightcolumn input.text { width: 120px; }
div.main { color: var(--text); width: 550px; margin-left: 224px; overflow-wrap: break-word; }
div.main span.author { float: right; }
/* Author and date lines under a title */
p.meta, div.main span.author { color: var(--text-dim); font-size: var(--text-sm); }
div.footer { clear: both; background-repeat: no-repeat; background-position: 0 0; background-image: url(footer.png); height: 84px; }

blockquote { margin-left: 0; margin-right: 0; padding-left: var(--space-5); font-style: italic; }

body.gate {
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}
body.gate a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding: 0;
	margin: 0;
}
body.gate a span { display: none; }

img.imgthumbnail {  }
img.imgfull { margin: var(--space-1) 0; }
/* Images that text flows around */
img.imgleft, img.icoleft { float: left; margin: var(--space-1) var(--space-3) var(--space-2) 0; }
img.imgright, img.icoright { float: right; margin: var(--space-1) 0 var(--space-2) var(--space-3); }

span.new { background-color: var(--accent); color: var(--on-accent); font-weight: bold; font-size: var(--text-xs); text-transform: uppercase; }
div.altbg, table.altbg { background-color: var(--surface-alt); }

.h { font-weight:bold; font-size: var(--text-lg); color: var(--text); }
.k { text-align:justify; }
.i { color: var(--text); }
pre { font-family: var(--font-mono); font-size: var(--text-base); }

a { font-weight:bold; color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

a img { border: 0; }
iframe { border: 0; }
/* Sit embeds on the line's bottom edge, not the text baseline, so an image or video alone in a paragraph or table cell gets no descender gap below it. */
img, iframe, video { vertical-align: bottom; }

/* Buttons are gold with dark text, like the right column headers; .secondary is the outlined one for going back or recalculating. */
input[type="submit"], input[type="button"], button {
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	padding: var(--space-1) var(--space-3);
	border: 2px solid var(--accent);
	border-radius: var(--radius);
	background-color: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: bold;
	line-height: var(--leading-control);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { border-color: var(--accent-hover); background-color: var(--accent-hover); }
input[type="submit"]:active, input[type="button"]:active, button:active { transform: translateY(1px); }
input[type="submit"]:focus-visible, input[type="button"]:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled { opacity: 0.5; cursor: default; transform: none; }
input.secondary[type="submit"], button.secondary { background-color: transparent; color: var(--accent); }
input.secondary[type="submit"]:hover, button.secondary:hover { border-color: var(--accent); background-color: var(--accent-tint); }

/* Text fields are dark wells with a brown border that turns gold on focus; they share the buttons' line height, so both are the same height. */
input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], textarea, select {
	box-sizing: border-box;
	vertical-align: middle;
	padding: var(--space-1) var(--space-2);
	border: 2px solid var(--field-border);
	border-radius: var(--radius);
	background-color: var(--field-bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-control);
}
textarea { vertical-align: top; line-height: var(--leading); }
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--text-dim); }
/* Autofilled fields stay dark instead of turning the browser's pale yellow or blue. */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--field-bg) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--space-6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23f0b327'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-2) center;
	background-size: 10px 6px;
	cursor: pointer;
}

/* Boxes that can get the highlighted background reach past the column by their padding on both sides, so their text lines up with the rest of the page. */
div.news div.article, div.shop table.cart, div.shop div.item, div.koncerty div.event, div.forum div.post, div.main div.error.altbg { box-sizing: border-box; width: calc(100% + 2 * var(--space-3)); margin-left: calc(-1 * var(--space-3)); margin-bottom: var(--space-4); padding: var(--space-3); }
:is(div.news div.article, div.shop div.item, div.koncerty div.event, div.forum div.post, div.main div.error) > :last-child { margin-bottom: 0; }

/* Lists without bullets */
div.ofisl ul, div.nejkecy ul, div.inkvizice ul, div.forum ul, div.kontakt ul, div.zebricky ul, div.archiv ul, div.english ul, div.search ul.search-results { list-style: none; padding: 0; }

div.main td.date { text-align: right; padding-right: var(--space-2); white-space: nowrap; }
div.main div.error { margin-bottom: var(--space-4); color: var(--accent); font-weight: bold; }

ul.errorlist { padding:0; margin: 0; list-style: none; display: inline;}
ul.errorlist li { display: inline; margin: 0 var(--space-1) 0 var(--space-1); }

div.pager { clear: both; margin-bottom: var(--space-4); margin-top: var(--space-4); }
div.pager div.left { float: left; }
div.pager div.right { float: right; }

div.news div.article { margin-bottom: var(--space-8); float: left; }

div.kapela div.column.left { float: left; width: 315px; }
div.kapela div.column.right { float: left; width: 215px; margin-left: var(--space-5); }
div.kapela table.events th { font-weight: normal; }
div.kapela th { white-space: nowrap; padding-right: var(--space-2); text-align: right; vertical-align: top; }
div.kapela a.prevnext { float: right; color: var(--accent); font-weight: normal; font-size: var(--text-xs); padding: var(--space-1); margin-left: var(--space-1); }
div.kapela a.prevnext:hover { text-decoration: none; }

/* Sections stack; each list runs down two columns of the same width when the longest names fit, otherwise one. */
div.kapely.list { display: flex; flex-direction: column; gap: var(--space-8); }
div.kapely.list div.names { columns: 2 13em; column-gap: var(--space-6); }
div.kapely.list div.names a { display: block; break-inside: avoid; }
div.kapely.list h3 { text-transform: uppercase; }

/* Katalog and sekta: two columns of big covers with text below; one column on mobile. */
:is(div.katalog, div.sekta).list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
:is(div.katalog, div.sekta).list img { display: block; width: 100%; max-width: 100%; height: auto; margin-bottom: var(--space-2); }
:is(div.katalog, div.sekta) span.soldout { color: var(--danger); font-weight: bold; }

form#downloadcodeform input#id_code { width: 120px; }
div.sekta.detail ol { padding-left: 0; list-style-position: inside; }

/* Buy buttons, one form each, wherever a record or item can be bought */
form.buy { margin: var(--space-3) 0 0 0; }
div.shop table.cart td { vertical-align: top; line-height: 200%; padding: 0 var(--space-1) 0 0; }
div.shop table.cart td.detail { white-space: nowrap; }
div.shop table.cart td.price { text-align: right; }
div.shop table.cart td.buttons { text-align: right; }
div.shop table.cart input.quantity { width: 40px; text-align: center; }
div.shop table.cart td.total { text-align: right; }

/* Plain-text chunks, shown with the line breaks they were typed with in the admin */
div.shop p.plaintext { white-space: pre-line; }

div.shop table.shipping input[type="text"] { float: left; }
div.shop table.shipping ul.errorlist { line-height: 200%; }
div.shop table.shipping th { text-align: right; white-space: nowrap; vertical-align: top; padding: var(--space-2) var(--space-2) 0 0; }
div.shop table.shipping td { padding: var(--space-1) 0; }
div.shop table.shipping input[type="text"], div.shop table.shipping input[type="email"], div.shop table.shipping select, div.shop table.shipping textarea { width: 420px; }
div.shop table.shipping textarea { height: 100px; }
div.shop table.shipping td.buttons { text-align: right; }
div.shop table.shipping td.address { text-align: right; }

div.shop table.catlist td { padding-right: var(--space-8); }

div.koncerty.detail table td { line-height: var(--leading); }
div.koncerty.detail td.url { padding-left: var(--space-2); }
/* A venue's concerts: dates in regular weight so the bands stand out, with room between rows and columns. */
div.koncerty table.location-events td { vertical-align: top; padding: 0 0 var(--space-2) 0; }
div.koncerty table.location-events td.date { padding-right: var(--space-4); }
div.koncerty table.location-events td.date a { font-weight: normal; }
div.koncerty table.location-events td + td { overflow-wrap: anywhere; } /* long band names break on phones instead of widening the page */
div.koncerty h4 { font-size: var(--text-xl); font-weight: normal; color: var(--text); font-family: var(--font-display); }
div.koncerty h4 a { color: var(--text); font-weight: normal; font-family: var(--font-display); }


div.nejkecy table { width: 100%; }
div.nejkecy td { color: var(--text); }
div.nejkecy td.title { width: 68%; }
div.nejkecy td.author { width: 20%; }
div.nejkecy td.date { width: 12%; }

div.inkvizice h4 { width: 480px; height: 303px; margin-bottom: var(--space-4); padding: 0; background-repeat: no-repeat; background-position: 0 0; background-image: url(../../dsgn/inkvizice.png); }
div.inkvizice h4 span { display:none; }

div.inkvizice table { width: 100%; }
div.inkvizice .podpis { font-style: italic; }
div.inkvizice td { color: var(--text); }

div.newscontents table { width: 100%; }
div.newscontents td { color: var(--text); }

div.forum form { width: 100%; color: var(--text); margin-bottom: var(--space-8); display: inline-block; }
div.forum textarea { width: 100%; height: 130px; margin-bottom: var(--space-2); }
/* Name, email and the send button share one line; the fields split what's left, and on narrow screens wrap onto their own lines. */
div.forum div.sender { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
div.forum div.sender label { display: flex; flex: 1 1 200px; min-width: 0; align-items: center; gap: var(--space-2); white-space: nowrap; }
div.forum div.sender input[type="text"], div.forum div.sender input[type="email"] { flex: 1; min-width: 0; width: auto; }
div.forum div.post { position: relative; } /* the labels' stickers are placed on their post */
div.forum div.post.dim { color: var(--muted); }
div.forum div.post.dim a { color: var(--muted); }
div.forum div.blbost { display: block; background-image: url(../../forum/label/blbost.gif); position: absolute; background-position: 0px 0px; float: left; background-repeat: no-repeat; margin-left: 180px; width: 120px; height: 51px; top: -1px; z-index: 2; }
div.forum div.trapny { display: block; background-image: url(../../forum/label/trapny.png); position: absolute; background-position: 0px 0px; float: left; background-repeat: no-repeat; margin-left: 180px; width: 120px; height: 51px; top: -1px; z-index: 2; }
div.forum div.mrdka { display: block; background-image: url(../../forum/label/mrdka.gif); position: absolute; background-position: 0px 0px; float: left; background-repeat: no-repeat; margin-left: 180px; width: 120px; height: 42px; z-index: 2; }
div.forum div.arantip { display: block; background-image: url(../../forum/label/aranovo_tipy_550.jpg); background-position: 0px 0px; background-repeat: no-repeat; width: 550px; height: 166px; position: relative; }
div.forum span.autor { float: left; font-weight: bold;}
div.forum span.datumcas { float: right; }
div.forum span.oficialni, div.zebricky .oficialni { padding-left: var(--space-5); color: var(--accent); padding-top: 1px; padding-bottom: 1px; background-repeat: no-repeat; background-position: left; background-image: url(../../dsgn/oficialni.png); }
div.forum span.label { color: var(--accent); font-weight: bold; }
div.forum div#pager { text-align: center; }

div.mailinglist #email { width: 100px; }

div.zebricky div.single { padding-left: var(--space-8); margin-bottom: var(--space-4); }
div.zebricky input[type="text"] { width: 100%; margin-bottom: var(--space-1); }
div.zebricky textarea { width: 100%; }
div.zebricky .oficialni a { color: var(--accent); }
div.zebricky table.submissions a:visited { color: gray; }
div.zebricky div.column { width: 46%; float: left; margin-right: var(--space-5); }
div.zebricky form { margin-bottom: var(--space-6); }
div.zebricky form::after { content: ""; display: block; clear: both; }
div.zebricky div.question { margin-bottom: var(--space-6); }
div.zebricky h4 { color: var(--text); font-weight: bold; }
div.zebricky div.verdikt {clear: both; margin-bottom: var(--space-4); text-align:center; background-image: url(../../dsgn/verdikt.png); background-repeat: no-repeat; width: 400px; height: 78px; }
div.zebricky div.verdikt div { text-align:center; position: relative; left: 35px; top: 18px; display: inline; color: black; }
div.zebricky div.verdikt b { font-size: var(--text-md); font-weight: bold; text-transform: uppercase; }
div.zebricky div.customquestion input { font-size: var(--text-2xl); line-height: var(--space-8); }

div.archiv a img { border: 0; }

div.english a { white-space: nowrap; }

div.search form.search-page-form { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4) 0; }
div.search form.search-page-form input[type="text"] { flex: 1; min-width: 0; font-size: var(--text-xl); line-height: var(--space-6); padding: var(--space-1) var(--space-2); }
div.search form.search-page-form input[type="submit"] { font-size: var(--text-md); padding: 0 var(--space-4); }
div.search form.search-page-form.live input[type="submit"] { display: none; }
div.search mark { background-color: var(--accent); color: var(--on-accent); }

/* Phones and tablets: one column, with the page content before the right column. */
@media (max-width: 1024px) {
	:root {
		--text-xs: 12px;
		--text-sm: 13px;
		--text-base: 16px; /* 16px also keeps iOS from zooming in on text fields */
		--text-md: 16px;
		--text-lg: 18px;
		--text-xl: 22px;
		--text-2xl: 26px;
	}

	div.wrap { margin: 0; }
	div.page { display: flex; flex-direction: column; width: 100%; background-size: 100% auto; }
	h1 { position: relative; width: 100%; height: 0; padding-bottom: 18.3%; background-size: 100% auto; }
	h1 a { position: absolute; inset: 0; width: auto; height: auto; }
	div.mainmenu, div.main, div.rightcolumn { box-sizing: border-box; width: 100%; float: none; margin: 0; padding: 0 var(--space-4); }
	div.rightcolumn { order: 1; }
	div.footer { order: 2; height: 0; padding-bottom: 8.3%; background-size: 100% auto; }

	div.mainmenuinside { margin: 0; }
	/* Menu items wrap in rows, each tall enough to tap; the negative margin lines the text up with the content. */
	div.mainmenu ul { display: flex; flex-wrap: wrap; width: auto; margin: 0 calc(-1 * var(--space-3)) var(--space-4); padding: 0; background: none; }
	div.mainmenu li { margin: 0; line-height: var(--space-5); }
	div.mainmenu li a { padding: var(--space-2) var(--space-3); }
	div.mainmenu li a.englishinfo { padding-left: calc(var(--space-3) + 20px); background-position: var(--space-3) center; }

	div.main { margin-bottom: var(--space-8); }
	div.rightcolumn table { width: 100%; margin: 0 0 var(--space-6) 0; }
	div.rightcolumn form { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
	div.rightcolumn input.text { flex: 1; min-width: 0; width: auto; }

	/* 48px tall buttons and fields */
	input[type="submit"], input[type="button"], button, input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], select { padding-top: var(--space-3); padding-bottom: var(--space-3); }

	img, iframe, video { max-width: 100%; }
	img, video { height: auto; }
	iframe[src*="youtube"], iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; }

	div.inkvizice h4 { width: 100%; height: 0; padding-bottom: 63.1%; background-size: 100% auto; }
	:is(div.katalog, div.sekta).list { grid-template-columns: minmax(0, 1fr); }
	div.shop table.shipping th, div.shop table.shipping td { display: block; text-align: left; padding: var(--space-1) 0; }
	div.shop table.shipping input[type="text"], div.shop table.shipping input[type="email"], div.shop table.shipping select, div.shop table.shipping textarea { width: 100%; }
	body.gate { background-size: contain; }
}

@media print {
	body, div.page { background: none; }
	h1, div.mainmenu, div.rightcolumn, div.footer { display: none; }
	div.page, div.main { width: auto; margin: 0; }
	div.main, div.main * { color: black; }
	/* Paging, prev/next links, menus, forms, buttons and player controls do nothing on paper; templates mark the rest .noprint. !important because some screen rules, like the player's, are more specific or come later. */
	.noprint, div.pager, a.prevnext, table.catlist, form.search-page-form, div.shop td.buttons,
	input[type="submit"], input[type="button"], button,
	#srr-player .audio-player, #srr-player .control-button { display: none !important; }
}


#srr-player {
    margin-top: var(--space-8);
}

/* Sizes are in em, so the controls keep their shape at any text size; the buttons and their arrows are drawn at 12px. */
#srr-player .control-button {
    font-size: 12px;
}

#srr-player .audio-player {
    text-align: center;
    background-color: var(--surface-alt);
    padding: var(--space-6);
}

#srr-player .audio-player .time-line .duration
{
    height: 1em;
    margin-top: var(--space-3);
}

#srr-player .audio-player .time-line .progress-bar {
    border: 1px solid var(--text);
    cursor: pointer;
}

#srr-player .audio-player .time-line .progress-bar .progress {
    height: 1.8em;
    width: 0;
    background-color: var(--text);
}


#srr-player .audio-player .control-button {
    cursor: pointer;
    width: 6.2em;
    height: 6.2em;
    display: inline-block;
    text-align: center;
    margin: 0 0.5em;
    border: 1px solid var(--text);
    border-radius: 2px;
}

#srr-player .audio-player .control-button.control-play:after
{
    content: '';
    display: block;
    position: relative;
    top: 25%;
    left: 30%;
    width: 0;
    height: 0;
    border-top: 1.5em solid transparent;
    border-right: 0;
    border-bottom: 1.5em solid transparent;
    border-left: 3em solid var(--text);
    box-sizing: border-box;
}

#srr-player .audio-player .control-button.control-play.playing:after
{
    width: 2.6em;
    height: 3em;
    border: 1em solid var(--text);
    border-top-width: 0;
    border-bottom-width: 0;
}

#srr-player .audio-player .control-button.control-rewind:before
{
    content: '';
    display: block;
    position: absolute;
    margin-top: 2.1em;
    margin-left: 1em;
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-right: 2em solid var(--text);
    border-bottom: 1em solid transparent;
    border-left: 0;
    box-sizing: border-box;
}

#srr-player .audio-player .control-button.control-rewind:after
{
    content: '';
    display: block;
    position: absolute;
    margin-top: 2.1em;
    margin-left: 2.7em;
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-right: 2em solid var(--text);
    border-bottom: 1em solid transparent;
    border-left: 0;
    box-sizing: border-box;
}


#srr-player .audio-player .control-button.control-forward:before
{
    content: '';
    display: block;
    position: absolute;
    margin-top: 2.1em;
    margin-left: 1.5em;
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-right: 0;
    border-bottom: 1em solid transparent;
    border-left: 2em solid var(--text);
    box-sizing: border-box;
}

#srr-player .audio-player .control-button.control-forward:after
{
    content: '';
    display: block;
    position: absolute;
    margin-top: 2.1em;
    margin-left: 3.2em;
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-right: 0;
    border-bottom: 1em solid transparent;
    border-left: 2em solid var(--text);
    box-sizing: border-box;
}

#srr-player .track-list
{
    margin: var(--space-6) var(--space-4) 0 var(--space-4);
}

#srr-player .track-list td
{
    padding: var(--space-2) 0;
}

#srr-player .track-list td.track-num,
#srr-player .track-list td.track-duration
{
    text-align: right;
    white-space: nowrap;
    padding-right: var(--space-2);
}

#srr-player .track-list td.track-title
{
    width: 100%;
}

#srr-player .track-list .control-button
{
    width: 1.5em;
    height: 1.5em;
}

#srr-player .track-list .control-button.control-play:after
{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 0.5em solid transparent;
    border-right: 0;
    border-bottom: 0.5em solid transparent;
    border-left: 1em solid var(--text);
    box-sizing: border-box;
    margin-left: 0.2em;
}

#srr-player .track-list .control-button.control-play.playing:after
{
    width: .9em;
    height: .9em;
    border: .3em solid var(--text);
    border-top-width: 0;
    border-bottom-width: 0;
}

#srr-player .track-list tr.playable {
    cursor: pointer;
}