:root {
  --text-color: #000;
  --text-muted: #6c757d;
  --card-bg: #fff;
  --border-color: #dee2e6;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --success-color: #198754;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;
  --light-bg: #f8f9fa;
  --dark-bg: #212529;
  --neutral-100: #f5f5f5;
  --table-header-bg: #f8f9fa;
  --table-stripe-bg: rgba(0, 0, 0, 0.05);
  --table-hover-bg: rgba(0, 0, 0, 0.075);
}

:root {
  --gradient-start: #035193;
  --gradient-end: #4897CC;
  --white: #ffffff;
  --white-100: #ffffff;
  --white-200: #f9f9f9;
  --white-300: #f2f2f2;
  --white-400: #ebebeb;
  --white-500: #e5e5e5;
  --white-600: #dddddd;
  --white-700: #d6d6d6;
  --white-800: #cccccc;
  --black-100: #000000;
  --black-200: #111111;
  --black-300: #1a1a1a;
  --black-400: #262626;
  --black-500: #333333;
  --black-600: #4d4d4d;
  --black-700: #666666;
  --black-800: #808080;
  --primary-800: #081824;
  --primary-700: #113049;
  --primary-600: #19486D;
  --primary-550: #0B4571;
  --primary-450: #235882;
  --primary: #216091;
  --primary-400: #5988AD;
  --primary-300: #90AFC8;
  --primary-200: #C7D7E3;
  --primary-100: #E8EFF4;
  --secondary-800: #08263D;
  --secondary-700: #114B7A;
  --secondary-600: #1971B6;
  --secondary-500: #2196F3;
  --secondary-400: #59B1F6;
  --secondary-300: #90CAF9;
  --secondary-200: #C7E5FC;
  --secondary-100: #E8F4FD;
  --tertiary-800: #182440;
  --tertiary-700: #304880;
  --tertiary-600: #496CBF;
  --tertiary-500: #6190FF;
  --tertiary-400: #89ACFF;
  --tertiary-300: #AFC7FF;
  --tertiary-200: #D7E3FF;
  --tertiary-150: #E8EEFC;
  --tertiary-100: #F2F5FC;
  --tertiary-50: rgba(242, 245, 252, 0.25);
  --neutral-800: #131313;
  --neutral-black: #1B1F28;
  --neutral-700: #262626;
  --neutral-600: #393939;
  --neutral-500: #4C4C4C;
  --neutral-400: #797979;
  --neutral-300: #A5A5A5;
  --neutral-200: #D2D2D2;
  --neutral-100: #EDEDED;
  --accent-500: #F3EF21;
  --accent-400: #F6F359;
  --accent-300: #F9F790;
  --accent-200: #FCFBC7;
  --accent-100: #FDFDE8;
  --error-800: #3B0C0C;
  --error-700: #751919;
  --error-600: #AF2525;
  --error-500: #EA3131;
  --error-400: #EF6565;
  --error-300: #F49898;
  --error-200: #FACBCB;
  --error-100: #FCEAEA;
  --success-800: #182F0A;
  --success-700: #315E15;
  --success-600: #498D1F;
  --success-500: #61BC29;
  --success-400: #89CD5F;
  --success-300: #B0DD94;
  --success-200: #D7EEC9;
  --success-100: #EFF8E9;
  --attention-800: #3D2803;
  --attention-700: #7B4F06;
  --attention-600: #B87708;
  --attention-500: #F59E0B;
  --attention-400: #F7B648;
  --attention-300: #FACF85;
  --attention-200: #FDE7C2;
  --attention-100: #F59E0B;
  --badge-dark-grey: #374151;
  --badge-light-grey: #6B7280;
  --badge-dark-green: #0E8C62;
  --badge-light-green: #14B8A6;
  --badge-red: #DC2626;
  --badge-orange: #FFA40A;
  --badge-pink: #ED2F8D;
  --badge-light-blue: #1AAAEA;
  --badge-dark-blue: #2476FB;
  --badge-purple: #6366F1;
  --brand-primary: #19486D;
  --brand-secondary: #2196F3;
  --brand-tertiary: #6190FF;
  --text-color: #131313;
  --text-muted: #393939;
  --bg-body: #EDEDED;
  --border-color: #D2D2D2;
  --success-color: #61BC29;
  --error-color: #EA3131;
  --warning-color: #F59E0B;
  --pink-color: #139F70;
  --dark-green: #139F70;
}

.text-primary-800 {
  color: var(--primary-800) !important;
}

.text-primary-700 {
  color: var(--primary-700) !important;
}

.text-primary-600 {
  color: var(--primary-600) !important;
}

.text-primary-550 {
  color: var(--primary-550) !important;
}

.text-primary-450 {
  color: var(--primary-450) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-primary-400 {
  color: var(--primary-400) !important;
}

.text-primary-300 {
  color: var(--primary-300) !important;
}

.text-primary-200 {
  color: var(--primary-200) !important;
}

.text-primary-100 {
  color: var(--primary-100) !important;
}

.text-secondary-800 {
  color: var(--secondary-800) !important;
}

.text-secondary-700 {
  color: var(--secondary-700) !important;
}

.text-secondary-600 {
  color: var(--secondary-600) !important;
}

.text-secondary-500 {
  color: var(--secondary-500) !important;
}

.text-secondary-400 {
  color: var(--secondary-400) !important;
}

.text-secondary-300 {
  color: var(--secondary-300) !important;
}

.text-secondary-200 {
  color: var(--secondary-200) !important;
}

.text-secondary-100 {
  color: var(--secondary-100) !important;
}

.text-tertiary-800 {
  color: var(--tertiary-800) !important;
}

.text-tertiary-700 {
  color: var(--tertiary-700) !important;
}

.text-tertiary-600 {
  color: var(--tertiary-600) !important;
}

.text-tertiary-500 {
  color: var(--tertiary-500) !important;
}

.text-tertiary-400 {
  color: var(--tertiary-400) !important;
}

.text-tertiary-300 {
  color: var(--tertiary-300) !important;
}

.text-tertiary-200 {
  color: var(--tertiary-200) !important;
}

.text-tertiary-150 {
  color: var(--tertiary-150) !important;
}

.text-tertiary-100 {
  color: var(--tertiary-100) !important;
}

.text-tertiary-50 {
  color: var(--tertiary-50) !important;
}

.text-neutral-800 {
  color: var(--neutral-800) !important;
}

.text-neutral-black {
  color: var(--neutral-black) !important;
}

.text-neutral-700 {
  color: var(--neutral-700) !important;
}

.text-neutral-600 {
  color: var(--neutral-600) !important;
}

.text-neutral-500 {
  color: var(--neutral-500) !important;
}

.text-neutral-400 {
  color: var(--neutral-400) !important;
}

.text-neutral-300 {
  color: var(--neutral-300) !important;
}

.text-neutral-200 {
  color: var(--neutral-200) !important;
}

.text-neutral-100 {
  color: var(--neutral-100) !important;
}

.text-accent-500 {
  color: var(--accent-500) !important;
}

.text-accent-400 {
  color: var(--accent-400) !important;
}

.text-accent-300 {
  color: var(--accent-300) !important;
}

.text-accent-200 {
  color: var(--accent-200) !important;
}

.text-accent-100 {
  color: var(--accent-100) !important;
}

.text-error-800 {
  color: var(--error-800) !important;
}

.text-error-700 {
  color: var(--error-700) !important;
}

.text-error-600 {
  color: var(--error-600) !important;
}

.text-error-500 {
  color: var(--error-500) !important;
}

.text-error-400 {
  color: var(--error-400) !important;
}

.text-error-300 {
  color: var(--error-300) !important;
}

.text-error-200 {
  color: var(--error-200) !important;
}

.text-error-100 {
  color: var(--error-100) !important;
}

.text-success-800 {
  color: var(--success-800) !important;
}

.text-success-700 {
  color: var(--success-700) !important;
}

.text-success-600 {
  color: var(--success-600) !important;
}

.text-success-500 {
  color: var(--success-500) !important;
}

.text-success-400 {
  color: var(--success-400) !important;
}

.text-success-300 {
  color: var(--success-300) !important;
}

.text-success-200 {
  color: var(--success-200) !important;
}

.text-success-100 {
  color: var(--success-100) !important;
}

.text-attention-800 {
  color: var(--attention-800) !important;
}

.text-attention-700 {
  color: var(--attention-700) !important;
}

.text-attention-600 {
  color: var(--attention-600) !important;
}

.text-attention-500 {
  color: var(--attention-500) !important;
}

.text-attention-400 {
  color: var(--attention-400) !important;
}

.text-attention-300 {
  color: var(--attention-300) !important;
}

.text-attention-200 {
  color: var(--attention-200) !important;
}

.text-attention-100 {
  color: var(--attention-100) !important;
}

.text-badge-dark-grey {
  color: var(--badge-dark-grey) !important;
}

.text-badge-light-grey {
  color: var(--badge-light-grey) !important;
}

.text-badge-dark-green {
  color: var(--badge-dark-green) !important;
}

.text-badge-light-green {
  color: var(--badge-light-green) !important;
}

.text-badge-red {
  color: var(--badge-red) !important;
}

.text-badge-orange {
  color: var(--badge-orange) !important;
}

.text-badge-pink {
  color: var(--badge-pink) !important;
}

.text-badge-light-blue {
  color: var(--badge-light-blue) !important;
}

.text-badge-dark-blue {
  color: var(--badge-dark-blue) !important;
}

.text-badge-purple {
  color: var(--badge-purple) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-white-100 {
  color: var(--white-100) !important;
}

.text-white-200 {
  color: var(--white-200) !important;
}

.text-white-300 {
  color: var(--white-300) !important;
}

.text-white-400 {
  color: var(--white-400) !important;
}

.text-white-500 {
  color: var(--white-500) !important;
}

.text-white-600 {
  color: var(--white-600) !important;
}

.text-white-700 {
  color: var(--white-700) !important;
}

.text-white-800 {
  color: var(--white-800) !important;
}

.text-black-100 {
  color: var(--black-100) !important;
}

.text-black-200 {
  color: var(--black-200) !important;
}

.text-black-300 {
  color: var(--black-300) !important;
}

.text-black-400 {
  color: var(--black-400) !important;
}

.text-black-500 {
  color: var(--black-500) !important;
}

.text-black-600 {
  color: var(--black-600) !important;
}

.text-black-700 {
  color: var(--black-700) !important;
}

.text-black-800 {
  color: var(--black-800) !important;
}

.text-pink-color {
  color: var(--pink-color) !important;
}

.text-dark-green {
  color: var(--dark-green) !important;
}

.bg-primary-800 {
  background-color: var(--primary-800) !important;
}

.bg-primary-700 {
  background-color: var(--primary-700) !important;
}

.bg-primary-600 {
  background-color: var(--primary-600) !important;
}

.bg-primary-550 {
  background-color: var(--primary-550) !important;
}

.bg-primary-450 {
  background-color: var(--primary-450) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-primary-400 {
  background-color: var(--primary-400) !important;
}

.bg-primary-300 {
  background-color: var(--primary-300) !important;
}

.bg-primary-200 {
  background-color: var(--primary-200) !important;
}

.bg-primary-100 {
  background-color: var(--primary-100) !important;
}

.bg-secondary-800 {
  background-color: var(--secondary-800) !important;
}

.bg-secondary-700 {
  background-color: var(--secondary-700) !important;
}

.bg-secondary-600 {
  background-color: var(--secondary-600) !important;
}

.bg-secondary-500 {
  background-color: var(--secondary-500) !important;
}

.bg-secondary-400 {
  background-color: var(--secondary-400) !important;
}

.bg-secondary-300 {
  background-color: var(--secondary-300) !important;
}

.bg-secondary-200 {
  background-color: var(--secondary-200) !important;
}

.bg-secondary-100 {
  background-color: var(--secondary-100) !important;
}

.bg-tertiary-800 {
  background-color: var(--tertiary-800) !important;
}

.bg-tertiary-700 {
  background-color: var(--tertiary-700) !important;
}

.bg-tertiary-600 {
  background-color: var(--tertiary-600) !important;
}

.bg-tertiary-500 {
  background-color: var(--tertiary-500) !important;
}

.bg-tertiary-400 {
  background-color: var(--tertiary-400) !important;
}

.bg-tertiary-300 {
  background-color: var(--tertiary-300) !important;
}

.bg-tertiary-200 {
  background-color: var(--tertiary-200) !important;
}

.bg-tertiary-150 {
  background-color: var(--tertiary-150) !important;
}

.bg-tertiary-100 {
  background-color: var(--tertiary-100) !important;
}

.bg-tertiary-50 {
  background-color: var(--tertiary-50) !important;
}

.bg-neutral-800 {
  background-color: var(--neutral-800) !important;
}

.bg-neutral-black {
  background-color: var(--neutral-black) !important;
}

.bg-neutral-700 {
  background-color: var(--neutral-700) !important;
}

.bg-neutral-600 {
  background-color: var(--neutral-600) !important;
}

.bg-neutral-500 {
  background-color: var(--neutral-500) !important;
}

.bg-neutral-400 {
  background-color: var(--neutral-400) !important;
}

.bg-neutral-300 {
  background-color: var(--neutral-300) !important;
}

.bg-neutral-200 {
  background-color: var(--neutral-200) !important;
}

.bg-neutral-100 {
  background-color: var(--neutral-100) !important;
}

.bg-accent-500 {
  background-color: var(--accent-500) !important;
}

.bg-accent-400 {
  background-color: var(--accent-400) !important;
}

.bg-accent-300 {
  background-color: var(--accent-300) !important;
}

.bg-accent-200 {
  background-color: var(--accent-200) !important;
}

.bg-accent-100 {
  background-color: var(--accent-100) !important;
}

.bg-error-800 {
  background-color: var(--error-800) !important;
}

.bg-error-700 {
  background-color: var(--error-700) !important;
}

.bg-error-600 {
  background-color: var(--error-600) !important;
}

.bg-error-500 {
  background-color: var(--error-500) !important;
}

.bg-error-400 {
  background-color: var(--error-400) !important;
}

.bg-error-300 {
  background-color: var(--error-300) !important;
}

.bg-error-200 {
  background-color: var(--error-200) !important;
}

.bg-error-100 {
  background-color: var(--error-100) !important;
}

.bg-success-800 {
  background-color: var(--success-800) !important;
}

.bg-success-700 {
  background-color: var(--success-700) !important;
}

.bg-success-600 {
  background-color: var(--success-600) !important;
}

.bg-success-500 {
  background-color: var(--success-500) !important;
}

.bg-success-400 {
  background-color: var(--success-400) !important;
}

.bg-success-300 {
  background-color: var(--success-300) !important;
}

.bg-success-200 {
  background-color: var(--success-200) !important;
}

.bg-success-100 {
  background-color: var(--success-100) !important;
}

.bg-attention-800 {
  background-color: var(--attention-800) !important;
}

.bg-attention-700 {
  background-color: var(--attention-700) !important;
}

.bg-attention-600 {
  background-color: var(--attention-600) !important;
}

.bg-attention-500 {
  background-color: var(--attention-500) !important;
}

.bg-attention-400 {
  background-color: var(--attention-400) !important;
}

.bg-attention-300 {
  background-color: var(--attention-300) !important;
}

.bg-attention-200 {
  background-color: var(--attention-200) !important;
}

.bg-attention-100 {
  background-color: var(--attention-100) !important;
}

.bg-badge-dark-grey {
  background-color: var(--badge-dark-grey) !important;
}

.bg-badge-light-grey {
  background-color: var(--badge-light-grey) !important;
}

.bg-badge-dark-green {
  background-color: var(--badge-dark-green) !important;
}

.bg-badge-light-green {
  background-color: var(--badge-light-green) !important;
}

.bg-badge-red {
  background-color: var(--badge-red) !important;
}

.bg-badge-orange {
  background-color: var(--badge-orange) !important;
}

.bg-badge-pink {
  background-color: var(--badge-pink) !important;
}

.bg-badge-light-blue {
  background-color: var(--badge-light-blue) !important;
}

.bg-badge-dark-blue {
  background-color: var(--badge-dark-blue) !important;
}

.bg-badge-purple {
  background-color: var(--badge-purple) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-white-100 {
  background-color: var(--white-100) !important;
}

.bg-white-200 {
  background-color: var(--white-200) !important;
}

.bg-white-300 {
  background-color: var(--white-300) !important;
}

.bg-white-400 {
  background-color: var(--white-400) !important;
}

.bg-white-500 {
  background-color: var(--white-500) !important;
}

.bg-white-600 {
  background-color: var(--white-600) !important;
}

.bg-white-700 {
  background-color: var(--white-700) !important;
}

.bg-white-800 {
  background-color: var(--white-800) !important;
}

.bg-black-100 {
  background-color: var(--black-100) !important;
}

.bg-black-200 {
  background-color: var(--black-200) !important;
}

.bg-black-300 {
  background-color: var(--black-300) !important;
}

.bg-black-400 {
  background-color: var(--black-400) !important;
}

.bg-black-500 {
  background-color: var(--black-500) !important;
}

.bg-black-600 {
  background-color: var(--black-600) !important;
}

.bg-black-700 {
  background-color: var(--black-700) !important;
}

.bg-black-800 {
  background-color: var(--black-800) !important;
}

.bg-pink-color {
  background-color: var(--pink-color) !important;
}

.bg-dark-green {
  background-color: var(--dark-green) !important;
}

.border-primary-800 {
  border-color: var(--primary-800) !important;
}

.border-primary-700 {
  border-color: var(--primary-700) !important;
}

.border-primary-600 {
  border-color: var(--primary-600) !important;
}

.border-primary-550 {
  border-color: var(--primary-550) !important;
}

.border-primary-450 {
  border-color: var(--primary-450) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.border-primary-400 {
  border-color: var(--primary-400) !important;
}

.border-primary-300 {
  border-color: var(--primary-300) !important;
}

.border-primary-200 {
  border-color: var(--primary-200) !important;
}

.border-primary-100 {
  border-color: var(--primary-100) !important;
}

.border-secondary-800 {
  border-color: var(--secondary-800) !important;
}

.border-secondary-700 {
  border-color: var(--secondary-700) !important;
}

.border-secondary-600 {
  border-color: var(--secondary-600) !important;
}

.border-secondary-500 {
  border-color: var(--secondary-500) !important;
}

.border-secondary-400 {
  border-color: var(--secondary-400) !important;
}

.border-secondary-300 {
  border-color: var(--secondary-300) !important;
}

.border-secondary-200 {
  border-color: var(--secondary-200) !important;
}

.border-secondary-100 {
  border-color: var(--secondary-100) !important;
}

.border-tertiary-800 {
  border-color: var(--tertiary-800) !important;
}

.border-tertiary-700 {
  border-color: var(--tertiary-700) !important;
}

.border-tertiary-600 {
  border-color: var(--tertiary-600) !important;
}

.border-tertiary-500 {
  border-color: var(--tertiary-500) !important;
}

.border-tertiary-400 {
  border-color: var(--tertiary-400) !important;
}

.border-tertiary-300 {
  border-color: var(--tertiary-300) !important;
}

.border-tertiary-200 {
  border-color: var(--tertiary-200) !important;
}

.border-tertiary-150 {
  border-color: var(--tertiary-150) !important;
}

.border-tertiary-100 {
  border-color: var(--tertiary-100) !important;
}

.border-tertiary-50 {
  border-color: var(--tertiary-50) !important;
}

.border-neutral-800 {
  border-color: var(--neutral-800) !important;
}

.border-neutral-black {
  border-color: var(--neutral-black) !important;
}

.border-neutral-700 {
  border-color: var(--neutral-700) !important;
}

.border-neutral-600 {
  border-color: var(--neutral-600) !important;
}

.border-neutral-500 {
  border-color: var(--neutral-500) !important;
}

.border-neutral-400 {
  border-color: var(--neutral-400) !important;
}

.border-neutral-300 {
  border-color: var(--neutral-300) !important;
}

.border-neutral-200 {
  border-color: var(--neutral-200) !important;
}

.border-neutral-100 {
  border-color: var(--neutral-100) !important;
}

.border-accent-500 {
  border-color: var(--accent-500) !important;
}

.border-accent-400 {
  border-color: var(--accent-400) !important;
}

.border-accent-300 {
  border-color: var(--accent-300) !important;
}

.border-accent-200 {
  border-color: var(--accent-200) !important;
}

.border-accent-100 {
  border-color: var(--accent-100) !important;
}

.border-error-800 {
  border-color: var(--error-800) !important;
}

.border-error-700 {
  border-color: var(--error-700) !important;
}

.border-error-600 {
  border-color: var(--error-600) !important;
}

.border-error-500 {
  border-color: var(--error-500) !important;
}

.border-error-400 {
  border-color: var(--error-400) !important;
}

.border-error-300 {
  border-color: var(--error-300) !important;
}

.border-error-200 {
  border-color: var(--error-200) !important;
}

.border-error-100 {
  border-color: var(--error-100) !important;
}

.border-success-800 {
  border-color: var(--success-800) !important;
}

.border-success-700 {
  border-color: var(--success-700) !important;
}

.border-success-600 {
  border-color: var(--success-600) !important;
}

.border-success-500 {
  border-color: var(--success-500) !important;
}

.border-success-400 {
  border-color: var(--success-400) !important;
}

.border-success-300 {
  border-color: var(--success-300) !important;
}

.border-success-200 {
  border-color: var(--success-200) !important;
}

.border-success-100 {
  border-color: var(--success-100) !important;
}

.border-attention-800 {
  border-color: var(--attention-800) !important;
}

.border-attention-700 {
  border-color: var(--attention-700) !important;
}

.border-attention-600 {
  border-color: var(--attention-600) !important;
}

.border-attention-500 {
  border-color: var(--attention-500) !important;
}

.border-attention-400 {
  border-color: var(--attention-400) !important;
}

.border-attention-300 {
  border-color: var(--attention-300) !important;
}

.border-attention-200 {
  border-color: var(--attention-200) !important;
}

.border-attention-100 {
  border-color: var(--attention-100) !important;
}

.border-badge-dark-grey {
  border-color: var(--badge-dark-grey) !important;
}

.border-badge-light-grey {
  border-color: var(--badge-light-grey) !important;
}

.border-badge-dark-green {
  border-color: var(--badge-dark-green) !important;
}

.border-badge-light-green {
  border-color: var(--badge-light-green) !important;
}

.border-badge-red {
  border-color: var(--badge-red) !important;
}

.border-badge-orange {
  border-color: var(--badge-orange) !important;
}

.border-badge-pink {
  border-color: var(--badge-pink) !important;
}

.border-badge-light-blue {
  border-color: var(--badge-light-blue) !important;
}

.border-badge-dark-blue {
  border-color: var(--badge-dark-blue) !important;
}

.border-badge-purple {
  border-color: var(--badge-purple) !important;
}

.border-white {
  border-color: var(--white) !important;
}

.border-white-100 {
  border-color: var(--white-100) !important;
}

.border-white-200 {
  border-color: var(--white-200) !important;
}

.border-white-300 {
  border-color: var(--white-300) !important;
}

.border-white-400 {
  border-color: var(--white-400) !important;
}

.border-white-500 {
  border-color: var(--white-500) !important;
}

.border-white-600 {
  border-color: var(--white-600) !important;
}

.border-white-700 {
  border-color: var(--white-700) !important;
}

.border-white-800 {
  border-color: var(--white-800) !important;
}

.border-black-100 {
  border-color: var(--black-100) !important;
}

.border-black-200 {
  border-color: var(--black-200) !important;
}

.border-black-300 {
  border-color: var(--black-300) !important;
}

.border-black-400 {
  border-color: var(--black-400) !important;
}

.border-black-500 {
  border-color: var(--black-500) !important;
}

.border-black-600 {
  border-color: var(--black-600) !important;
}

.border-black-700 {
  border-color: var(--black-700) !important;
}

.border-black-800 {
  border-color: var(--black-800) !important;
}

.border-pink-color {
  border-color: var(--pink-color) !important;
}

.border-dark-green {
  border-color: var(--dark-green) !important;
}

.text-body {
  color: var(--text-color) !important;
}

.text-muted-body {
  color: var(--text-muted) !important;
}

.bg-body {
  background-color: var(--bg-body) !important;
}

.border-default {
  border-color: var(--border-color) !important;
}

.text-brand {
  color: var(--brand-primary) !important;
}

.bg-brand {
  background-color: var(--brand-primary) !important;
}

.text-success-main {
  color: var(--success-color) !important;
}

.text-error-main {
  color: var(--error-color) !important;
}

.text-warning-main {
  color: var(--warning-color) !important;
}

.bg-success-main {
  background-color: var(--success-color) !important;
}

.bg-error-main {
  background-color: var(--error-color) !important;
}

.bg-warning-main {
  background-color: var(--warning-color) !important;
}

.toolbar-btn.secondary, .toolbar-btn.primary, .toolbar-btn.transparent, .icon-button.transparent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 0;
}

.svg {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--secondary-400);
  border-color: var(--secondary-400);
}
.btn-primary:disabled {
  background-color: var(--neutral-400);
  border-color: var(--neutral-400);
}
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-primary:active {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: transparent !important;
  border-color: var(--secondary-400);
  color: var(--secondary-400) !important;
}
.btn-outline-primary:focus {
  background-color: transparent !important;
  border-color: var(--primary);
  color: var(--primary) !important;
}
.btn-outline-primary:disabled {
  background-color: transparent;
  border-color: var(--neutral-300);
  color: var(--neutral-300);
}
.btn-outline-white {
  background-color: transparent;
  border-color: var(--surface-draer-light-btn);
  color: var(--surface-draer-light-btn);
}
.btn-outline-white.active {
  background-color: var(--tertiary-50) !important;
  border-color: var(--surface-draer-light-btn) !important;
  color: var(--surface-draer-light-btn) !important;
}
.btn-outline-white:hover, .btn-outline-white:focus {
  background-color: var(--tertiary-50) !important;
  border-color: var(--surface-draer-light-btn) !important;
  color: var(--surface-draer-light-btn) !important;
}
.btn-outline-white:disabled {
  background-color: transparent;
  border-color: var(--neutral-300);
  color: var(--neutral-300);
}
.btn-secondary {
  background-color: var(--secondary-600);
  border-color: var(--secondary-600);
}
.btn-secondary:active {
  background-color: var(--secondary-600);
}
.btn-secondary:hover {
  background-color: var(--secondary-400);
  border-color: var(--secondary-400);
}
.btn-secondary:disabled {
  background-color: var(--neutral-400);
  border-color: var(--neutral-400);
}
.btn-secondary-200 {
  background-color: var(--secondary-200);
  border-color: var(--secondary-200);
}
.btn-secondary-200:active {
  background-color: var(--secondary-200);
}
.btn-secondary-200:hover {
  background-color: var(--secondary-100);
  border-color: var(--secondary-100);
}
.btn-secondary-200:disabled {
  background-color: var(--neutral-300);
  border-color: var(--neutral-300);
}
.btn-secondary-500 {
  background-color: var(--secondary-500);
  border-color: var(--secondary-500);
  color: var(--white-100);
}
.btn-secondary-500:active {
  background-color: var(--secondary-500) !important;
  border-color: var(--secondary-500) !important;
  color: var(--white-100) !important;
}
.btn-secondary-500:hover {
  background-color: var(--secondary-400);
  border-color: var(--secondary-400);
  color: var(--white-100);
}
.btn-secondary-500:disabled {
  background-color: var(--neutral-300);
  border-color: var(--neutral-300);
  color: var(--white-100) !important;
}
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--secondary-600);
  color: var(--secondary-600);
}
.btn-outline-secondary:active {
  background-color: transparent !important;
  border-color: var(--secondary-600) !important;
  color: var(--secondary-600) !important;
}
.btn-outline-secondary:hover {
  background-color: transparent;
  border-color: var(--secondary-400);
  color: var(--secondary-400);
}
.btn-outline-secondary:disabled {
  background-color: transparent;
  border-color: var(--neutral-400);
  color: var(--neutral-400);
}
.btn-white {
  background-color: transparent;
  color: var(--white-100);
}
.btn-white:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-white:hover, .btn-white:focus {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
}
.btn-white:disabled {
  background-color: var(--neutral-400);
  border-color: var(--neutral-400);
}
.btn-danger {
  background-color: var(--error-500);
  color: var(--white-100);
}

.view-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: var(--secondary-200);
  overflow: hidden;
}
.view-toggle:focus-within {
  box-shadow: 0 0 0 3px rgba(33, 105, 243, 0.35); /* var(--secondary-600) glow */
  border-radius: 10px;
}
.view-toggle .toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 0px);
  width: 48px !important;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: var(--secondary-600);
  transition: transform 0.25s ease, width 0.25s ease;
  z-index: 1;
}
.view-toggle .btn-check + .btn {
  position: relative;
  z-index: 5;
  width: 48px;
  height: 40px;
  border: 0 !important;
  background: transparent;
  color: var(--secondary-600);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}
.view-toggle .btn-check + .btn svg {
  stroke: var(--secondary-600);
  transform: scale(1.05);
}
.view-toggle .btn-check + .btn:hover {
  color: var(--secondary-400);
}
.view-toggle .btn-check + .btn.is-active svg {
  stroke: var(--white-100) !important;
}
.view-toggle.secondary-500 .toggle-slider {
  background: var(--secondary-500);
}
.view-toggle.secondary-500 .btn-check + .btn svg {
  stroke: var(--secondary-500);
}

.toolbar-btn.secondary {
  background-color: var(--secondary-200);
  color: var(--neutral-black);
  font-size: 1.1rem;
  transition: all 0.25s ease;
  cursor: pointer;
}
.toolbar-btn.secondary:hover, .toolbar-btn.secondary:active {
  background-color: var(--secondary-300);
  color: var(--neutral-black);
}
.toolbar-btn.secondary:disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-300);
  cursor: default;
}
.toolbar-btn.primary {
  background-color: var(--primary);
  color: var(--white-100);
  font-size: 1.1rem;
  transition: all 0.25s ease;
  cursor: pointer;
}
.toolbar-btn.primary:hover, .toolbar-btn.primary:active {
  background-color: var(--secondary-300);
  color: var(--neutral-black);
}
.toolbar-btn.primary:disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-300);
  cursor: default;
}
.toolbar-btn.transparent {
  background-color: transparent;
  color: var(--neutral-black);
  font-size: 1.1rem;
  transition: all 0.25s ease;
  cursor: pointer;
}
.toolbar-btn.transparent:hover, .toolbar-btn.transparent:active {
  background-color: var(--secondary-300);
  color: var(--neutral-black);
}
.toolbar-btn.transparent:disabled {
  background-color: var(--neutral-100);
  color: var(--neutral-300);
  cursor: default;
}

.icon-button.transparent {
  background-color: transparent;
  color: var(--secondary-400);
  font-size: 1.1rem;
  transition: all 0.25s ease;
  cursor: pointer;
}
.icon-button.transparent:hover, .icon-button.transparent:active {
  background-color: var(--secondary-300);
  color: var(--accent-500);
}
.icon-button.transparent.active {
  background-color: var(--secondary-400);
  color: var(--accent-500);
}
.icon-button.transparent.active:hover {
  background-color: var(--secondary-300);
}
.icon-button.transparent:disabled {
  background-color: transparent;
  color: var(--neutral-300);
  cursor: default;
}

.svg {
  display: inline-flex;
  align-items: center;
}
.svg--16 {
  min-width: 16px;
  height: 16px !important;
}
.svg--24 {
  min-width: 24px;
  height: 24px;
}
.svg--32 {
  min-width: 32px;
  height: 32px;
}
.svg--48 {
  min-width: 48px;
  height: 48px;
}
.svg--151 {
  min-width: 151px;
  height: 151px;
}
.svg > svg {
  max-width: 100%;
  height: 100%;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.svg > svg.no-stroke {
  stroke-width: 0 !important;
}

.make-primary-link {
  color: var(--white-100);
  text-decoration: underline;
}
.make-primary-link:hover, .make-primary-link:focus, .make-primary-link:active {
  text-decoration: none;
  color: var(--white-100);
}

.btn-40 {
  width: 36px;
  height: 36px;
}
.btn-40.pad-5 {
  padding: 5px;
}
.btn-40.center {
  text-align: center;
}
.btn-40.text-black {
  color: var(--neutral-black);
}

.sort-icon {
  cursor: pointer;
  display: inline-block;
  transition: transform 0.25s ease;
}
.sort-icon.asc {
  transform: scaleY(1);
}
.sort-icon.desc {
  transform: scaleY(-1);
}

[data-order=desc] {
  background: var(--secondary-100) !important;
}

[data-order=asc] {
  background: var(--secondary-200) !important;
}

.address-type-buttons {
  display: flex;
  gap: 16px;
}
.address-type-buttons .address-type-btn {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid var(--white-100);
  color: var(--white-100);
  width: 100%;
  padding: 0;
  height: 25px;
  font-size: 12px;
  transition: all 0.2s ease-in;
}
.address-type-buttons .address-type-btn.active {
  background-color: var(--tertiary-50);
  transition: all 0.2s ease-in;
}

.sc-sort-control {
  display: inline-flex;
  align-items: stretch;
  height: var(--input-height);
  border: 1px solid var(--neutral-200);
  border-radius: var(--input-radius);
  overflow: hidden;
  background: #fff;
}
.sc-sort-control:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.sc-sort-control .sc-sort-label {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral-900);
  background: #fff;
  white-space: nowrap;
  margin-bottom: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.alert {
  border: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  line-height: normal;
  display: flex;
}
.alert-danger {
  background-color: var(--error-100);
  color: var(--error-500);
}
.alert-danger svg {
  stroke: var(--error-500);
}
.alert.bg-tertiary-100 svg {
  stroke: var(--tertiary-600);
}
.alert.bg-tertiary-100 span {
  color: var(--tertiary-600);
}

html,
body {
  height: 100%;
  margin: 0;
  color: var(--neutral-black);
}

.login-wrapper {
  display: flex;
  height: 100vh;
}
@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
  }
}

.left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background: #fff url(../img/dimonds.svg) no-repeat 0 center;
  background-size: 16%;
}
.left-section img.logo {
  max-width: 240px;
  margin-bottom: 1rem;
}

.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(to bottom right, #074D96, #3893d4);
  color: #fff;
  text-align: center;
  position: relative;
}
.right-section:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  background-image: url(../img/dimonds-right.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16%;
}
.right-section img {
  max-width: 240px;
  margin-bottom: 1rem;
}
.right-section h2 {
  font-weight: 600;
}
.right-section p {
  font-size: 0.9rem;
  opacity: 0.8;
}
@media (max-width: 768px) {
  .right-section {
    display: none;
  }
}

.login-form input[type=email],
.login-form input[type=password] {
  border: 2px solid transparent;
  background-color: var(--tertiary-100);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.login-form input[type=email]:focus,
.login-form input[type=password]:focus {
  border: 2px solid var(--primary);
}
.login-form a.link {
  color: var(--secondary-400);
  text-decoration: underline;
}
.login-form a.link:hover {
  text-decoration: none;
}

.login-form-container {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
}

.form-title {
  color: var(--secondary-600);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--neutral-black);
  background-color: var(--tertiary-100);
  border-radius: 5px;
  padding: 10px;
  font-weight: 500;
  width: 100%;
  margin-bottom: 0.5rem;
  text-decoration: none;
}
.social-btn:hover {
  background-color: var(--tertiary-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  color: var(--neutral-black);
}
.social-btn i {
  height: 20px;
  width: 20px;
}

.form-control {
  border-radius: 6px;
  font-size: 0.9rem;
}

.form-label {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.form-divider {
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
  font-size: 0.85rem;
  color: #6c757d;
}
.form-divider::before, .form-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background-color: #dee2e6;
}
.form-divider::before {
  left: 0;
}
.form-divider::after {
  right: 0;
}
.form-divider span {
  background-color: #fff;
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
}

.reset-wrapper {
  width: 100%;
  max-width: 360px;
  border-radius: 12px;
  text-align: center;
}
.reset-wrapper h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0d6efd;
  margin-bottom: 1.5rem;
}
.reset-wrapper .form-control {
  background-color: var(--tertiary-100);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding-right: 2.5rem;
  font-size: 0.95rem;
  color: #212529;
}
.reset-wrapper .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}
.reset-wrapper .note {
  font-size: 0.8rem;
  color: var(--neutral-black);
  margin-top: 1.5rem;
}

.input-icon {
  position: relative;
}
.input-icon .btn-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.25rem;
}
.input-icon i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-black);
  pointer-events: none;
}

#authenticatorForm .authenticator-app button {
  text-align: center;
  background-color: var(--tertiary-100);
  padding: 10px;
  gap: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-setup .sec-title,
.password-config .sec-title,
.auth-app-setup .sec-title,
.verification-code-section .sec-title {
  padding: 0.5rem;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--secondary-600);
  margin-bottom: 16px;
}
.auth-setup .step-pill,
.password-config .step-pill,
.auth-app-setup .step-pill,
.verification-code-section .step-pill {
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--secondary-100);
  color: var(--primary);
  width: 100%;
  margin-bottom: 2.5rem;
}
.auth-setup .auth-setup-btn-msg,
.password-config .auth-setup-btn-msg,
.auth-app-setup .auth-setup-btn-msg,
.verification-code-section .auth-setup-btn-msg {
  color: var(--neutral-300);
}
.auth-setup .qr-code-capt,
.auth-setup .auth-setup-msg,
.password-config .qr-code-capt,
.password-config .auth-setup-msg,
.auth-app-setup .qr-code-capt,
.auth-app-setup .auth-setup-msg,
.verification-code-section .qr-code-capt,
.verification-code-section .auth-setup-msg {
  color: var(--neutral-400);
}
.auth-setup .qr-secretcode,
.password-config .qr-secretcode,
.auth-app-setup .qr-secretcode,
.verification-code-section .qr-secretcode {
  background-color: var(--secondary-100);
  font-family: monospace;
  text-align: center;
  max-width: 300px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 0;
}
.auth-setup .auth-veri-code-input,
.password-config .auth-veri-code-input,
.auth-app-setup .auth-veri-code-input,
.verification-code-section .auth-veri-code-input {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.auth-setup .auth-veri-code-input input[type=text],
.password-config .auth-veri-code-input input[type=text],
.auth-app-setup .auth-veri-code-input input[type=text],
.verification-code-section .auth-veri-code-input input[type=text] {
  width: 47px;
  height: 64px;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  background-color: var(--tertiary-100);
  color: var(--neutral-400);
  border-radius: 4px;
  font-family: monospace;
  border: 1px solid transparent;
}
.auth-setup .auth-veri-code-input input[type=text]:focus,
.password-config .auth-veri-code-input input[type=text]:focus,
.auth-app-setup .auth-veri-code-input input[type=text]:focus,
.verification-code-section .auth-veri-code-input input[type=text]:focus {
  border: 2px solid var(--secondary-700);
}

.auth-setup-success .sec-title {
  padding: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--secondary-600);
}
.auth-setup-success .auth-setup-btn-msg {
  color: var(--neutral-300);
}
.auth-setup-success .auth-setup-msg {
  color: var(--neutral-400);
}
.auth-setup-success .auth-veri-code-input {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.auth-setup-success .auth-veri-code-input input[type=text] {
  width: 47px;
  height: 64px;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  background-color: var(--tertiary-100);
  color: var(--neutral-400);
  border-radius: 4px;
  font-family: monospace;
  border: 1px solid transparent;
}

.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: none;
}

#confirmMismatch {
  color: #dc3545;
  margin-top: 0.25rem;
}

#passwordRequirements {
  padding: 8px 12px;
  border-radius: 4px;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--error-500);
}
.requirement-item.ok {
  color: var(--success-500);
}

.text-danger {
  color: #dc3545 !important;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.error-message-box {
  background-color: #fff5f5;
  border: 1px solid #dc3545;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.error-message-box .error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-color: #dc3545;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.error-message-box .error-icon i {
  color: #fff;
  font-size: 0.875rem;
}
.error-message-box .error-text {
  color: var(--error-500);
  font-size: 0.875rem;
  flex: 1;
}
.error-message-box.d-none {
  display: none !important;
}
.error-message-box:not(.d-none) {
  display: flex !important;
}

#validationSummary {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
}
#validationSummary.show {
  display: flex !important;
}
#validationSummary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#validationSummary ul li {
  color: var(--error-500);
  margin: 0;
}
#validationSummary .error-icon {
  background-color: var(--error-500);
  border-radius: 0.25rem;
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#validationSummary .error-icon i {
  color: #fff;
  font-size: 14px;
}
#validationSummary .error-message {
  color: var(--error-500);
  font-size: 0.875rem;
  flex: 1;
}
#validationSummary.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

#throttleDelayMessage {
  background-color: var(--error-100);
  /*border: 1px solid $error-border;*/
  border-radius: 5px;
  padding: 8px 11px;
  margin-top: 0.5rem;
  display: none;
  align-items: left;
  gap: 10px;
}
#throttleDelayMessage.show {
  display: flex !important;
}
#throttleDelayMessage .error-icon {
  /*background-color: $error-icon-bg;
  border-radius: .25rem;*/
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#throttleDelayMessage .error-icon img {
  /*color: var(--error-500);
  font-size: 14px;*/
  animation: spin 1s linear infinite;
}
#throttleDelayMessage .error-message {
  color: var(--error-500);
  font-size: 14px;
  flex: 1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.welcome-sec {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.welcome-sec .welcome-div {
  justify-content: center;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom right, #074D96, #3893d4);
  width: 671px;
  height: 446px;
  position: absolute;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.16);
  padding: 40px 56px 32px;
  text-align: center;
  max-width: 520px;
  width: 100%;
}
.welcome-sec .welcome-div > div {
  max-width: 332px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a {
  text-underline-offset: 6px;
}

input[data-lastpass-icon-root],
input[data-lastpass-icon-root] + div,
div[data-lastpass-icon-root],
iframe[src*="lastpass.com"] {
  display: none !important;
  visibility: hidden !important;
}

.email-link-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 400px;
}

.error-icon-container {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}
.error-icon-container svg {
  display: block;
}

.error-title {
  color: #DC3545;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.error-subtitle {
  color: var(--neutral-black);
  font-size: 0.875rem;
  margin-bottom: 32px;
}

.error-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.btn-request-link {
  background-color: #007BFF;
  border-color: #007BFF;
  color: white;
  padding: 10px 20px;
  font-weight: 500;
  width: 100%;
}
.btn-request-link:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-contact-support {
  background-color: #fff;
  border: 1px solid #007BFF;
  color: #007BFF;
  padding: 10px 20px;
  font-weight: 500;
  width: 100%;
}
.btn-contact-support:hover {
  background-color: #f8f9fa;
}

::placeholder {
  color: var(--neutral-400); /* Light grey color */
}