/* song toolbar styles (toolbox, print notice, breadcrumbs).
   Extracted verbatim from content-classic-test.php on 2026-06-10
   (audit PERF-07 stage B): same rules, same cascade position via an
   in-place <link>, now cacheable instead of re-sent in every HTML. */

/* zorgt dat de print notice enkel op de print sheet verschijnt */
#notice-print {
	display: none
}

/* zorgen dat spacing rond breadcrumb items gelijk is */
.breadcrumbs-item {
	margin: 0 6px 0 6px !important
}

/* === Toolbar === */
.ukutoolbox {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
	color: #414141;
	border: none;
	padding: 8px 4px 8px;
	margin: 0 0 20px;
	background: #d4d3c8;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* JS adds this class when #ascro scrolls off the top.
   Fully opaque so anything behind (page chord box, lyrics, floating chord-strip) is
   properly hidden when the sticky toolbar overlaps. Previously opacity: 0.95 caused
   chord cards to bleed through. */
#ascro.ascro-stuck {
	position: fixed;
	top: 5px;
	z-index: 200;
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.3);
	opacity: 1;
}

/* Invisible placeholder that keeps #autoscrollerbox from collapsing when #ascro is fixed */
.ascro-spacer {
	height: 44px;
	display: none;   /* shown by JS when #ascro is stuck */
}

/* +/− stepper: text size and line height — matches the transpose button style */
.uku-step-wrap {
	display: flex;
	align-items: center;
	background: #dfded5;
	border-radius: 6px;
	overflow: hidden;
	height: 28px;
}

.uku-step-btn {
	width: 24px;
	height: 28px;
	border: none;
	background: transparent;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: #45443f;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s, color 0.12s;
}

.uku-step-btn:hover:not(:disabled) {
	background: rgba(0,0,0,0.12);
	color: #1a1a18;
}

.uku-step-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.uku-step-val {
	min-width: 22px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: #45443f;
	padding: 0 2px;
	user-select: none;
}

/* ── Toolbar container ───────────────────────────────────── */
.uku-toolbar { width: 100%; }
#autoscrollerbox { width: 100%; }

.uku-bar-sep {
	width: 1px;
	height: 26px;
	background: rgba(0,0,0,0.15);
	flex-shrink: 0;
}

/* Transpose +/- — same height as step controls */
.uku-transpose-wrap {
	display: flex;
	align-items: center;
	background: #b7b6ab;
	border-radius: 7px;
	overflow: hidden;
	height: 32px;
}

.uku-transpose-btn {
	width: 30px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: #45443f;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uku-transpose-btn:hover:not(:disabled) {
	background: #a78e46;          /* UkuTabs gold */
	color: #fff;
}

.uku-transpose-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.uku-transpose-val {
	min-width: 28px;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	color: #45443f;
	padding: 0 2px;
}

/* Color swatches (used inside the popover). Squared-rounded, slightly
   bigger than before, tighter shadow. The active swatch shows a small
   checkmark inside; hover lifts a touch. */
.uku-swatch {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,0.12);
	transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-clip: padding-box;
	box-shadow: 0 1px 3px rgba(0,0,0,0.18);
	flex-shrink: 0;
	position: relative;
	padding: 0;
	overflow: hidden;
	color: #fff;
}
.uku-swatch:hover  { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.22); }
.uku-swatch.active { border-color: #45443f; box-shadow: 0 0 0 2px #f2f2e9, 0 0 0 3px #45443f; }
.uku-swatch.active::after {
	content: '';
	width: 6px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translate(-1px, -1px);
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
/* Color trigger — single dot in the toolbar */
.uku-color-wrap    { position: relative; }
.uku-color-trigger {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.15);
	cursor: pointer; padding: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	transition: transform 0.12s, box-shadow 0.12s;
	flex-shrink: 0; display: block;
}
.uku-color-trigger:hover        { transform: scale(1.15); box-shadow: 0 2px 5px rgba(0,0,0,0.35); }
.uku-color-trigger.open         { border-color: #45443f; transform: scale(1.05); }

/* Color popover — floats below the trigger */
.uku-color-popover {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #d4d3c8;
	border-radius: 8px;
	padding: 8px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.22);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 300;
	min-width: 116px; /* fits 3 per row × (20px + 6px gap) */
}
.uku-color-popover[hidden] { display: none; }

/* Instrument selector */
.uku-instrument-sel {
	height: 28px;
	border: none;
	background: #b7b6ab;
	border-radius: 6px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 600;
	color: #45443f;
	cursor: pointer;
	outline: none;
}
.uku-instrument-sel:focus { box-shadow: 0 0 0 2px rgba(69,68,63,0.3); }

/* Range sliders */
.uku-range-wrap {
	flex: 1;
	min-width: 60px;
	max-width: 120px;
	/* no padding-top needed now that label is beside, not above */
}

.uku-range-wrap input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: #b7b6ab;
	outline: none;
	cursor: pointer;
	border: none;
}

.uku-range-wrap input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #c7523a;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.uku-range-wrap input[type=range]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #c7523a;
	cursor: pointer;
	border: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Right-side reset + capo */
.uku-tool-end {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	padding-left: 10px;
}

.uku-reset-btn {
	background: none;
	border: none;
	font-size: 10px;
	font-weight: 600;
	color: #7a7970;
	cursor: pointer;
	padding: 4px 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 3px;
	transition: color 0.15s;
}

.uku-reset-btn:hover { color: #45443f; }

.capo-info {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #6a6960;
	background: rgba(0,0,0,0.07);
	padding: 3px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

/* transposer selector */
.transposerselect select {
	width: 100%;
	font-size: 16px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #b7b6ab;
	padding: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 0px 15px;
	color: #45443f !important;
	font-weight: bold;
	height: 35px;
	border: none;
}

/* ── Song header bar (gold) — title + difficulty pill + action icons ────── */
.accordion h2.uku-songhead {
	display: flex;
	align-items: stretch;
	margin: 0 !important;
	padding: 0;
	/* The songhead became an h2 for the document outline (audit SEO-08).
	   Neutralize the theme's global h2 typography (script display font),
	   which the old h3 never inherited. */
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	background: linear-gradient(0deg, rgba(103,79,12,1) 0%, rgba(130,107,41,1) 100%);
	border-radius: 4px 4px 0 0;
	border-width: 1px 1px 0;
	border-color: #967d30;
	border-style: solid;
	box-shadow: inset 0 1px 0 #bda253;
}
/* Anything inside the songhead must override the theme's `.accordion h3 a { display:block; padding; gradient bg; ... }` rule. */
.accordion h2.uku-songhead a {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0;
	display: inline-flex;
	min-height: 0;        /* reset the 40px baseline from the global .accordion h3 a rule */
}
.accordion h2.uku-songhead .uku-songhead-title {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	color: #f5f1e4;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;          /* keep the title as block so ellipsis works */
}
/* Only the artist name inside the title is a link; underline on hover. */
.accordion h2.uku-songhead .uku-songhead-artist {
	color: inherit !important;
	font-weight: 700;
	text-decoration: none !important;
}
.accordion h2.uku-songhead .uku-songhead-artist:hover {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
.uku-songhead-prefix { font-weight: 700; margin-right: 4px; }
.uku-songhead-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px 0 4px;
	flex-shrink: 0;
}

/* Difficulty pill — softer-than-black element holding the 5 level bars + the level label.
   Reads as one consistent UI block; no hover treatment (it's primarily an info pill). */
.uku-diff-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 23px;
	padding: 0 12px 0 10px;
	border-radius: 5px;
	background: #45443f;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.uku-diff-pill:hover,
.uku-diff-pill:focus {
	background: #000;
	color: #fff !important;
	transform: none;
	filter: none;
	transition: background 0.15s ease;
}
.uku-diff-label {
	color: var(--diff-color);
}
.uku-diff-bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
	height: 12px;
}
.uku-diff-bar {
	width: 3px;
	border-radius: 1.5px;
	background: rgba(255,255,255,0.22);
}
/* Stepped heights so the bars also rise visually with the level */
.uku-diff-bar:nth-child(1) { height: 5px;  }
.uku-diff-bar:nth-child(2) { height: 7px;  }
.uku-diff-bar:nth-child(3) { height: 9px;  }
.uku-diff-bar:nth-child(4) { height: 11px; }
.uku-diff-bar:nth-child(5) { height: 12px; }
.uku-diff-bar.is-on { background: var(--bar-color); }

/* Arrangement-source indicator — small round icon-only badge
   that sits as the first item in the meta strip on every song
   page. Two variants:
	 --user     — peachy-tan bg, fa-user (single)
				  ("User submitted")
	 --curated  — gold-tan bg, fa-circle-check
				  ("UkuTabs curated arrangement")
   Both backgrounds sit in the same warm-beige family at the
   same .7 alpha; only the hue (peach vs gold) and the glyph
   differentiate them, so they read as a coordinated pair.
   Dark warm-brown icon (instead of white) gives high contrast
   against the light bg + reinforces the "earthy" UkuTabs
   palette. Non-interactive (no link, no hover state); .uku-hint
   handles the tooltip. */
.uku-source-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 6px;
	border-radius: 50%;
	font-size: 11px;
	color: #2e2409;        /* dark warm brown — high contrast on the soft tan bgs */
	cursor: help;          /* the question-mark cursor invites the hover-for-tooltip behaviour */
}
.uku-source-pill i { font-size: 11px; }
.uku-source-pill--user    { background: rgba(204, 174, 132, .70); }   /* peachy tan — HSL(29°, 41%, 66%) */
.uku-source-pill--curated { background: rgba(194, 177, 138, .70); }   /* gold tan  — HSL(40°, 35%, 65%) */
/* Hide on phones — meta strip gets cramped at narrow widths and the
   source provenance is a nice-to-have, not a primary control. Matches
   the nearest existing breakpoint family (480px is the dominant
   small-phone threshold in this file). */
@media (max-width: 480px) {
	.uku-source-pill { display: none !important; }
}

/* Rating chip — sits next to the difficulty pill on the meta strip. Each star is a
   clickable button: click proxies to the matching star in the [ratemypost] widget at
   the bottom of the song (which handles the actual vote submission via its own JS).
   If the widget's matching star can't be found, fall back to scrolling to the widget. */
/* NOTE: do NOT set `html { scroll-behavior: smooth }` — that turns every window.scroll()
   call into a smooth-scroll, which breaks the autoscroll loop on mobile. The fallback
   "scroll to widget" already passes `behavior: 'smooth'` to scrollIntoView directly. */

.uku-rating-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 9px;
	border-radius: 12px;
	color: #45443f;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

/* 5 individual star buttons, hover lights them up cumulatively (left → hovered) */
.uku-rating-stars {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.uku-rating-star-btn {
	background: none;
	border: none;
	padding: 0 1px;
	margin: 0;
	cursor: pointer;
	color: rgba(60,59,55,0.30);
	font-size: 14px;
	line-height: 1;
	font-family: inherit;
	transition: color 0.12s, transform 0.12s;
}
/* Filled stars showing the current AVERAGE rating — gold.
   This is a display state, not an interaction. */
.uku-rating-star-btn.is-on      { color: #f4b400; }

/* Interaction states — brick red across the board so the user
   sees a clear "I'm rating this" cue. .is-preview fires on the
   stars BEFORE the hovered one (filling them in); :hover is the
   star directly under the cursor; .is-rated persists after the
   click. All three share the same brick-red so the hover→click
   transition is visually seamless (no color flip mid-action). */
.uku-rating-star-btn.is-preview { color: #963a25; }
.uku-rating-star-btn:hover      { transform: scale(1.18); color: #963a25; }

/* Rated state — fires once after the user clicks; stays through the session for visual
   confirmation that the vote was recorded. */
.uku-rating-star-btn.is-rated {
	color: #963a25 !important;
	animation: uku-rating-pulse 0.45s ease;
}
@keyframes uku-rating-pulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.40); }
	60%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}
.uku-rating-star-btn:focus     { outline: none; }
.uku-rating-star-btn:focus-visible {
	outline: 2px solid rgba(150, 58, 37, 0.55);
	outline-offset: 1px;
	border-radius: 2px;
}

.uku-rating-num   { color: #45443f; }
.uku-rating-count { color: rgba(60,59,55,0.55); font-weight: 600; }
.uku-rating-empty {
	color: rgba(60,59,55,0.7);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 10px;
}

/* Bottom rating section — anchor target with offset so the toolbar doesn't cover it */
.uku-rate-section { scroll-margin-top: 80px; }

/* Icon-only action buttons in song header */
.accordion h2.uku-songhead a.uku-songhead-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 14px !important;
	color: rgba(245,241,228,0.7) !important;
	background: transparent !important;
	text-decoration: none !important;
	transition: background 0.15s, color 0.15s;
	font-size: 12px;
	padding: 0;
}
.accordion h2.uku-songhead a.uku-songhead-act:hover {
	background: rgba(255,255,255,0.18) !important;
	color: #fff !important;
}
/* Force the FA icons to show — theme rules between 1199-1399px set .fa-flag/.fa-print to display:none. */
.uku-songhead-act .fa-flag,
.uku-songhead-act .fa-print,
.uku-songhead-act i {
	display: inline-block !important;
	font-size: 13px;
	margin: 0;
}
.uku-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Song meta strip: neutral grey shelf below the title bar ──
   Holds difficulty (left) + instrument picker (right). Same tone as the toolbar (#d4d3c9)
   so the meta strip and the toolbar read as matching control surfaces around the chord box. */

.uku-songmeta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 32px;
	padding: 0 12px;
	background: #f6f0d0;
	border: none;
	color: #45443f;
	flex-wrap: nowrap;
}
.uku-songmeta-side {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-shrink: 0;
}
.uku-songmeta-side--diff { flex-shrink: 1; }
.uku-songmeta-lbl {
	font-size: 10px;
	font-weight: 700;
	color: rgba(60,59,55,0.7);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* Instrument <select> — same neutral as toolbar transposer/speeds (#b7b6ac) */
.uku-songmeta-sel {
	height: 22px;
	padding: 0 22px 0 10px;
	border-radius: 5px;
	border: none;
	background: #dad7bc url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%2345443f' d='M0 0l6 8 6-8z'/></svg>") no-repeat right 8px center / 7px;
	color: #45443f;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: background-color 0.15s, box-shadow 0.15s;
	line-height: 1;
}
.uku-songmeta-sel:hover { background-color: #e3e0c5; }
.uku-songmeta-sel:focus { outline: none; box-shadow: 0 0 0 2px rgba(166,146,81,0.45); background-color: #e3e0c5; }

/* Lefty wrap inside meta strip */
.uku-songmeta-lh-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 8px;
	border-left: 1px solid rgba(0,0,0,0.14);
}
.uku-songmeta-lh-wrap[hidden] { display: none; }

/* Compact toggle scoped to the meta strip */
.uku-songmeta .uku-toggle.uku-toggle-sm {
	width: 24px;
	height: 14px;
	border-radius: 7px;
	background: rgba(0,0,0,0.18);
}
.uku-songmeta .uku-toggle.uku-toggle-sm .uku-toggle-thumb {
	width: 10px; height: 10px;
	top: 2px; left: 2px;
	background: #fff;
}
.uku-songmeta .uku-toggle.uku-toggle-sm[aria-checked="true"] { background: #c7523a; }
.uku-songmeta .uku-toggle.uku-toggle-sm[aria-checked="true"] .uku-toggle-thumb { left: 12px; }

/* Hide the leading "INSTRUMENT" label earlier than the full mobile
   slim-down — the meta strip starts feeling cramped well above 600px.
   768px is the closest existing breakpoint to the desired ~820 cut-off. */
@media (max-width: 768px) {
	.uku-songmeta-lbl--lead { display: none; }
}

/* Mobile: trim height + slimmer dropdown */
@media (max-width: 600px) {
	.uku-songmeta    { height: 34px; padding: 0 10px; gap: 8px; }
	.uku-songmeta-sel{ height: 24px; font-size: 12px; padding: 0 22px 0 10px; border-radius: 5px; }
	.uku-songmeta .uku-toggle.uku-toggle-sm { width: 26px; height: 15px; border-radius: 8px; }
	.uku-songmeta .uku-toggle.uku-toggle-sm .uku-toggle-thumb { width: 11px; height: 11px; top: 2px; left: 2px; }
	.uku-songmeta .uku-toggle.uku-toggle-sm[aria-checked="true"] .uku-toggle-thumb { left: 13px; }
	/* On mobile, the difficulty word is hidden — only the colored bars remain (saves room for the rating chip) */
	.uku-diff-label { display: none; }
	.uku-diff-pill  { padding: 0 8px; gap: 6px; }
}

/* Strip the outer #ukutoolsbox wrapper chrome — the toolbar's own .fixedascro provides
   all the visual container we need (rounded grey bar). Removing the wrapper's bg/padding/
   shadow lets the toolbar take the full content width. */
#ukutoolsbox {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* ── Main toolbar bar (sticky target) ───────────────────── */
.fixedascro {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	background: #d4d3c8;
	border-radius: 10px;
	padding: 10px;          /* desktop — generous all-round; scales down per @media below */
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	overflow: visible; /* allow popovers to break out */
	box-shadow: 0 3px 10px #999;
	-moz-box-shadow: 0 3px 10px #999;
	-webkit-box-shadow: 0 3px 10px #999;
}

/* ── Autoscroll: one combined pill, two-tone ─────────────────── */
.uku-asc-combined {
	display: flex;
	align-items: stretch;
	border-radius: 16px;
	overflow: hidden;
	height: 32px;
	flex-shrink: 0;
}

/* Play / pause button — amber half of the pill */
.uku-asc-play {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 13px;
	background: #a69251;
	border: none;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
	flex-shrink: 0;
	font-family: inherit;
}
.uku-asc-play:hover   { background: #98854a; }
.uku-asc-play.playing { background: #7aaa6e; }
.uku-asc-play i { font-size: 11px; }

/* Divider — colour change between halves does the visual work, keep node for layout */
.uku-asc-divider {
	width: 0;
	flex-shrink: 0;
}

/* Speed number pills — sit on the lighter neutral half */
.uku-asc-speeds {
	display: flex;
	align-items: center;
	gap: 1px;
	padding: 0 6px;
	background: #b7b6ac;
	flex-shrink: 0;
}
.uku-asc-sp {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	border: none;
	background: transparent;
	font-size: 11px;
	font-weight: 700;
	color: rgba(69,68,63,0.65);
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}
.uku-asc-sp:hover  { background: rgba(0,0,0,0.08); color: #45443f; }
.uku-asc-sp.active { background: #a69251; color: #fff; }

/* Speed stepper (mobile only — lives inside the combined pill, neutral half) */
.uku-asc-speed-stepper {
	display: none; /* shown at ≤600px via media query */
	align-items: center;
	padding-right: 2px;
	background: #b7b6ac;
}
.uku-asc-spdstep {
	width: 28px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: rgba(69,68,63,0.85);
	cursor: pointer;
	transition: background 0.15s;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.uku-asc-spdstep:hover:not(:disabled) { background: rgba(0,0,0,0.08); color: #45443f; }
.uku-asc-spdstep:disabled { opacity: 0.35; cursor: default; }
.uku-asc-spdval {
	min-width: 20px;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	color: #45443f;
	padding: 0 2px;
}

/* ── Transposer label ────────────────────────────────────── */
.uku-tp-wrap  { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.uku-tp-label {
	font-size: 11px; font-weight: 700; color: #45443f;
	text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}

/* ── Flat / Sharp + generic pill buttons ─────────────────── */
.uku-bar-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px; height: 32px;
	padding: 0 9px;
	border-radius: 16px;
	border: none;
	background: rgba(0,0,0,0.1);
	font-size: 16px;
	font-weight: 700;
	color: #45443f;
	cursor: pointer;
	transition: background 0.15s;
	flex-shrink: 0;
	font-family: inherit;
	line-height: 1;
}
.uku-bar-pill:hover  { background: rgba(0,0,0,0.16); }
.uku-bar-pill.active { background: #a69251; color: #fff; }

/* ── Favorite button in toolbar ──────────────────────────── */
.uku-fav-wrap { flex-shrink: 0; }
.uku-fav-wrap .wpfp-link,
.uku-fav-wrap .wpfp-span a,
.uku-fav-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	height: 32px;
	padding: 0 13px !important;
	border-radius: 16px !important;
	font-size: 12px;
	font-weight: 700;
	color: #fff !important;
	background: #c7523a !important;
	border: none !important;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
	text-transform: uppercase;
	margin: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	line-height: 1 !important;
	font-family: inherit;
}
/* Explicit hover bg avoids the filter:brightness flash you saw — also overrides any
   conflicting :hover/:active rules emitted by the wpfp plugin. */
.uku-fav-wrap .wpfp-link:hover,
.uku-fav-wrap .wpfp-link:focus,
.uku-fav-wrap .wpfp-link:active,
.uku-fav-wrap .wpfp-span a:hover,
.uku-fav-wrap .wpfp-span a:focus,
.uku-fav-wrap .wpfp-span a:active,
.uku-fav-pill:hover,
.uku-fav-pill:focus,
.uku-fav-pill:active {
	background: #b04632 !important;
	color: #fff !important;
	filter: none !important;
}
.uku-fav-off { opacity: 0.55; }
.uku-fav-wrap .wpfp-link > svg { width: 13px !important; height: 13px !important; margin: 0 !important; }

/* ── Settings gear button ────────────────────────────────── */
.uku-settings-wrap { position: relative; flex-shrink: 0; }
/* Right-side group — chord-vis + gear stay anchored to the far right of the toolbar
   regardless of whether chord-vis is visible (in zone) or hidden (not in zone). */
.uku-toolbar-right {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
/* Chord-strip visibility toggle — only visible when the chord-diagrams box has scrolled
   off the top (i.e., the sticky chord-strip is in the zone where it'd float). Default
   state is "active gold" (chords currently showing); .is-off is the dim/inactive state
   shown after the user has clicked the X on the floating strip to hide it.
   Explicit width + padding:0 keeps it a strict circle (the inherited .uku-bar-pill
   `padding: 0 9px` was making it ever-so-slightly oval). */
.uku-chordvis-btn {
	display: none !important;          /* hidden by default — JS adds .is-visible to show */
	width: 32px;                       /* default — !important removed so the mobile @media rules can override (they sit earlier in source) */
	min-width: 32px;
	padding: 0 !important;             /* keep !important to beat .uku-bar-pill's `padding: 0 9px` */
	background: #a3935a !important;
	color: #fff !important;
	transition: background 0.15s, color 0.15s;
}
.uku-chordvis-btn.is-visible { display: inline-flex !important; }
.uku-chordvis-btn:hover { filter: brightness(1.06); }
.uku-chordvis-btn i { font-size: 14px; }
.uku-chordvis-btn.is-off {
	background: rgba(0,0,0,0.10) !important;
	color: rgba(69,68,63,0.55) !important;
	filter: none;
}
.uku-chordvis-btn.is-off:hover { background: rgba(0,0,0,0.16) !important; }
/* Dark mode — site applies dark mode via <html data-theme="dark">.
   The theme's `inc/uku-theme.css` has `:root[data-theme="dark"] .uku-bar-pill { background: var(--uku-surface-1) !important }`
   at specificity (0,2,1) which beats our base `.uku-chordvis-btn` (0,1,0) and was making the active state look dark.
   The `:root[...]` prefix on these rules matches that specificity so the amber active state shows again,
   and the is-off state uses a visible light tint on the dark toolbar bg. */
:root[data-theme="dark"] .uku-chordvis-btn {
	background: #a3935a !important;
	color: #fff !important;
}
:root[data-theme="dark"] .uku-chordvis-btn.is-off {
	background: rgba(255,255,255,0.12) !important;
	color: rgba(255,255,255,0.55) !important;
}
:root[data-theme="dark"] .uku-chordvis-btn.is-off:hover { background: rgba(255,255,255,0.22) !important; }
/* iOS Safari simulates :hover briefly on touchend (~300ms), which made the
   theme's `:root[data-theme="dark"] .uku-bar-pill:hover { background: var(--uku-surface-2) }`
   rule win specificity (0,3,0) over our base `.uku-chordvis-btn` (0,2,0)
   and flash dark/black instead of gold when tapped. These three-state
   overrides keep the gold active background on tap/hover/focus in dark mode. */
:root[data-theme="dark"] .uku-chordvis-btn:hover,
:root[data-theme="dark"] .uku-chordvis-btn:focus,
:root[data-theme="dark"] .uku-chordvis-btn:active {
	background: #a3935a !important;
	color: #fff !important;
}

/* Hide control on the floating chord-strip — sits inline at the right
   end of the chord row. Small subtle circle so it reads as a quiet
   action rather than a UI block competing with the chord cards.
   Sized in proportion to the strip's 90-95px chord cards: previous
   36×36 square chip dominated the row when the cards shrank during
   the SVG migration. Vertically centered with the cards via inline-flex
   + vertical-align: middle. */
/* Anchor the close X to the top-right corner of the strip. Was inline
   (display:inline-flex) before, which made it the LAST item in the
   inline flow and the FIRST to wrap to a new line when too many chord
   cards were present — looked like a stray X floating below the strip.
   Absolute-positioned, it stays put regardless of how many cards wrap. */
.sticky-chords-close {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	left: auto !important;
	bottom: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px !important;
	height: 26px !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(0,0,0,0.05) !important;
	color: #7a7264 !important;
	font-size: 0 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
	z-index: 2;
}
.sticky-chords-close:hover {
	color: rgba(0,0,0,0.85) !important;
	background: rgba(0,0,0,0.16) !important;
	transform: none !important;
}
.sticky-chords .sticky-chords-close::before {
	content: "\D7" !important;
	font-family: -apple-system, system-ui, sans-serif !important;
	font-weight: 600;
	color: inherit !important;
	font-size: 18px !important;
	line-height: 1 !important;
	margin: 0 !important;
	text-shadow: none !important;
}
/* Strip alignment — left-edge matches the toolbar; no extra left
   margin. JS sets the precise `left` value once geometry is known.
   (transform-origin used to live here when the strip had `transform:
   scale(0.7)` — both gone now that card sizing is done in real CSS
   pixels via the SVG height.) */
.sticky-chords {
	margin-left: 0 !important;
	text-align: left !important;
}
/* When the strip is hidden, hide the X explicitly. */
.sticky-chords.hide,
.sticky-chords.hide .sticky-chords-close {
	display: none !important;
}
.uku-settings-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 16px;
	border: none;
	background: rgba(0,0,0,0.1);
	font-size: 14px;
	color: #45443f;
	cursor: pointer;
	transition: background 0.15s, transform 0.25s;
	font-family: inherit;
}
.uku-settings-btn:hover { background: rgba(0,0,0,0.16); }
.uku-settings-btn.open  { transform: rotate(45deg); background: rgba(0,0,0,0.2); }

/* ── Settings popover ────────────────────────────────────── */
.uku-settings-pop {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #fbfaf1;
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.18);
	z-index: 400;
	min-width: 300px;
}
.uku-settings-pop[hidden] { display: none; }
/* Dim backdrop, phones only (the popover becomes a centered modal there). */
.uku-settings-back { position: fixed; inset: 0; background: rgba(20,14,8,.32); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s; z-index: 9989; }
.uku-settings-back.on { opacity: 1; visibility: visible; pointer-events: auto; }
:root[data-theme="dark"] .uku-settings-back { background: rgba(0,0,0,.45); }
@media (min-width: 601px) { .uku-settings-back { display: none; } }
/* Close button, phones only (the popover becomes a top-anchored modal there). */
.uku-settings-x { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.05); color: #7a7264; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.uku-settings-x:active { background: rgba(0,0,0,.12); }
:root[data-theme="dark"] .uku-settings-x { background: rgba(255,255,255,.07); color: #a8a39a; }
@media (min-width: 601px) { .uku-settings-x { display: none; } }
.uku-set-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
}
.uku-set-row--wrap { align-items: center; }
.uku-set-lbl { font-size: 13px; font-weight: 500; color: #2c2b27; flex-shrink: 0; white-space: nowrap; }
.uku-set-hr  { height: 1px; background: rgba(0,0,0,0.07); margin: 4px 0; }

/* Popover header: "Settings" title with the Reset button pushed to
   the right edge. Title gets a bit more weight than a regular label
   to read as a heading. */
.uku-set-header { padding: 2px 0 6px; }
.uku-set-title  { font-size: 14px; font-weight: 700; color: #2c2b27; letter-spacing: 0.5px; text-transform: uppercase; }

/* Section sub-headings inside the popover. Three blocks: Instrument,
   Chord display, Appearance. Keeps the popover scannable without a
   separator between every row. */
.uku-set-section {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #8a8878;
	padding: 6px 0 2px;
}

/* Flat/sharp popover row — hidden on desktop, mobile media query reveals it */
.uku-flatsharp-popover-row { display: none; }
/* Mirror the .uku-songmeta-sel style so the popover instrument picker matches the
   meta-strip one above the chord diagrams: no border, #dad7bf bg, custom chevron. */
.uku-set-sel {
	height: 28px;
	min-width: 96px;           /* fits the longest instrument name ("baritone"/"mandolin"); cannot go narrower without truncating */
	border: none;
	background: #dfded5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%2345443f' d='M0 0l6 8 6-8z'/></svg>") no-repeat right 9px center / 7px;
	border-radius: 5px;
	padding: 0 24px 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: #45443f;
	cursor: pointer;
	outline: none;
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: background-color 0.15s, box-shadow 0.15s;
}
.uku-set-sel:hover { background-color: #e3e0c5; }
.uku-set-sel:focus { box-shadow: 0 0 0 2px rgba(166,146,81,0.45); background-color: #e3e0c5; }
.uku-set-capo-badge {
	font-size: 12px; font-weight: 700; color: #c7523a;
	background: rgba(199,82,58,0.1); padding: 2px 10px; border-radius: 12px;
}
.uku-set-swatches { display: grid; grid-template-columns: repeat(5, max-content); gap: 6px; }

/* Segmented control. Used for the Notation (♭ / ♯) row in the
   popover where a single-button pill didn't read clearly as a toggle
   — a segmented control with both options visible and the active one
   highlighted communicates the choice at a glance (iOS-like). */
.uku-seg {
	display: inline-flex;
	background: #dfded5;
	border-radius: 8px;
	padding: 2px;
	line-height: 1;
}
.uku-seg-opt {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 4px 14px;
	font-size: 14px;
	font-weight: 700;
	color: #6b6a5e;
	cursor: pointer;
	border-radius: 6px;
	min-width: 28px;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	font-family: inherit;
	line-height: 1;
}
.uku-seg-opt:not(.active):hover { color: #45443f; }
.uku-seg-opt.active {
	background: #fbfbf1;
	color: #45443f;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Mobile compaction. The full settings popover is comfortable on a
   desktop, but at iPhone dimensions all those rows + section headings
   add up — on a 393×852 viewport it covers ~70% of the screen, which
   feels heavy. Tighten paddings, gaps, and swatch size so the same
   structure (we want to keep section headings + tooltips) fits in a
   smaller footprint. Same content, just denser. */
@media (max-width: 600px) {
	/* Centered modal on phones, consistent with the chord picker. */
	.uku-settings-pop  { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 20px); right: auto; transform: translateX(-50%); width: min(310px, 88vw); min-width: 0; max-height: calc(100vh - env(safe-area-inset-top, 0px) - 40px); overflow-y: auto; padding: 12px 14px; z-index: 9990; }
	.uku-set-row       { padding: 3px 0; }
	.uku-set-header    { padding: 0 34px 4px 0; }
	.uku-set-title     { font-size: 13px; }
	.uku-set-section   { font-size: 10px; padding: 5px 0 0; }
	.uku-set-hr        { margin: 2px 0; }
	.uku-set-swatches  { gap: 5px; padding-top: 2px; }
	.uku-swatch        { width: 22px; height: 22px; border-radius: 5px; }
}

/* ── Toggle switch ───────────────────────────────────────── */
.uku-toggle {
	position: relative;
	display: inline-flex;
	width: 40px; height: 22px;
	border-radius: 11px;
	border: none;
	background: #ccc;
	cursor: pointer;
	transition: background 0.2s;
	flex-shrink: 0;
	padding: 0;
}
.uku-toggle[aria-checked="true"] { background: #c7523a; }
.uku-toggle-thumb {
	position: absolute;
	top: 2px; left: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	transition: left 0.2s;
	pointer-events: none;
}
.uku-toggle[aria-checked="true"] .uku-toggle-thumb { left: 20px; }

/* ── Highlight chords ──────────────────────────────────────
   Tints each chord name in the lyrics with a soft version of the
   user's chosen chord color (--chordcolor). The 3px horizontal
   padding is FULLY cancelled by an equal negative horizontal
   margin so the chord text doesn't shift even one pixel — chord
   columns stay aligned with their lyric syllables underneath in
   the <pre> body. box-decoration-break:clone keeps the highlight
   tidy if a chord wraps across lines. */
.uku-highlight-on a.ukutabschord {
	background: color-mix(in srgb, var(--chordcolor, #c7523a) 10%, transparent);
	border-radius: 3px;
	padding: 1px 3px;
	margin: 0 -3px;
	/* The lyrics body has `text-shadow: 1px 1px 0 #fff` on pre.qoate-code
	   for the embossed look. Inside the tinted highlight that white halo
	   reads as visual noise — kill it just for highlighted chord names. */
	text-shadow: none;
	-webkit-box-decoration-break: clone;
			box-decoration-break: clone;
}
/* Fallback for older engines without color-mix() — solid 10% alpha. */
@supports not (color: color-mix(in srgb, red, blue)) {
	.uku-highlight-on a.ukutabschord {
		background: rgba(150, 58, 37, 0.10);
	}
}

/* Chord-diagram SVG copy/paste hygiene.
   The inline SVGs that replaced the legacy <img> chord diagrams contain
   several <text> elements: the chord-name title, the "ukutabs.com"
   watermark, the fret-position numbers inside each fingerpoint dot, and
   the per-string note labels at the bottom. When a visitor selects a
   row of chord diagrams and copies it, the browser concatenates every
   visible <text> element in DOM order — producing strings like
   "Gmukutabs.com231GCEA" that are unusable as a text cheatsheet.
   By making the non-title text elements unselectable we keep visual
   rendering identical while letting copy/paste produce a clean list of
   chord names ("G Am F C") — which is what visitors building digital
   cheatsheets actually want from a copy of the chord row. */
.uku-chord-svg text                     { user-select: none; -webkit-user-select: none; }
.uku-chord-svg text.uku-chord-svg-title { user-select: text; -webkit-user-select: text; }


/* hoofdheader op de pagina met acties en chords in this song */
.chordssongbox {
	background: rgb(205, 204, 193);
	background: -moz-linear-gradient(180deg, rgba(205, 204, 193, 1) 0%, rgba(242, 242, 232, 1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(205, 204, 193, 1) 0%, rgba(242, 242, 232, 1) 100%);
	background: linear-gradient(180deg, rgba(205, 204, 193, 1) 0%, rgba(242, 242, 232, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cdccc1", endColorstr="#f2f2e8", GradientType=1);
}

.wpfp-link {
	border: none;
	display: block;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	outline: none;
	overflow: hidden;
	position: relative;
	color: #f4f1e3;
	font-weight: 700;
	font-size: 15px;
	background-color: #cf5941;
	padding: 8px 15px !important;
	margin: 5px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
	border-radius: 5px;
	display: inline;
	width: 125px
}

.wpfp-span a:hover {
	color: #fff !important
}

.wpfp-link:hover {
	background: #932e19;
}

.wpfplinknouser:hover {
	background-color: #cf5941;
	color: #f4f1e3 !important;
}

@media (max-width:1399px) {

	.fa-flag,
	.fa-print {
		display: none
	}
}

@media (max-width:1198px) {
	.favtext {
		display: none
	}

	.fa-flag,
	.fa-print,
	.fa-heart,
	.wpfp-link .fa-trash-alt {
		display: inline-block;
		margin-right: 0 !important
	}
}

@media (max-width:600px) {
	#content {
		padding-top: 15px !important
	}
}

@media (max-width:560px) {
	.wpfp-link {
		margin: 1px
	}
}

@media (max-width:510px) {
	.wpfp-link {
		padding: 12px 15px !important;
	}
}

.onlysmall {
	display: none
}

.notonlysmall {
	display: block
}

/* On the test post: keep .onlysmall (mobile-only album bar) hidden everywhere — the
   desktop uku-songhead shows on mobile too, so the Album: bar would be redundant. */
@media (max-width:1023px) {
	.notonlysmall { display: block; }
	.actionbox    { display: none; }
}

/* keuze maken voor akkoorddiagrammen tuning */
.tuningselection {
	color: #444442 !important;
	padding: 2px 5px 2px;
	background: #dadacf;
	border-radius: 4px;
	margin: 5px 3px 5px;
	font-weight: 600;
	text-shadow: 1px 1px 1px #f1f1e5;
	box-shadow: 0 0 4px 0px #888;
	display: inline-block;
}

.tuningselection:hover {
	opacity: 1;
	color: #444442 !important
}

.notactivetuning {
	opacity: 0.4;
	color: #676767 !important;
}

.notactivetuning:hover {
	cursor: pointer;
}

@media (max-width:516px) {
	.tuningchange1 {
		font-size: 0;
	}

	.tuningchange1:after {
		font-size: 11px;
		content: 'UKULELE';
	}

	.tuningchange2 {
		font-size: 0;
	}

	.tuningchange2:after {
		font-size: 11px;
		content: 'UKU LEFT';
	}

	.tuningchange3 {
		font-size: 0;
	}

	.tuningchange3:after {
		font-size: 11px;
		content: 'BARITONE';
	}

	.tuningchange4 {
		font-size: 0;
	}

	.tuningchange4:after {
		font-size: 11px;
		content: 'BARI LEFT';
	}
	
	.tuningchange5 {
		font-size: 0;
	}
	
	.tuningchange5:after {
		font-size: 11px;
		content: 'GUITAR';
	}
	
	.tuningchange6 {
		font-size: 0;
	}
	
	.tuningchange6:after {
		font-size: 11px;
		content: 'MANDOLIN';
	}
}

@media (max-width:480px) {
	.tuningchange1 {
		font-size: 0;
	}

	.tuningchange1:after {
		font-size: 11px;
		content: 'UKU';
	}

	.tuningchange2 {
		font-size: 0;
	}

	.tuningchange2:after {
		font-size: 11px;
		content: 'UKU L';
	}

	.tuningchange3 {
		font-size: 0;
	}

	.tuningchange3:after {
		font-size: 11px;
		content: 'BARI';
	}

	.tuningchange4 {
		font-size: 0;
	}

	.tuningchange4:after {
		font-size: 11px;
		content: 'BARI L';
	}
	
	.tuningchange5 {
		font-size: 0;
	}
	
	.tuningchange5:after {
		font-size: 11px;
		content: 'GUITAR';
	}
	
	.tuningchange6 {
		font-size: 0;
	}
	
	.tuningchange6:after {
		font-size: 11px;
		content: 'MANDO';
	}
}

@media (max-width:360px) {
	.tuningchange1 {
		font-size: 0;
	}

	.tuningchange1:after {
		font-size: 11px;
		content: 'UKULELE';
	}

	.tuningchange2 {
		font-size: 0;
	}

	.tuningchange2:after {
		font-size: 11px;
		content: 'UKU LEFT';
	}

	.tuningchange3 {
		font-size: 0;
	}

	.tuningchange3:after {
		font-size: 11px;
		content: 'BARITONE';
	}

	.tuningchange4 {
		font-size: 0;
	}

	.tuningchange4:after {
		font-size: 11px;
		content: 'BARI LEFT';
	}
	
	.tuningchange5 {
		font-size: 0;
	}
	
	.tuningchange5:after {
		font-size: 11px;
		content: 'GUITAR';
	}
	
	.tuningchange6 {
		font-size: 0;
	}
	
	.tuningchange6:after {
		font-size: 11px;
		content: 'MANDOLIN';
	}
}

/* actonbox onder ieder liedjes */
#actionboxbottom {
	display: block;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	padding: 15px 5px 15px 5px;
	background-color: #f8efc8;
	text-align: center;
	font-weight: bold;
	box-shadow: 0 3px 10px #9999995e;
	-moz-box-shadow: 0 3px 10px #9999995e;
	-webkit-box-shadow: 0 3px 10px #9999995e;
	margin-top: -15px;
	box-shadow: inset 0 10px 9px -7px #999;
}