/* Black & white theme only */
:root {
	--border: rgba(0,0,0,0.1);
    /* Site-wide max content width */
    --site-max-width: 64rem; /* matches Tailwind max-w-5xl */
}

/* Meta Leads Logo Styling with Bungee font */
.logo-meta-leads {
	font-family: 'Bungee', cursive;
	font-size: 1rem; /* text-xl */
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
	transition: all 0.2s ease;
}

.logo-meta-leads:hover {
	color: #111; /* Primary blue from color palette */
	transform: scale(1.05);
}

/* Meta Leads Logo Badge Button */
.logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 2px solid #111;
	border-radius: 0.5rem; /* slightly rounded corners for badge look */
	padding: 0.25rem 0.5rem; /* minimal padding for badge appearance */
	font-family: 'Bungee', cursive;
	font-size: 0.875rem; /* text-sm */
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #111;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	min-width: fit-content;
	white-space: nowrap;
}

.logo-badge:hover {
	background: #f8f8f8;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	color: #111;
}

/* High contrast mode for logo */
.hc .logo-meta-leads {
	color: #fff;
}

.hc .logo-meta-leads:hover {
	color: #66b3ff; /* Light blue for high contrast mode */
}

/* High contrast mode for logo badge */
.hc .logo-badge {
	background: #111;
	border-color: #fff;
	color: #fff;
	box-shadow: 0 1px 3px rgba(255, 255, 255, 0.2);
}

.hc .logo-badge:hover {
	background: #333;
	color: #66b3ff; /* Light blue for high contrast mode */
	box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
}

/* Responsive design for logo badge */
@media (max-width: 640px) {
	.logo-badge {
		font-size: 0.75rem; /* text-xs */
		padding: 0.1875rem 0.375rem; /* px-1.5 py-0.75 */
		border-radius: 0.375rem; /* rounded-md */
	}
}

@media (max-width: 480px) {
	.logo-badge {
		font-size: 0.625rem; /* text-xs */
		padding: 0.125rem 0.25rem; /* px-1 py-0.5 */
		border-radius: 0.25rem; /* rounded */
	}
}

/* Import global hover animations */
@import url('hover-animations.css');

/* Subtle boutique feel: tighter tracking and rounded corners */
html {
	letter-spacing: -0.01em;
}

/* Site-wide content container */
.site-container {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn,
.input,
.file-input,
.select,
.textarea,
.card,
.stat {
	border-color: var(--border);
	border-radius: 0.75rem;
}

.navbar {
	backdrop-filter: saturate(120%) blur(2px);
	position: relative; /* ensure z-index applies */
	z-index: 10050; /* above modals/alerts that use ~9999 */
}

/* Page-level cards should span full container width */
.page-card { width: 100% !important; max-width: none !important; }

/* Remove strong shadows for a flat, editorial feel */
.card,
.stat,
.dropdown,
.modal-box {
	box-shadow: none;
}

/* Prose overrides to keep it monochrome */
.prose :where(h1,h2,h3,h4) {
	color: #111;
}
.prose :where(p,li,small) {
	color: rgba(0,0,0,0.7);
}

/* High contrast mode: invert globally, keep media readable */
.hc { filter: invert(1) hue-rotate(180deg); background: #000; }
.hc img, .hc video, .hc iframe { filter: invert(1) hue-rotate(180deg); }

/* Disabled button styles for better visual feedback */
.btn-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.btn-disabled:hover {
    opacity: 0.5 !important;
    transform: none !important;
}

/* Hide scrollbars globally (still scrollable) */
html, body {
	-ms-overflow-style: none;      /* IE and Edge */
	scrollbar-width: none;         /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar { /* Chrome, Safari */
	display: none;
}

/* Hide scrollbars inside lead modal tabs */
#lead-tabs {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#lead-tabs::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbars in client modal content */
#lead-modal .modal-box {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#lead-modal .modal-box::-webkit-scrollbar {
	display: none;
}

/* Dark pattern refinements for cards and borders under high contrast (pre-invert values) */
html.hc { --border: rgba(0,0,0,0.35); }
.hc .card,
.hc .stat,
.hc .modal-box,
.hc .navbar,
.hc .table,
.hc .dropdown {
	border-color: rgba(0,0,0,0.35) !important;
}
/* Kanban items and dividers */
.hc li[draggable="true"],
.hc .kanban-empty,
.hc [class*="divide-y"],
.hc [class*="border-base-200"],
.hc [class*="divide-black"] {
	border-color: rgba(0,0,0,0.35) !important;
}

/* Ensure modal content also follows dark pattern when HC is active */
.hc dialog::backdrop {
	background: rgba(0,0,0,0.6);
}
.hc .modal-box {
	background: #111 !important;
	color: #f5f5f5 !important;
	border-color: rgba(255,255,255,0.2) !important;
}
.hc .modal-box .label-text { color: #d6d6d6; }
/* High contrast mode: force white text for prose content in modals */
.hc .modal-box .prose,
.hc .modal-box .prose :where(h1,h2,h3,h4),
.hc .modal-box .prose :where(p,li,small),
.hc .modal-box .prose :where(strong,em),
.hc .modal-box .prose :where(ul,ol),
.hc .modal-box .prose :where(blockquote),
.hc .modal-box .prose :where(code,pre) {
	color: #fff !important;
}
.hc .modal-box .input,
.hc .modal-box .textarea,
.hc .modal-box .select,
.hc .modal-box .file-input {
	background: #0a0a0a;
	color: #fafafa;
	border-color: rgba(255,255,255,0.2);
}
/* Tables: force light text in HC mode */
.hc .table,
.hc .table :where(th),
.hc .table :where(td),
.hc .table :where(thead tr th),
.hc .table :where(tbody tr td) { color: #000 !important; }
.hc .table a { color: #000 !important; }

/* Strengthen specificity for dashboard transcripts card */
.hc .card .table,
.hc .card .table th,
.hc .card .table td,
.hc .card .table thead tr th,
.hc .card .table tbody tr td {
	color: #000 !important;
}

/* Final HC button normalization: ensure white bg / black text after inversion
   (pre-invert set to black bg / white text) */
.hc .btn,
.hc .btn-outline,
.hc .btn-ghost,
.hc .modal-box .btn,
.hc .modal-box .btn-outline,
.hc .modal-box .btn-ghost {
	background: #111 !important;
	color: #fff !important;
	border-color: #111 !important;
}

/* Unified button strategy: dark background in light mode; inverted (light) in high-contrast mode via filter */
/* Light mode */
.btn,
.btn:where(.btn-outline),
.btn:where(.btn-ghost),
.btn:where(.btn-neutral) {
	background: #3a3a3a !important; /* darker grey with blue tint */
	color: #fff !important;
	border-color: #3a3a3a !important;
}
.btn:hover { opacity: 0.9; }

/* High-contrast (dark) mode: force white background and black text for buttons */
.hc .btn,
.hc .btn:where(.btn-outline),
.hc .btn:where(.btn-ghost),
.hc .btn:where(.btn-neutral) {
	background: #fff !important;
	color: #111 !important;
	border-color: #fff !important;
}

/* Tabs in high-contrast (dark) mode: active stays white bg/black text; inactive text should be white after inversion */
.hc .tabs .tab { color: inherit; }
.hc .tabs .tab { color: #111 !important; } /* pre-invert black -> white on screen */
.hc .tabs .tab:hover { color: #111 !important; opacity: 0.9; }
.hc .tabs .tab.tab-active { color: #fff !important; border-color: #fff !important; background: #111 !important; }

/* Modal tabs: ensure unselected text appears white (pre-invert black) */
.hc .modal-box .tabs .tab { color: #fff !important; }
.hc .modal-box .tabs .tab:hover { color: #fff !important; opacity: 0.9; }
.hc .modal-box .tabs .tab.tab-active { color: #fff !important; border-color: #fff !important; background: #111 !important; }

/* Modal (client card) tables: force white text in dark mode */
.hc .modal-box .table,
.hc .modal-box .table :where(th),
.hc .modal-box :where(.table thead tr th),
.hc .modal-box :where(.table tbody tr td),
.hc .modal-box .table :where(td),
.hc .modal-box .table a { color: #fff !important; }

/* Contracts upload row: align input and button bottoms nicely */
#form-upload-contract { align-items: flex-end; }
#form-upload-contract label.form-control {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
#form-upload-contract .label-text { margin-bottom: 0.25rem; }

/* Quill Editor Styling */
.ql-toolbar {
	border: 1px solid var(--border) !important;
	border-bottom: none !important;
	border-radius: 0.75rem 0.75rem 0 0 !important;
	background: #fafafa !important;
}
.ql-container {
	border: 1px solid var(--border) !important;
	border-radius: 0 0 0.75rem 0.75rem !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.ql-editor {
	min-height: 120px !important;
}

/* Larger editor in modal */
.modal-box .ql-editor {
	min-height: 350px !important;
}

/* Full height editor in modal */
.modal-box .ql-container {
	height: 100% !important;
}

.modal-box .ql-editor {
	height: calc(100% - 42px) !important;
	min-height: 350px !important;
}

/* Full screen modal editor */
.modal-box.w-full {
	border-radius: 0 !important;
	margin: 0 !important;
	max-height: none !important;
}

/* Full screen modal form layout */
.modal-box.w-full #product-form {
	height: calc(100vh - 80px) !important;
}

/* Full screen editor container */
.modal-box.w-full .ql-container {
	flex: 1 !important;
	height: auto !important;
	min-height: 0 !important;
}

.modal-box.w-full .ql-editor {
	height: 100% !important;
	min-height: 300px !important;
}
.ql-toolbar .ql-stroke {
	stroke: #333 !important;
}
.ql-toolbar .ql-fill {
	fill: #333 !important;
}
.ql-toolbar button:hover .ql-stroke {
	stroke: #3a3a3a !important;
}
.ql-toolbar button:hover .ql-fill {
	fill: #3a3a3a !important;
}
.ql-toolbar button.ql-active .ql-stroke {
	stroke: #3a3a3a !important;
}
.ql-toolbar button.ql-active .ql-fill {
	fill: #3a3a3a !important;
}

/* High contrast mode for Quill */
.hc .ql-toolbar {
	background: #111 !important;
	border-color: rgba(255,255,255,0.2) !important;
}
.hc .ql-container {
	background: #0a0a0a !important;
	color: #fafafa !important;
	border-color: rgba(255,255,255,0.2) !important;
}
.hc .ql-toolbar .ql-stroke {
	stroke: #fff !important;
}
.hc .ql-toolbar .ql-fill {
	fill: #fff !important;
}
.hc .ql-toolbar button:hover .ql-stroke {
	stroke: #ccc !important;
}

/* Client modal dark mode improvements */
/* Enhanced contrast for modal tabs in dark mode */
.hc .modal-box .tab-modern {
	color: #000 !important;
	background: transparent !important;
	border: 1px solid rgba(0,0,0,0.2) !important;
}

.hc .modal-box .tab-modern:hover {
	color: #000 !important;
	background: rgba(0,0,0,0.1) !important;
	border-color: rgba(0,0,0,0.3) !important;
}

.hc .modal-box .tab-modern-active {
	color: #000 !important;
	background: #fff !important;
	border: 2px solid #000 !important;
	font-weight: bold !important;
}

.hc .modal-box .tab-modern-active:hover {
	color: #000 !important;
	background: #f0f0f0 !important;
	border-color: #000 !important;
}

/* Enhanced contrast for form elements in modal */
.hc .modal-box .label-text {
	color: #fff !important;
	font-weight: 500 !important;
}

.hc .modal-box .label-text-alt {
	color: #fff !important;
}

.hc .modal-box .input,
.hc .modal-box .textarea,
.hc .modal-box .select {
	background: #1a1a1a !important;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.3) !important;
}

.hc .modal-box .input:focus,
.hc .modal-box .textarea:focus,
.hc .modal-box .select:focus {
	border-color: #fff !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important;
}

.hc .modal-box .input::placeholder,
.hc .modal-box .textarea::placeholder {
	color: rgba(255,255,255,0.6) !important;
}

/* Enhanced contrast for cards in modal */
.hc .modal-box .card {
	background: #1a1a1a !important;
	border: 2px solid rgba(255,255,255,0.2) !important;
}

.hc .modal-box .card-title {
	color: #fff !important;
}

/* Enhanced contrast for buttons in modal */
.hc .modal-box .btn-outline {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}

.hc .modal-box .btn-outline:hover {
	background: #fff !important;
	color: #000 !important;
}

.hc .modal-box .btn-ghost {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.3) !important;
}

.hc .modal-box .btn-ghost:hover {
	background: rgba(255,255,255,0.1) !important;
	color: #fff !important;
}
.hc .ql-toolbar button:hover .ql-fill {
	fill: #ccc !important;
}
.hc .ql-toolbar button.ql-active .ql-stroke {
	stroke: #fff !important;
}
.hc .ql-toolbar button.ql-active .ql-fill {
	fill: #fff !important;
}
.hc .ql-toolbar button.ql-active {
	background: rgba(255,255,255,0.1) !important;
}

/* Dark mode filter buttons - ensure selected buttons have white text */
.hc button[name="scope_level"]:not([disabled]),
.hc button[name="period"]:not([disabled]) {
	color: #000 !important; /* Pre-invert black text -> white after inversion */
}

.hc button[name="scope_level"]:hover:not([disabled]),
.hc button[name="period"]:hover:not([disabled]) {
	color: #000 !important;
	opacity: 0.9;
}

/* Selected filter buttons in dark mode - ensure white text */
.hc button[name="scope_level"][class*="bg-gray-700"],
.hc button[name="period"][class*="bg-gray-700"] {
	background: #111 !important; /* Pre-invert black -> white after inversion */
	color: #fff !important; /* Pre-invert white -> black after inversion */
	border-color: #111 !important;
}

.hc button[name="scope_level"][class*="bg-gray-700"]:hover,
.hc button[name="period"][class*="bg-gray-700"]:hover {
	background: #222 !important;
	color: #fff !important;
}

/* PDF-like Document Styling */
.pdf-document {
	font-family: 'Times New Roman', serif;
	line-height: 1.6;
	color: #333;
	background: white;
	padding: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	max-width: 800px;
	margin: 0 auto;
}

.pdf-document h1, .pdf-document h2, .pdf-document h3, .pdf-document h4 {
	color: #333;
	margin-top: 30px;
	margin-bottom: 15px;
	font-weight: bold;
}

.pdf-document h1 {
	font-size: 24px;
	border-bottom: 2px solid #333;
	padding-bottom: 10px;
}

.pdf-document h2 {
	font-size: 20px;
}

.pdf-document h3 {
	font-size: 18px;
}

.pdf-document h4 {
	font-size: 16px;
}

.pdf-document p {
	margin-bottom: 15px;
	text-align: justify;
	font-size: 14px;
}

.pdf-document ul, .pdf-document ol {
	margin: 15px 0;
	padding-left: 30px;
}

.pdf-document li {
	margin-bottom: 8px;
	font-size: 14px;
}

.pdf-document blockquote {
	border-left: 4px solid #333;
	padding-left: 20px;
	margin: 20px 0;
	font-style: italic;
	background: #f9f9f9;
	padding: 15px 20px;
	border-radius: 0 4px 4px 0;
}

.pdf-document strong {
	font-weight: bold;
}

.pdf-document em {
	font-style: italic;
}

.pdf-document code {
	background: #f4f4f4;
	padding: 2px 4px;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
}

.pdf-document pre {
	background: #f4f4f4;
	padding: 15px;
	border-radius: 4px;
	overflow-x: auto;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	margin: 15px 0;
}

.pdf-document a {
	color: #0066cc;
	text-decoration: underline;
}

.pdf-document a:hover {
	color: #004499;
}

/* High contrast mode for PDF document */
.hc .pdf-document {
	background: #111 !important;
	color: #fafafa !important;
	border-color: rgba(255,255,255,0.2) !important;
}

.hc .pdf-document h1, .hc .pdf-document h2, .hc .pdf-document h3, .hc .pdf-document h4 {
	color: #fafafa !important;
}

.hc .pdf-document h1 {
	border-bottom-color: #fafafa !important;
}

.hc .pdf-document blockquote {
	border-left-color: #fafafa !important;
	background: #222 !important;
}

.hc .pdf-document code, .hc .pdf-document pre {
	background: #222 !important;
	color: #fafafa !important;
}

.hc .pdf-document a {
	color: #66b3ff !important;
}

.hc .pdf-document a:hover {
	color: #99ccff !important;
}

/* Light mode: make the native file chooser button match our grey buttons */
html:not(.hc) .modal-box .file-input::file-selector-button {
	background: #3a3a3a !important;
	color: #fff !important;
	border: 1px solid #3a3a3a !important;
	border-radius: 0.75rem !important;
	padding: 0.5rem 0.875rem !important;
}
html:not(.hc) .modal-box .file-input::-webkit-file-upload-button {
	background: #3a3a3a !important;
	color: #fff !important;
	border: 1px solid #3a3a3a !important;
	border-radius: 0.75rem !important;
	padding: 0.5rem 0.875rem !important;
}
html:not(.hc) .modal-box .file-input:hover::file-selector-button,
html:not(.hc) .modal-box .file-input:hover::-webkit-file-upload-button { opacity: 0.9 !important; }

/* Ensure white background on buttons in HC despite root inversion by double-inverting the button itself */
.hc .btn,
.hc .btn:where(.btn-outline),
.hc .btn:where(.btn-ghost),
.hc .btn:where(.btn-neutral),
.hc .modal-box .btn,
.hc .modal-box .btn-outline,
.hc .modal-box .btn-ghost,
.hc .modal-box .btn-neutral,
.hc .table .btn {
	filter: invert(1) hue-rotate(180deg) !important;
	background: #fff !important;
	color: #111 !important;
	border-color: #fff !important;
}

/* Ensure buttons are readable on zebra rows in modal (light mode only) */
html:not(.hc) .modal-box .table-zebra .btn {
	background: #3a3a3a !important;
	color: #fff !important;
	border-color: #3a3a3a !important;
}
/* In high-contrast mode, keep zebra rows darker and buttons light for contrast */
/* Lead modal tables: subtle zebra in light mode only */
html:not(.hc) .modal-box .table-zebra tbody tr:nth-child(even) td {
	background-color: #fafafa !important;
	color: #111 !important;
}

.hc .modal-box .btn {
	filter: invert(1) hue-rotate(180deg) !important;
	background: #111 !important;
	color: #fff !important;
	border-color: #111 !important;
}

/* In high-contrast mode, ensure no extra filter from zebra cells */
.hc .modal-box .table-zebra tbody tr:nth-child(even) td { 
	background: #191919 !important;
	color: #fff !important;
	border-color: #191919 !important;
}

.hc .modal-box .table-zebra .btn {
	filter: invert(1) hue-rotate(180deg) !important;
	background: #111 !important;
	color: #fff !important;
	border-color: #111 !important;
}

/* Badge visibility in high contrast (dark) mode */
.hc .badge,
.hc .badge-outline,
.hc .badge-neutral,
.hc .badge-info,
.hc .badge-warning,
.hc .badge-error,
.hc .badge-success,
.hc .badge-primary,
.hc .badge-secondary,
.hc .badge-accent,
.hc .badge-ghost {
	background: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
}

/* Ensure badge text is always visible in dark mode */
.hc .badge * {
	color: #000 !important;
}

/* Priority badge colors - more vibrant and distinctive */
.badge-priority-high {
	background: #dc2626 !important; /* Red-600 */
	color: #ffffff !important;
	border-color: #dc2626 !important;
}

.badge-priority-medium {
	background: #eab308 !important; /* Yellow-500 */
	color: #000000 !important;
	border-color: #eab308 !important;
}

.badge-priority-low {
	background: #059669 !important; /* Emerald-600 */
	color: #ffffff !important;
	border-color: #059669 !important;
}

/* Priority badges in high contrast mode */
.hc .badge-priority-high {
	background: #dc2626 !important;
	color: #ffffff !important;
	border-color: #dc2626 !important;
}

.hc .badge-priority-medium {
	background: #eab308 !important;
	color: #000000 !important;
	border-color: #eab308 !important;
}

.hc .badge-priority-low {
	background: #059669 !important;
	color: #ffffff !important;
	border-color: #059669 !important;
}

/* Current version indicator badge */
.badge-current-version {
	background: #059669 !important; /* Green for current */
	color: #ffffff !important;
	border-color: #059669 !important;
	font-weight: 600;
}

/* Deprecated version indicator badge */
.badge-deprecated-version {
	background: #6b7280 !important; /* Gray for deprecated */
	color: #ffffff !important;
	border-color: #6b7280 !important;
	font-weight: 500;
	opacity: 0.8;
}

/* Current version in high contrast mode */
.hc .badge-current-version {
	background: #059669 !important;
	color: #ffffff !important;
	border-color: #059669 !important;
}

/* Deprecated version in high contrast mode */
.hc .badge-deprecated-version {
	background: #6b7280 !important;
	color: #ffffff !important;
	border-color: #6b7280 !important;
}

/* Draft version indicator badge */
.badge-draft-version {
	background: #f59e0b !important; /* Amber-500 for draft */
	color: #000000 !important;
	border-color: #f59e0b !important;
	font-weight: 600;
	animation: pulse 2s infinite;
}

/* Draft version in high contrast mode */
.hc .badge-draft-version {
	background: #f59e0b !important;
	color: #000000 !important;
	border-color: #f59e0b !important;
}

/* Badge para cliente - cor preta */
.badge-client {
	background-color: #000000 !important; /* Preto */
	color: #ffffff !important;
	border-color: #000000 !important;
}

/* Badge para vendor - cor azul do sistema */
.badge-vendor {
	background-color: #3b82f6 !important; /* Azul do sistema */
	color: #ffffff !important;
	border-color: #3b82f6 !important;
}

/* Versões para modo de alto contraste */
.hc .badge-client {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
}

.hc .badge-vendor {
	background-color: #3b82f6 !important;
	color: #ffffff !important;
	border-color: #3b82f6 !important;
}

/* TODO Modal - Light mode refinements */
html:not(.hc) #todo-modal .modal-box {
	background: #ffffff !important;
	color: #111111 !important;
	border-color: var(--border) !important;
}

/* Category header: stronger hierarchy and separation */
html:not(.hc) #todo-modal #todo-list > div > h3 {
	color: #000000 !important; /* force black titles in light mode */
	border-bottom: 1px solid rgba(0,0,0,0.08) !important;
	padding-bottom: 0.25rem !important;
}

/* Ensure the span that contains the category name is also black */
html:not(.hc) #todo-modal #todo-list > div > h3 > span:nth-child(2) {
	color: #000000 !important;
}

/* Category container: subtle card feel */
html:not(.hc) #todo-modal #todo-list .bg-gray-50 {
	background: #f8fafc !important;
	border: 1px solid #e5e7eb !important; /* gray-200 */
	border-radius: 0.75rem !important;
}

/* TODO item card: clearer borders and hover feedback */
html:not(.hc) #todo-modal #todo-list .card {
	background: #ffffff !important;
	border-color: #e5e7eb !important; /* gray-200 */
}
html:not(.hc) #todo-modal #todo-list .card:hover {
	background: #fafafa !important;
}
html:not(.hc) #todo-modal #todo-list .card h4 {
	color: #111111 !important;
}
html:not(.hc) #todo-modal #todo-list .card p {
	color: #4b5563 !important; /* gray-600 */
}

/* Ghost icon buttons: improve visibility in light mode */
html:not(.hc) #todo-modal #todo-list .btn-ghost {
	color: #6b7280 !important; /* gray-500 text for button label */
	border-color: transparent !important;
}
html:not(.hc) #todo-modal #todo-list .btn-ghost:hover {
	background: #f3f4f6 !important; /* gray-100 */
}

/* Lighten only the SVG icons inside ghost buttons for better contrast */
html:not(.hc) #todo-modal #todo-list .btn-ghost svg {
	color: #9ca3af !important; /* gray-400 for icons */
	stroke: #9ca3af !important;
}
html:not(.hc) #todo-modal #todo-list .btn-ghost:hover svg {
	color: #6b7280 !important; /* gray-500 on hover */
	stroke: #6b7280 !important;
}

/* Outline badge in headers: softer border, readable text */
html:not(.hc) #todo-modal #todo-list .badge-outline {
	border-color: #d1d5db !important; /* gray-300 */
	color: #3a3a3a !important; /* gray-700 */
}

/* Responsive badge improvements for small screens */
@media (max-width: 640px) {
	/* Performance indicator badges - better mobile display */
	.badge {
		font-size: 0.75rem !important; /* text-xs */
		padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
		line-height: 1.2 !important;
		white-space: nowrap !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 0.25rem !important; /* gap-1 */
	}
	
	/* Performance indicator container - better mobile layout */
	.mt-3.flex.items-center.gap-2 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important; /* gap-2 */
	}
	
	/* Performance indicator text - smaller on mobile */
	.text-xs.text-gray-500 {
		font-size: 0.625rem !important; /* text-xs */
		line-height: 1.2 !important;
	}
	
	/* SVG icons in badges - smaller on mobile */
	.badge svg {
		width: 0.75rem !important; /* w-3 */
		height: 0.75rem !important; /* h-3 */
		flex-shrink: 0 !important;
	}
}

/* Extra small screens - further optimizations */
@media (max-width: 480px) {
	/* Even smaller badges for very small screens */
	.badge {
		font-size: 0.625rem !important; /* text-xs */
		padding: 0.125rem 0.375rem !important; /* px-1.5 py-0.5 */
	}
	
	/* Smaller SVG icons */
	.badge svg {
		width: 0.625rem !important; /* w-2.5 */
		height: 0.625rem !important; /* h-2.5 */
	}
	
	/* Performance indicator text - even smaller */
	.text-xs.text-gray-500 {
		font-size: 0.5rem !important; /* text-xs */
	}
}

/* High contrast mode responsive adjustments */
@media (max-width: 640px) {
	.hc .badge {
		font-size: 0.75rem !important;
		padding: 0.25rem 0.5rem !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 0.25rem !important;
	}
	
	.hc .badge svg {
		width: 0.75rem !important;
		height: 0.75rem !important;
		flex-shrink: 0 !important;
	}
}

@media (max-width: 480px) {
	.hc .badge {
		font-size: 0.625rem !important;
		padding: 0.125rem 0.375rem !important;
	}
	
	.hc .badge svg {
		width: 0.625rem !important;
		height: 0.625rem !important;
	}
}

/* Full width client search input group */
.input-group.w-full {
	width: 100% !important;
	display: flex !important;
}

.input-group.w-full .input {
	flex: 1 !important;
	min-width: 0 !important;
}

.input-group.w-full .btn {
	flex-shrink: 0 !important;
}

/* Product analysis card responsiveness */
@media (max-width: 640px) {
	/* Product cards - better mobile layout */
	.card[data-product-id] .card-body {
		padding: 0.75rem !important; /* p-3 */
	}
	
	/* Product title and badge container - keep them together */
	.card[data-product-id] .flex.items-center.gap-2 {
		flex-wrap: wrap !important;
		gap: 0.5rem !important; /* gap-2 */
	}
	
	/* Product title - smaller on mobile */
	.card[data-product-id] h3 {
		font-size: 1rem !important; /* text-base */
		line-height: 1.4 !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	
	/* Product badges - smaller text and icons on mobile, but keep beside title */
	.card[data-product-id] .badge {
		font-size: 0.625rem !important; /* text-xs */
		padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
		line-height: 1.2 !important;
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}
	
	.card[data-product-id] .badge svg {
		width: 0.75rem !important; /* w-3 */
		height: 0.75rem !important; /* h-3 */
	}
	
	/* Product buttons - full width on mobile */
	.card[data-product-id] .btn {
		width: 100% !important;
		justify-content: center !important;
		font-size: 0.75rem !important; /* text-xs */
		padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
	}
	
	.card[data-product-id] .btn svg {
		width: 1rem !important; /* w-4 */
		height: 1rem !important; /* h-4 */
	}
}

/* Extra small screens - further optimizations */
@media (max-width: 480px) {
	/* Even smaller product cards */
	.card[data-product-id] .card-body {
		padding: 0.5rem !important; /* p-2 */
	}
	
	/* Title and badge container - keep them together even on very small screens */
	.card[data-product-id] .flex.items-center.gap-2 {
		gap: 0.375rem !important; /* gap-1.5 */
	}
	
	/* Smaller product titles */
	.card[data-product-id] h3 {
		font-size: 0.875rem !important; /* text-sm */
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	
	/* Smaller badges but keep beside title */
	.card[data-product-id] .badge {
		font-size: 0.5rem !important; /* text-xs */
		padding: 0.125rem 0.375rem !important; /* px-1.5 py-0.5 */
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}
	
	.card[data-product-id] .badge svg {
		width: 0.625rem !important; /* w-2.5 */
		height: 0.625rem !important; /* h-2.5 */
	}
	
	/* Smaller buttons */
	.card[data-product-id] .btn {
		font-size: 0.625rem !important; /* text-xs */
		padding: 0.375rem 0.5rem !important; /* px-2 py-1.5 */
	}
	
	.card[data-product-id] .btn svg {
		width: 0.875rem !important; /* w-3.5 */
		height: 0.875rem !important; /* h-3.5 */
	}
}

/* High contrast mode responsive adjustments for product cards */
@media (max-width: 640px) {
	.hc .card[data-product-id] .badge {
		font-size: 0.625rem !important;
		padding: 0.25rem 0.5rem !important;
		line-height: 1.2 !important;
	}
	
	.hc .card[data-product-id] .btn {
		width: 100% !important;
		justify-content: center !important;
		font-size: 0.75rem !important;
		padding: 0.5rem 0.75rem !important;
	}
}

@media (max-width: 480px) {
	.hc .card[data-product-id] .badge {
		font-size: 0.5rem !important;
		padding: 0.125rem 0.375rem !important;
	}
	
	.hc .card[data-product-id] .btn {
		font-size: 0.625rem !important;
		padding: 0.375rem 0.5rem !important;
	}
}

/* Seat management responsiveness improvements */
@media (max-width: 640px) {
	/* Seat management buttons - better mobile layout */
	#seat-management-message + div .flex.flex-col.sm\\:flex-row {
		flex-direction: column !important;
		gap: 0.75rem !important; /* gap-3 */
	}
	
	/* Seat management buttons - full width on mobile */
	#add-seat-btn,
	#remove-seat-btn,
	#set-seats-btn {
		width: 100% !important;
		justify-content: center !important;
		font-size: 0.875rem !important; /* text-sm */
		padding: 0.75rem 1rem !important; /* px-4 py-3 */
	}
	
	/* Seat usage indicator - better mobile layout */
	.flex.flex-col.sm\\:flex-row .flex-1 {
		min-width: 0 !important;
	}
	
	/* Subscription status grid - better mobile layout */
	.grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4 {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
		gap: 1rem !important; /* gap-4 */
	}
	
	/* Stat cards - better mobile spacing */
	.stat {
		padding: 1rem !important; /* p-4 */
		text-align: center !important;
	}
	
	.stat-title {
		font-size: 0.75rem !important; /* text-xs */
		margin-bottom: 0.5rem !important;
	}
	
	.stat-value {
		font-size: 1.5rem !important; /* text-2xl */
		line-height: 1.2 !important;
	}
}

/* Extra small screens - further optimizations */
@media (max-width: 480px) {
	/* Even smaller buttons */
	#add-seat-btn,
	#remove-seat-btn,
	#set-seats-btn {
		font-size: 0.75rem !important; /* text-xs */
		padding: 0.625rem 0.875rem !important; /* px-3.5 py-2.5 */
	}
	
	/* Smaller stat cards */
	.stat {
		padding: 0.75rem !important; /* p-3 */
	}
	
	.stat-value {
		font-size: 1.25rem !important; /* text-xl */
	}
	
	/* Seat usage indicator - compact on very small screens */
	.flex.flex-col.sm\\:flex-row .flex-1 .flex-1 {
		height: 0.375rem !important; /* h-1.5 */
	}
}

/* High contrast mode responsive adjustments for seat management */
@media (max-width: 640px) {
	.hc #add-seat-btn,
	.hc #remove-seat-btn,
	.hc #set-seats-btn {
		width: 100% !important;
		justify-content: center !important;
		font-size: 0.875rem !important;
		padding: 0.75rem 1rem !important;
	}
}

@media (max-width: 480px) {
	.hc #add-seat-btn,
	.hc #remove-seat-btn,
	.hc #set-seats-btn {
		font-size: 0.75rem !important;
		padding: 0.625rem 0.875rem !important;
	}
}

/* Mobile-specific modal close button styling */
@media (max-width: 768px) {
	/* Hide close button text on mobile, show only X icon */
	.modal-close-mobile button {
		/* Hide text content after SVG in close buttons */
		font-size: 0 !important;
		line-height: 0 !important;
	}
	
	.modal-close-mobile button svg {
		font-size: 1rem !important;
		line-height: 1 !important;
		display: inline-block !important;
	}
}

/* Table configuration text color fixes for dark mode */
.hc .label-text,
.hc .label-text span,
.hc .label-text:where(span) {
	color: #fff !important;
}

/* Fix for "Colunas" text in table settings - targets the paragraph with text-base-content/70 */
.hc .modal-box p.text-base-content\/70,
.hc .modal-box p.text-base-content\/70:where(p),
.hc .modal-box p[class*="text-base-content"] {
	color: #fff !important;
}

/* General label text in high contrast mode */
.hc .label-text {
	color: #fff !important;
}

/* Table settings modal text color fixes */
.hc .modal-box .label-text,
.hc .modal-box .label-text span,
.hc .modal-box .label-text:where(span) {
	color: #fff !important;
}

/* Checkbox labels in table settings */
.hc .label.cursor-pointer .label-text,
.hc .label.cursor-pointer .label-text span {
	color: #fff !important;
}

/* Ensure all text in table configuration appears white in dark mode */
.hc .modal-box [class*="label-text"],
.hc .modal-box [class*="label-text"] span,
.hc .modal-box [class*="label-text"]:where(span) {
	color: #fff !important;
}

/* Specific fix for table settings paragraph text */
.hc .modal-box p.text-sm.text-base-content\/70 {
	color: #fff !important;
}

/* Checkbox lines color fixes for dark mode */
.hc .modal-box .checkbox,
.hc .modal-box .checkbox:checked,
.hc .modal-box .checkbox:focus,
.hc .modal-box .checkbox:hover {
	border-color: #fff !important;
	background-color: transparent !important;
}

.hc .modal-box .checkbox:checked {
	background-color: #fff !important;
	border-color: #fff !important;
}

.hc .modal-box .checkbox:checked::after {
	border-color: #000 !important;
}

/* Checkbox labels and text in table settings */
.hc .modal-box .label.cursor-pointer,
.hc .modal-box .label.cursor-pointer .label-text,
.hc .modal-box .label.cursor-pointer .label-text span {
	color: #fff !important;
}

/* Ensure checkbox container has proper contrast */
.hc .modal-box .label.cursor-pointer {
	border-color: rgba(255,255,255,0.2) !important;
}

/* Fix for Data Scope and Time Period labels in dark mode */
.hc .label-text.font-semibold.text-gray-700 {
	color: #fff !important;
}

/* Enhanced visibility for profile page labels in dark mode */
.hc .form-control .label-text,
.hc .form-control .label-text.font-medium,
.hc .form-control .label-text span {
	color: #fff !important;
	font-weight: 500 !important;
}

/* More specific rules for profile page labels in dark mode */
.hc .card .form-control .label-text,
.hc .card .form-control .label-text.font-medium,
.hc .card .form-control .label-text span,
.hc .card .form-control .label-text:where(span) {
	color: #fff !important;
	font-weight: 500 !important;
}

/* Override any DaisyUI base-content classes for labels in dark mode */
.hc .form-control .label-text[class*="text-base-content"],
.hc .form-control .label-text[class*="text-gray"],
.hc .form-control .label-text[class*="text-neutral"] {
	color: #fff !important;
}

/* Force visibility for all label text in dark mode - highest specificity */
.hc .label .label-text,
.hc .label .label-text.font-medium,
.hc .label .label-text span,
.hc .label .label-text:where(span),
.hc .form-control .label .label-text,
.hc .form-control .label .label-text.font-medium,
.hc .form-control .label .label-text span,
.hc .form-control .label .label-text:where(span) {
	color: #ffffff !important;
	font-weight: 500 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Nuclear option - force ALL spans with label-text class to be white in dark mode */
.hc span.label-text,
.hc span.label-text.font-medium,
.hc label span.label-text,
.hc label span.label-text.font-medium,
.hc .form-control span.label-text,
.hc .form-control span.label-text.font-medium {
	color: #ffffff !important;
	font-weight: 500 !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: inline !important;
}

/* Override the invert filter for label text specifically */
.hc span.label-text,
.hc span.label-text.font-medium {
	filter: invert(1) hue-rotate(180deg) !important;
	color: #000000 !important;
}

/* Pagination controls layout fixes for Portuguese translations */
.flex.flex-wrap.items-start.sm\\:items-center.gap-2.sm\\:justify-between.mt-2 {
	gap: 0.5rem !important; /* Reduced gap for more compact layout */
}

.join.flex.flex-wrap {
	gap: 0.125rem !important; /* Reduced gap between pagination buttons */
}

/* Pagination button adjustments for longer text */
.btn.btn-xs.join-item {
	min-width: 1.75rem !important; /* Reduced minimum width for buttons */
	padding: 0.25rem 0.375rem !important; /* Smaller padding for more compact buttons */
	white-space: nowrap !important; /* Prevent text wrapping */
	font-size: 0.75rem !important; /* Smaller font size */
	height: 1.75rem !important; /* Fixed smaller height */
}

/* Page size selector adjustments */
.select.select-bordered.select-xs.w-auto {
	min-width: 4.5rem !important; /* Increased width to accommodate "100" */
	height: 1.75rem !important; /* Match button height */
	font-size: 0.75rem !important; /* Smaller font size */
	padding: 0.25rem 0.5rem !important; /* Slightly more padding for better fit */
}

/* Pagination info text adjustments */
.text-xs.text-base-content\/60 {
	white-space: nowrap !important; /* Prevent info text from wrapping */
	font-size: 0.6875rem !important; /* Smaller font size (11px) */
	line-height: 1.2 !important; /* Tighter line height */
}

/* Mobile adjustments for pagination controls */
@media (max-width: 640px) {
	.flex.flex-wrap.items-start.sm\\:items-center.gap-2.sm\\:justify-between.mt-2 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.375rem !important; /* Reduced gap for mobile */
	}
	
	.join.flex.flex-wrap {
		justify-content: center !important;
		width: 100% !important;
		gap: 0.125rem !important; /* Reduced gap for mobile */
	}
	
	.btn.btn-xs.join-item {
		flex: 1 !important;
		min-width: 1.5rem !important; /* Smaller minimum width for mobile */
		text-align: center !important;
		height: 1.5rem !important; /* Smaller height for mobile */
		padding: 0.1875rem 0.25rem !important; /* Smaller padding for mobile */
		font-size: 0.6875rem !important; /* Smaller font for mobile */
	}
	
	.select.select-bordered.select-xs.w-auto {
		min-width: 4rem !important; /* Adequate width for mobile to show "100" */
		height: 1.5rem !important; /* Match mobile button height */
		font-size: 0.6875rem !important; /* Smaller font for mobile */
		padding: 0.1875rem 0.375rem !important; /* Slightly more padding for better fit */
	}
}

/* Override DaisyUI lofi theme colors to use custom #3a3a3a instead of #374151 */
[data-theme="lofi"] .bg-gray-700 {
	background-color: #3a3a3a !important;
}

[data-theme="lofi"] .text-gray-700 {
	color: #3a3a3a !important;
}

[data-theme="lofi"] .border-gray-700 {
	border-color: #3a3a3a !important;
}

/* Override other gray shades to maintain consistency */
[data-theme="lofi"] .bg-gray-600 {
	background-color: #4a4a4a !important;
}

[data-theme="lofi"] .text-gray-600 {
	color: #4a4a4a !important;
}

[data-theme="lofi"] .border-gray-600 {
	border-color: #4a4a4a !important;
}

[data-theme="lofi"] .bg-gray-800 {
	background-color: #2a2a2a !important;
}

[data-theme="lofi"] .text-gray-800 {
	color: #2a2a2a !important;
}

[data-theme="lofi"] .border-gray-800 {
	border-color: #2a2a2a !important;
}

/* Dark Vader Pixel Art Animation */
.pixel-art-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 250px;
	background: #aaa;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.film {
	width: 98px;
	height: 120px;
	display: flex;
	position: relative;
	background: linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,#0000 0 40px,#0000 0 44px,#0000 0 48px,#0000 0 52px,#0000 0 56px,#0000 0 60px,#0000 0 64px,#0000 0 68px,#0000 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 0px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,#0000 0 40px,#0000 0 44px,rgba(0, 0, 0, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(0, 0, 0, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(28, 28, 28, 1) 0 64px,#0000 0 68px,#0000 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 4px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,#0000 0 40px,rgba(0, 0, 0, 1) 0 44px,rgba(190, 190, 190, 1) 0 48px,rgba(87, 87, 87, 1) 0 52px,rgba(56, 56, 56, 1) 0 56px,rgba(67, 67, 67, 1) 0 60px,rgba(137, 137, 137, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,#0000 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 8px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(190, 190, 190, 1) 0 44px,rgba(87, 87, 87, 1) 0 48px,rgba(56, 56, 56, 1) 0 52px,rgba(67, 67, 67, 1) 0 56px,rgba(67, 67, 67, 1) 0 60px,rgba(67, 67, 67, 1) 0 64px,rgba(137, 137, 137, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 12px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(67, 67, 67, 1) 0 44px,rgba(87, 87, 87, 1) 0 48px,rgba(56, 56, 56, 1) 0 52px,rgba(67, 67, 67, 1) 0 56px,rgba(67, 67, 67, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(137, 137, 137, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 16px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(107, 107, 107, 1) 0 44px,rgba(87, 87, 87, 1) 0 48px,rgba(107, 107, 107, 1) 0 52px,rgba(107, 107, 107, 1) 0 56px,rgba(40, 40, 40, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(40, 40, 40, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 20px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(40, 40, 40, 1) 0 44px,rgba(105, 105, 105, 1) 0 48px,rgba(40, 40, 40, 1) 0 52px,rgba(0, 0, 0, 1) 0 56px,rgba(107, 107, 107, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(40, 40, 40, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 24px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(87, 87, 87, 1) 0 40px,rgba(137, 137, 137, 1) 0 44px,rgba(48, 48, 48, 1) 0 48px,rgba(87, 87, 87, 1) 0 52px,rgba(137, 137, 137, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(107, 107, 107, 1) 0 64px,rgba(67, 67, 67, 1) 0 68px,rgba(67, 67, 67, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 28px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(48, 48, 48, 1) 0 40px,rgba(48, 48, 48, 1) 0 44px,rgba(190, 190, 190, 1) 0 48px,rgba(48, 48, 48, 1) 0 52px,rgba(48, 48, 48, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(107, 107, 107, 1) 0 64px,rgba(67, 67, 67, 1) 0 68px,rgba(67, 67, 67, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 32px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(48, 48, 48, 1) 0 40px,rgba(83, 83, 83, 1) 0 44px,rgba(134, 134, 134, 1) 0 48px,rgba(83, 83, 83, 1) 0 52px,rgba(48, 48, 48, 1) 0 56px,rgba(40, 40, 40, 1) 0 60px,rgba(0, 0, 0, 1) 0 64px,rgba(107, 107, 107, 1) 0 68px,rgba(67, 67, 67, 1) 0 72px,rgba(67, 67, 67, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 36px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(190, 190, 190, 1) 0 40px,rgba(92, 92, 92, 1) 0 44px,rgba(134, 134, 134, 1) 0 48px,rgba(92, 92, 92, 1) 0 52px,rgba(190, 190, 190, 1) 0 56px,rgba(48, 48, 48, 1) 0 60px,rgba(0, 0, 0, 1) 0 64px,rgba(107, 107, 107, 1) 0 68px,rgba(67, 67, 67, 1) 0 72px,rgba(67, 67, 67, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 40px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,rgba(0, 0, 0, 1) 0 4px,rgba(0, 0, 0, 1) 0 8px,#0000 0 12px,#0000 0 16px,rgba(0, 0, 0, 1) 0 20px,rgba(0, 0, 0, 1) 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(0, 0, 0, 1) 0 44px,rgba(0, 0, 0, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(0, 0, 0, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(0, 0, 0, 1) 0 64px,rgba(67, 67, 67, 1) 0 68px,rgba(67, 67, 67, 1) 0 72px,rgba(67, 67, 67, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 44px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,rgba(0, 0, 0, 1) 0 4px,rgba(119, 119, 119, 1) 0 8px,rgba(0, 0, 0, 1) 0 12px,rgba(0, 0, 0, 1) 0 16px,rgba(119, 119, 119, 1) 0 20px,rgba(84, 84, 84, 1) 0 24px,rgba(0, 0, 0, 1) 0 28px,#0000 0 32px,#0000 0 36px,#0000 0 40px,rgba(0, 0, 0, 1) 0 44px,rgba(92, 92, 92, 1) 0 48px,rgba(40, 40, 40, 1) 0 52px,rgba(40, 40, 40, 1) 0 56px,rgba(40, 40, 40, 1) 0 60px,rgba(0, 0, 0, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 48px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,rgba(0, 0, 0, 1) 0 4px,rgba(84, 84, 84, 1) 0 8px,rgba(60, 60, 60, 1) 0 12px,rgba(84, 84, 84, 1) 0 16px,rgba(0, 0, 0, 1) 0 20px,rgba(84, 84, 84, 1) 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(0, 0, 0, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(67, 67, 67, 1) 0 44px,rgba(67, 67, 67, 1) 0 48px,rgba(92, 92, 92, 1) 0 52px,rgba(67, 67, 67, 1) 0 56px,rgba(92, 92, 92, 1) 0 60px,rgba(67, 67, 67, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(82, 82, 82, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 52px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,rgba(0, 0, 0, 1) 0 4px,rgba(119, 119, 119, 1) 0 8px,rgba(60, 60, 60, 1) 0 12px,rgba(84, 84, 84, 1) 0 16px,rgba(0, 0, 0, 1) 0 20px,rgba(84, 84, 84, 1) 0 24px,rgba(38, 38, 38, 1) 0 28px,rgba(60, 60, 60, 1) 0 32px,rgba(107, 107, 107, 1) 0 36px,rgba(67, 67, 67, 1) 0 40px,rgba(137, 137, 137, 1) 0 44px,rgba(67, 67, 67, 1) 0 48px,rgba(137, 137, 137, 1) 0 52px,rgba(67, 67, 67, 1) 0 56px,rgba(137, 137, 137, 1) 0 60px,rgba(67, 67, 67, 1) 0 64px,rgba(107, 107, 107, 1) 0 68px,rgba(67, 67, 67, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,rgba(82, 82, 82, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 56px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,rgba(0, 0, 0, 1) 0 4px,rgba(60, 60, 60, 1) 0 8px,rgba(84, 84, 84, 1) 0 12px,rgba(84, 84, 84, 1) 0 16px,rgba(60, 60, 60, 1) 0 20px,rgba(60, 60, 60, 1) 0 24px,rgba(38, 38, 38, 1) 0 28px,rgba(60, 60, 60, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(40, 40, 40, 1) 0 40px,rgba(107, 107, 107, 1) 0 44px,rgba(67, 67, 67, 1) 0 48px,rgba(107, 107, 107, 1) 0 52px,rgba(67, 67, 67, 1) 0 56px,rgba(107, 107, 107, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(40, 40, 40, 1) 0 68px,rgba(40, 40, 40, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,rgba(82, 82, 82, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 60px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,rgba(0, 0, 0, 1) 0 8px,rgba(0, 0, 0, 1) 0 12px,rgba(0, 0, 0, 1) 0 16px,rgba(0, 0, 0, 1) 0 20px,rgba(38, 38, 38, 1) 0 24px,rgba(38, 38, 38, 1) 0 28px,rgba(38, 38, 38, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(40, 40, 40, 1) 0 40px,rgba(40, 40, 40, 1) 0 44px,rgba(134, 134, 134, 1) 0 48px,rgba(134, 134, 134, 1) 0 52px,rgba(86, 80, 144, 1) 0 56px,rgba(67, 67, 67, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(40, 40, 40, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,rgba(82, 82, 82, 1) 0 80px,rgba(82, 82, 82, 1) 0 84px,rgba(0, 0, 0, 1) 0 88px,#0000 0 92px,#0000 0 96px) 0 64px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,rgba(0, 0, 0, 1) 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(0, 0, 0, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(40, 40, 40, 1) 0 44px,rgba(119, 119, 119, 1) 0 48px,rgba(68, 68, 68, 1) 0 52px,rgba(183, 94, 56, 1) 0 56px,rgba(67, 67, 67, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(40, 40, 40, 1) 0 72px,rgba(40, 40, 40, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,rgba(82, 82, 82, 1) 0 84px,rgba(0, 0, 0, 1) 0 88px,#0000 0 92px,#0000 0 96px) 0 68px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(0, 0, 0, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(40, 40, 40, 1) 0 44px,rgba(134, 134, 134, 1) 0 48px,rgba(134, 134, 134, 1) 0 52px,rgba(119, 119, 119, 1) 0 56px,rgba(67, 67, 67, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(40, 40, 40, 1) 0 72px,rgba(40, 40, 40, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,rgba(82, 82, 82, 1) 0 84px,rgba(0, 0, 0, 1) 0 88px,#0000 0 92px,#0000 0 96px) 0 72px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(38, 38, 38, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(40, 40, 40, 1) 0 44px,rgba(40, 40, 40, 1) 0 48px,rgba(40, 40, 40, 1) 0 52px,rgba(40, 40, 40, 1) 0 56px,rgba(40, 40, 40, 1) 0 60px,rgba(40, 40, 40, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(119, 119, 119, 1) 0 72px,rgba(84, 84, 84, 1) 0 76px,rgba(60, 60, 60, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(0, 0, 0, 1) 0 92px,#0000 0 96px) 0 76px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(0, 0, 0, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(158, 158, 158, 1) 0 44px,rgba(68, 68, 68, 1) 0 48px,rgba(190, 190, 190, 1) 0 52px,rgba(68, 68, 68, 1) 0 56px,rgba(158, 158, 158, 1) 0 60px,rgba(0, 0, 0, 1) 0 64px,rgba(119, 119, 119, 1) 0 68px,rgba(84, 84, 84, 1) 0 72px,rgba(84, 84, 84, 1) 0 76px,rgba(60, 60, 60, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(0, 0, 0, 1) 0 92px,#0000 0 96px) 0 80px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(38, 38, 38, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(40, 40, 40, 1) 0 44px,rgba(40, 40, 40, 1) 0 48px,rgba(40, 40, 40, 1) 0 52px,rgba(40, 40, 40, 1) 0 56px,rgba(40, 40, 40, 1) 0 60px,rgba(0, 0, 0, 1) 0 64px,rgba(84, 84, 84, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(84, 84, 84, 1) 0 76px,rgba(60, 60, 60, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(0, 0, 0, 1) 0 92px,#0000 0 96px) 0 84px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(0, 0, 0, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(28, 28, 28, 1) 0 44px,rgba(40, 40, 40, 1) 0 48px,rgba(68, 68, 68, 1) 0 52px,rgba(40, 40, 40, 1) 0 56px,rgba(28, 28, 28, 1) 0 60px,rgba(103, 103, 103, 1) 0 64px,rgba(0, 0, 0, 1) 0 68px,rgba(38, 38, 38, 1) 0 72px,rgba(38, 38, 38, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(0, 0, 0, 1) 0 92px,#0000 0 96px) 0 88px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(38, 38, 38, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(68, 68, 68, 1) 0 44px,rgba(28, 28, 28, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(28, 28, 28, 1) 0 56px,rgba(68, 68, 68, 1) 0 60px,rgba(68, 68, 68, 1) 0 64px,rgba(68, 68, 68, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,rgba(38, 38, 38, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(0, 0, 0, 1) 0 92px,#0000 0 96px) 0 92px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(38, 38, 38, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(68, 68, 68, 1) 0 44px,rgba(68, 68, 68, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(38, 38, 38, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(68, 68, 68, 1) 0 64px,rgba(68, 68, 68, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(38, 38, 38, 1) 0 76px,rgba(38, 38, 38, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(82, 82, 82, 1) 0 92px,rgba(0, 0, 0, 1) 0 96px) 0 96px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(0, 0, 0, 1) 0 28px,rgba(38, 38, 38, 1) 0 32px,rgba(38, 38, 38, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(119, 119, 119, 1) 0 44px,rgba(68, 68, 68, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(38, 38, 38, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(68, 68, 68, 1) 0 64px,rgba(119, 119, 119, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(38, 38, 38, 1) 0 76px,rgba(38, 38, 38, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(82, 82, 82, 1) 0 92px,rgba(0, 0, 0, 1) 0 96px) 0 100px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,rgba(0, 0, 0, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(103, 103, 103, 1) 0 44px,rgba(68, 68, 68, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(0, 0, 0, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(68, 68, 68, 1) 0 64px,rgba(103, 103, 103, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,rgba(0, 0, 0, 1) 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(82, 82, 82, 1) 0 88px,rgba(82, 82, 82, 1) 0 92px,rgba(0, 0, 0, 1) 0 96px) 0 104px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(68, 68, 68, 1) 0 44px,rgba(38, 38, 38, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,#0000 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(38, 38, 38, 1) 0 64px,rgba(68, 68, 68, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,#0000 0 76px,#0000 0 80px,rgba(0, 0, 0, 1) 0 84px,rgba(0, 0, 0, 1) 0 88px,rgba(0, 0, 0, 1) 0 92px,#0000 0 96px) 0 108px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,#0000 0 28px,#0000 0 32px,#0000 0 36px,rgba(0, 0, 0, 1) 0 40px,rgba(68, 68, 68, 1) 0 44px,rgba(38, 38, 38, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,#0000 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(38, 38, 38, 1) 0 64px,rgba(68, 68, 68, 1) 0 68px,rgba(0, 0, 0, 1) 0 72px,#0000 0 76px,#0000 0 80px,#0000 0 84px,#0000 0 88px,#0000 0 92px,#0000 0 96px) 0 112px/100% 4px no-repeat,linear-gradient(90deg,#0000 0 0px,#0000 0 4px,#0000 0 8px,#0000 0 12px,#0000 0 16px,#0000 0 20px,#0000 0 24px,rgba(157, 157, 157, 1) 0 28px,rgba(157, 157, 157, 1) 0 32px,rgba(0, 0, 0, 1) 0 36px,rgba(68, 68, 68, 1) 0 40px,rgba(38, 38, 38, 1) 0 44px,rgba(38, 38, 38, 1) 0 48px,rgba(0, 0, 0, 1) 0 52px,rgba(157, 157, 157, 1) 0 56px,rgba(0, 0, 0, 1) 0 60px,rgba(38, 38, 38, 1) 0 64px,rgba(38, 38, 38, 1) 0 68px,rgba(68, 68, 68, 1) 0 72px,rgba(0, 0, 0, 1) 0 76px,rgba(157, 157, 157, 1) 0 80px,rgba(157, 157, 157, 1) 0 84px,rgba(157, 157, 157, 1) 0 88px,#0000 0 92px,#0000 0 96px) 0 116px/100% 4px no-repeat,#0000;
}

.film:before {
	content: "";
	flex: 1;
	animation: dv-0 12s linear infinite;
}

.film::after {
	content: "  ";
	line-height: 30px;
	font-size: 8px;
	white-space: pre;
	font-family: monospace;
	font-weight: bold;
	text-align: center;
	position: absolute;
	bottom: 90%;
	right: 70%;
	padding-bottom: 20px;
	background: #000;
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px));
}