/* ============================================================
   Deltamed Accessibility v1.0.10
   Toate funcțiile vizuale sunt CSS activat de o clasă pe <html>:
   .dmacc-contrast  .dmacc-inverted  .dmacc-dark  .dmacc-cursor
   .dmacc-no-motion  .dmacc-dyslexic  .dmacc-filter-*  .dmacc-tts
   .dmacc-font-lg  .dmacc-font-sm  .dmacc-spacing  .dmacc-guide
   Panoul e stilizat cu reseturi !important pentru că kitul
   Elementor stilizează global elementele <button> și linkurile.
   ============================================================ */

:root {
	--dmacc-x: 16px;           /* distanța butonului față de marginea stângă */
	--dmacc-y: 16px;           /* distanța butonului față de marginea de jos */
	--dmacc-z: 99000;          /* z-index toolbar; de ajustat dacă intră în conflict cu lightbox-ul */
	--dmacc-accent: #CC0000;   /* Primary */
	--dmacc-navy: #0F1E2E;     /* Secondary */
	--dmacc-text: #1A1A1A;
	--dmacc-grey: #6B7280;
	--dmacc-border: #D4D7DB;
	--dmacc-muted: #F5F6F7;
	--dmacc-hc-bg: #000000;    /* fundal high contrast */
	--dmacc-hc-text: #FFFFFF;  /* text high contrast */
	--dmacc-hc-link: #FFEE32;  /* linkuri + elemente interactive high contrast */
	--dmacc-dk-bg: #201B16;    /* fundal dark mode — cărbune cald, nu negru absolut */
	--dmacc-dk-text: #F0E7DA;  /* text dark mode — ivoriu cald (contrast 13,9:1) */
	--dmacc-dk-link: #FFA48E;  /* linkuri dark mode — somon cald, în familia brandului (8,9:1) */
}

/* ------------------------------------------------------------
   0. Container + reset dur pe butoanele din toolbar
   ------------------------------------------------------------ */

#dmacc-root,
#dmacc-root * {
	box-sizing: border-box;
}

#dmacc-root {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	line-height: 1.35;
}

/* Reset complet: kitul dă background roșu, padding și font propriu
   oricărui <button> brut — totul se rescrie aici cu !important. */
#dmacc-root button {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto;
	height: auto;
	color: var(--dmacc-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: left !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	-webkit-appearance: none;
	appearance: none;
}

#dmacc-root button:hover,
#dmacc-root button:focus {
	background: none;
	background-color: transparent;
	color: var(--dmacc-text);
	text-decoration: none !important;
}

#dmacc-root button:focus-visible {
	outline: 2px solid var(--dmacc-accent) !important;
	outline-offset: 2px !important;
}

.dmacc-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ------------------------------------------------------------
   1. Butonul plutitor
   ------------------------------------------------------------ */

#dmacc-launcher {
	position: fixed !important;
	left: var(--dmacc-x);
	bottom: var(--dmacc-y);
	z-index: var(--dmacc-z);
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background-color: var(--dmacc-navy) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 12px rgba(15, 30, 46, 0.35) !important;
}

#dmacc-launcher:hover {
	background-color: var(--dmacc-accent) !important;
	color: #ffffff !important;
}

#dmacc-launcher svg {
	width: 27px;
	height: 27px;
	display: block;
}

/* Pe modurile cu fundal întunecat, cerculețul navy dispărea pe
   negru — butonul trece pe alb, cu iconița navy (v1.0.8). */
html.dmacc-contrast #dmacc-launcher,
html.dmacc-inverted #dmacc-launcher,
html.dmacc-dark #dmacc-launcher {
	background-color: #ffffff !important;
	color: var(--dmacc-navy) !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

html.dmacc-contrast #dmacc-launcher:hover,
html.dmacc-inverted #dmacc-launcher:hover,
html.dmacc-dark #dmacc-launcher:hover {
	background-color: var(--dmacc-accent) !important;
	color: #ffffff !important;
}

/* ------------------------------------------------------------
   2. Panoul
   ------------------------------------------------------------ */

#dmacc-panel {
	position: fixed;
	left: var(--dmacc-x);
	bottom: calc(var(--dmacc-y) + 60px);
	z-index: calc(var(--dmacc-z) + 1);
	width: 302px;
	max-width: calc(100vw - 2 * var(--dmacc-x));
	max-height: min(72vh, 580px);
	overflow-y: auto;
	background-color: #ffffff;
	border: 1px solid var(--dmacc-border);
	border-radius: 8px;
	box-shadow: 0 10px 34px rgba(15, 30, 46, 0.2);
	color: var(--dmacc-text);
}

#dmacc-panel[hidden] {
	display: none;
}

#dmacc-panel::-webkit-scrollbar {
	width: 8px;
}

#dmacc-panel::-webkit-scrollbar-thumb {
	background-color: var(--dmacc-border);
	border-radius: 4px;
}

.dmacc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid var(--dmacc-border);
}

.dmacc-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--dmacc-navy);
}

#dmacc-root .dmacc-close {
	width: 28px !important;
	height: 28px !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--dmacc-grey) !important;
	flex: none;
}

#dmacc-root .dmacc-close:hover {
	background-color: var(--dmacc-muted) !important;
	color: var(--dmacc-accent) !important;
}

.dmacc-close svg {
	width: 14px;
	height: 14px;
	display: block;
}

.dmacc-body {
	padding: 6px 0 0;
}

/* Rândurile cu comutatoare */
#dmacc-root .dmacc-toggle {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	padding: 11px 16px !important;
}

#dmacc-root .dmacc-toggle:hover {
	background-color: var(--dmacc-muted) !important;
}

.dmacc-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dmacc-sub {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--dmacc-grey);
}

/* Comutatorul vizual */
.dmacc-switch {
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: 10px;
	background-color: #B9BFC6;
	transition: background-color 0.15s ease;
}

.dmacc-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #ffffff;
	transition: transform 0.15s ease;
}

.dmacc-toggle[aria-pressed="true"] .dmacc-switch {
	background-color: var(--dmacc-accent);
}

.dmacc-toggle[aria-pressed="true"] .dmacc-switch::after {
	transform: translateX(14px);
}

/* Grupul de filtre de culoare */
.dmacc-group {
	border-top: 1px solid var(--dmacc-border);
	margin-top: 6px;
}

.dmacc-group-label {
	display: block;
	padding: 12px 16px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dmacc-grey);
}

.dmacc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 16px 14px;
}

#dmacc-root .dmacc-pills button {
	padding: 6px 11px !important;
	border: 1px solid var(--dmacc-border) !important;
	border-radius: 999px !important;
	background-color: #ffffff !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--dmacc-text) !important;
}

#dmacc-root .dmacc-pills button:hover {
	border-color: var(--dmacc-navy) !important;
}

#dmacc-root .dmacc-pills button[aria-pressed="true"] {
	background-color: var(--dmacc-navy) !important;
	border-color: var(--dmacc-navy) !important;
	color: #ffffff !important;
}

/* Reset all */
#dmacc-root .dmacc-reset {
	width: 100% !important;
	display: block !important;
	padding: 13px 16px !important;
	border-top: 1px solid var(--dmacc-border) !important;
	color: var(--dmacc-accent) !important;
	font-weight: 600 !important;
	border-radius: 0 0 8px 8px !important;
}

#dmacc-root .dmacc-reset:hover {
	background-color: var(--dmacc-muted) !important;
}

@media print {
	#dmacc-root {
		display: none !important;
	}
}

/* ============================================================
   FUNCȚIILE — clase pe <html>
   ============================================================ */

/* ------------------------------------------------------------
   A. High contrast (dmacc-contrast) — arhitectură pe transparență v1.0.10
   Temă forțată prin culori, NU prin filter, ca să se poată combina
   cu filtrele de culoare (un element poate avea un singur filter).
   Din v1.0.10 paleta lucrează prin TRANSPARENȚĂ: fundalul negru stă
   pe canvas (html/body), iar elementele devin transparente în loc
   să fie vopsite opac — vopsite, straturile de conținut de peste
   fotografiile de fundal (hero, bannere) le acopereau, iar vechiul
   background-image: none le ștergea de tot. Fotografiile — <img> și
   background-image deopotrivă — rămân acum vizibile; overlay-urile
   de lizibilitate (pseudo-elemente) rămân neatinse. Chrome-ul
   plutitor (headerul cu panourile lui, popupurile Elementor) și
   elementele interactive primesc fundal propriu opac.
   ------------------------------------------------------------ */

html.dmacc-contrast,
html.dmacc-contrast body {
	background-color: var(--dmacc-hc-bg) !important;
}

html.dmacc-contrast body *:not(img, video, iframe, svg, svg *, source, picture, #dmacc-root, #dmacc-root *) {
	background-color: transparent !important;
	color: var(--dmacc-hc-text) !important;
	border-color: var(--dmacc-hc-text) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Chrome plutitor: fundal propriu opac (pe sub el trece conținutul) */
html.dmacc-contrast body :is([data-elementor-type="header"], [data-elementor-type="popup"]),
html.dmacc-contrast body :is([data-elementor-type="header"], [data-elementor-type="popup"]) *:not(img, video, svg, svg *, picture, #dmacc-root, #dmacc-root *) {
	background-color: var(--dmacc-hc-bg) !important;
}

html.dmacc-contrast body a:not(#dmacc-root a),
html.dmacc-contrast body a *:not(#dmacc-root *) {
	color: var(--dmacc-hc-link) !important;
}

html.dmacc-contrast body a:not(#dmacc-root a) {
	text-decoration: underline !important;
}

html.dmacc-contrast body :is(button, [role="button"], input, select, textarea, .elementor-button):not(#dmacc-root *) {
	background-color: var(--dmacc-hc-bg) !important;
	color: var(--dmacc-hc-link) !important;
	border: 2px solid var(--dmacc-hc-link) !important;
}

html.dmacc-contrast body ::placeholder {
	color: #bbbbbb !important;
}

html.dmacc-contrast body :focus-visible {
	outline: 3px solid var(--dmacc-hc-link) !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------
   B. Cursor mărit (dmacc-cursor)
   Cursoare SVG inline de 48px: săgeată neagră cu contur alb,
   varianta roșie pe elementele interactive. Fallback la
   cursoarele standard unde browserul refuză dimensiunea.
   ------------------------------------------------------------ */

html.dmacc-cursor,
html.dmacc-cursor body,
html.dmacc-cursor body * {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.5%202.2v17.3l4.3-4%202.8%206%202.6-1.2-2.8-5.9%205.9-.6z'%20fill='%23111111'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E") 11 4, auto !important;
}

html.dmacc-cursor body :is(a, button, [role="button"], input, select, textarea, label, summary),
html.dmacc-cursor body :is(a, button, [role="button"], label, summary) * {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.5%202.2v17.3l4.3-4%202.8%206%202.6-1.2-2.8-5.9%205.9-.6z'%20fill='%23CC0000'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E") 11 4, pointer !important;
}

/* ------------------------------------------------------------
   C. Oprirea animațiilor (dmacc-no-motion)
   Aceeași logică precum blocul global de reduced-motion, dar
   aplicată necondiționat. Duratele merg la aproape zero (nu la
   none) ca să nu se blocheze scripturile care așteaptă
   animationend/transitionend. Autoplay-ul caruselelor și al
   videoclipurilor se oprește din JS.
   ------------------------------------------------------------ */

html.dmacc-no-motion,
html.dmacc-no-motion body {
	scroll-behavior: auto !important;
}

html.dmacc-no-motion *,
html.dmacc-no-motion *::before,
html.dmacc-no-motion *::after {
	animation-duration: 0.001s !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
	transition-delay: 0s !important;
}

/* ------------------------------------------------------------
   D. Filtre de saturație / daltonism (dmacc-filter-*)
   Filtrele NU se pun pe <html> sau <body>: un filter pe un
   strămoș rupe poziționarea elementelor fixed din interior
   (butonul toolbarului ar defila cu pagina). Se aplică deci pe
   fiecare copil direct al <body>, cu toolbarul exclus — vizual
   e identic. Filtrele de daltonism folosesc matricile standard
   feColorMatrix din SVG-ul ascuns tipărit în footer.
   ------------------------------------------------------------ */

html.dmacc-filter-grayscale body > *:not(#dmacc-root) {
	filter: grayscale(1) !important;
}

html.dmacc-filter-lowsat body > *:not(#dmacc-root) {
	filter: saturate(0.35) !important;
}

html.dmacc-filter-protanopia body > *:not(#dmacc-root) {
	filter: url(#dmacc-f-protanopia) !important;
}

html.dmacc-filter-deuteranopia body > *:not(#dmacc-root) {
	filter: url(#dmacc-f-deuteranopia) !important;
}

html.dmacc-filter-tritanopia body > *:not(#dmacc-root) {
	filter: url(#dmacc-f-tritanopia) !important;
}

/* ------------------------------------------------------------
   E. Font OpenDyslexic (dmacc-dyslexic)
   Fonturile sunt self-hostate în assets/fonts și se descarcă
   abia la prima activare (font-display: swap + familie folosită
   doar sub clasă). Icon-fonturile sunt excluse, altfel iconițele
   Elementor/Font Awesome devin pătrate goale.
   ------------------------------------------------------------ */

@font-face {
	font-family: 'OpenDyslexic';
	src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'OpenDyslexic';
	src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

html.dmacc-dyslexic body {
	line-height: 1.55;
}

html.dmacc-dyslexic body,
html.dmacc-dyslexic body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="eicon"]):not(.dashicons):not(#dmacc-root):not(#dmacc-root *):not([data-elementor-type="header"]):not([data-elementor-type="header"] *) {
	font-family: 'OpenDyslexic', Verdana, Arial, sans-serif !important;
}

/* Excepție: template-ul de header rămâne pe fontul de bază.
   OpenDyslexic e cu ~15-20% mai lat decât Inter și rupea meniul
   pe două rânduri; conținutul propriu-zis primește fontul, navigația
   rămâne stabilă (desktop și mobil). Din v1.0.5 regula generală
   exclude ea însăși subarborele header-ului (:not de mai sus) —
   blocul de față rămâne ca plasă suplimentară. */
html.dmacc-dyslexic [data-elementor-type="header"],
html.dmacc-dyslexic [data-elementor-type="header"] *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="eicon"]):not(.dashicons) {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ------------------------------------------------------------
   G. Text mărit (dmacc-font-lg)
   Perechea „mărire” din cerința de mărire/micșorare text. Mecanism: tipografia site-ului e în rem,
   deci mărirea font-size pe rădăcină scalează proporțional tot
   textul (+12,5%, adică body 17px → ~19px), în timp ce spațierile
   în px rămân pe loc. E același efect ca mărirea textului din
   browser, doar că la un click distanță în panou.
   ------------------------------------------------------------ */

html.dmacc-font-lg {
	font-size: 112.5% !important;
}

/* ------------------------------------------------------------
   F. Text-to-speech (dmacc-tts)
   Modul e gestionat în JS (Web Speech API). CSS-ul dă doar
   afordanța: blocurile de text citibile primesc contur la hover,
   iar blocul citit în acel moment e evidențiat.
   ------------------------------------------------------------ */

html.dmacc-tts body :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dt, dd, td, th, label, summary):not(#dmacc-root *):hover {
	outline: 2px dashed var(--dmacc-accent) !important;
	outline-offset: 2px;
	cursor: pointer;
}

.dmacc-reading {
	outline: 3px solid var(--dmacc-accent) !important;
	outline-offset: 2px;
	background-color: rgba(204, 0, 0, 0.07) !important;
}

/* ------------------------------------------------------------
   H. Culori inversate (dmacc-inverted) — rescris v1.0.8
   Inversare optică INTEGRALĂ, uniformă — echivalentul „Classic
   Invert" din sistemele de operare: un singur strat de filtru pe
   copiii direcți ai <body> (toolbarul exclus; filtrul pe html/body
   ar rupe poziționarea fixă a butonului), plus canvasul negru —
   fundalul lui <body> nu e atins de filtrul de pe copii, iar fără
   regula de culoare albul implicit al paginii ar rămâne alb.

   Decizie v1.0.8: fotografiile se inversează și ele, ca tot restul.
   Variantele „smart invert" (1.0.5–1.0.7, media re-inversată ca să
   rămână naturală) au produs exact inconsecvența reclamată — unele
   poze naturale, altele în negativ, după cum erau puse în pagină.
   Un singur criteriu, fără excepții; cine vrea temă închisă cu
   fotografii naturale are „Dark mode". Exclusiv cu filtrele de
   culoare (JS le golește reciproc).
   ------------------------------------------------------------ */

html.dmacc-inverted,
html.dmacc-inverted body {
	background-color: #000000 !important;
}

html.dmacc-inverted body > *:not(#dmacc-root) {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* ------------------------------------------------------------
   I. Mod întunecat (dmacc-dark) — v1.0.5, paletă recalibrată v1.0.9,
   arhitectură pe transparență v1.0.10 (aceeași ca secțiunea A:
   canvas cald + elemente transparente, ca fotografiile de fundal
   să rămână vizibile; chrome-ul plutitor cu fundal propriu).
   Paletă forțată pe tiparul secțiunii A, în cheie închisă; nu e
   filtru, deci se combină natural cu filtrele de culoare.
   v1.0.9: paletă CALDĂ, ca modul să fie vizibil diferit de High
   contrast (negru absolut / alb / galben = contrast maxim, dur):
   fundal cărbune cald, text ivoriu, linkuri somon — temă de
   confort pentru fotofobie, cu fotografiile naturale.
   ------------------------------------------------------------ */

html.dmacc-dark,
html.dmacc-dark body {
	background-color: var(--dmacc-dk-bg) !important;
}

html.dmacc-dark body *:not(img, video, iframe, svg, svg *, source, picture, #dmacc-root, #dmacc-root *) {
	background-color: transparent !important;
	color: var(--dmacc-dk-text) !important;
	border-color: #423A32 !important;
}

/* Chrome plutitor: fundal propriu opac (pe sub el trece conținutul) */
html.dmacc-dark body :is([data-elementor-type="header"], [data-elementor-type="popup"]),
html.dmacc-dark body :is([data-elementor-type="header"], [data-elementor-type="popup"]) *:not(img, video, svg, svg *, picture, #dmacc-root, #dmacc-root *) {
	background-color: var(--dmacc-dk-bg) !important;
}

html.dmacc-dark body a:not(#dmacc-root a),
html.dmacc-dark body a *:not(#dmacc-root *) {
	color: var(--dmacc-dk-link) !important;
}

html.dmacc-dark body a:not(#dmacc-root a) {
	text-decoration: underline !important;
}

html.dmacc-dark body :is(button, [role="button"], input, select, textarea, .elementor-button):not(#dmacc-root *) {
	background-color: #2A241E !important;
	color: var(--dmacc-dk-text) !important;
	border: 1px solid #5A5045 !important;
}

html.dmacc-dark body ::placeholder {
	color: #B3A697 !important;
}

html.dmacc-dark body :focus-visible {
	outline: 3px solid var(--dmacc-dk-link) !important;
	outline-offset: 2px;
}

/* ------------------------------------------------------------
   J. Text micșorat (dmacc-font-sm) — v1.0.5
   Perechea „micșorare”: -12,5% pe rădăcină, prin aceeași
   convenție rem ca la mărire. Exclusiv cu dmacc-font-lg (JS).
   ------------------------------------------------------------ */

html.dmacc-font-sm {
	font-size: 87.5% !important;
}

/* ------------------------------------------------------------
   K. Spațiere mărită litere/rânduri (dmacc-spacing) — v1.0.5
   Valorile WCAG 1.4.12: line-height 1.5, litere 0.12em, cuvinte
   0.16em. Header-ul e exclus la sursă — aceeași decizie, cu
   același motiv, ca la OpenDyslexic.
   ------------------------------------------------------------ */

html.dmacc-spacing body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="eicon"]):not(.dashicons):not(#dmacc-root):not(#dmacc-root *):not([data-elementor-type="header"]):not([data-elementor-type="header"] *) {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

/* ------------------------------------------------------------
   L. Ghidaj de citire (dmacc-guide) — v1.0.5
   Bandă orizontală care urmărește cursorul. Trăiește în
   #dmacc-root, deci filtrele și inversarea nu o ating; JS o
   creează la prima activare și îi mișcă transform-ul cu rAF.
   ------------------------------------------------------------ */

#dmacc-guide-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 46px;
	pointer-events: none;
	z-index: calc(var(--dmacc-z) - 1);
	background: rgba(255, 238, 50, 0.16);
	border-top: 2px solid rgba(204, 0, 0, 0.55);
	border-bottom: 2px solid rgba(204, 0, 0, 0.55);
	transform: translateY(-120px);
	will-change: transform;
	display: none;
}

html.dmacc-guide #dmacc-guide-bar {
	display: block;
}