@charset "UTF-8";
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Variables & Theme Configuration */
/**
 * @name Breakpoint Variables
 * @group variables
 * @type Breakpoint
 * @description
 * Breakpoint values for responsive design.
 * @example scss
 *   @include retro-breakpoint(sm) { ... }
 */
/* Breakpoints */
/**
 * @name Color Variables
 * @group variables
 * @type Color
 * @description
 * Core color palette for RetroCSS. Use these variables for consistent theming.
 * 
 * To customize the color theme, you can override these variables in your own stylesheet:
 * ```scss
 * :root {
 *   --retro-primary: #1e88e5;    // Change primary color
 *   --retro-primary-rgb: 30, 136, 229;  // Also update RGB values
 *   --retro-success: #43a047;    // Change success color
 *   --retro-danger: #e53935;     // Change danger color
 *   --retro-body-bg: #d4d4d4;    // Change background color
 * }
 * ```
 * 
 * For dark mode customization, override the [data-theme="dark"] section:
 * ```scss
 * [data-theme="dark"] {
 *   --retro-body-bg: #121212;    // Dark mode background
 *   --retro-bg: #1e1e1e;         // Dark mode surface
 *   --retro-primary: #64b5f6;    // Dark mode primary color
 *   // ... other overrides
 * }
 * ```
 * 
 * @example scss
 *   color: $retro-primary;
 */
/* Colors */
/**
 * @name Typography Variables
 * @group variables
 * @type Font
 * @description
 * Font family, size, and line height for RetroCSS.
 * @example scss
 *   font-family: $retro-font;
 */
/* Typography */
/**
 * @name Spacing Variables
 * @group variables
 * @type Spacing
 * @description
 * Spacing scale for margins and paddings.
 * @example scss
 *   margin-bottom: $retro-spacing-md;
 */
/* Spacing */
/**
 * @name Border Variables
 * @group variables
 * @type Border
 * @description
 * Border width, style, radius for RetroCSS components.
 * @example scss
 *   border-radius: $retro-border-radius;
 */
/* Borders */
/**
 * @name Shadow Variables
 * @group variables
 * @type Shadow
 * @description
 * Shadow styles for raised and sunken effects.
 * @example scss
 *   box-shadow: $retro-border-raised;
 */
/* Shadows */
/**
 * @name Z-index Variables
 * @group variables
 * @type Z-index
 * @description
 * Z-index values for layering elements.
 * @example scss
 *   z-index: $retro-z-index-dropdown;
 */
/* Z-index */
/**
 * @name Transition Variables
 * @group variables
 * @type Transition
 * @description
 * Transition timing values for animations.
 * @example scss
 *   transition: all $retro-transition-duration $retro-transition-timing-function;
 */
/* Transitions */
/**
 * @name Screen Size Variables
 * @group variables
 * @type Screen
 * @description
 * Screen size values for viewports.
 * @example scss
 *   @media (min-width: $retro-screen-sm) { ... }
 */
/* Screen Sizes (Viewport) */
/**
 * @name Container Variables
 * @group variables
 * @type Container
 * @description
 * Container width values for layouts.
 * @example scss
 *   max-width: $retro-container-lg;
 */
/* Container Sizes */
/* CSS Custom Properties */
:root {
  --retro-body-bg: #c0c0c0; /* Fallback for IE11 */
  --retro-body-bg-dark: #3a3a3a; /* Fallback for IE11 */
  --retro-bg: #ffffff; /* Fallback for IE11 */
  --retro-primary: #000080; /* Fallback for IE11 */
  --retro-primary-rgb: 0, 0, 128; /* Fallback for IE11 */
  --retro-light: #f0f0f0; /* Fallback for IE11 */
  --retro-white: #ffffff; /* Fallback for IE11 */
  --retro-black: #000000; /* Fallback for IE11 */
  --retro-color-primary: #000080;
  --retro-color-success: #008000;
  --retro-color-danger: #ff0000;
  --retro-color-warning: #ffa500;
  --retro-color-info: #00ffff;
  --retro-color-teal: #008080;
  --retro-color-pink: #ff69b4;
  --retro-color-lime: #32cd32;
  --retro-border-light: #ffffff; /* Fallback for IE11 */
  --retro-border-medium: #808080; /* Fallback for IE11 */
  --retro-border-dark: #000000; /* Fallback for IE11 */
  --retro-success: #008000; /* Fallback for IE11 */
  --retro-success-rgb: 0, 128, 0; /* Fallback for IE11 */
  --retro-warning: #ffa500; /* Fallback for IE11 */
  --retro-warning-rgb: 255, 165, 0; /* Fallback for IE11 */
  --retro-danger: #ff0000; /* Fallback for IE11 */
  --retro-danger-rgb: 255, 0, 0; /* Fallback for IE11 */
  --retro-info: #00ffff; /* Fallback for IE11 */
  --retro-info-rgb: 0, 255, 255; /* Fallback for IE11 */
  --retro-teal: #008080; /* Fallback for IE11 */
  --retro-teal-rgb: 0, 128, 128; /* Fallback for IE11 */
  --retro-tan: #d2b48c; /* Fallback for IE11 */
  --retro-pink: #ff69b4; /* Fallback for IE11 */
  --retro-pink-rgb: 255, 105, 180; /* Fallback for IE11 */
  --retro-lime: #32cd32; /* Fallback for IE11 */
  --retro-lime-rgb: 50, 205, 50; /* Fallback for IE11 */
  --retro-cyan: #00e5ee; /* Fallback for IE11 */
  --retro-cyan-rgb: 0, 229, 238; /* Fallback for IE11 */
  --retro-orange: #ffb347; /* Fallback for IE11 */
  --retro-orange-rgb: 255, 179, 71; /* Fallback for IE11 */
  --retro-brown: #8b5c2a; /* Fallback for IE11 */
  --retro-brown-rgb: 139, 92, 42; /* Fallback for IE11 */
  --retro-violet: #7c3aed; /* Fallback for IE11 */
  --retro-violet-rgb: 124, 58, 237; /* Fallback for IE11 */
  --retro-gray: #b0b0b0; /* Fallback for IE11 */
  --retro-gray-rgb: 176, 176, 176; /* Fallback for IE11 */
  --retro-maroon: #800000; /* Fallback for IE11 */
  --retro-maroon-rgb: 128, 0, 0; /* Fallback for IE11 */
  --retro-gold: #ffd700; /* Fallback for IE11 */
  --retro-gold-rgb: 255, 215, 0; /* Fallback for IE11 */
  --retro-navy: #001f4f; /* Fallback for IE11 */
  --retro-navy-rgb: 0, 31, 79; /* Fallback for IE11 */
  --retro-olive: #808000; /* Fallback for IE11 */
  --retro-olive-rgb: 128, 128, 0; /* Fallback for IE11 */
  --retro-silver: #c0c0c0; /* Fallback for IE11 */
  --retro-silver-rgb: 192, 192, 192; /* Fallback for IE11 */
  --retro-black-rgb: 0, 0, 0; /* Fallback for IE11 */
  --retro-white-rgb: 255, 255, 255; /* Fallback for IE11 */
  --retro-light-rgb: 240, 240, 240; /* Fallback for IE11 */
  --retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif; /* Fallback for IE11 */
  --retro-font-size: 14px; /* Fallback for IE11 */
  --retro-font-size-sm: 12px; /* Fallback for IE11 */
  --retro-font-size-lg: 16px; /* Fallback for IE11 */
  --retro-line-height: 1.4; /* Fallback for IE11 */
  --retro-letter-spacing: -0.25px; /* Fallback for IE11 */
  --retro-spacing-xxs: 2px; /* Fallback for IE11 */
  --retro-spacing-xs: 4px; /* Fallback for IE11 */
  --retro-spacing-sm: 8px; /* Fallback for IE11 */
  --retro-spacing-md: 16px; /* Fallback for IE11 */
  --retro-spacing-lg: 24px; /* Fallback for IE11 */
  --retro-spacing-xl: 32px; /* Fallback for IE11 */
  --retro-spacing-xxl: 48px; /* Fallback for IE11 */
  --retro-border-width: 1px; /* Fallback for IE11 */
  --retro-border-width-thick: 2px; /* Fallback for IE11 */
  --retro-border-style: solid; /* Fallback for IE11 */
  --retro-border-radius: 0; /* Fallback for IE11 */
  --retro-border-radius-sm: 0; /* Fallback for IE11 */
  --retro-border-radius-lg: 0; /* Fallback for IE11 */
  --retro-border-raised: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff; /* Fallback for IE11 */
  --retro-border-sunken: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000; /* Fallback for IE11 */
  --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.1); /* Fallback for IE11 */
  --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.15); /* Fallback for IE11 */
  --retro-z-index-base: 1;
  --retro-z-index-dropdown: 1000;
  --retro-z-index-sticky: 1020;
  --retro-z-index-fixed: 1030;
  --retro-z-index-modal-backdrop: 1040;
  --retro-z-index-modal: 1050;
  --retro-z-index-popover: 1060;
  --retro-z-index-tooltip: 1070;
  --retro-transition-duration: 0.1s;
  --retro-transition-duration-slow: 0.3s;
  --retro-transition-duration-fast: 0.05s;
  --retro-transition-timing-function: ease;
  --retro-transition-timing-function-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --retro-container-sm: 540px;
  --retro-container-md: 720px;
  --retro-container-lg: 960px;
  --retro-container-xl: 1140px;
  --retro-container-xxl: 1320px;
  --retro-container-fluid: 100%;
  --retro-card-bg: #f0f0f0;
  --retro-card-header-bg: #000080;
  --retro-card-header-text: #fff;
  --retro-card-content-bg: #fff;
  --retro-card-content-text: #000;
  --retro-card-footer-bg: #f0f0f0;
  --retro-card-footer-text: #000;
  --retro-modal-bg: #f0f0f0;
  --retro-modal-header-bg: #000080;
  --retro-modal-header-text: #fff;
  --retro-table-bg: #fff;
  --retro-table-header-bg: #f0f0f0;
  --retro-table-header-text: #000;
  --retro-table-striped-bg: #e9e9e9;
  --retro-input-bg: #fff;
  --retro-input-text: #000;
  --retro-sidebar-bg: #e0e0e0;
  --retro-sidebar-text: #000;
  --retro-dropdown-bg: #fff;
  --retro-dropdown-text: #000;
  --retro-list-bg: #fff;
  --retro-list-text: #000;
  --retro-progress-bg: #e0e0e0;
  --retro-progress-bar-bg: #000080;
  --retro-alert-bg: #f3f3f3;
  --retro-alert-text: #000;
  --retro-badge-bg: #444;
  --retro-badge-text: #fff;
}

[data-theme=dark] {
  --retro-body-bg: #181818;
  --retro-bg: #232323;
  --retro-primary: #4a90e2;
  --retro-primary-rgb: 74, 144, 226;
  --retro-light: #222;
  --retro-white: #232323;
  --retro-black: #fff;
  --retro-white-rgb: 35, 35, 35;
  --retro-black-rgb: 255, 255, 255;
  --retro-light-rgb: 34, 34, 34;
  --retro-border-light: #444;
  --retro-border-medium: #666;
  --retro-border-dark: #888;
  --retro-success: #2ecc71;
  --retro-success-rgb: 46, 204, 113;
  --retro-warning: #f39c12;
  --retro-warning-rgb: 243, 156, 18;
  --retro-danger: #e74c3c;
  --retro-danger-rgb: 231, 76, 60;
  --retro-info: #3498db;
  --retro-info-rgb: 52, 152, 219;
  --retro-teal: #1abc9c;
  --retro-teal-rgb: 26, 188, 156;
  --retro-tan: #d4b483;
  --retro-pink: #e84393;
  --retro-pink-rgb: 232, 67, 147;
  --retro-lime: #00b894;
  --retro-lime-rgb: 0, 184, 148;
  --retro-cyan: #00cec9;
  --retro-cyan-rgb: 0, 206, 201;
  --retro-orange: #e67e22;
  --retro-orange-rgb: 230, 126, 34;
  --retro-brown: #a67c52;
  --retro-brown-rgb: 166, 124, 82;
  --retro-violet: #9b59b6;
  --retro-violet-rgb: 155, 89, 182;
  --retro-gray: #95a5a6;
  --retro-gray-rgb: 149, 165, 166;
  --retro-maroon: #c0392b;
  --retro-maroon-rgb: 192, 57, 43;
  --retro-gold: #f1c40f;
  --retro-gold-rgb: 241, 196, 15;
  --retro-navy: #2c3e50;
  --retro-navy-rgb: 44, 62, 80;
  --retro-olive: #7f8c8d;
  --retro-olive-rgb: 127, 140, 141;
  --retro-silver: #bdc3c7;
  --retro-silver-rgb: 189, 195, 199;
  --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
  --retro-card-bg: #23242a;
  --retro-card-header-bg: #1a237e;
  --retro-card-header-text: #fff;
  --retro-card-content-bg: #23242a;
  --retro-card-content-text: #f3f3f3;
  --retro-card-footer-bg: #23242a;
  --retro-card-footer-text: #f3f3f3;
  --retro-modal-bg: #23242a;
  --retro-modal-header-bg: #1a237e;
  --retro-modal-header-text: #fff;
  --retro-table-bg: #23242a;
  --retro-table-header-bg: #23242a;
  --retro-table-header-text: #f3f3f3;
  --retro-table-striped-bg: #26282e;
  --retro-input-bg: #23242a;
  --retro-input-text: #f3f3f3;
  --retro-sidebar-bg: #202124;
  --retro-sidebar-text: #f3f3f3;
  --retro-dropdown-bg: #23242a;
  --retro-dropdown-text: #f3f3f3;
  --retro-list-bg: #23242a;
  --retro-list-text: #f3f3f3;
  --retro-progress-bg: #23242a;
  --retro-progress-bar-bg: #4a90e2;
  --retro-alert-bg: #23242a;
  --retro-alert-text: #f3f3f3;
  --retro-badge-bg: #444;
  --retro-badge-text: #fff;
}

/* Layout Specific Variables */
/* Component Specific Variables */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
  box-shadow: none;
  transition: none;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--retro-black);
  background-color: var(--retro-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
  color: var(--retro-primary);
  text-decoration: none;
  transition: var(--retro-transition-base);
}
a:hover {
  color: var(--retro-primary);
  text-decoration: underline;
}
a:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}

/* Lists */
ul, ol {
  list-style-position: inside;
  padding-left: var(--retro-spacing-md);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Forms */
input,
button,
select,
optgroup,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* Code */
code,
pre {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

/* Selection */
::selection {
  background-color: var(--retro-primary);
  color: var(--retro-white);
}

/* Focus Styles */
:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre,
  blockquote {
    border: 1px solid var(--retro-border-light);
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* Common animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.retro-tab-content {
  background: var(--retro-bg);
  border: 1px solid var(--retro-border-dark);
  border-top: none;
  padding: var(--retro-spacing-md);
  margin-bottom: var(--retro-spacing-md);
  min-height: 60px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: none;
}

.retro-tab-content.active {
  display: block;
}

.retro-toast {
  background: #ffffcc;
  color: #000000;
  min-width: 220px;
  max-width: 350px;
  padding: 16px 24px;
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1070;
  animation: fadeIn 0.3s;
  pointer-events: auto;
}

#retro-toast-container {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1070;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * @name Headings
 * @group typography
 * @description
 * Retro heading styles for h1-h6 with 3D and border effects.
 * @example scss
 *   <h1>Heading 1</h1>
 */
body {
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--retro-black);
  background: var(--retro-body-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  text-align: left;
  margin-top: 1.1em;
  margin-bottom: 0.5em;
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0;
  background: none;
  color: var(--retro-black);
  text-shadow: none;
  padding: 0;
}

h1 {
  background: var(--retro-bg);
  border-left: 6px solid var(--retro-primary);
  padding: 0.18em 0.7em 0.18em 0.6em;
  font-size: 1.7em;
  margin-bottom: 0.7em;
}

h2 {
  background: var(--retro-bg);
  border-left: 4px solid var(--retro-primary);
  padding: 0.15em 0.7em 0.15em 0.5em;
  font-size: 1.25em;
  margin-bottom: 0.6em;
}

h3 {
  font-size: 1.08em;
  margin-bottom: 0.4em;
}

h4, h5, h6 {
  font-size: 1em;
  color: var(--retro-black);
  margin-bottom: 0.3em;
}

.retro-heading-primary, .retro-heading-success, .retro-heading-warning, .retro-heading-danger, .retro-heading-info, .retro-heading-teal, .retro-heading-pink, .retro-heading-lime {
  padding: 8px 16px;
  margin-bottom: 16px;
  border: 2px solid;
  position: relative;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.5px;
  box-shadow: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000, 2px 2px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translateZ(0);
  transition: transform 0.1s ease;
}
.retro-heading-primary:hover, .retro-heading-success:hover, .retro-heading-warning:hover, .retro-heading-danger:hover, .retro-heading-info:hover, .retro-heading-teal:hover, .retro-heading-pink:hover, .retro-heading-lime:hover {
  transform: translateY(-1px);
}
.retro-heading-primary:active, .retro-heading-success:active, .retro-heading-warning:active, .retro-heading-danger:active, .retro-heading-info:active, .retro-heading-teal:active, .retro-heading-pink:active, .retro-heading-lime:active {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #000000;
}
.retro-heading-primary::before, .retro-heading-success::before, .retro-heading-warning::before, .retro-heading-danger::before, .retro-heading-info::before, .retro-heading-teal::before, .retro-heading-pink::before, .retro-heading-lime::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px);
  pointer-events: none;
}
.retro-heading-primary {
  background: linear-gradient(to bottom, #000080 0%, #00004d 100%);
  color: #ffffff;
  border-color: rgb(0, 0, 51.5);
}
.retro-heading-success {
  background: linear-gradient(to bottom, #008000 0%, #004d00 100%);
  color: #ffffff;
  border-color: rgb(0, 51.5, 0);
}
.retro-heading-warning {
  background: linear-gradient(to bottom, #ffa500 0%, #cc8400 100%);
  color: #000000;
  border-color: rgb(178.5, 115.5, 0);
}
.retro-heading-danger {
  background: linear-gradient(to bottom, #ff0000 0%, #cc0000 100%);
  color: #ffffff;
  border-color: rgb(178.5, 0, 0);
}
.retro-heading-info {
  background: linear-gradient(to bottom, #00ffff 0%, #00cccc 100%);
  color: #ffffff;
  border-color: rgb(0, 178.5, 178.5);
}
.retro-heading-teal {
  background: linear-gradient(to bottom, #008080 0%, #004d4d 100%);
  color: #ffffff;
  border-color: rgb(0, 51.5, 51.5);
}
.retro-heading-pink {
  background: linear-gradient(to bottom, #ff69b4 0%, rgb(255, 54, 154.5) 100%);
  color: #ffffff;
  border-color: rgb(255, 28.5, 141.75);
}
.retro-heading-lime {
  background: linear-gradient(to bottom, #32cd32 0%, #28a428 100%);
  color: #000000;
  border-color: rgb(35, 143.5, 35);
}

/**
 * @name Text Utilities
 * @group typography
 * @description
 * Utility classes for text color, weight, style, shadow, and more.
 * @example scss
 *   <span class="retro-text-primary retro-text-bold">Primary Bold</span>
 */
.retro-text-primary {
  color: var(--retro-color-primary);
}
.retro-text-success {
  color: var(--retro-color-success);
}
.retro-text-danger {
  color: var(--retro-color-danger);
}
.retro-text-warning {
  color: var(--retro-color-warning);
}
.retro-text-info {
  color: var(--retro-color-info);
}
.retro-text-teal {
  color: var(--retro-color-teal);
}
.retro-text-pink {
  color: var(--retro-color-pink);
}
.retro-text-lime {
  color: var(--retro-color-lime);
}
.retro-text-bold {
  font-weight: var(--retro-font-weight-bold);
}
.retro-text-italic {
  font-style: italic;
}
.retro-text-underline {
  text-decoration: underline;
}
.retro-text-shadow {
  text-shadow: 1px 1px 1px var(--retro-border-dark);
}
.retro-text-outline {
  text-shadow: -1px -1px 0 var(--retro-border-dark), 1px -1px 0 var(--retro-border-dark), -1px 1px 0 var(--retro-border-dark), 1px 1px 0 var(--retro-border-dark);
}

.retro-text-uppercase {
  text-transform: uppercase;
}

.retro-text-lowercase {
  text-transform: lowercase;
}

.retro-text-capitalize {
  text-transform: capitalize;
}

.retro-text-monospace {
  font-family: "Courier New", monospace;
}

.retro-text-xs {
  font-size: 0.8em;
}

.retro-text-lg {
  font-size: 1.5em;
}

.retro-text-strike {
  text-decoration: line-through;
}

.retro-text-shadow-strong {
  text-shadow: 2px 2px 2px #404040;
}

.retro-text-shadow-soft {
  text-shadow: 1px 1px 4px #b0b0b0;
}

.retro-text-glow {
  text-shadow: 0 0 6px #00e5ee, 0 0 12px #00e5ee;
}

/**
 * @name Fancy Text Styles
 * @group typography
 * @description
 * Special effect text styles: rainbow, gradient, glitch, metallic, fire, etc.
 * @example scss
 *   <span class="retro-text-rainbow">Rainbow</span>
 */
.retro-text-rainbow {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33ff00, #00ffee, #0066ff, #cc00ff, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  animation: rainbow-hue 3s linear infinite;
  font-weight: bold;
  text-shadow: 0 1px 1px #fff, 0 2px 2px rgba(0, 0, 0, 0.1333333333);
}

@keyframes rainbow-hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.retro-text-hue-rotate {
  animation: hue-rotate-text 2s linear infinite;
  display: inline-block;
}

@keyframes hue-rotate-text {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.retro-text-gradient {
  background: linear-gradient(90deg, #4a90e2, #00e5ee, #ff69b4, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  text-shadow: 0 1px 1px #fff, 0 2px 2px rgba(0, 0, 0, 0.1333333333);
}

.retro-text-outline-strong {
  color: #fff;
  font-weight: bold;
  -webkit-text-stroke: 2px #111;
  text-shadow: none;
}

.retro-text-emboss {
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 #bbb, -1px -1px 0 #333;
}

.retro-text-deboss {
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #bbb;
}

.retro-text-shadow-multicolor {
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 #0066ff;
}

.retro-text-glitch {
  position: relative;
  color: #fff;
  text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  animation: glitch 1s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% {
    text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  }
  20% {
    text-shadow: 2px 2px #0ff, -2px -2px #f0f;
  }
  40% {
    text-shadow: -2px 0 #f0f, 2px 0 #0ff;
  }
  60% {
    text-shadow: 2px -2px #0ff, -2px 2px #f0f;
  }
  80% {
    text-shadow: 0 2px #f0f, 0 -2px #0ff;
  }
  100% {
    text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  }
}
.retro-text-metallic {
  background: linear-gradient(90deg, #e6e6e6 0%, #b0b0b0 40%, #fff 60%, #b0b0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  -webkit-text-stroke: 1px #222;
  text-shadow: 0 1px 2px #fff, 0 2px 4px rgba(136, 136, 136, 0.5333333333);
}

.retro-text-fire {
  background: linear-gradient(90deg, #ff6600 0%, #ffcc00 40%, #fff 60%, #ff3300 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  -webkit-text-stroke: 1px #800;
  text-shadow: 0 1px 2px #fff, 0 2px 8px #ff6600, 0 4px 16px #ff3300;
}

/**
 * @name Retro Blockquote
 * @group typography
 * @description
 * Styled blockquote with Win9x look
 */
.retro-blockquote {
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
  font-style: italic;
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 0.95em;
  line-height: 1.5;
}
.retro-blockquote::before {
  content: '"';
  font-size: 2.5em;
  color: var(--retro-primary);
  position: absolute;
  left: 0.3rem;
  top: -0.2rem;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  opacity: 0.7;
}
.retro-blockquote::after {
  content: '"';
  font-size: 2.5em;
  color: var(--retro-primary);
  position: absolute;
  right: 0.3rem;
  bottom: -0.5rem;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  opacity: 0.7;
}

/**
 * @name Retro Code Block
 * @group typography
 * @description
 * Styled code block with Win9x look
 */
.retro-code {
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  border-top-color: var(--retro-border-light);
  border-left-color: var(--retro-border-light);
  padding: 0;
  margin: 1.5rem 0;
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  position: relative;
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
}
.retro-code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to bottom, #000080 0%, #1084d0 100%);
  border-bottom: 1px solid var(--retro-border-dark);
}
.retro-code::after {
  content: "Code";
  position: absolute;
  top: 2px;
  left: 8px;
  color: white;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
.retro-code .retro-code-copy {
  position: absolute;
  top: 2px;
  right: 4px;
  background: var(--retro-bg);
  border: 1px solid var(--retro-border-dark);
  border-right: 1px solid var(--retro-border-light);
  border-bottom: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-medium);
  border-top: 1px solid var(--retro-border-medium);
  padding: 2px 8px;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
  color: var(--retro-black);
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
}
.retro-code .retro-code-copy:hover {
  background: var(--retro-light);
}
.retro-code .retro-code-copy:active {
  box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
}
.retro-code code {
  display: block;
  padding: 1.2rem;
  padding-top: calc(1.2rem + 24px);
  color: var(--retro-black);
  font-size: 0.9em;
  line-height: 1.4;
}
.retro-code code .keyword {
  color: #000080;
  font-weight: bold;
}
.retro-code code .string {
  color: #008000;
}
.retro-code code .comment {
  color: #808080;
  font-style: italic;
}
.retro-code code .function {
  color: #800080;
}
.retro-code code .number {
  color: #ff0000;
}
.retro-code code .operator {
  color: #0000ff;
}
.retro-code code .variable {
  color: #800000;
}
.retro-code code .class {
  color: #008080;
}
.retro-code code .property {
  color: #0000ff;
}
.retro-code code .tag {
  color: #800000;
}
.retro-code code .attribute {
  color: #ff0000;
}

.retro-heading-variant {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.2rem;
  margin-bottom: 0.5rem;
  border: 2.5px double var(--retro-border-dark, #222);
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.5333333333), 0 2px 0 rgba(136, 136, 136, 0.2666666667);
  background: var(--retro-bg, #f8f9fa);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.retro-heading-primary {
  color: #1a237e;
  border-color: #1a237e;
  background: #e3e6fa;
}

.retro-heading-success {
  color: #1b5e20;
  border-color: #1b5e20;
  background: #e6fae3;
}

.retro-heading-warning {
  color: #b26a00;
  border-color: #b26a00;
  background: #fffbe3;
}

.retro-heading-danger {
  color: #b71c1c;
  border-color: #b71c1c;
  background: #fae3e3;
}

.retro-heading-info {
  color: #01579b;
  border-color: #01579b;
  background: #e3f2fa;
}

.retro-heading-teal {
  color: #00695c;
  border-color: #00695c;
  background: #e3faf7;
}

.retro-heading-pink {
  color: #ad1457;
  border-color: #ad1457;
  background: #fae3f2;
}

.retro-heading-lime {
  color: #827717;
  border-color: #827717;
  background: #f7fae3;
}

/* Components */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/**
 * @name Retro Button
 * @group components
 * @description
 * Button component with multiple color, size, and effect variants. Use modifier classes for color, size, shape, and effects.
 * @example scss
 *   <button class="retro-btn retro-btn-primary retro-btn-lg" role="button">Primary Large</button>
 */
/* Retro Button - Win9x Style Only */
.retro-btn {
  display: inline-block;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  padding: 4px 16px;
  border: 2px solid var(--retro-border-dark);
  border-radius: 0;
  background: var(--retro-light);
  color: var(--retro-black);
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #000000, 1px 1px 0 #808080;
  transition: none;
}
.retro-btn:hover {
  background: var(--retro-white);
  box-shadow: inset -0.5px -0.5px 0 #ffffff, inset 0.5px 0.5px 0 #808080;
}
.retro-btn:active {
  background: var(--retro-border-medium);
  color: var(--retro-white);
  box-shadow: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000, 0.5px 0.5px 0 #808080;
}
.retro-btn:focus {
  outline: 1px dotted var(--retro-black);
  outline-offset: -4px;
}

.retro-btn-primary {
  background: #000080;
  color: #ffffff;
}
.retro-btn-primary:hover {
  background: #0000b3;
}
.retro-btn-primary:active {
  background: #00004d;
}

.retro-btn-success {
  background: #008000;
  color: #ffffff;
}
.retro-btn-success:hover {
  background: #00b300;
}
.retro-btn-success:active {
  background: #004d00;
}

.retro-btn-danger {
  background: #ff0000;
  color: #ffffff;
}
.retro-btn-danger:hover {
  background: #ff3333;
}
.retro-btn-danger:active {
  background: #cc0000;
}

.retro-btn-warning {
  background: #ffa500;
  color: #000000;
}
.retro-btn-warning:hover {
  background: #ffb733;
}
.retro-btn-warning:active {
  background: #cc8400;
}

.retro-btn-xs {
  font-size: 10px;
  padding: 2px 8px;
  line-height: 1.2;
}

.retro-btn-sm {
  font-size: 12px;
  padding: 3px 10px;
  line-height: 1.3;
}

.retro-btn-md {
  font-size: 14px;
  padding: 4px 12px;
  line-height: 1.4;
}

.retro-btn-lg {
  font-size: 16px;
  padding: 6px 16px;
  line-height: 1.5;
}

.retro-btn-xl {
  font-size: 18px;
  padding: 8px 20px;
  line-height: 1.6;
}

.retro-btn-xxl {
  font-size: 20px;
  padding: 10px 24px;
  line-height: 1.7;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/**
 * @name Retro Card
 * @group components
 * @description
 * Card component for grouping content. Includes header, content, and variants.
 * @example scss
 *   <div class="retro-card" role="region" aria-label="Card title">
 *     <div class="retro-card-header">Title</div>
 *     <div class="retro-card-content">Content</div>
 *   </div>
 */
/* Retro Card - Win9x Style Only */
.retro-card {
  background: var(--retro-card-bg);
  border-top: 2px solid var(--retro-border-medium);
  border-left: 2px solid var(--retro-border-medium);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  margin-bottom: 24px;
  position: relative;
}
.retro-card-header {
  background: var(--retro-card-header-bg);
  color: var(--retro-card-header-text);
  border-bottom: 2px solid var(--retro-card-header-bg);
  font-family: inherit;
  text-shadow: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 14px;
  user-select: none;
  display: block;
  text-align: left;
  min-height: unset;
}
.retro-card-content {
  padding: 16px 16px;
  background: var(--retro-card-content-bg);
  border-top: 2px solid var(--retro-card-content-bg);
  font-size: 14px;
  color: var(--retro-card-content-text);
  min-height: 2em;
  text-align: left;
}

.retro-card-footer {
  background: var(--retro-card-footer-bg);
  border-top: 2px solid var(--retro-card-footer-bg);
  color: var(--retro-card-footer-text);
  padding: 8px 16px;
  font-size: 12px;
  text-align: left;
}

.retro-card-image {
  width: 100%;
  display: block;
  border-bottom: 2px solid #808080;
  max-height: 140px;
  object-fit: cover;
}

.retro-card-compact .retro-card-content {
  padding: 4px 8px;
  font-size: 12px;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/* Retro Form - Win9x Style Only */
/**
 * @name Retro Form
 * @group components
 * @description
 * Form components including inputs, textareas, selects, and checkboxes.
 * @example scss
 *   <form class="retro-form">
 *     <div class="retro-form-group">
 *       <label for="username">Username</label>
 *       <input type="text" id="username" class="retro-input">
 *     </div>
 *   </form>
 */
.retro-form-group {
  margin-bottom: 16px;
}
.retro-form-group > label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  color: var(--retro-input-text);
}

.retro-input,
.retro-textarea,
.retro-select {
  width: 100%;
  padding: 8px;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  color: var(--retro-input-text);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  border-radius: 0;
  transition: none;
}
.retro-input:focus,
.retro-textarea:focus,
.retro-select:focus {
  outline: 1px dotted var(--retro-input-text);
  outline-offset: -4px;
  border-color: var(--retro-primary);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}

.retro-textarea {
  min-height: 100px;
  resize: vertical;
}

.retro-select {
  appearance: none;
  background-image: none;
  padding-right: 16px;
}

.retro-form-inline {
  display: flex;
  align-items: center;
  gap: var(--retro-spacing-md);
}
.retro-form-inline .retro-form-group {
  margin-bottom: 0;
}
.retro-form-horizontal .retro-form-group {
  display: flex;
  align-items: center;
  gap: var(--retro-spacing-md);
}
.retro-form-horizontal .retro-form-group label {
  width: 200px;
  margin-bottom: 0;
  text-align: right;
}

.retro-input.is-valid,
.retro-textarea.is-valid,
.retro-select.is-valid {
  border-color: var(--retro-color-success);
}
.retro-input.is-valid:focus,
.retro-textarea.is-valid:focus,
.retro-select.is-valid:focus {
  box-shadow: inset -1px -1px 0 var(--retro-border-dark), inset 1px 1px 0 var(--retro-shadow-light), 0 0 0 2px rgba(var(--retro-color-success-rgb), 0.2);
}
.retro-input.is-invalid,
.retro-textarea.is-invalid,
.retro-select.is-invalid {
  border-color: var(--retro-color-danger);
}
.retro-input.is-invalid:focus,
.retro-textarea.is-invalid:focus,
.retro-select.is-invalid:focus {
  box-shadow: inset -1px -1px 0 var(--retro-border-dark), inset 1px 1px 0 var(--retro-shadow-light), 0 0 0 2px rgba(var(--retro-color-danger-rgb), 0.2);
}

.retro-form-text {
  font-size: var(--retro-font-size-sm);
  color: var(--retro-text-muted);
  margin-top: var(--retro-spacing-xs);
}

.retro-form-feedback {
  font-size: var(--retro-font-size-sm);
  margin-top: var(--retro-spacing-xs);
}
.retro-form-feedback.is-valid {
  color: var(--retro-color-success);
}
.retro-form-feedback.is-invalid {
  color: var(--retro-color-danger);
}

.retro-input,
.retro-textarea,
.retro-select {
  border-radius: 0 !important;
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  background: var(--retro-white);
  color: var(--retro-black);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  transition: none;
}
.retro-input:focus,
.retro-textarea:focus,
.retro-select:focus {
  outline: 1px dotted var(--retro-black);
  outline-offset: -4px;
  border-color: var(--retro-primary);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}

.retro-input,
.retro-select,
textarea {
  padding: 0.5em 0.75em;
  border-radius: 4px;
  border: 1px solid #b0b0b0;
}

input[type=color].retro-input {
  width: 48px;
  height: 36px;
  padding: 2px;
  border-radius: 4px;
  border: 2px solid var(--retro-border-dark);
  background: var(--retro-white);
  box-shadow: 1px 1px 0 var(--retro-border-light);
}

input[type=range].retro-input {
  width: 100%;
  margin: 8px 0;
  background: transparent;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  outline: none;
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
}

input[type=range].retro-input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--retro-primary);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
}

input[type=range].retro-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--retro-primary);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
}

input[type=range].retro-input::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--retro-primary);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
}

input[type=range].retro-input::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--retro-white);
  border-radius: 4px;
}

input[type=range].retro-input::-ms-fill-lower,
input[type=range].retro-input::-ms-fill-upper {
  background: var(--retro-white);
}

input[type=file].retro-input {
  padding: 4px;
  background: var(--retro-white);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  color: var(--retro-black);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
}

.retro-input:disabled,
.retro-select:disabled,
.retro-textarea:disabled {
  background: #c0c0c0;
  color: #888;
  border-color: var(--retro-border-medium);
  cursor: not-allowed;
  opacity: 1;
}

.retro-label-text {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 0;
  vertical-align: middle;
  line-height: 1.2;
}

input[type=checkbox].retro-input,
input[type=radio].retro-input {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 2px solid #808080;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

input[type=checkbox].retro-input {
  border-radius: 0;
}

input[type=checkbox].retro-input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #000080;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  background: none;
  display: block;
}

input[type=radio].retro-input {
  border-radius: 50%;
}

input[type=radio].retro-input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  background: #000080;
  border-radius: 50%;
  display: block;
}

input[type=checkbox].retro-input:focus,
input[type=radio].retro-input:focus {
  outline: 2px solid #000080;
  outline-offset: 2px;
}

.retro-label {
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  color: var(--retro-black);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/* Retro Checkbox and Radio Styles */
/**
 * @name Retro Checkbox & Radio
 * @group components
 * @description
 * Win95/98 style checkboxes and radio buttons.
 */
/* Common styles for checkbox and radio */
.retro-checkbox,
.retro-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
  outline: none;
  display: inline-block;
  transition: all 0.1s;
  color: var(--retro-input-text);
}
.retro-checkbox:hover,
.retro-radio:hover {
  border-color: var(--retro-primary);
}
.retro-checkbox:focus,
.retro-radio:focus {
  outline: 1px dotted var(--retro-black);
  outline-offset: 2px;
}
.retro-checkbox:disabled,
.retro-radio:disabled {
  background: #c0c0c0;
  border-color: var(--retro-border-medium);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Checkbox specific styles */
.retro-checkbox {
  border-radius: 0;
  /* Color variants */
}
.retro-checkbox:checked {
  background: var(--retro-white);
}
.retro-checkbox:checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--retro-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block;
}
.retro-checkbox.retro-checkbox-primary:checked:after {
  border-color: var(--retro-primary);
}
.retro-checkbox.retro-checkbox-success:checked:after {
  border-color: var(--retro-success);
}
.retro-checkbox.retro-checkbox-danger:checked:after {
  border-color: var(--retro-danger);
}
.retro-checkbox.retro-checkbox-warning:checked:after {
  border-color: var(--retro-warning);
}
.retro-checkbox.retro-checkbox-info:checked:after {
  border-color: var(--retro-info);
}

/* Radio button specific styles */
.retro-radio {
  border-radius: 50%;
  /* Color variants */
}
.retro-radio:checked {
  background: var(--retro-white);
}
.retro-radio:checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  background: var(--retro-primary);
  border-radius: 50%;
  display: block;
}
.retro-radio.retro-radio-primary:checked:after {
  background: var(--retro-primary);
}
.retro-radio.retro-radio-success:checked:after {
  background: var(--retro-success);
}
.retro-radio.retro-radio-danger:checked:after {
  background: var(--retro-danger);
}
.retro-radio.retro-radio-warning:checked:after {
  background: var(--retro-warning);
}
.retro-radio.retro-radio-info:checked:after {
  background: var(--retro-info);
}

/* Switch style */
.retro-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.retro-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.retro-switch .retro-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #c0c0c0;
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
  transition: 0.1s;
}
.retro-switch .retro-switch-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background: var(--retro-white);
  border: 1px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-medium);
  transition: 0.1s;
}
.retro-switch input:checked + .retro-switch-slider {
  background: var(--retro-primary);
}
.retro-switch input:checked + .retro-switch-slider:before {
  transform: translateX(16px);
}
.retro-switch input:focus + .retro-switch-slider {
  outline: 1px dotted var(--retro-black);
}
.retro-switch input:disabled + .retro-switch-slider {
  background: #c0c0c0;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Checkbox/Radio group */
.retro-checkbox-group,
.retro-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.retro-checkbox-group.retro-group-inline,
.retro-radio-group.retro-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
.retro-checkbox-group label,
.retro-radio-group label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

/* States */
.retro-checkbox.is-invalid,
.retro-radio.is-invalid,
.retro-switch input.is-invalid + .retro-switch-slider {
  border-color: var(--retro-danger);
}

.retro-checkbox.is-valid,
.retro-radio.is-valid,
.retro-switch input.is-valid + .retro-switch-slider {
  border-color: var(--retro-success);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/**
 * @name Retro Alert
 * @group components
 * @description
 * Alert component for displaying messages and notifications.
 * @example scss
 *   <div class="retro-alert retro-alert-primary">
 *     This is a primary alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-success">
 *     This is a success alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-danger">
 *     This is a danger alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-warning">
 *     This is a warning alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-info">
 *     This is an info alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-primary" style="position:relative;">
 *     <div class="retro-alert-header">Primary Alert</div>
 *     <div class="retro-alert-body">This alert has a header, body, and a close button.</div>
 *     <button class="retro-alert-close">×</button>
 *   </div>
 *   <div class="retro-alert retro-alert-success">
 *     <div class="retro-alert-header">Success!</div>
 *     <div class="retro-alert-body">Your operation was successful.</div>
 *     <div class="retro-alert-footer">Footer text here</div>
 *   </div>
 */
.retro-alert, .retro-toast {
  background: var(--retro-alert-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  border-radius: 0 !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: none;
  margin-bottom: 1.2em;
  padding: 0.7em 1.2em;
  color: var(--retro-alert-text);
  text-align: left;
  display: block;
}

.retro-alert-body, .retro-toast-body {
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
  text-align: left;
}

.retro-alert-footer {
  width: 100%;
  margin: 0;
  padding: 0.3em 1em 0.2em 1em;
  font-size: 0.93em;
  font-family: inherit;
  border-radius: 0;
  box-shadow: none;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
  background: #e0e0e0;
  color: #222;
  text-align: left;
}

.retro-alert-primary .retro-alert-footer {
  background: #1976d2;
  color: #fff;
  border-top: 2px solid #145ea8;
}

.retro-alert-success .retro-alert-footer {
  background: #006400;
  color: #fff;
  border-top: 2px solid #004d00;
}

.retro-alert-danger .retro-alert-footer {
  background: #b20000;
  color: #fff;
  border-top: 2px solid #7a0000;
}

.retro-alert-warning .retro-alert-footer {
  background: #e6a800;
  color: #222;
  border-top: 2px solid #b38600;
}

.retro-alert-info .retro-alert-footer {
  background: #0099b3;
  color: #fff;
  border-top: 2px solid #006a80;
}

.retro-alert-icon, .retro-toast-icon, .retro-alert-close, .retro-toast-close {
  display: none !important;
}

.retro-toast-primary, .retro-toast.retro-alert-primary {
  background: #2a95f5;
  color: #fff;
  border-left: 6px solid #1976d2;
}

.retro-toast-success, .retro-toast.retro-alert-success {
  background: #008000;
  color: #fff;
  border-left: 6px solid #006400;
}

.retro-toast-danger, .retro-toast.retro-alert-danger {
  background: #ff0000;
  color: #fff;
  border-left: 6px solid #b20000;
}

.retro-toast-warning, .retro-toast.retro-alert-warning {
  background: #ffa500;
  color: #222;
  border-left: 6px solid #e6a800;
}

.retro-toast-info, .retro-toast.retro-alert-info {
  background: #00ffff;
  color: #222;
  border-left: 6px solid #0099b3;
}

.retro-toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.3em;
  font-weight: bold;
  margin-left: auto;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.retro-toast-close:hover {
  opacity: 1;
}

.retro-alert-primary {
  background: #2a95f5;
  color: #fff;
  border-left: 6px solid #1976d2;
}

.retro-alert-success {
  background: #008000;
  color: #fff;
  border-left: 6px solid #006400;
}

.retro-alert-danger {
  background: #ff0000;
  color: #fff;
  border-left: 6px solid #b20000;
}

.retro-alert-warning {
  background: #ffa500;
  color: #222;
  border-left: 6px solid #e6a800;
}

.retro-alert-info {
  background: #00ffff;
  color: #222;
  border-left: 6px solid #0099b3;
}

.retro-toast {
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.18), 1px 1px 0 #fff, 2px 2px 0 #808080;
  border-width: 1.5px;
  margin-bottom: 0.75em;
  animation: retro-toast-fadein 0.3s;
  min-width: 240px;
  max-width: 400px;
}

@keyframes retro-toast-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.retro-toast::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 1em;
  margin-left: -2em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.retro-toast-info::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%230099b3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"/><text x="10" y="15" font-size="12" text-anchor="middle" fill="white">i</text></svg>');
}

.retro-toast-warning::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23e6a800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10,2 18,18 2,18"/><text x="10" y="15" font-size="12" text-anchor="middle" fill="black">!</text></svg>');
}

.retro-toast-danger::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23b20000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"/><text x="10" y="15" font-size="14" text-anchor="middle" fill="white">×</text></svg>');
}

.retro-toast-success::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23006400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"/><polyline points="5,11 9,15 15,6" fill="none" stroke="white" stroke-width="2"/></svg>');
}

.retro-alert-main, .retro-toast-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0.7em 2.5em 0.7em 0.9em;
  position: relative;
  min-height: 36px;
  background: inherit;
}

.retro-alert-icon, .retro-toast-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  flex-shrink: 0;
}

.retro-alert-primary .retro-alert-icon, .retro-toast-primary .retro-toast-icon {
  content: "";
  background: none;
  color: #fff;
}

.retro-alert-success .retro-alert-icon, .retro-toast-success .retro-toast-icon {
  content: "";
  background: none;
  color: #fff;
}

.retro-alert-danger .retro-alert-icon, .retro-toast-danger .retro-toast-icon {
  content: "";
  background: none;
  color: #fff;
}

.retro-alert-warning .retro-alert-icon, .retro-toast-warning .retro-toast-icon {
  content: "";
  background: none;
  color: #222;
}

.retro-alert-info .retro-alert-icon, .retro-toast-info .retro-toast-icon {
  content: "";
  background: none;
  color: #222;
}

.retro-alert-primary .retro-alert-icon::before, .retro-toast-primary .retro-toast-icon::before {
  content: "ℹ"; /* ℹ */
}

.retro-alert-success .retro-alert-icon::before, .retro-toast-success .retro-toast-icon::before {
  content: "✔"; /* ✔ */
}

.retro-alert-danger .retro-alert-icon::before, .retro-toast-danger .retro-toast-icon::before {
  content: "✖"; /* ✖ */
}

.retro-alert-warning .retro-alert-icon::before, .retro-toast-warning .retro-toast-icon::before {
  content: "⚠"; /* ⚠ */
}

.retro-alert-info .retro-alert-icon::before, .retro-toast-info .retro-toast-icon::before {
  content: "ℹ"; /* ℹ */
}

.retro-alert-close, .retro-toast-close {
  position: static;
  margin-left: 1em;
  align-self: center;
}

.retro-alert::before, .retro-toast::before {
  display: none !important;
}

.retro-alert {
  margin-bottom: 1.25rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Typography Styles */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * @name Retro Table
 * @group components
 * @description
 * Table component with various styles and variants.
 * @example scss
 *   <table class="retro-table">
 *     <thead>
 *       <tr>
 *         <th>Header 1</th>
 *         <th>Header 2</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>Cell 1</td>
 *         <td>Cell 2</td>
 *       </tr>
 *     </tbody>
 *   </table>
 */
.retro-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--retro-border-dark);
  background-color: var(--retro-table-bg);
  color: var(--retro-table-header-text);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 14px;
  box-shadow: var(--retro-box-shadow-outset-button);
  overflow-x: auto;
  margin-bottom: var(--retro-spacing-md);
  table-layout: fixed;
}
.retro-table th,
.retro-table td {
  padding: 6px 8px;
  text-align: left;
  border: 1px solid var(--retro-border-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.retro-table thead th {
  background-color: var(--retro-table-header-bg);
  color: var(--retro-table-header-text);
  font-weight: bold;
  border-top: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-light);
  border-right: 1px solid var(--retro-border-dark);
  border-bottom: 1px solid var(--retro-border-dark);
}
.retro-table thead th:not(:last-child) {
  border-right: 1px solid var(--retro-border-dark);
}
.retro-table tbody tr:hover {
  background-color: var(--retro-table-striped-bg);
}
.retro-table.retro-table-striped tbody tr:nth-child(odd) {
  background-color: var(--retro-table-striped-bg);
}
.retro-table.retro-table-striped tbody tr:nth-child(odd):hover {
  background-color: var(--retro-primary);
  color: var(--retro-white);
}
.retro-table.retro-table-bordered {
  border: 2px solid var(--retro-border-dark);
}
.retro-table.retro-table-bordered th, .retro-table.retro-table-bordered td {
  border: 1px solid var(--retro-border-medium);
}
.retro-table.retro-table-bordered thead th {
  border-bottom: 2px solid var(--retro-border-dark);
}
.retro-table::-webkit-scrollbar {
  height: 16px;
  width: 16px;
  background-color: var(--retro-table-bg);
}
.retro-table::-webkit-scrollbar-thumb {
  background-color: var(--retro-table-bg);
  border-top: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-light);
  border-right: 1px solid var(--retro-border-dark);
  border-bottom: 1px solid var(--retro-border-dark);
  min-height: 20px;
}
.retro-table::-webkit-scrollbar-track {
  background-color: var(--retro-table-striped-bg);
}
.retro-table::-webkit-scrollbar-button {
  background-color: var(--retro-table-bg);
  border-top: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-light);
  border-right: 1px solid var(--retro-border-dark);
  border-bottom: 1px solid var(--retro-border-dark);
  display: block;
  height: 16px;
  width: 16px;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/**
 * @name Retro Modal
 * @group components
 * @description
 * Modal component for displaying content in a dialog box.
 * @example scss
 *   <div class="retro-modal">
 *     <div class="retro-modal-content">
 *       <div class="retro-modal-header">
 *         <h3>Modal Title</h3>
 *         <button class="retro-modal-close">×</button>
 *       </div>
 *       <div class="retro-modal-body">
 *         Modal content goes here
 *       </div>
 *     </div>
 *   </div>
 */
.retro-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
  overflow: auto;
  outline: 0;
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}
.retro-modal::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25rem; /* Adjusts for inline-block spacing */
}
.retro-modal.show {
  display: block;
}
.retro-modal-content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  margin: 1.75rem auto;
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5), inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  border-radius: 4px !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  transition: none;
  text-align: left;
  vertical-align: middle;
}
.retro-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  background: var(--retro-primary);
  color: #fff;
  border-top: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-dark);
  border-left: 8px solid var(--retro-primary);
  border-radius: 4px 4px 0 0 !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.5;
  user-select: none;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #000, 0 1px 0 #000;
}
.retro-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--retro-spacing-sm);
  background: #e0e0e0;
  border: 2px outset #fff;
  box-shadow: none;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: #000;
  text-shadow: none;
  cursor: pointer;
  border-radius: 2px;
  font-family: inherit;
  transition: background 0.1s, border 0.1s;
}
.retro-modal-close:hover {
  background: #c0c0c0;
  border: 2px inset #fff;
}
.retro-modal-close:active {
  background: #a0a0a0;
  border: 2px inset #000;
}
.retro-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--retro-spacing-md);
  background: var(--retro-bg);
  border-top: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
  overflow: auto;
  max-height: calc(80vh - 120px); /* Prevent overly tall modals */
}
.retro-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: var(--retro-spacing-sm);
  background: var(--retro-bg);
  border-top: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
  border-radius: 0 0 var(--retro-border-radius-sm) var(--retro-border-radius-sm);
}
.retro-modal-footer > * {
  margin: var(--retro-spacing-xs);
}
.retro-modal-sm {
  max-width: 300px;
}
.retro-modal-lg {
  max-width: 800px;
}
.retro-modal-xl {
  max-width: 1140px;
}
.retro-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}
.retro-modal-scroll {
  overflow-y: auto;
}
.retro-modal-fade {
  transition: opacity 0.15s linear;
}
.retro-modal-fade:not(.show) {
  opacity: 0;
}
.retro-modal-slide {
  transition: transform 0.3s ease-out;
}
.retro-modal-slide:not(.show) {
  transform: translateY(-50px);
}

.retro-modal-header h1,
.retro-modal-header h2,
.retro-modal-header h3,
.retro-modal-header h4,
.retro-modal-header h5,
.retro-modal-header h6 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  font-family: inherit;
  text-shadow: 1px 1px 0 #000, 0 1px 0 #000;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Typography Styles */
/* Retro Nav - Win9x Style Only */
/**
 * @name Retro Navigation
 * @group components
 * @description
 * Navigation component with various styles and variants.
 * @example scss
 *   <nav class="retro-nav">
 *     <a href="#" class="retro-nav-item">Home</a>
 *     <a href="#" class="retro-nav-item">About</a>
 *     <a href="#" class="retro-nav-item">Contact</a>
 *   </nav>
 */
.retro-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--retro-light);
  border: 2px solid var(--retro-border-dark);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  transition: none;
}

.retro-nav-item, .retro-tab {
  display: inline-block;
  padding: 8px 16px;
  color: var(--retro-black);
  text-decoration: none;
  border-radius: 0;
  background: var(--retro-light);
  border-right: 1px solid var(--retro-border-medium);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  transition: none;
}
.retro-nav-item:hover, .retro-tab:hover {
  background: var(--retro-white);
  color: var(--retro-primary);
}
.retro-nav-item.active, .active.retro-tab {
  background: var(--retro-primary);
  color: var(--retro-white);
  text-shadow: 0 1px 2px var(--retro-border-dark), 0 0 2px var(--retro-border-light);
  outline: 2px solid var(--retro-border-light);
  outline-offset: -2px;
}
.retro-nav-item:focus, .retro-tab:focus {
  outline: 2px dashed var(--retro-primary);
  outline-offset: 2px;
  z-index: 2;
}

.retro-tab {
  border-radius: 4px 4px 0 0;
  margin-right: -1px;
  margin-bottom: 0;
  background: #f0f0f0;
  border: 1px solid #000000;
  border-bottom: none;
  position: relative;
  z-index: 1;
  min-width: 80px;
  height: 32px;
  box-shadow: none;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #000000;
  transition: background 0.2s, color 0.2s;
  text-shadow: none;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.retro-tab.active {
  background: #ffffff;
  color: #000000;
  font-weight: normal;
  border-left: 1px solid #000000;
  border-top: 2px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: none;
  z-index: 2;
  box-shadow: none;
  text-shadow: none;
}
.retro-tab:hover:not(.active) {
  background: #ffffff;
  color: #000080;
}

.retro-nav-tabs {
  display: flex;
  border-bottom: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
  background: var(--retro-bg);
  border-radius: var(--retro-border-radius-sm) var(--retro-border-radius-sm) 0 0;
  padding: 0 0 0 2px;
  margin-bottom: 0;
  gap: 4px;
  overflow-x: auto;
}

.retro-nav-vertical {
  display: flex;
  flex-direction: column;
  width: max-content;
  border: 2px solid #000000;
  background: #f0f0f0;
  padding: 0;
  margin: 0;
  list-style: none;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

.retro-nav-vertical .retro-nav-item, .retro-nav-vertical .retro-tab {
  display: block;
  border-right: none;
  border-bottom: 1px solid #808080;
  border-radius: 0;
  width: 100%;
}
.retro-nav-vertical .retro-nav-item:last-child, .retro-nav-vertical .retro-tab:last-child {
  border-bottom: none;
}

.retro-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.retro-nav-pills .retro-nav-item, .retro-nav-pills .retro-tab {
  border-radius: 999px;
  background: #f0f0f0;
  border: 1px solid #808080;
  margin: 0 2px;
  padding: 8px 24px;
  transition: background 0.2s, color 0.2s;
}
.retro-nav-pills .retro-nav-item:hover, .retro-nav-pills .retro-tab:hover {
  background: #000080;
  color: #ffffff;
}
.retro-nav-pills .retro-nav-item.active, .retro-nav-pills .active.retro-tab {
  background: #000080;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 1px 4px #b0c4de inset;
}

.retro-tab-list {
  display: flex;
  align-items: flex-end;
  background: #f0f0f0;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  border-right: 1px solid #ffffff;
  padding: 0 2px;
  height: 32px;
  box-shadow: none;
}

.retro-nav-toolbar {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  margin: 0;
  background: #f0f0f0;
  border: 2px solid #000000;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
}
.retro-nav-toolbar .retro-nav-item, .retro-nav-toolbar .retro-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 2px 10px;
  margin: 2px;
  color: #000000;
  text-decoration: none;
  background: #f0f0f0;
  border: 2px solid transparent;
  border-radius: 0;
  text-align: center;
}
.retro-nav-toolbar .retro-nav-item:hover, .retro-nav-toolbar .retro-tab:hover {
  background: #ffffff;
  border: 2px solid #808080;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
}
.retro-nav-toolbar .retro-nav-item.active, .retro-nav-toolbar .active.retro-tab {
  background: #f0f0f0;
  border: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #000000;
  border-top: 2px solid #000000;
  color: #000000;
  font-weight: normal;
}
.retro-nav-toolbar .retro-nav-item .retro-nav-icon, .retro-nav-toolbar .retro-tab .retro-nav-icon {
  font-size: 18px;
  margin-right: 4px;
}
.retro-nav-toolbar.retro-nav-icons .retro-nav-item, .retro-nav-toolbar.retro-nav-icons .retro-tab {
  width: 36px;
  padding: 0;
}
.retro-nav-toolbar.retro-nav-icons .retro-nav-item .retro-nav-icon, .retro-nav-toolbar.retro-nav-icons .retro-tab .retro-nav-icon {
  margin-right: 0;
}
.retro-nav-toolbar .retro-nav-separator {
  width: 1px;
  height: 30px;
  margin: 3px 4px;
  background: #808080;
  box-shadow: 1px 0 0 #ffffff;
}

.retro-nav-tabbed {
  display: flex;
  padding: 0;
  margin: 0 0 -1px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #000000;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.retro-nav-tabbed .retro-nav-item, .retro-nav-tabbed .retro-tab {
  padding: 8px 16px;
  background: #f0f0f0;
  border: 2px solid #000000;
  border-bottom: 0;
  margin-right: 2px;
  position: relative;
  box-shadow: inset 1px 1px 0 #ffffff;
}
.retro-nav-tabbed .retro-nav-item:hover, .retro-nav-tabbed .retro-tab:hover {
  background: #ffffff;
}
.retro-nav-tabbed .retro-nav-item.active, .retro-nav-tabbed .active.retro-tab {
  background: #ffffff;
  color: #000000;
  border-bottom: 2px solid #ffffff;
  z-index: 2;
  margin-bottom: -2px;
}

.retro-nav-underlined {
  display: flex;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-bottom: 1px solid #808080;
}
.retro-nav-underlined .retro-nav-item, .retro-nav-underlined .retro-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  position: relative;
  margin-right: 4px;
}
.retro-nav-underlined .retro-nav-item:after, .retro-nav-underlined .retro-tab:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
}
.retro-nav-underlined .retro-nav-item:hover, .retro-nav-underlined .retro-tab:hover {
  background: transparent;
  color: #000080;
}
.retro-nav-underlined .retro-nav-item:hover:after, .retro-nav-underlined .retro-tab:hover:after {
  background: rgba(0, 0, 128, 0.3);
}
.retro-nav-underlined .retro-nav-item.active, .retro-nav-underlined .active.retro-tab {
  background: transparent;
  color: #000080;
  font-weight: normal;
}
.retro-nav-underlined .retro-nav-item.active:after, .retro-nav-underlined .active.retro-tab:after {
  background: #000080;
}

.retro-nav-buttons {
  display: inline-flex;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.retro-nav-buttons .retro-nav-item, .retro-nav-buttons .retro-tab {
  padding: 6px 14px;
  background: #f0f0f0;
  border: 2px solid #000000;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  margin: 0;
  position: relative;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}
.retro-nav-buttons .retro-nav-item:first-child, .retro-nav-buttons .retro-tab:first-child {
  border-left: 2px solid #000000;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.retro-nav-buttons .retro-nav-item:last-child, .retro-nav-buttons .retro-tab:last-child {
  border-right: 2px solid #000000;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.retro-nav-buttons .retro-nav-item:hover, .retro-nav-buttons .retro-tab:hover {
  background: #ffffff;
  z-index: 1;
}
.retro-nav-buttons .retro-nav-item.active, .retro-nav-buttons .active.retro-tab {
  background: #000080;
  color: #ffffff;
  z-index: 2;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-progress {
  width: 100%;
  background: var(--retro-progress-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  border-radius: 0;
  height: 22px;
  position: relative;
  margin: 1em 0;
  box-shadow: none;
  overflow: hidden;
}

.retro-progress-bar {
  background: var(--retro-progress-bar-bg);
  height: 100%;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 2px solid var(--retro-border-light);
  border-radius: 0;
  box-shadow: none;
  position: absolute;
  left: 0;
  top: 0;
}

.retro-progress-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: var(--retro-white);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  pointer-events: none;
  user-select: none;
  text-shadow: 1px 1px 2px var(--retro-border-medium), 0 0 2px var(--retro-border-dark);
}

.retro-progress-bar-striped {
  background: repeating-linear-gradient(90deg, var(--retro-primary) 0 12px, var(--retro-bg) 12px 18px);
  animation: retro-progress-blocks 0.8s linear infinite;
}

@keyframes retro-progress-blocks {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 18px 0;
  }
}
.retro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 18px;
  padding: 2px 10px;
  font-size: 13px;
  font-family: "Segoe UI", "Tahoma", "Arial", sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--retro-badge-text);
  background: var(--retro-badge-bg);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 0 6px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.2);
  margin: 0.2em 0.4em 0.2em 0;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.retro-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.retro-badge:hover, .retro-badge:focus {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.1);
  filter: brightness(1.1);
}
.retro-badge:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.9);
  filter: brightness(0.9);
}

.retro-badge-primary {
  background: #0040aa;
  color: #fff;
  border: 2px solid #001144;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #001144, 1px 1px 0 #003399;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.2);
}
.retro-badge-primary:hover, .retro-badge-primary:focus {
  background: #145ea8;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #001144, 2px 2px 0 #003399;
  filter: brightness(1.08);
}
.retro-badge-primary:active {
  background: #002266;
  box-shadow: inset 1px 1px 0 #001144, inset -1px -1px 0 #fff;
  filter: brightness(0.95);
}

.retro-badge-success {
  background: #008800;
  color: #fff;
  border: 2px solid #004400;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #004400, 1px 1px 0 #006600;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.2);
}
.retro-badge-success:hover, .retro-badge-success:focus {
  background: #009900;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #004400, 2px 2px 0 #006600;
  filter: brightness(1.08);
}
.retro-badge-success:active {
  background: #004d00;
  box-shadow: inset 1px 1px 0 #004400, inset -1px -1px 0 #fff;
  filter: brightness(0.95);
}

.retro-badge-danger {
  background: #cc0000;
  color: #fff;
  border: 2px solid #660000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #660000, 1px 1px 0 #aa0000;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.2);
}
.retro-badge-danger:hover, .retro-badge-danger:focus {
  background: #e53935;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #660000, 2px 2px 0 #aa0000;
  filter: brightness(1.08);
}
.retro-badge-danger:active {
  background: #7a0000;
  box-shadow: inset 1px 1px 0 #660000, inset -1px -1px 0 #fff;
  filter: brightness(0.95);
}

.retro-badge-warning {
  background: #eead00;
  color: #222;
  border: 2px solid #b38600;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b38600, 1px 1px 0 #dd6600;
  text-shadow: 0 1px 1px #fff, 0 0 3px rgba(0, 0, 0, 0.08);
}
.retro-badge-warning:hover, .retro-badge-warning:focus {
  background: #ffc107;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #b38600, 2px 2px 0 #dd6600;
  filter: brightness(1.08);
}
.retro-badge-warning:active {
  background: #b38600;
  box-shadow: inset 1px 1px 0 #b38600, inset -1px -1px 0 #fff;
  filter: brightness(0.95);
}

.retro-badge-info {
  background: #0099b3;
  color: #fff;
  border: 2px solid #006688;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #006688, 1px 1px 0 #00aacc;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.2);
}
.retro-badge-info:hover, .retro-badge-info:focus {
  background: #00bcd4;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #006688, 2px 2px 0 #00aacc;
  filter: brightness(1.08);
}
.retro-badge-info:active {
  background: #006688;
  box-shadow: inset 1px 1px 0 #006688, inset -1px -1px 0 #fff;
  filter: brightness(0.95);
}

.retro-badge-secondary {
  background: #777;
  color: #fff;
  border: 2px solid #444;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #444, 1px 1px 0 #666;
  text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.2);
}
.retro-badge-secondary:hover, .retro-badge-secondary:focus {
  background: #888;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #444, 2px 2px 0 #666;
  filter: brightness(1.08);
}
.retro-badge-secondary:active {
  background: #444;
  box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #fff;
  filter: brightness(0.95);
}

.retro-badge.retro-badge-xs {
  font-size: 8px !important;
  min-width: 16px !important;
  min-height: 12px !important;
  padding: 1px 4px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-sm {
  font-size: 10px !important;
  min-width: 20px !important;
  min-height: 14px !important;
  padding: 1px 6px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-md {
  font-size: 12px !important;
  min-width: 26px !important;
  min-height: 18px !important;
  padding: 2px 10px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-lg {
  font-size: 14px !important;
  min-width: 36px !important;
  min-height: 22px !important;
  padding: 3px 14px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-xl {
  font-size: 16px !important;
  min-width: 46px !important;
  min-height: 28px !important;
  padding: 4px 18px !important;
  border-width: 2px !important;
}

.retro-badge.retro-badge-xxl {
  font-size: 20px !important;
  min-width: 60px !important;
  min-height: 36px !important;
  padding: 6px 24px !important;
  border-width: 2px !important;
}

.retro-badge-neon {
  background: #000;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000, 0 0 5px 2px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 3px #fff, 0 0 7px #fff;
  border: none;
}
.retro-badge-neon.retro-badge-primary {
  color: #00ffff;
  text-shadow: 0 0 1px #fff, 0 0 3px #00ffff, 0 0 7px #00ffff;
  box-shadow: 0 0 0 1px #00ffff, 0 0 0 2px #000, 0 0 5px 2px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(0, 255, 255, 0.2);
}
.retro-badge-neon.retro-badge-success {
  color: #00ff00;
  text-shadow: 0 0 1px #fff, 0 0 3px #00ff00, 0 0 7px #00ff00;
  box-shadow: 0 0 0 1px #00ff00, 0 0 0 2px #000, 0 0 5px 2px rgba(0, 255, 0, 0.6), 0 0 15px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.3), inset 0 0 10px rgba(0, 255, 0, 0.2);
}
.retro-badge-neon.retro-badge-danger {
  color: #ff0000;
  text-shadow: 0 0 1px #fff, 0 0 3px #ff0000, 0 0 7px #ff0000;
  box-shadow: 0 0 0 1px #ff0000, 0 0 0 2px #000, 0 0 5px 2px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.5), 0 0 25px rgba(255, 0, 0, 0.3), inset 0 0 10px rgba(255, 0, 0, 0.2);
}

.retro-badge-pixel {
  font-family: "Segoe UI", "Tahoma", "Arial", sans-serif;
  font-weight: 600;
  image-rendering: pixelated;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  transform-origin: center;
}
.retro-badge-pixel:hover, .retro-badge-pixel:focus {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 6px 0 #000;
}
.retro-badge-pixel:active {
  transform: translateY(0) translateX(0);
  box-shadow: 0 0 0 #000;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * RetroCSS Accordion Component
 * Classic accordion with retro styling
 */
.retro-accordion {
  width: 100%;
  margin-bottom: 1rem;
}

.retro-accordion-item {
  border: 2px solid var(--retro-border-dark);
  margin-bottom: 0.5rem;
  background-color: var(--retro-bg);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}
.retro-accordion-item.active {
  border-color: var(--retro-primary);
}
.retro-accordion-item.active .retro-accordion-toggle {
  background-color: var(--retro-light);
}

.retro-accordion-toggle {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  background-color: var(--retro-bg);
  border: none;
  border-bottom: 1px solid var(--retro-border-medium);
  font-weight: bold;
  position: relative;
  font-family: var(--retro-font);
  box-shadow: inset 1px 1px 0 var(--retro-border-light);
}
.retro-accordion-toggle:hover {
  background-color: var(--retro-light);
}
.retro-accordion-toggle:active {
  box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
}

.retro-accordion-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.2rem;
}

.retro-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  /* Fix for some browsers that struggle with transitions to/from max-height: auto */
  will-change: max-height;
}

/* Active state is controlled by JavaScript */
.retro-accordion-item.active .retro-accordion-content {
  max-height: 1000px; /* Set a reasonable default max-height */
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0;
}

.retro-pagination .retro-btn {
  min-width: 36px;
  padding: 4px 12px;
  font-size: 15px;
  border-radius: 2px;
  border: 2px solid #000000;
  background: #f0f0f0;
  color: #000000;
  box-shadow: 1px 1px 0 #ffffff;
  transition: background 0.2s, color 0.2s;
}

.retro-pagination .retro-btn.active,
.retro-pagination .retro-btn:active {
  background: #000080;
  color: #ffffff;
  font-weight: bold;
  border-color: #000080;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-breadcrumbs {
  display: flex;
  align-items: center;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  font-size: 15px;
  background: var(--retro-card-bg);
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  gap: 4px;
}

.retro-breadcrumb {
  color: var(--retro-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 2px;
  transition: background 0.2s;
}
.retro-breadcrumb.active {
  color: var(--retro-card-content-text);
  font-weight: bold;
  background: var(--retro-card-content-bg);
}
.retro-breadcrumb:hover:not(.active) {
  background: var(--retro-border-light);
  color: var(--retro-card-content-text);
}

.retro-breadcrumb-icon {
  font-size: 16px;
  margin-right: 2px;
}

.retro-breadcrumb-sep {
  color: #000000;
  margin: 0 2px;
  font-weight: bold;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-dropdown {
  position: relative;
  display: inline-block;
}
.retro-dropdown.open .retro-dropdown-toggle {
  background: var(--retro-primary);
  color: var(--retro-white);
  border-color: var(--retro-primary-dark);
}

.retro-dropdown-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--retro-dropdown-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: 2px;
  padding: 6px 16px;
  font-family: var(--retro-font);
  font-size: 15px;
  color: var(--retro-dropdown-text);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  transition: all 0.2s ease;
  min-width: 120px;
}
.retro-dropdown-toggle:hover {
  background: var(--retro-gray-100);
}
.retro-dropdown-toggle:active {
  box-shadow: none;
  transform: translate(1px, 1px);
}

.retro-dropdown-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.open .retro-dropdown-arrow {
  transform: rotate(180deg);
}

.retro-dropdown-menu {
  position: absolute;
  left: 0;
  min-width: 100%;
  background: var(--retro-dropdown-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--retro-border-light);
  z-index: 1000;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}
.retro-dropdown.open > .retro-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.retro-dropdown-item {
  display: block;
  padding: 8px 16px;
  color: var(--retro-dropdown-text);
  text-decoration: none;
  font-family: var(--retro-font);
  font-size: 15px;
  background: var(--retro-dropdown-bg);
  border-bottom: 1px solid var(--retro-border-light);
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.retro-dropdown-item:last-child {
  border-bottom: none;
}
.retro-dropdown-item:hover {
  background: var(--retro-primary);
  color: var(--retro-white);
}
.retro-dropdown-item:active {
  background: var(--retro-primary-dark);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  background: var(--retro-input-bg);
  border: 2px dashed var(--retro-border-dark);
  border-radius: 4px;
  padding: 16px;
  box-shadow: 1px 1px 0 var(--retro-border-light);
  min-width: 260px;
}

.retro-file-label {
  cursor: pointer;
  margin-bottom: 0;
}

.retro-file-filename {
  font-size: 14px;
  color: var(--retro-input-text);
  margin-left: 8px;
}

.retro-file-drop {
  width: 100%;
  padding: 16px;
  text-align: center;
  background: var(--retro-input-bg);
  border: 1px solid var(--retro-border-medium);
  border-radius: 4px;
  color: var(--retro-border-dark);
  font-size: 15px;
  margin-top: 8px;
  transition: background 0.2s, border 0.2s;
}

.retro-file-drop.dragover {
  background: #000080;
  color: #ffffff;
  border-color: #000080;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-tag-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 220px;
}

.retro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.retro-tag {
  display: inline-flex;
  align-items: center;
  background: var(--retro-input-bg);
  color: var(--retro-input-text);
  border: 1px solid var(--retro-border-medium);
  border-radius: 12px;
  padding: 3px 12px 3px 10px;
  font-size: 14px;
  margin-right: 4px;
  margin-bottom: 4px;
  box-shadow: 1px 1px 0 var(--retro-border-light);
}

.retro-tag-remove {
  margin-left: 8px;
  color: #ff0000;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: color 0.2s;
}
.retro-tag-remove:hover {
  color: #000080;
}

.retro-tag-text {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  min-width: 80px;
  margin-left: 4px;
  padding: 2px 0;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-search-bar {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: 4px;
  padding: 4px 12px;
  min-width: 220px;
}

.retro-search-icon {
  font-size: 18px;
  color: #000000;
  margin-right: 8px;
}

.retro-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  flex: 1;
  padding: 4px 0;
  color: var(--retro-input-text);
}

.retro-search-suggestions {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: 0 0 4px 4px;
  box-shadow: 2px 2px 0 var(--retro-border-light);
  z-index: 10;
}

.retro-search-bar.active .retro-search-suggestions {
  display: block;
}

.retro-search-suggestion {
  padding: 8px 12px;
  font-size: 15px;
  color: var(--retro-input-text);
  cursor: pointer;
  border-bottom: 1px solid var(--retro-border-light);
  transition: background 0.2s, color 0.2s;
}
.retro-search-suggestion:last-child {
  border-bottom: none;
}
.retro-search-suggestion:hover {
  background: var(--retro-primary);
  color: var(--retro-white);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.retro-rating-star {
  font-size: 28px;
  color: #000000;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s, border 0.2s;
  text-shadow: 1px 1px 0 #ffffff;
  user-select: none;
  border: 2px solid #000000;
  border-radius: 6px;
  background: #ffffff;
  padding: 2px 2px 0 2px;
  margin-right: 2px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.retro-rating-star.selected,
.retro-rating-star.active {
  color: #ffa500;
  background: #ffedcc;
  border-color: #ffa500;
  text-shadow: 0 2px 8px #ffffff;
}

.retro-rating-star:hover,
.retro-rating-star:hover ~ .retro-rating-star {
  color: #ffa500;
  background: #ffedcc;
  border-color: #ffa500;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-divider {
  height: 1px;
  background: var(--retro-border-medium);
  margin: var(--retro-spacing-md) 0;
  border: none;
  width: 100%;
}

.retro-divider-vertical {
  width: 6px;
  min-height: 32px;
  height: 100%;
  background: none;
  border-left: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  margin: 0 var(--retro-spacing-md);
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 2px;
}

.retro-divider-dashed {
  border-top: 1px dashed var(--retro-border-medium);
  background: none;
}

.retro-divider-dotted {
  border-top: 1px dotted var(--retro-border-medium);
  background: none;
}

.retro-divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--retro-text-muted);
  margin: var(--retro-spacing-md) 0;
}
.retro-divider-text::before, .retro-divider-text::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--retro-border-medium);
}
.retro-divider-text::before {
  margin-right: var(--retro-spacing-md);
}
.retro-divider-text::after {
  margin-left: var(--retro-spacing-md);
}

.retro-divider-primary {
  background: var(--retro-primary);
}

.retro-divider-success {
  background: var(--retro-success);
}

.retro-divider-warning {
  background: var(--retro-warning);
}

.retro-divider-danger {
  background: var(--retro-danger);
}

.retro-divider-thick {
  height: 2px;
}

.retro-divider-spaced {
  margin: var(--retro-spacing-xl) 0;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * RetroCSS Tooltip Component
 * Tooltips for displaying helpful information on hover
 */
/* Base styling for tooltip triggers */
[data-retro-tooltip] {
  position: relative;
  cursor: help;
}

/* Tooltip container */
.retro-tooltip {
  position: absolute;
  padding: 6px 10px;
  background: var(--retro-black);
  color: var(--retro-white);
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  z-index: 1050;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  font-family: "MS Sans Serif", Arial, sans-serif;
  max-width: 200px;
  line-height: 1.4;
  /* Arrow */
  /* Active state */
  /* Positions */
  /* Variants */
}
.retro-tooltip::after {
  content: "";
  position: absolute;
  border: 5px solid transparent;
}
.retro-tooltip.show {
  opacity: 1;
  visibility: visible;
}
.retro-tooltip.retro-tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}
.retro-tooltip.retro-tooltip-top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}
.retro-tooltip.retro-tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}
.retro-tooltip.retro-tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}
.retro-tooltip.retro-tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-light {
  background: var(--retro-bg);
  color: var(--retro-black);
  border: 1px solid var(--retro-border-dark);
  box-shadow: 2px 2px 0 var(--retro-border-dark);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-top::after {
  border-top-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-left::after {
  border-left-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-right::after {
  border-right-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-primary {
  background: var(--retro-primary);
  color: var(--retro-white);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-top::after {
  border-top-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-left::after {
  border-left-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-right::after {
  border-right-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-success {
  background: var(--retro-success);
  color: var(--retro-white);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-top::after {
  border-top-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-left::after {
  border-left-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-right::after {
  border-right-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-warning {
  background: var(--retro-warning);
  color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-top::after {
  border-top-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-left::after {
  border-left-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-right::after {
  border-right-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-danger {
  background: var(--retro-danger);
  color: var(--retro-white);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-top::after {
  border-top-color: var(--retro-danger);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-danger);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-left::after {
  border-left-color: var(--retro-danger);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-right::after {
  border-right-color: var(--retro-danger);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--retro-spacing-lg) 0;
  font-size: 1rem;
  background: var(--retro-list-bg);
  color: var(--retro-list-text);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.retro-list li {
  padding: var(--retro-spacing-sm) var(--retro-spacing-md);
  transition: background 0.2s, box-shadow 0.2s;
  border-radius: 4px;
  position: relative;
  margin-bottom: 2px;
}
.retro-list li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--retro-primary);
  border-radius: 50%;
  margin-right: var(--retro-spacing-md);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.retro-list ol.retro-list li::before,
.retro-list dl.retro-list li::before {
  content: none;
}
.retro-list .retro-list {
  margin-top: var(--retro-spacing-xs);
  margin-bottom: var(--retro-spacing-xs);
  margin-left: var(--retro-spacing-lg);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.retro-list-bordered {
  border: 1px solid var(--retro-border-medium);
  background: var(--retro-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.retro-list-bordered li {
  border-bottom: 1px solid var(--retro-border-light);
}
.retro-list-bordered li:last-child {
  border-bottom: none;
}
.retro-list-striped li:nth-child(odd) {
  background-color: var(--retro-light);
}
.retro-list-striped li:nth-child(even) {
  background-color: var(--retro-white);
}
.retro-list-hover li {
  cursor: pointer;
}
.retro-list-hover li:hover, .retro-list-hover li:focus {
  background-color: var(--retro-primary);
  color: var(--retro-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  outline: none;
}

ul.retro-list {
  list-style-type: none;
  padding-left: 0;
}

ol.retro-list {
  list-style: none;
  padding-left: 0;
  counter-reset: retro-ol;
}
ol.retro-list li {
  position: relative;
  padding-left: 2.5em;
  margin-bottom: var(--retro-spacing-sm);
  min-height: 2em;
  counter-increment: retro-ol;
}
ol.retro-list li::before {
  content: counter(retro-ol);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 2em;
  height: 2em;
  background: var(--retro-primary);
  color: var(--retro-white);
  font-weight: bold;
  font-family: inherit;
  font-size: 1.1em;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--retro-border-dark);
}
ol.retro-list li ol.retro-list {
  margin-top: var(--retro-spacing-xs);
  margin-bottom: var(--retro-spacing-xs);
  margin-left: 2.5em;
  counter-reset: retro-ol-nested;
}
ol.retro-list li ol.retro-list li {
  padding-left: 2em;
  min-height: 1.6em;
  counter-increment: retro-ol-nested;
}
ol.retro-list li ol.retro-list li::before {
  content: counter(retro-ol-nested);
  width: 1.5em;
  height: 1.5em;
  font-size: 0.95em;
  background: var(--retro-success);
  color: var(--retro-white);
  border-radius: 4px;
  border: 2px solid var(--retro-border-medium);
  top: 0.1em;
}

dl.retro-list dt {
  font-weight: bold;
  margin-top: var(--retro-spacing-sm);
  color: var(--retro-primary);
}
dl.retro-list dd {
  margin-left: var(--retro-spacing-md);
  margin-bottom: var(--retro-spacing-sm);
  color: var(--retro-text-muted);
}

/* RetroCSS Carousel/Slider - Oldschool */
.retro-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-border-dark);
  font-family: "Courier New", Courier, monospace;
  margin-bottom: 1.5rem;
}

.retro-carousel-track {
  display: flex;
  /* Enable smooth transition between slides */
  transition: transform 0.2s ease-in-out;
  width: 100%;
  /* Fix for older browsers */
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}

.retro-carousel-slide {
  min-width: 100%;
  flex: 1 0 100%;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
  border: 2px solid var(--retro-border-medium);
  background: var(--retro-bg);
  box-shadow: 2px 2px 0 var(--retro-border-light), -2px -2px 0 var(--retro-border-dark);
  margin: 8px;
}

.retro-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--retro-bg);
  color: var(--retro-black);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 2px 2px 0 var(--retro-border-light), -2px -2px 0 var(--retro-border-dark);
  border-radius: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 2;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-family: "Courier New", Courier, monospace;
  padding: 0;
  /* Add pressed state */
}
.retro-carousel-arrow:active {
  background: var(--retro-border-medium);
  box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
  transform: translateY(calc(-50% + 1px));
}

.retro-carousel-arrow.left {
  left: 8px;
}

.retro-carousel-arrow.right {
  right: 8px;
}

.retro-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 8px 0;
  padding-bottom: 8px;
}

.retro-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--retro-border-medium);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
  transition: background 0.2s;
}
.retro-carousel-dot.active {
  background: var(--retro-primary);
  border-color: var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
}

/**
 * @name Date/Time Input
 * @group components
 * @description
 * Stylized date and time picker inputs with retro design.
 * @example scss
 *   <input type="date" class="retro-input retro-date">
 *   <input type="time" class="retro-input retro-time">
 */
input[type=date].retro-input,
input[type=time].retro-input,
input[type=datetime-local].retro-input {
  appearance: none;
  background-color: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  padding: 4px 8px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  color: var(--retro-input-text);
}
input[type=date].retro-input::-webkit-calendar-picker-indicator,
input[type=time].retro-input::-webkit-calendar-picker-indicator,
input[type=datetime-local].retro-input::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  opacity: 0.7;
  cursor: pointer;
}
input[type=date].retro-input::-webkit-calendar-picker-indicator:hover,
input[type=time].retro-input::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local].retro-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
input[type=date].retro-input:focus,
input[type=time].retro-input:focus,
input[type=datetime-local].retro-input:focus {
  outline: none;
  border: 2px solid var(--retro-primary);
  box-shadow: 0 0 0 2px rgba(var(--retro-primary-rgb), 0.2);
}
input[type=date].retro-input:disabled,
input[type=time].retro-input:disabled,
input[type=datetime-local].retro-input:disabled {
  background-color: var(--retro-light);
  color: var(--retro-border-medium);
  cursor: not-allowed;
}
input[type=date].retro-input.retro-input-lg,
input[type=time].retro-input.retro-input-lg,
input[type=datetime-local].retro-input.retro-input-lg {
  padding: 8px 12px;
  font-size: calc(var(--retro-font-size) * 1.2);
}
input[type=date].retro-input.retro-input-sm,
input[type=time].retro-input.retro-input-sm,
input[type=datetime-local].retro-input.retro-input-sm {
  padding: 2px 6px;
  font-size: calc(var(--retro-font-size) * 0.9);
}

.retro-datetime-group {
  display: flex;
  gap: var(--retro-spacing-sm);
  align-items: center;
}
.retro-datetime-group input[type=date].retro-input,
.retro-datetime-group input[type=time].retro-input {
  flex: 1;
  min-width: 0;
}
.retro-datetime-group .retro-datetime-separator {
  font-weight: bold;
  color: var(--retro-border-dark);
}

[data-theme=dark] input[type=date].retro-input,
[data-theme=dark] input[type=time].retro-input,
[data-theme=dark] input[type=datetime-local].retro-input {
  background-color: var(--retro-input-bg);
  color: var(--retro-input-text);
}
[data-theme=dark] input[type=date].retro-input::-webkit-calendar-picker-indicator,
[data-theme=dark] input[type=time].retro-input::-webkit-calendar-picker-indicator,
[data-theme=dark] input[type=datetime-local].retro-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/**
 * @name Infinite Scroll
 * @group components
 * @description
 * Component for loading content as the user scrolls down.
 * @example scss
 *   <div class="retro-infinite-scroll">
 *     <!-- Content will be loaded here -->
 *     <div class="retro-infinite-loader">
 *       <div class="retro-spinner"></div>
 *     </div>
 *   </div>
 */
.retro-infinite-scroll {
  position: relative;
  overflow-y: auto;
  max-height: 400px;
  padding: var(--retro-spacing-md);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  background-color: var(--retro-light);
}
.retro-infinite-scroll.retro-h-75 {
  height: 400px;
}

.retro-infinite-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--retro-border-medium);
  background: var(--retro-bg);
  color: var(--retro-black);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}

.retro-infinite-item:hover {
  background: var(--retro-border-light);
  color: var(--retro-primary);
}

.retro-infinite-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--retro-spacing-md);
  margin: var(--retro-spacing-md) 0;
}

.retro-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--retro-border-medium);
  border-radius: 50%;
  border-top-color: var(--retro-primary);
  animation: retro-spin 1s linear infinite;
}

@keyframes retro-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.retro-infinite-end {
  text-align: center;
  padding: var(--retro-spacing-md);
  font-style: italic;
  color: var(--retro-border-medium);
  border-top: 1px dashed var(--retro-border-medium);
  margin-top: var(--retro-spacing-md);
}

.retro-ascii-loader {
  letter-spacing: 2px;
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12), 1px 1px 0 var(--retro-border-light);
  padding: 4px 16px;
  border-radius: 4px;
  filter: blur(0.2px);
  font-weight: bold;
}

@keyframes retro-ascii-dots {
  0% {
    content: ".";
  }
  25% {
    content: "..";
  }
  50% {
    content: "...";
  }
  75% {
    content: "....";
  }
  100% {
    content: ".";
  }
}
[data-theme=dark] .retro-infinite-scroll {
  background-color: var(--retro-bg);
}
[data-theme=dark] .retro-spinner {
  border-color: var(--retro-border-medium);
  border-top-color: var(--retro-primary);
}

.retro-sidebar {
  background: var(--retro-sidebar-bg);
  border: 1px solid var(--retro-border-medium);
  border-radius: 4px;
  padding: var(--retro-spacing-md, 16px);
  width: 100%;
  height: auto;
  position: static;
  overflow-y: auto;
  transition: all 0.3s ease;
  color: var(--retro-sidebar-text);
}
.retro-sidebar-header {
  font-weight: bold;
  margin-bottom: var(--retro-spacing-sm, 8px);
  padding-bottom: var(--retro-spacing-sm, 8px);
  border-bottom: 1px solid var(--retro-border-medium);
}
.retro-sidebar-section {
  margin-bottom: var(--retro-spacing-md, 16px);
}
.retro-sidebar-section-title {
  font-weight: bold;
  margin-bottom: var(--retro-spacing-xs, 4px);
  font-size: 0.9em;
  color: var(--retro-text-muted, #666);
}
.retro-sidebar .active {
  font-weight: bold;
  color: var(--retro-primary);
}
.retro-sidebar ul, .retro-sidebar ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.retro-sidebar ul li, .retro-sidebar ol li {
  margin-bottom: 4px;
}
.retro-sidebar ul li ul, .retro-sidebar ul li ol, .retro-sidebar ol li ul, .retro-sidebar ol li ol {
  padding-left: 16px;
  margin-top: 4px;
}
@media (min-width: 768px) {
  .retro-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 16px;
    margin-right: 0;
    border-right: 2px solid var(--retro-border-medium);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  }
}

.retro-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--retro-bg);
  border: 1px solid var(--retro-border-medium);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: var(--retro-spacing-sm, 8px);
}
.retro-sidebar-toggle-icon {
  width: 24px;
  height: 24px;
  position: relative;
}
.retro-sidebar-toggle-icon:before, .retro-sidebar-toggle-icon:after,
.retro-sidebar-toggle-icon span {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--retro-text);
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}
.retro-sidebar-toggle-icon:before {
  top: 6px;
}
.retro-sidebar-toggle-icon span {
  top: 14px;
}
.retro-sidebar-toggle-icon:after {
  bottom: 6px;
}
@media (min-width: 768px) {
  .retro-sidebar-toggle {
    display: none;
  }
}

.retro-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.retro-sidebar-overlay.active {
  display: block;
}

.retro-sidebar-toggle,
.retro-sidebar-overlay {
  display: none;
}

/* Utilities */
.mt-0 {
  margin-top: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* RetroCSS Grid System
 * A modern, flexible grid system using CSS Grid
 */
.retro-grid {
  display: grid;
  gap: var(--retro-grid-gap, 1rem);
  width: 100%;
}

.retro-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.retro-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.retro-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.retro-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.retro-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.retro-grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.retro-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.retro-grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.retro-grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.retro-grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.retro-grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.retro-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.retro-grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.retro-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.retro-grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.retro-grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.retro-grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.retro-grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.retro-grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.retro-grid-rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr));
}

.retro-grid-rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.retro-grid-rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr));
}

.retro-grid-rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.retro-grid-rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

.retro-grid-auto-cols {
  grid-auto-columns: auto;
}

.retro-grid-auto-rows {
  grid-auto-rows: auto;
}

.retro-grid-flow-row {
  grid-auto-flow: row;
}

.retro-grid-flow-col {
  grid-auto-flow: column;
}

.retro-grid-flow-dense {
  grid-auto-flow: dense;
}

.retro-grid-areas {
  grid-template-areas: var(--retro-grid-areas);
}

.retro-col-span {
  grid-column: var(--retro-col-span);
}

.retro-row-span {
  grid-row: var(--retro-row-span);
}

@media (min-width: 0) {
  .xs\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 576px) {
  .sm\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .lg\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .xl\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .xxl\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.retro-gap-0 {
  gap: 0;
}

.retro-gap-1 {
  gap: 0.25rem;
}

.retro-gap-2 {
  gap: 0.5rem;
}

.retro-gap-3 {
  gap: 1rem;
}

.retro-gap-4 {
  gap: 1.5rem;
}

.retro-gap-5 {
  gap: 2rem;
}

.retro-col-gap-0 {
  column-gap: 0;
}

.retro-col-gap-1 {
  column-gap: 0.25rem;
}

.retro-col-gap-2 {
  column-gap: 0.5rem;
}

.retro-col-gap-3 {
  column-gap: 1rem;
}

.retro-col-gap-4 {
  column-gap: 1.5rem;
}

.retro-col-gap-5 {
  column-gap: 2rem;
}

.retro-row-gap-0 {
  row-gap: 0;
}

.retro-row-gap-1 {
  row-gap: 0.25rem;
}

.retro-row-gap-2 {
  row-gap: 0.5rem;
}

.retro-row-gap-3 {
  row-gap: 1rem;
}

.retro-row-gap-4 {
  row-gap: 1.5rem;
}

.retro-row-gap-5 {
  row-gap: 2rem;
}

.retro-justify-start {
  justify-items: start;
}

.retro-justify-end {
  justify-items: end;
}

.retro-justify-center {
  justify-items: center;
}

.retro-justify-stretch {
  justify-items: stretch;
}

.retro-align-start {
  align-items: start;
}

.retro-align-end {
  align-items: end;
}

.retro-align-center {
  align-items: center;
}

.retro-align-stretch {
  align-items: stretch;
}

.retro-justify-content-start {
  justify-content: start;
}

.retro-justify-content-end {
  justify-content: end;
}

.retro-justify-content-center {
  justify-content: center;
}

.retro-justify-content-between {
  justify-content: space-between;
}

.retro-justify-content-around {
  justify-content: space-around;
}

.retro-justify-content-evenly {
  justify-content: space-evenly;
}

.retro-align-content-start {
  align-content: start;
}

.retro-align-content-end {
  align-content: end;
}

.retro-align-content-center {
  align-content: center;
}

.retro-align-content-between {
  align-content: space-between;
}

.retro-align-content-around {
  align-content: space-around;
}

.retro-align-content-evenly {
  align-content: space-evenly;
}

.retro-col-span-1 {
  grid-column: span 1;
}

.retro-col-span-2 {
  grid-column: span 2;
}

.retro-col-span-3 {
  grid-column: span 3;
}

.retro-col-span-4 {
  grid-column: span 4;
}

.retro-col-span-5 {
  grid-column: span 5;
}

.retro-col-span-6 {
  grid-column: span 6;
}

.retro-col-span-7 {
  grid-column: span 7;
}

.retro-col-span-8 {
  grid-column: span 8;
}

.retro-col-span-9 {
  grid-column: span 9;
}

.retro-col-span-10 {
  grid-column: span 10;
}

.retro-col-span-11 {
  grid-column: span 11;
}

.retro-col-span-12 {
  grid-column: span 12;
}

@media (min-width: 0) {
  .xs\:retro-col-span-1 {
    grid-column: span 1;
  }
  .xs\:retro-col-span-2 {
    grid-column: span 2;
  }
  .xs\:retro-col-span-3 {
    grid-column: span 3;
  }
  .xs\:retro-col-span-4 {
    grid-column: span 4;
  }
  .xs\:retro-col-span-5 {
    grid-column: span 5;
  }
  .xs\:retro-col-span-6 {
    grid-column: span 6;
  }
  .xs\:retro-col-span-7 {
    grid-column: span 7;
  }
  .xs\:retro-col-span-8 {
    grid-column: span 8;
  }
  .xs\:retro-col-span-9 {
    grid-column: span 9;
  }
  .xs\:retro-col-span-10 {
    grid-column: span 10;
  }
  .xs\:retro-col-span-11 {
    grid-column: span 11;
  }
  .xs\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 576px) {
  .sm\:retro-col-span-1 {
    grid-column: span 1;
  }
  .sm\:retro-col-span-2 {
    grid-column: span 2;
  }
  .sm\:retro-col-span-3 {
    grid-column: span 3;
  }
  .sm\:retro-col-span-4 {
    grid-column: span 4;
  }
  .sm\:retro-col-span-5 {
    grid-column: span 5;
  }
  .sm\:retro-col-span-6 {
    grid-column: span 6;
  }
  .sm\:retro-col-span-7 {
    grid-column: span 7;
  }
  .sm\:retro-col-span-8 {
    grid-column: span 8;
  }
  .sm\:retro-col-span-9 {
    grid-column: span 9;
  }
  .sm\:retro-col-span-10 {
    grid-column: span 10;
  }
  .sm\:retro-col-span-11 {
    grid-column: span 11;
  }
  .sm\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 768px) {
  .md\:retro-col-span-1 {
    grid-column: span 1;
  }
  .md\:retro-col-span-2 {
    grid-column: span 2;
  }
  .md\:retro-col-span-3 {
    grid-column: span 3;
  }
  .md\:retro-col-span-4 {
    grid-column: span 4;
  }
  .md\:retro-col-span-5 {
    grid-column: span 5;
  }
  .md\:retro-col-span-6 {
    grid-column: span 6;
  }
  .md\:retro-col-span-7 {
    grid-column: span 7;
  }
  .md\:retro-col-span-8 {
    grid-column: span 8;
  }
  .md\:retro-col-span-9 {
    grid-column: span 9;
  }
  .md\:retro-col-span-10 {
    grid-column: span 10;
  }
  .md\:retro-col-span-11 {
    grid-column: span 11;
  }
  .md\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 992px) {
  .lg\:retro-col-span-1 {
    grid-column: span 1;
  }
  .lg\:retro-col-span-2 {
    grid-column: span 2;
  }
  .lg\:retro-col-span-3 {
    grid-column: span 3;
  }
  .lg\:retro-col-span-4 {
    grid-column: span 4;
  }
  .lg\:retro-col-span-5 {
    grid-column: span 5;
  }
  .lg\:retro-col-span-6 {
    grid-column: span 6;
  }
  .lg\:retro-col-span-7 {
    grid-column: span 7;
  }
  .lg\:retro-col-span-8 {
    grid-column: span 8;
  }
  .lg\:retro-col-span-9 {
    grid-column: span 9;
  }
  .lg\:retro-col-span-10 {
    grid-column: span 10;
  }
  .lg\:retro-col-span-11 {
    grid-column: span 11;
  }
  .lg\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1200px) {
  .xl\:retro-col-span-1 {
    grid-column: span 1;
  }
  .xl\:retro-col-span-2 {
    grid-column: span 2;
  }
  .xl\:retro-col-span-3 {
    grid-column: span 3;
  }
  .xl\:retro-col-span-4 {
    grid-column: span 4;
  }
  .xl\:retro-col-span-5 {
    grid-column: span 5;
  }
  .xl\:retro-col-span-6 {
    grid-column: span 6;
  }
  .xl\:retro-col-span-7 {
    grid-column: span 7;
  }
  .xl\:retro-col-span-8 {
    grid-column: span 8;
  }
  .xl\:retro-col-span-9 {
    grid-column: span 9;
  }
  .xl\:retro-col-span-10 {
    grid-column: span 10;
  }
  .xl\:retro-col-span-11 {
    grid-column: span 11;
  }
  .xl\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1400px) {
  .xxl\:retro-col-span-1 {
    grid-column: span 1;
  }
  .xxl\:retro-col-span-2 {
    grid-column: span 2;
  }
  .xxl\:retro-col-span-3 {
    grid-column: span 3;
  }
  .xxl\:retro-col-span-4 {
    grid-column: span 4;
  }
  .xxl\:retro-col-span-5 {
    grid-column: span 5;
  }
  .xxl\:retro-col-span-6 {
    grid-column: span 6;
  }
  .xxl\:retro-col-span-7 {
    grid-column: span 7;
  }
  .xxl\:retro-col-span-8 {
    grid-column: span 8;
  }
  .xxl\:retro-col-span-9 {
    grid-column: span 9;
  }
  .xxl\:retro-col-span-10 {
    grid-column: span 10;
  }
  .xxl\:retro-col-span-11 {
    grid-column: span 11;
  }
  .xxl\:retro-col-span-12 {
    grid-column: span 12;
  }
}
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* RetroCSS Container Queries
 * A modern approach to component-based responsive design
 */
.retro-container {
  container-type: inline-size;
  container-name: retro-container;
}

@container retro-container (min-width: 20rem) {}
@container retro-container (min-width: 30rem) {}
@container retro-container (min-width: 40rem) {}
@container retro-container (min-width: 50rem) {}
@container retro-container (min-aspect-ratio: 16/9) {}
@container retro-container (max-aspect-ratio: 4/3) {}
@container retro-container (orientation: landscape) {}
@container retro-container (orientation: portrait) {}
@container retro-container (min-width: 20rem) and (max-width: 30rem) {}
@container retro-container (min-width: 30rem) and (max-width: 40rem) {}
@container retro-container (min-width: 40rem) and (max-width: 50rem) {}
@container retro-container (max-width: 20rem) {
  .retro-cq-hide {
    display: none;
  }
}

@container retro-container (min-width: 20rem) {
  .retro-cq-show {
    display: block;
  }
}

@container retro-container (min-width: 30rem) {
  .retro-cq-text-lg {
    font-size: 1.25rem;
  }
}
@container retro-container (min-width: 40rem) {
  .retro-cq-text-xl {
    font-size: 1.5rem;
  }
}
@container retro-container (min-width: 30rem) {
  .retro-cq-flex-row {
    flex-direction: row;
  }
}
@container retro-container (max-width: 30rem) {
  .retro-cq-flex-col {
    flex-direction: column;
  }
}
@container retro-container (min-width: 30rem) {
  .retro-cq-p-4 {
    padding: 1rem;
  }
}
@container retro-container (min-width: 40rem) {
  .retro-cq-p-6 {
    padding: 1.5rem;
  }
}
@container retro-container (min-width: 30rem) {
  .retro-cq-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@container retro-container (min-width: 40rem) {
  .retro-cq-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.main-content {
  margin-left: 220px;
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  .retro-container, .demo-section {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    padding: 0 var(--retro-spacing-md) !important;
  }
}

/*# sourceMappingURL=retro.css.map */