/* =============== VARIABLES ===============  */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
  --clr-danger-100: #FDE8E8;
  --clr-danger-200: #FBD5D5;
  --clr-danger-300: #F05252;
  --clr-danger-400: #E02424;
  --clr-danger-500: #C81E1E;
  --clr-danger-600: #9B1C1C;
  --clr-warning-100: #FDF6B2;
  --clr-warning-400: #FACA15;
  --clr-warning-500: #FF8A4C;
  --clr-warning-700: #723B13;
  --clr-success-50: #DEF7EC;
  --clr-success-100: #CBF5D7;
  --clr-success-200: #BCF0DA;
  --clr-success-300: #84E1BC;
  --clr-success-400: #31C48D;
  --clr-success-500: #0E9F6E;
  --clr-success-600: #057A55;
  --clr-success-700: #046C4E;
  --clr-success-800: #03543F;
  --clr-success-900: #014737;
  --clr-primary-100: #E1EFFE;
  --clr-primary-200: #C3DDFD;
  --clr-primary-300: #A4CAFE;
  --clr-primary-400: #3F83F8;
  --clr-primary-500: #1C64F2;
  --clr-primary-600: #1A56DB;
  --clr-primary-700: #1E429F;
  --clr-primary-800: #1E429F;
  --clr-primary-900: #1E1B39;
  --clr-neutral-100: #ffffff;
  --clr-neutral-150: #F9FAFB;
  --clr-neutral-200: #F1F1F1;
  --clr-neutral-250: #F3F4F6;
  --clr-neutral-300: #E5E7EB;
  --clr-neutral-350: #D1D5DB;
  --clr-neutral-400: #9CA3AF;
  --clr-neutral-450: #6B7280;
  --clr-neutral-500: #4B5563;
  --clr-neutral-550: #374151;
  --clr-neutral-600: #1F2A37;
  --clr-neutral-650: #111928;
  --clr-zblack-100: #34363D;
  --clr-zblack-200: #23262D;
  --clr-zblack-300: #10131B;
  --clr-zblack-350: #100F0F;
  --clr-zblack-400: #000000;
  --clr-body-bg: #f5f7fa;
  --clr-body-text: var(--clr-neutral-650);
  --ff-primary: 'Inter', sans-serif;
  --fs-50: 1rem;
  --fs-100: 1.2rem;
  --fs-200: 1.4rem;
  --fs-300: 1.6rem;
  --fs-400: 1.8rem;
  --fs-500: 2rem;
  --fs-600: 2.2rem;
  --fs-700: 2.4rem;
  --fs-800: 2.6rem;
  --radius-200: 0.4rem;
  --radius-250: 0.8rem;
  --radius-300: 1.2rem;
  --radius-400: 1.2rem;
  --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  --size-25: 0.4rem;
  --size-50: 0.6rem;
  --size-100: 0.8rem;
  --size-150: 1rem;
  --size-200: 1.2rem;
  --size-250: 1.4rem;
  --size-300: 1.6rem;
  --size-350: 1.8rem;
  --size-400: 2rem;
  --size-450: 2.4rem;
  --size-500: 3rem;
  --size-550: 3.2rem;
  --size-600: 3.4rem;
  --size-650: 4.4rem;
}

/* =============== DARK MODE ===============  */
[data-theme=dark] {
  --clr-neutral-100: #1a1d23;
  --clr-neutral-150: #1e2128;
  --clr-neutral-200: #2a2d35;
  --clr-neutral-250: #2a2d35;
  --clr-neutral-300: #3a3d45;
  --clr-neutral-350: #4a4d55;
  --clr-neutral-400: #8a8d95;
  --clr-neutral-450: #9ca0a8;
  --clr-neutral-500: #b0b4bc;
  --clr-neutral-550: #c8ccd4;
  --clr-neutral-600: #dce0e8;
  --clr-neutral-650: #eef0f4;
  --clr-body-bg: #111318;
  --clr-body-text: var(--clr-neutral-650);
  --clr-zblack-100: #c8ccd4;
  --clr-zblack-200: #dce0e8;
  --clr-zblack-300: #eef0f4;
  --clr-zblack-350: #f4f5f7;
  --clr-zblack-400: #ffffff;
  --clr-primary-100: #1a2744;
  --clr-primary-200: #1e3a5f;
  --clr-primary-700: #93b4f4;
  --clr-primary-800: #93b4f4;
  --clr-primary-900: #c8d8f4;
  --clr-success-50: #0d2818;
  --clr-success-100: #0f3020;
  --clr-success-200: #123828;
  --clr-success-600: #4ade80;
  --clr-success-700: #22c55e;
  --accent-weak: rgba(59, 130, 246, 0.15);
  --clr-warning-100: #3b2e0a;
  --clr-warning-700: #fbbf24;
  --clr-danger-100: #3b1515;
  --clr-danger-200: #4a1c1c;
  --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 2px -1px rgba(0, 0, 0, 0.3);
  --bs-body-bg: var(--clr-body-bg);
  --bs-body-color: var(--clr-neutral-650);
  --bs-border-color: var(--clr-neutral-300);
  color-scheme: dark;
}

/* box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*reset font sizes of all tags*/
* {
  font-size: inherit;
  margin: 0;
  padding: 0;
}

/* reset font size 1rem to 10px */
html {
  font-size: 62.5%;
}

body,
html {
  height: 100%;
}

/* remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* set core body defaults */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--clr-body-bg);
  color: var(--clr-body-text);
}

/* a elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* make images easier to work with */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

/* avoid text overflows */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-size: inherit;
}

button {
  background: transparent;
  border: none;
}

/* remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  line-height: 1.5;
  font-family: var(--ff-primary);
  color: var(--clr-neutral-850);
  font-size: 1.6rem;
  font-weight: 400;
}

.secondary-heading {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 700;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-zblack-350 {
  color: var(--clr-zblack-350) !important;
}

.bg-zblack-350 {
  background-color: var(--clr-zblack-350) !important;
}

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

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

.fs-50 {
  font-size: var(--fs-50) !important;
}

@media (min-width: 1200px) {
  .fs-xl-50 {
    font-size: var(--fs-50) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-50 {
    font-size: var(--fs-50) !important;
  }
}
.fs-100 {
  font-size: var(--fs-100) !important;
}

@media (min-width: 1200px) {
  .fs-xl-100 {
    font-size: var(--fs-100) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-100 {
    font-size: var(--fs-100) !important;
  }
}
.fs-200 {
  font-size: var(--fs-200) !important;
}

@media (min-width: 1200px) {
  .fs-xl-200 {
    font-size: var(--fs-200) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-200 {
    font-size: var(--fs-200) !important;
  }
}
.fs-300 {
  font-size: var(--fs-300) !important;
}

@media (min-width: 1200px) {
  .fs-xl-300 {
    font-size: var(--fs-300) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-300 {
    font-size: var(--fs-300) !important;
  }
}
.fs-400 {
  font-size: var(--fs-400) !important;
}

@media (min-width: 1200px) {
  .fs-xl-400 {
    font-size: var(--fs-400) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-400 {
    font-size: var(--fs-400) !important;
  }
}
.fs-500 {
  font-size: var(--fs-500) !important;
}

@media (min-width: 1200px) {
  .fs-xl-500 {
    font-size: var(--fs-500) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-500 {
    font-size: var(--fs-500) !important;
  }
}
.fs-600 {
  font-size: var(--fs-600) !important;
}

@media (min-width: 1200px) {
  .fs-xl-600 {
    font-size: var(--fs-600) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-600 {
    font-size: var(--fs-600) !important;
  }
}
.fs-700 {
  font-size: var(--fs-700) !important;
}

@media (min-width: 1200px) {
  .fs-xl-700 {
    font-size: var(--fs-700) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-700 {
    font-size: var(--fs-700) !important;
  }
}
.fs-800 {
  font-size: var(--fs-800) !important;
}

@media (min-width: 1200px) {
  .fs-xl-800 {
    font-size: var(--fs-800) !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-800 {
    font-size: var(--fs-800) !important;
  }
}
.m-25 {
  margin: var(--size-25);
}

.mt-25 {
  margin-top: var(--size-25);
}

.mr-25 {
  margin-right: var(--size-25);
}

.mb-25 {
  margin-bottom: var(--size-25);
}

.ml-25 {
  margin-left: var(--size-25);
}

.mx-25 {
  margin-left: var(--size-25);
  margin-right: var(--size-25);
}

.my-25 {
  margin-top: var(--size-25);
  margin-bottom: var(--size-25);
}

.p-25 {
  padding: var(--size-25);
}

.pt-25 {
  padding-top: var(--size-25);
}

.pr-25 {
  padding-right: var(--size-25);
}

.pb-25 {
  padding-bottom: var(--size-25);
}

.pl-25 {
  padding-left: var(--size-25);
}

.px-25 {
  padding-left: var(--size-25);
  padding-right: var(--size-25);
}

.py-25 {
  padding-top: var(--size-25);
  padding-bottom: var(--size-25);
}

.gap-25 {
  gap: var(--size-25);
}

.gap-x-25 {
  column-gap: var(--size-25);
}

.gap-y-25 {
  row-gap: var(--size-25);
}

@media (min-width: 992px) {
  .m-lg-25 {
    margin: var(--size-25);
  }
  .mt-lg-25 {
    margin-top: var(--size-25);
  }
  .mr-lg-25 {
    margin-right: var(--size-25);
  }
  .mb-lg-25 {
    margin-bottom: var(--size-25);
  }
  .ml-lg-25 {
    margin-left: var(--size-25);
  }
  .mx-lg-25 {
    margin-left: var(--size-25);
    margin-right: var(--size-25);
  }
  .my-lg-25 {
    margin-top: var(--size-25);
    margin-bottom: var(--size-25);
  }
  .p-lg-25 {
    padding: var(--size-25);
  }
  .pt-lg-25 {
    padding-top: var(--size-25);
  }
  .pr-lg-25 {
    padding-right: var(--size-25);
  }
  .pb-lg-25 {
    padding-bottom: var(--size-25);
  }
  .pl-lg-25 {
    padding-left: var(--size-25);
  }
  .px-lg-25 {
    padding-left: var(--size-25);
    padding-right: var(--size-25);
  }
  .py-lg-25 {
    padding-top: var(--size-25);
    padding-bottom: var(--size-25);
  }
  .gap-lg-25 {
    gap: var(--size-25);
  }
  .gap-x-lg-25 {
    column-gap: var(--size-25);
  }
  .gap-y-lg-25 {
    row-gap: var(--size-25);
  }
}
@media (min-width: 1200px) {
  .m-xl-25 {
    margin: var(--size-25);
  }
  .mt-xl-25 {
    margin-top: var(--size-25);
  }
  .mr-xl-25 {
    margin-right: var(--size-25);
  }
  .mb-xl-25 {
    margin-bottom: var(--size-25);
  }
  .ml-xl-25 {
    margin-left: var(--size-25);
  }
  .mx-xl-25 {
    margin-left: var(--size-25);
    margin-right: var(--size-25);
  }
  .my-xl-25 {
    margin-top: var(--size-25);
    margin-bottom: var(--size-25);
  }
  .p-xl-25 {
    padding: var(--size-25);
  }
  .pt-xl-25 {
    padding-top: var(--size-25);
  }
  .pr-xl-25 {
    padding-right: var(--size-25);
  }
  .pb-xl-25 {
    padding-bottom: var(--size-25);
  }
  .pl-xl-25 {
    padding-left: var(--size-25);
  }
  .px-xl-25 {
    padding-left: var(--size-25);
    padding-right: var(--size-25);
  }
  .py-xl-25 {
    padding-top: var(--size-25);
    padding-bottom: var(--size-25);
  }
  .gap-xl-25 {
    gap: var(--size-25);
  }
  .gap-x-xl-25 {
    column-gap: var(--size-25);
  }
  .gap-y-xl-25 {
    row-gap: var(--size-25);
  }
}
.m-50 {
  margin: var(--size-50);
}

.mt-50 {
  margin-top: var(--size-50);
}

.mr-50 {
  margin-right: var(--size-50);
}

.mb-50 {
  margin-bottom: var(--size-50);
}

.ml-50 {
  margin-left: var(--size-50);
}

.mx-50 {
  margin-left: var(--size-50);
  margin-right: var(--size-50);
}

.my-50 {
  margin-top: var(--size-50);
  margin-bottom: var(--size-50);
}

.p-50 {
  padding: var(--size-50);
}

.pt-50 {
  padding-top: var(--size-50);
}

.pr-50 {
  padding-right: var(--size-50);
}

.pb-50 {
  padding-bottom: var(--size-50);
}

.pl-50 {
  padding-left: var(--size-50);
}

.px-50 {
  padding-left: var(--size-50);
  padding-right: var(--size-50);
}

.py-50 {
  padding-top: var(--size-50);
  padding-bottom: var(--size-50);
}

.gap-50 {
  gap: var(--size-50);
}

.gap-x-50 {
  column-gap: var(--size-50);
}

.gap-y-50 {
  row-gap: var(--size-50);
}

@media (min-width: 992px) {
  .m-lg-50 {
    margin: var(--size-50);
  }
  .mt-lg-50 {
    margin-top: var(--size-50);
  }
  .mr-lg-50 {
    margin-right: var(--size-50);
  }
  .mb-lg-50 {
    margin-bottom: var(--size-50);
  }
  .ml-lg-50 {
    margin-left: var(--size-50);
  }
  .mx-lg-50 {
    margin-left: var(--size-50);
    margin-right: var(--size-50);
  }
  .my-lg-50 {
    margin-top: var(--size-50);
    margin-bottom: var(--size-50);
  }
  .p-lg-50 {
    padding: var(--size-50);
  }
  .pt-lg-50 {
    padding-top: var(--size-50);
  }
  .pr-lg-50 {
    padding-right: var(--size-50);
  }
  .pb-lg-50 {
    padding-bottom: var(--size-50);
  }
  .pl-lg-50 {
    padding-left: var(--size-50);
  }
  .px-lg-50 {
    padding-left: var(--size-50);
    padding-right: var(--size-50);
  }
  .py-lg-50 {
    padding-top: var(--size-50);
    padding-bottom: var(--size-50);
  }
  .gap-lg-50 {
    gap: var(--size-50);
  }
  .gap-x-lg-50 {
    column-gap: var(--size-50);
  }
  .gap-y-lg-50 {
    row-gap: var(--size-50);
  }
}
@media (min-width: 1200px) {
  .m-xl-50 {
    margin: var(--size-50);
  }
  .mt-xl-50 {
    margin-top: var(--size-50);
  }
  .mr-xl-50 {
    margin-right: var(--size-50);
  }
  .mb-xl-50 {
    margin-bottom: var(--size-50);
  }
  .ml-xl-50 {
    margin-left: var(--size-50);
  }
  .mx-xl-50 {
    margin-left: var(--size-50);
    margin-right: var(--size-50);
  }
  .my-xl-50 {
    margin-top: var(--size-50);
    margin-bottom: var(--size-50);
  }
  .p-xl-50 {
    padding: var(--size-50);
  }
  .pt-xl-50 {
    padding-top: var(--size-50);
  }
  .pr-xl-50 {
    padding-right: var(--size-50);
  }
  .pb-xl-50 {
    padding-bottom: var(--size-50);
  }
  .pl-xl-50 {
    padding-left: var(--size-50);
  }
  .px-xl-50 {
    padding-left: var(--size-50);
    padding-right: var(--size-50);
  }
  .py-xl-50 {
    padding-top: var(--size-50);
    padding-bottom: var(--size-50);
  }
  .gap-xl-50 {
    gap: var(--size-50);
  }
  .gap-x-xl-50 {
    column-gap: var(--size-50);
  }
  .gap-y-xl-50 {
    row-gap: var(--size-50);
  }
}
.m-100 {
  margin: var(--size-100);
}

.mt-100 {
  margin-top: var(--size-100);
}

.mr-100 {
  margin-right: var(--size-100);
}

.mb-100 {
  margin-bottom: var(--size-100);
}

.ml-100 {
  margin-left: var(--size-100);
}

.mx-100 {
  margin-left: var(--size-100);
  margin-right: var(--size-100);
}

.my-100 {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}

.p-100 {
  padding: var(--size-100);
}

.pt-100 {
  padding-top: var(--size-100);
}

.pr-100 {
  padding-right: var(--size-100);
}

.pb-100 {
  padding-bottom: var(--size-100);
}

.pl-100 {
  padding-left: var(--size-100);
}

.px-100 {
  padding-left: var(--size-100);
  padding-right: var(--size-100);
}

.py-100 {
  padding-top: var(--size-100);
  padding-bottom: var(--size-100);
}

.gap-100 {
  gap: var(--size-100);
}

.gap-x-100 {
  column-gap: var(--size-100);
}

.gap-y-100 {
  row-gap: var(--size-100);
}

@media (min-width: 992px) {
  .m-lg-100 {
    margin: var(--size-100);
  }
  .mt-lg-100 {
    margin-top: var(--size-100);
  }
  .mr-lg-100 {
    margin-right: var(--size-100);
  }
  .mb-lg-100 {
    margin-bottom: var(--size-100);
  }
  .ml-lg-100 {
    margin-left: var(--size-100);
  }
  .mx-lg-100 {
    margin-left: var(--size-100);
    margin-right: var(--size-100);
  }
  .my-lg-100 {
    margin-top: var(--size-100);
    margin-bottom: var(--size-100);
  }
  .p-lg-100 {
    padding: var(--size-100);
  }
  .pt-lg-100 {
    padding-top: var(--size-100);
  }
  .pr-lg-100 {
    padding-right: var(--size-100);
  }
  .pb-lg-100 {
    padding-bottom: var(--size-100);
  }
  .pl-lg-100 {
    padding-left: var(--size-100);
  }
  .px-lg-100 {
    padding-left: var(--size-100);
    padding-right: var(--size-100);
  }
  .py-lg-100 {
    padding-top: var(--size-100);
    padding-bottom: var(--size-100);
  }
  .gap-lg-100 {
    gap: var(--size-100);
  }
  .gap-x-lg-100 {
    column-gap: var(--size-100);
  }
  .gap-y-lg-100 {
    row-gap: var(--size-100);
  }
}
@media (min-width: 1200px) {
  .m-xl-100 {
    margin: var(--size-100);
  }
  .mt-xl-100 {
    margin-top: var(--size-100);
  }
  .mr-xl-100 {
    margin-right: var(--size-100);
  }
  .mb-xl-100 {
    margin-bottom: var(--size-100);
  }
  .ml-xl-100 {
    margin-left: var(--size-100);
  }
  .mx-xl-100 {
    margin-left: var(--size-100);
    margin-right: var(--size-100);
  }
  .my-xl-100 {
    margin-top: var(--size-100);
    margin-bottom: var(--size-100);
  }
  .p-xl-100 {
    padding: var(--size-100);
  }
  .pt-xl-100 {
    padding-top: var(--size-100);
  }
  .pr-xl-100 {
    padding-right: var(--size-100);
  }
  .pb-xl-100 {
    padding-bottom: var(--size-100);
  }
  .pl-xl-100 {
    padding-left: var(--size-100);
  }
  .px-xl-100 {
    padding-left: var(--size-100);
    padding-right: var(--size-100);
  }
  .py-xl-100 {
    padding-top: var(--size-100);
    padding-bottom: var(--size-100);
  }
  .gap-xl-100 {
    gap: var(--size-100);
  }
  .gap-x-xl-100 {
    column-gap: var(--size-100);
  }
  .gap-y-xl-100 {
    row-gap: var(--size-100);
  }
}
.m-150 {
  margin: var(--size-150);
}

.mt-150 {
  margin-top: var(--size-150);
}

.mr-150 {
  margin-right: var(--size-150);
}

.mb-150 {
  margin-bottom: var(--size-150);
}

.ml-150 {
  margin-left: var(--size-150);
}

.mx-150 {
  margin-left: var(--size-150);
  margin-right: var(--size-150);
}

.my-150 {
  margin-top: var(--size-150);
  margin-bottom: var(--size-150);
}

.p-150 {
  padding: var(--size-150);
}

.pt-150 {
  padding-top: var(--size-150);
}

.pr-150 {
  padding-right: var(--size-150);
}

.pb-150 {
  padding-bottom: var(--size-150);
}

.pl-150 {
  padding-left: var(--size-150);
}

.px-150 {
  padding-left: var(--size-150);
  padding-right: var(--size-150);
}

.py-150 {
  padding-top: var(--size-150);
  padding-bottom: var(--size-150);
}

.gap-150 {
  gap: var(--size-150);
}

.gap-x-150 {
  column-gap: var(--size-150);
}

.gap-y-150 {
  row-gap: var(--size-150);
}

@media (min-width: 992px) {
  .m-lg-150 {
    margin: var(--size-150);
  }
  .mt-lg-150 {
    margin-top: var(--size-150);
  }
  .mr-lg-150 {
    margin-right: var(--size-150);
  }
  .mb-lg-150 {
    margin-bottom: var(--size-150);
  }
  .ml-lg-150 {
    margin-left: var(--size-150);
  }
  .mx-lg-150 {
    margin-left: var(--size-150);
    margin-right: var(--size-150);
  }
  .my-lg-150 {
    margin-top: var(--size-150);
    margin-bottom: var(--size-150);
  }
  .p-lg-150 {
    padding: var(--size-150);
  }
  .pt-lg-150 {
    padding-top: var(--size-150);
  }
  .pr-lg-150 {
    padding-right: var(--size-150);
  }
  .pb-lg-150 {
    padding-bottom: var(--size-150);
  }
  .pl-lg-150 {
    padding-left: var(--size-150);
  }
  .px-lg-150 {
    padding-left: var(--size-150);
    padding-right: var(--size-150);
  }
  .py-lg-150 {
    padding-top: var(--size-150);
    padding-bottom: var(--size-150);
  }
  .gap-lg-150 {
    gap: var(--size-150);
  }
  .gap-x-lg-150 {
    column-gap: var(--size-150);
  }
  .gap-y-lg-150 {
    row-gap: var(--size-150);
  }
}
@media (min-width: 1200px) {
  .m-xl-150 {
    margin: var(--size-150);
  }
  .mt-xl-150 {
    margin-top: var(--size-150);
  }
  .mr-xl-150 {
    margin-right: var(--size-150);
  }
  .mb-xl-150 {
    margin-bottom: var(--size-150);
  }
  .ml-xl-150 {
    margin-left: var(--size-150);
  }
  .mx-xl-150 {
    margin-left: var(--size-150);
    margin-right: var(--size-150);
  }
  .my-xl-150 {
    margin-top: var(--size-150);
    margin-bottom: var(--size-150);
  }
  .p-xl-150 {
    padding: var(--size-150);
  }
  .pt-xl-150 {
    padding-top: var(--size-150);
  }
  .pr-xl-150 {
    padding-right: var(--size-150);
  }
  .pb-xl-150 {
    padding-bottom: var(--size-150);
  }
  .pl-xl-150 {
    padding-left: var(--size-150);
  }
  .px-xl-150 {
    padding-left: var(--size-150);
    padding-right: var(--size-150);
  }
  .py-xl-150 {
    padding-top: var(--size-150);
    padding-bottom: var(--size-150);
  }
  .gap-xl-150 {
    gap: var(--size-150);
  }
  .gap-x-xl-150 {
    column-gap: var(--size-150);
  }
  .gap-y-xl-150 {
    row-gap: var(--size-150);
  }
}
.m-200 {
  margin: var(--size-200);
}

.mt-200 {
  margin-top: var(--size-200);
}

.mr-200 {
  margin-right: var(--size-200);
}

.mb-200 {
  margin-bottom: var(--size-200);
}

.ml-200 {
  margin-left: var(--size-200);
}

.mx-200 {
  margin-left: var(--size-200);
  margin-right: var(--size-200);
}

.my-200 {
  margin-top: var(--size-200);
  margin-bottom: var(--size-200);
}

.p-200 {
  padding: var(--size-200);
}

.pt-200 {
  padding-top: var(--size-200);
}

.pr-200 {
  padding-right: var(--size-200);
}

.pb-200 {
  padding-bottom: var(--size-200);
}

.pl-200 {
  padding-left: var(--size-200);
}

.px-200 {
  padding-left: var(--size-200);
  padding-right: var(--size-200);
}

.py-200 {
  padding-top: var(--size-200);
  padding-bottom: var(--size-200);
}

.gap-200 {
  gap: var(--size-200);
}

.gap-x-200 {
  column-gap: var(--size-200);
}

.gap-y-200 {
  row-gap: var(--size-200);
}

@media (min-width: 992px) {
  .m-lg-200 {
    margin: var(--size-200);
  }
  .mt-lg-200 {
    margin-top: var(--size-200);
  }
  .mr-lg-200 {
    margin-right: var(--size-200);
  }
  .mb-lg-200 {
    margin-bottom: var(--size-200);
  }
  .ml-lg-200 {
    margin-left: var(--size-200);
  }
  .mx-lg-200 {
    margin-left: var(--size-200);
    margin-right: var(--size-200);
  }
  .my-lg-200 {
    margin-top: var(--size-200);
    margin-bottom: var(--size-200);
  }
  .p-lg-200 {
    padding: var(--size-200);
  }
  .pt-lg-200 {
    padding-top: var(--size-200);
  }
  .pr-lg-200 {
    padding-right: var(--size-200);
  }
  .pb-lg-200 {
    padding-bottom: var(--size-200);
  }
  .pl-lg-200 {
    padding-left: var(--size-200);
  }
  .px-lg-200 {
    padding-left: var(--size-200);
    padding-right: var(--size-200);
  }
  .py-lg-200 {
    padding-top: var(--size-200);
    padding-bottom: var(--size-200);
  }
  .gap-lg-200 {
    gap: var(--size-200);
  }
  .gap-x-lg-200 {
    column-gap: var(--size-200);
  }
  .gap-y-lg-200 {
    row-gap: var(--size-200);
  }
}
@media (min-width: 1200px) {
  .m-xl-200 {
    margin: var(--size-200);
  }
  .mt-xl-200 {
    margin-top: var(--size-200);
  }
  .mr-xl-200 {
    margin-right: var(--size-200);
  }
  .mb-xl-200 {
    margin-bottom: var(--size-200);
  }
  .ml-xl-200 {
    margin-left: var(--size-200);
  }
  .mx-xl-200 {
    margin-left: var(--size-200);
    margin-right: var(--size-200);
  }
  .my-xl-200 {
    margin-top: var(--size-200);
    margin-bottom: var(--size-200);
  }
  .p-xl-200 {
    padding: var(--size-200);
  }
  .pt-xl-200 {
    padding-top: var(--size-200);
  }
  .pr-xl-200 {
    padding-right: var(--size-200);
  }
  .pb-xl-200 {
    padding-bottom: var(--size-200);
  }
  .pl-xl-200 {
    padding-left: var(--size-200);
  }
  .px-xl-200 {
    padding-left: var(--size-200);
    padding-right: var(--size-200);
  }
  .py-xl-200 {
    padding-top: var(--size-200);
    padding-bottom: var(--size-200);
  }
  .gap-xl-200 {
    gap: var(--size-200);
  }
  .gap-x-xl-200 {
    column-gap: var(--size-200);
  }
  .gap-y-xl-200 {
    row-gap: var(--size-200);
  }
}
.m-250 {
  margin: var(--size-250);
}

.mt-250 {
  margin-top: var(--size-250);
}

.mr-250 {
  margin-right: var(--size-250);
}

.mb-250 {
  margin-bottom: var(--size-250);
}

.ml-250 {
  margin-left: var(--size-250);
}

.mx-250 {
  margin-left: var(--size-250);
  margin-right: var(--size-250);
}

.my-250 {
  margin-top: var(--size-250);
  margin-bottom: var(--size-250);
}

.p-250 {
  padding: var(--size-250);
}

.pt-250 {
  padding-top: var(--size-250);
}

.pr-250 {
  padding-right: var(--size-250);
}

.pb-250 {
  padding-bottom: var(--size-250);
}

.pl-250 {
  padding-left: var(--size-250);
}

.px-250 {
  padding-left: var(--size-250);
  padding-right: var(--size-250);
}

.py-250 {
  padding-top: var(--size-250);
  padding-bottom: var(--size-250);
}

.gap-250 {
  gap: var(--size-250);
}

.gap-x-250 {
  column-gap: var(--size-250);
}

.gap-y-250 {
  row-gap: var(--size-250);
}

@media (min-width: 992px) {
  .m-lg-250 {
    margin: var(--size-250);
  }
  .mt-lg-250 {
    margin-top: var(--size-250);
  }
  .mr-lg-250 {
    margin-right: var(--size-250);
  }
  .mb-lg-250 {
    margin-bottom: var(--size-250);
  }
  .ml-lg-250 {
    margin-left: var(--size-250);
  }
  .mx-lg-250 {
    margin-left: var(--size-250);
    margin-right: var(--size-250);
  }
  .my-lg-250 {
    margin-top: var(--size-250);
    margin-bottom: var(--size-250);
  }
  .p-lg-250 {
    padding: var(--size-250);
  }
  .pt-lg-250 {
    padding-top: var(--size-250);
  }
  .pr-lg-250 {
    padding-right: var(--size-250);
  }
  .pb-lg-250 {
    padding-bottom: var(--size-250);
  }
  .pl-lg-250 {
    padding-left: var(--size-250);
  }
  .px-lg-250 {
    padding-left: var(--size-250);
    padding-right: var(--size-250);
  }
  .py-lg-250 {
    padding-top: var(--size-250);
    padding-bottom: var(--size-250);
  }
  .gap-lg-250 {
    gap: var(--size-250);
  }
  .gap-x-lg-250 {
    column-gap: var(--size-250);
  }
  .gap-y-lg-250 {
    row-gap: var(--size-250);
  }
}
@media (min-width: 1200px) {
  .m-xl-250 {
    margin: var(--size-250);
  }
  .mt-xl-250 {
    margin-top: var(--size-250);
  }
  .mr-xl-250 {
    margin-right: var(--size-250);
  }
  .mb-xl-250 {
    margin-bottom: var(--size-250);
  }
  .ml-xl-250 {
    margin-left: var(--size-250);
  }
  .mx-xl-250 {
    margin-left: var(--size-250);
    margin-right: var(--size-250);
  }
  .my-xl-250 {
    margin-top: var(--size-250);
    margin-bottom: var(--size-250);
  }
  .p-xl-250 {
    padding: var(--size-250);
  }
  .pt-xl-250 {
    padding-top: var(--size-250);
  }
  .pr-xl-250 {
    padding-right: var(--size-250);
  }
  .pb-xl-250 {
    padding-bottom: var(--size-250);
  }
  .pl-xl-250 {
    padding-left: var(--size-250);
  }
  .px-xl-250 {
    padding-left: var(--size-250);
    padding-right: var(--size-250);
  }
  .py-xl-250 {
    padding-top: var(--size-250);
    padding-bottom: var(--size-250);
  }
  .gap-xl-250 {
    gap: var(--size-250);
  }
  .gap-x-xl-250 {
    column-gap: var(--size-250);
  }
  .gap-y-xl-250 {
    row-gap: var(--size-250);
  }
}
.m-300 {
  margin: var(--size-300);
}

.mt-300 {
  margin-top: var(--size-300);
}

.mr-300 {
  margin-right: var(--size-300);
}

.mb-300 {
  margin-bottom: var(--size-300);
}

.ml-300 {
  margin-left: var(--size-300);
}

.mx-300 {
  margin-left: var(--size-300);
  margin-right: var(--size-300);
}

.my-300 {
  margin-top: var(--size-300);
  margin-bottom: var(--size-300);
}

.p-300 {
  padding: var(--size-300);
}

.pt-300 {
  padding-top: var(--size-300);
}

.pr-300 {
  padding-right: var(--size-300);
}

.pb-300 {
  padding-bottom: var(--size-300);
}

.pl-300 {
  padding-left: var(--size-300);
}

.px-300 {
  padding-left: var(--size-300);
  padding-right: var(--size-300);
}

.py-300 {
  padding-top: var(--size-300);
  padding-bottom: var(--size-300);
}

.gap-300 {
  gap: var(--size-300);
}

.gap-x-300 {
  column-gap: var(--size-300);
}

.gap-y-300 {
  row-gap: var(--size-300);
}

@media (min-width: 992px) {
  .m-lg-300 {
    margin: var(--size-300);
  }
  .mt-lg-300 {
    margin-top: var(--size-300);
  }
  .mr-lg-300 {
    margin-right: var(--size-300);
  }
  .mb-lg-300 {
    margin-bottom: var(--size-300);
  }
  .ml-lg-300 {
    margin-left: var(--size-300);
  }
  .mx-lg-300 {
    margin-left: var(--size-300);
    margin-right: var(--size-300);
  }
  .my-lg-300 {
    margin-top: var(--size-300);
    margin-bottom: var(--size-300);
  }
  .p-lg-300 {
    padding: var(--size-300);
  }
  .pt-lg-300 {
    padding-top: var(--size-300);
  }
  .pr-lg-300 {
    padding-right: var(--size-300);
  }
  .pb-lg-300 {
    padding-bottom: var(--size-300);
  }
  .pl-lg-300 {
    padding-left: var(--size-300);
  }
  .px-lg-300 {
    padding-left: var(--size-300);
    padding-right: var(--size-300);
  }
  .py-lg-300 {
    padding-top: var(--size-300);
    padding-bottom: var(--size-300);
  }
  .gap-lg-300 {
    gap: var(--size-300);
  }
  .gap-x-lg-300 {
    column-gap: var(--size-300);
  }
  .gap-y-lg-300 {
    row-gap: var(--size-300);
  }
}
@media (min-width: 1200px) {
  .m-xl-300 {
    margin: var(--size-300);
  }
  .mt-xl-300 {
    margin-top: var(--size-300);
  }
  .mr-xl-300 {
    margin-right: var(--size-300);
  }
  .mb-xl-300 {
    margin-bottom: var(--size-300);
  }
  .ml-xl-300 {
    margin-left: var(--size-300);
  }
  .mx-xl-300 {
    margin-left: var(--size-300);
    margin-right: var(--size-300);
  }
  .my-xl-300 {
    margin-top: var(--size-300);
    margin-bottom: var(--size-300);
  }
  .p-xl-300 {
    padding: var(--size-300);
  }
  .pt-xl-300 {
    padding-top: var(--size-300);
  }
  .pr-xl-300 {
    padding-right: var(--size-300);
  }
  .pb-xl-300 {
    padding-bottom: var(--size-300);
  }
  .pl-xl-300 {
    padding-left: var(--size-300);
  }
  .px-xl-300 {
    padding-left: var(--size-300);
    padding-right: var(--size-300);
  }
  .py-xl-300 {
    padding-top: var(--size-300);
    padding-bottom: var(--size-300);
  }
  .gap-xl-300 {
    gap: var(--size-300);
  }
  .gap-x-xl-300 {
    column-gap: var(--size-300);
  }
  .gap-y-xl-300 {
    row-gap: var(--size-300);
  }
}
.m-350 {
  margin: var(--size-350);
}

.mt-350 {
  margin-top: var(--size-350);
}

.mr-350 {
  margin-right: var(--size-350);
}

.mb-350 {
  margin-bottom: var(--size-350);
}

.ml-350 {
  margin-left: var(--size-350);
}

.mx-350 {
  margin-left: var(--size-350);
  margin-right: var(--size-350);
}

.my-350 {
  margin-top: var(--size-350);
  margin-bottom: var(--size-350);
}

.p-350 {
  padding: var(--size-350);
}

.pt-350 {
  padding-top: var(--size-350);
}

.pr-350 {
  padding-right: var(--size-350);
}

.pb-350 {
  padding-bottom: var(--size-350);
}

.pl-350 {
  padding-left: var(--size-350);
}

.px-350 {
  padding-left: var(--size-350);
  padding-right: var(--size-350);
}

.py-350 {
  padding-top: var(--size-350);
  padding-bottom: var(--size-350);
}

.gap-350 {
  gap: var(--size-350);
}

.gap-x-350 {
  column-gap: var(--size-350);
}

.gap-y-350 {
  row-gap: var(--size-350);
}

@media (min-width: 992px) {
  .m-lg-350 {
    margin: var(--size-350);
  }
  .mt-lg-350 {
    margin-top: var(--size-350);
  }
  .mr-lg-350 {
    margin-right: var(--size-350);
  }
  .mb-lg-350 {
    margin-bottom: var(--size-350);
  }
  .ml-lg-350 {
    margin-left: var(--size-350);
  }
  .mx-lg-350 {
    margin-left: var(--size-350);
    margin-right: var(--size-350);
  }
  .my-lg-350 {
    margin-top: var(--size-350);
    margin-bottom: var(--size-350);
  }
  .p-lg-350 {
    padding: var(--size-350);
  }
  .pt-lg-350 {
    padding-top: var(--size-350);
  }
  .pr-lg-350 {
    padding-right: var(--size-350);
  }
  .pb-lg-350 {
    padding-bottom: var(--size-350);
  }
  .pl-lg-350 {
    padding-left: var(--size-350);
  }
  .px-lg-350 {
    padding-left: var(--size-350);
    padding-right: var(--size-350);
  }
  .py-lg-350 {
    padding-top: var(--size-350);
    padding-bottom: var(--size-350);
  }
  .gap-lg-350 {
    gap: var(--size-350);
  }
  .gap-x-lg-350 {
    column-gap: var(--size-350);
  }
  .gap-y-lg-350 {
    row-gap: var(--size-350);
  }
}
@media (min-width: 1200px) {
  .m-xl-350 {
    margin: var(--size-350);
  }
  .mt-xl-350 {
    margin-top: var(--size-350);
  }
  .mr-xl-350 {
    margin-right: var(--size-350);
  }
  .mb-xl-350 {
    margin-bottom: var(--size-350);
  }
  .ml-xl-350 {
    margin-left: var(--size-350);
  }
  .mx-xl-350 {
    margin-left: var(--size-350);
    margin-right: var(--size-350);
  }
  .my-xl-350 {
    margin-top: var(--size-350);
    margin-bottom: var(--size-350);
  }
  .p-xl-350 {
    padding: var(--size-350);
  }
  .pt-xl-350 {
    padding-top: var(--size-350);
  }
  .pr-xl-350 {
    padding-right: var(--size-350);
  }
  .pb-xl-350 {
    padding-bottom: var(--size-350);
  }
  .pl-xl-350 {
    padding-left: var(--size-350);
  }
  .px-xl-350 {
    padding-left: var(--size-350);
    padding-right: var(--size-350);
  }
  .py-xl-350 {
    padding-top: var(--size-350);
    padding-bottom: var(--size-350);
  }
  .gap-xl-350 {
    gap: var(--size-350);
  }
  .gap-x-xl-350 {
    column-gap: var(--size-350);
  }
  .gap-y-xl-350 {
    row-gap: var(--size-350);
  }
}
.m-400 {
  margin: var(--size-400);
}

.mt-400 {
  margin-top: var(--size-400);
}

.mr-400 {
  margin-right: var(--size-400);
}

.mb-400 {
  margin-bottom: var(--size-400);
}

.ml-400 {
  margin-left: var(--size-400);
}

.mx-400 {
  margin-left: var(--size-400);
  margin-right: var(--size-400);
}

.my-400 {
  margin-top: var(--size-400);
  margin-bottom: var(--size-400);
}

.p-400 {
  padding: var(--size-400);
}

.pt-400 {
  padding-top: var(--size-400);
}

.pr-400 {
  padding-right: var(--size-400);
}

.pb-400 {
  padding-bottom: var(--size-400);
}

.pl-400 {
  padding-left: var(--size-400);
}

.px-400 {
  padding-left: var(--size-400);
  padding-right: var(--size-400);
}

.py-400 {
  padding-top: var(--size-400);
  padding-bottom: var(--size-400);
}

.gap-400 {
  gap: var(--size-400);
}

.gap-x-400 {
  column-gap: var(--size-400);
}

.gap-y-400 {
  row-gap: var(--size-400);
}

@media (min-width: 992px) {
  .m-lg-400 {
    margin: var(--size-400);
  }
  .mt-lg-400 {
    margin-top: var(--size-400);
  }
  .mr-lg-400 {
    margin-right: var(--size-400);
  }
  .mb-lg-400 {
    margin-bottom: var(--size-400);
  }
  .ml-lg-400 {
    margin-left: var(--size-400);
  }
  .mx-lg-400 {
    margin-left: var(--size-400);
    margin-right: var(--size-400);
  }
  .my-lg-400 {
    margin-top: var(--size-400);
    margin-bottom: var(--size-400);
  }
  .p-lg-400 {
    padding: var(--size-400);
  }
  .pt-lg-400 {
    padding-top: var(--size-400);
  }
  .pr-lg-400 {
    padding-right: var(--size-400);
  }
  .pb-lg-400 {
    padding-bottom: var(--size-400);
  }
  .pl-lg-400 {
    padding-left: var(--size-400);
  }
  .px-lg-400 {
    padding-left: var(--size-400);
    padding-right: var(--size-400);
  }
  .py-lg-400 {
    padding-top: var(--size-400);
    padding-bottom: var(--size-400);
  }
  .gap-lg-400 {
    gap: var(--size-400);
  }
  .gap-x-lg-400 {
    column-gap: var(--size-400);
  }
  .gap-y-lg-400 {
    row-gap: var(--size-400);
  }
}
@media (min-width: 1200px) {
  .m-xl-400 {
    margin: var(--size-400);
  }
  .mt-xl-400 {
    margin-top: var(--size-400);
  }
  .mr-xl-400 {
    margin-right: var(--size-400);
  }
  .mb-xl-400 {
    margin-bottom: var(--size-400);
  }
  .ml-xl-400 {
    margin-left: var(--size-400);
  }
  .mx-xl-400 {
    margin-left: var(--size-400);
    margin-right: var(--size-400);
  }
  .my-xl-400 {
    margin-top: var(--size-400);
    margin-bottom: var(--size-400);
  }
  .p-xl-400 {
    padding: var(--size-400);
  }
  .pt-xl-400 {
    padding-top: var(--size-400);
  }
  .pr-xl-400 {
    padding-right: var(--size-400);
  }
  .pb-xl-400 {
    padding-bottom: var(--size-400);
  }
  .pl-xl-400 {
    padding-left: var(--size-400);
  }
  .px-xl-400 {
    padding-left: var(--size-400);
    padding-right: var(--size-400);
  }
  .py-xl-400 {
    padding-top: var(--size-400);
    padding-bottom: var(--size-400);
  }
  .gap-xl-400 {
    gap: var(--size-400);
  }
  .gap-x-xl-400 {
    column-gap: var(--size-400);
  }
  .gap-y-xl-400 {
    row-gap: var(--size-400);
  }
}
.m-450 {
  margin: var(--size-450);
}

.mt-450 {
  margin-top: var(--size-450);
}

.mr-450 {
  margin-right: var(--size-450);
}

.mb-450 {
  margin-bottom: var(--size-450);
}

.ml-450 {
  margin-left: var(--size-450);
}

.mx-450 {
  margin-left: var(--size-450);
  margin-right: var(--size-450);
}

.my-450 {
  margin-top: var(--size-450);
  margin-bottom: var(--size-450);
}

.p-450 {
  padding: var(--size-450);
}

.pt-450 {
  padding-top: var(--size-450);
}

.pr-450 {
  padding-right: var(--size-450);
}

.pb-450 {
  padding-bottom: var(--size-450);
}

.pl-450 {
  padding-left: var(--size-450);
}

.px-450 {
  padding-left: var(--size-450);
  padding-right: var(--size-450);
}

.py-450 {
  padding-top: var(--size-450);
  padding-bottom: var(--size-450);
}

.gap-450 {
  gap: var(--size-450);
}

.gap-x-450 {
  column-gap: var(--size-450);
}

.gap-y-450 {
  row-gap: var(--size-450);
}

@media (min-width: 992px) {
  .m-lg-450 {
    margin: var(--size-450);
  }
  .mt-lg-450 {
    margin-top: var(--size-450);
  }
  .mr-lg-450 {
    margin-right: var(--size-450);
  }
  .mb-lg-450 {
    margin-bottom: var(--size-450);
  }
  .ml-lg-450 {
    margin-left: var(--size-450);
  }
  .mx-lg-450 {
    margin-left: var(--size-450);
    margin-right: var(--size-450);
  }
  .my-lg-450 {
    margin-top: var(--size-450);
    margin-bottom: var(--size-450);
  }
  .p-lg-450 {
    padding: var(--size-450);
  }
  .pt-lg-450 {
    padding-top: var(--size-450);
  }
  .pr-lg-450 {
    padding-right: var(--size-450);
  }
  .pb-lg-450 {
    padding-bottom: var(--size-450);
  }
  .pl-lg-450 {
    padding-left: var(--size-450);
  }
  .px-lg-450 {
    padding-left: var(--size-450);
    padding-right: var(--size-450);
  }
  .py-lg-450 {
    padding-top: var(--size-450);
    padding-bottom: var(--size-450);
  }
  .gap-lg-450 {
    gap: var(--size-450);
  }
  .gap-x-lg-450 {
    column-gap: var(--size-450);
  }
  .gap-y-lg-450 {
    row-gap: var(--size-450);
  }
}
@media (min-width: 1200px) {
  .m-xl-450 {
    margin: var(--size-450);
  }
  .mt-xl-450 {
    margin-top: var(--size-450);
  }
  .mr-xl-450 {
    margin-right: var(--size-450);
  }
  .mb-xl-450 {
    margin-bottom: var(--size-450);
  }
  .ml-xl-450 {
    margin-left: var(--size-450);
  }
  .mx-xl-450 {
    margin-left: var(--size-450);
    margin-right: var(--size-450);
  }
  .my-xl-450 {
    margin-top: var(--size-450);
    margin-bottom: var(--size-450);
  }
  .p-xl-450 {
    padding: var(--size-450);
  }
  .pt-xl-450 {
    padding-top: var(--size-450);
  }
  .pr-xl-450 {
    padding-right: var(--size-450);
  }
  .pb-xl-450 {
    padding-bottom: var(--size-450);
  }
  .pl-xl-450 {
    padding-left: var(--size-450);
  }
  .px-xl-450 {
    padding-left: var(--size-450);
    padding-right: var(--size-450);
  }
  .py-xl-450 {
    padding-top: var(--size-450);
    padding-bottom: var(--size-450);
  }
  .gap-xl-450 {
    gap: var(--size-450);
  }
  .gap-x-xl-450 {
    column-gap: var(--size-450);
  }
  .gap-y-xl-450 {
    row-gap: var(--size-450);
  }
}
.m-500 {
  margin: var(--size-500);
}

.mt-500 {
  margin-top: var(--size-500);
}

.mr-500 {
  margin-right: var(--size-500);
}

.mb-500 {
  margin-bottom: var(--size-500);
}

.ml-500 {
  margin-left: var(--size-500);
}

.mx-500 {
  margin-left: var(--size-500);
  margin-right: var(--size-500);
}

.my-500 {
  margin-top: var(--size-500);
  margin-bottom: var(--size-500);
}

.p-500 {
  padding: var(--size-500);
}

.pt-500 {
  padding-top: var(--size-500);
}

.pr-500 {
  padding-right: var(--size-500);
}

.pb-500 {
  padding-bottom: var(--size-500);
}

.pl-500 {
  padding-left: var(--size-500);
}

.px-500 {
  padding-left: var(--size-500);
  padding-right: var(--size-500);
}

.py-500 {
  padding-top: var(--size-500);
  padding-bottom: var(--size-500);
}

.gap-500 {
  gap: var(--size-500);
}

.gap-x-500 {
  column-gap: var(--size-500);
}

.gap-y-500 {
  row-gap: var(--size-500);
}

@media (min-width: 992px) {
  .m-lg-500 {
    margin: var(--size-500);
  }
  .mt-lg-500 {
    margin-top: var(--size-500);
  }
  .mr-lg-500 {
    margin-right: var(--size-500);
  }
  .mb-lg-500 {
    margin-bottom: var(--size-500);
  }
  .ml-lg-500 {
    margin-left: var(--size-500);
  }
  .mx-lg-500 {
    margin-left: var(--size-500);
    margin-right: var(--size-500);
  }
  .my-lg-500 {
    margin-top: var(--size-500);
    margin-bottom: var(--size-500);
  }
  .p-lg-500 {
    padding: var(--size-500);
  }
  .pt-lg-500 {
    padding-top: var(--size-500);
  }
  .pr-lg-500 {
    padding-right: var(--size-500);
  }
  .pb-lg-500 {
    padding-bottom: var(--size-500);
  }
  .pl-lg-500 {
    padding-left: var(--size-500);
  }
  .px-lg-500 {
    padding-left: var(--size-500);
    padding-right: var(--size-500);
  }
  .py-lg-500 {
    padding-top: var(--size-500);
    padding-bottom: var(--size-500);
  }
  .gap-lg-500 {
    gap: var(--size-500);
  }
  .gap-x-lg-500 {
    column-gap: var(--size-500);
  }
  .gap-y-lg-500 {
    row-gap: var(--size-500);
  }
}
@media (min-width: 1200px) {
  .m-xl-500 {
    margin: var(--size-500);
  }
  .mt-xl-500 {
    margin-top: var(--size-500);
  }
  .mr-xl-500 {
    margin-right: var(--size-500);
  }
  .mb-xl-500 {
    margin-bottom: var(--size-500);
  }
  .ml-xl-500 {
    margin-left: var(--size-500);
  }
  .mx-xl-500 {
    margin-left: var(--size-500);
    margin-right: var(--size-500);
  }
  .my-xl-500 {
    margin-top: var(--size-500);
    margin-bottom: var(--size-500);
  }
  .p-xl-500 {
    padding: var(--size-500);
  }
  .pt-xl-500 {
    padding-top: var(--size-500);
  }
  .pr-xl-500 {
    padding-right: var(--size-500);
  }
  .pb-xl-500 {
    padding-bottom: var(--size-500);
  }
  .pl-xl-500 {
    padding-left: var(--size-500);
  }
  .px-xl-500 {
    padding-left: var(--size-500);
    padding-right: var(--size-500);
  }
  .py-xl-500 {
    padding-top: var(--size-500);
    padding-bottom: var(--size-500);
  }
  .gap-xl-500 {
    gap: var(--size-500);
  }
  .gap-x-xl-500 {
    column-gap: var(--size-500);
  }
  .gap-y-xl-500 {
    row-gap: var(--size-500);
  }
}
.m-550 {
  margin: var(--size-550);
}

.mt-550 {
  margin-top: var(--size-550);
}

.mr-550 {
  margin-right: var(--size-550);
}

.mb-550 {
  margin-bottom: var(--size-550);
}

.ml-550 {
  margin-left: var(--size-550);
}

.mx-550 {
  margin-left: var(--size-550);
  margin-right: var(--size-550);
}

.my-550 {
  margin-top: var(--size-550);
  margin-bottom: var(--size-550);
}

.p-550 {
  padding: var(--size-550);
}

.pt-550 {
  padding-top: var(--size-550);
}

.pr-550 {
  padding-right: var(--size-550);
}

.pb-550 {
  padding-bottom: var(--size-550);
}

.pl-550 {
  padding-left: var(--size-550);
}

.px-550 {
  padding-left: var(--size-550);
  padding-right: var(--size-550);
}

.py-550 {
  padding-top: var(--size-550);
  padding-bottom: var(--size-550);
}

.gap-550 {
  gap: var(--size-550);
}

.gap-x-550 {
  column-gap: var(--size-550);
}

.gap-y-550 {
  row-gap: var(--size-550);
}

@media (min-width: 992px) {
  .m-lg-550 {
    margin: var(--size-550);
  }
  .mt-lg-550 {
    margin-top: var(--size-550);
  }
  .mr-lg-550 {
    margin-right: var(--size-550);
  }
  .mb-lg-550 {
    margin-bottom: var(--size-550);
  }
  .ml-lg-550 {
    margin-left: var(--size-550);
  }
  .mx-lg-550 {
    margin-left: var(--size-550);
    margin-right: var(--size-550);
  }
  .my-lg-550 {
    margin-top: var(--size-550);
    margin-bottom: var(--size-550);
  }
  .p-lg-550 {
    padding: var(--size-550);
  }
  .pt-lg-550 {
    padding-top: var(--size-550);
  }
  .pr-lg-550 {
    padding-right: var(--size-550);
  }
  .pb-lg-550 {
    padding-bottom: var(--size-550);
  }
  .pl-lg-550 {
    padding-left: var(--size-550);
  }
  .px-lg-550 {
    padding-left: var(--size-550);
    padding-right: var(--size-550);
  }
  .py-lg-550 {
    padding-top: var(--size-550);
    padding-bottom: var(--size-550);
  }
  .gap-lg-550 {
    gap: var(--size-550);
  }
  .gap-x-lg-550 {
    column-gap: var(--size-550);
  }
  .gap-y-lg-550 {
    row-gap: var(--size-550);
  }
}
@media (min-width: 1200px) {
  .m-xl-550 {
    margin: var(--size-550);
  }
  .mt-xl-550 {
    margin-top: var(--size-550);
  }
  .mr-xl-550 {
    margin-right: var(--size-550);
  }
  .mb-xl-550 {
    margin-bottom: var(--size-550);
  }
  .ml-xl-550 {
    margin-left: var(--size-550);
  }
  .mx-xl-550 {
    margin-left: var(--size-550);
    margin-right: var(--size-550);
  }
  .my-xl-550 {
    margin-top: var(--size-550);
    margin-bottom: var(--size-550);
  }
  .p-xl-550 {
    padding: var(--size-550);
  }
  .pt-xl-550 {
    padding-top: var(--size-550);
  }
  .pr-xl-550 {
    padding-right: var(--size-550);
  }
  .pb-xl-550 {
    padding-bottom: var(--size-550);
  }
  .pl-xl-550 {
    padding-left: var(--size-550);
  }
  .px-xl-550 {
    padding-left: var(--size-550);
    padding-right: var(--size-550);
  }
  .py-xl-550 {
    padding-top: var(--size-550);
    padding-bottom: var(--size-550);
  }
  .gap-xl-550 {
    gap: var(--size-550);
  }
  .gap-x-xl-550 {
    column-gap: var(--size-550);
  }
  .gap-y-xl-550 {
    row-gap: var(--size-550);
  }
}
.m-600 {
  margin: var(--size-600);
}

.mt-600 {
  margin-top: var(--size-600);
}

.mr-600 {
  margin-right: var(--size-600);
}

.mb-600 {
  margin-bottom: var(--size-600);
}

.ml-600 {
  margin-left: var(--size-600);
}

.mx-600 {
  margin-left: var(--size-600);
  margin-right: var(--size-600);
}

.my-600 {
  margin-top: var(--size-600);
  margin-bottom: var(--size-600);
}

.p-600 {
  padding: var(--size-600);
}

.pt-600 {
  padding-top: var(--size-600);
}

.pr-600 {
  padding-right: var(--size-600);
}

.pb-600 {
  padding-bottom: var(--size-600);
}

.pl-600 {
  padding-left: var(--size-600);
}

.px-600 {
  padding-left: var(--size-600);
  padding-right: var(--size-600);
}

.py-600 {
  padding-top: var(--size-600);
  padding-bottom: var(--size-600);
}

.gap-600 {
  gap: var(--size-600);
}

.gap-x-600 {
  column-gap: var(--size-600);
}

.gap-y-600 {
  row-gap: var(--size-600);
}

@media (min-width: 992px) {
  .m-lg-600 {
    margin: var(--size-600);
  }
  .mt-lg-600 {
    margin-top: var(--size-600);
  }
  .mr-lg-600 {
    margin-right: var(--size-600);
  }
  .mb-lg-600 {
    margin-bottom: var(--size-600);
  }
  .ml-lg-600 {
    margin-left: var(--size-600);
  }
  .mx-lg-600 {
    margin-left: var(--size-600);
    margin-right: var(--size-600);
  }
  .my-lg-600 {
    margin-top: var(--size-600);
    margin-bottom: var(--size-600);
  }
  .p-lg-600 {
    padding: var(--size-600);
  }
  .pt-lg-600 {
    padding-top: var(--size-600);
  }
  .pr-lg-600 {
    padding-right: var(--size-600);
  }
  .pb-lg-600 {
    padding-bottom: var(--size-600);
  }
  .pl-lg-600 {
    padding-left: var(--size-600);
  }
  .px-lg-600 {
    padding-left: var(--size-600);
    padding-right: var(--size-600);
  }
  .py-lg-600 {
    padding-top: var(--size-600);
    padding-bottom: var(--size-600);
  }
  .gap-lg-600 {
    gap: var(--size-600);
  }
  .gap-x-lg-600 {
    column-gap: var(--size-600);
  }
  .gap-y-lg-600 {
    row-gap: var(--size-600);
  }
}
@media (min-width: 1200px) {
  .m-xl-600 {
    margin: var(--size-600);
  }
  .mt-xl-600 {
    margin-top: var(--size-600);
  }
  .mr-xl-600 {
    margin-right: var(--size-600);
  }
  .mb-xl-600 {
    margin-bottom: var(--size-600);
  }
  .ml-xl-600 {
    margin-left: var(--size-600);
  }
  .mx-xl-600 {
    margin-left: var(--size-600);
    margin-right: var(--size-600);
  }
  .my-xl-600 {
    margin-top: var(--size-600);
    margin-bottom: var(--size-600);
  }
  .p-xl-600 {
    padding: var(--size-600);
  }
  .pt-xl-600 {
    padding-top: var(--size-600);
  }
  .pr-xl-600 {
    padding-right: var(--size-600);
  }
  .pb-xl-600 {
    padding-bottom: var(--size-600);
  }
  .pl-xl-600 {
    padding-left: var(--size-600);
  }
  .px-xl-600 {
    padding-left: var(--size-600);
    padding-right: var(--size-600);
  }
  .py-xl-600 {
    padding-top: var(--size-600);
    padding-bottom: var(--size-600);
  }
  .gap-xl-600 {
    gap: var(--size-600);
  }
  .gap-x-xl-600 {
    column-gap: var(--size-600);
  }
  .gap-y-xl-600 {
    row-gap: var(--size-600);
  }
}
.m-650 {
  margin: var(--size-650);
}

.mt-650 {
  margin-top: var(--size-650);
}

.mr-650 {
  margin-right: var(--size-650);
}

.mb-650 {
  margin-bottom: var(--size-650);
}

.ml-650 {
  margin-left: var(--size-650);
}

.mx-650 {
  margin-left: var(--size-650);
  margin-right: var(--size-650);
}

.my-650 {
  margin-top: var(--size-650);
  margin-bottom: var(--size-650);
}

.p-650 {
  padding: var(--size-650);
}

.pt-650 {
  padding-top: var(--size-650);
}

.pr-650 {
  padding-right: var(--size-650);
}

.pb-650 {
  padding-bottom: var(--size-650);
}

.pl-650 {
  padding-left: var(--size-650);
}

.px-650 {
  padding-left: var(--size-650);
  padding-right: var(--size-650);
}

.py-650 {
  padding-top: var(--size-650);
  padding-bottom: var(--size-650);
}

.gap-650 {
  gap: var(--size-650);
}

.gap-x-650 {
  column-gap: var(--size-650);
}

.gap-y-650 {
  row-gap: var(--size-650);
}

@media (min-width: 992px) {
  .m-lg-650 {
    margin: var(--size-650);
  }
  .mt-lg-650 {
    margin-top: var(--size-650);
  }
  .mr-lg-650 {
    margin-right: var(--size-650);
  }
  .mb-lg-650 {
    margin-bottom: var(--size-650);
  }
  .ml-lg-650 {
    margin-left: var(--size-650);
  }
  .mx-lg-650 {
    margin-left: var(--size-650);
    margin-right: var(--size-650);
  }
  .my-lg-650 {
    margin-top: var(--size-650);
    margin-bottom: var(--size-650);
  }
  .p-lg-650 {
    padding: var(--size-650);
  }
  .pt-lg-650 {
    padding-top: var(--size-650);
  }
  .pr-lg-650 {
    padding-right: var(--size-650);
  }
  .pb-lg-650 {
    padding-bottom: var(--size-650);
  }
  .pl-lg-650 {
    padding-left: var(--size-650);
  }
  .px-lg-650 {
    padding-left: var(--size-650);
    padding-right: var(--size-650);
  }
  .py-lg-650 {
    padding-top: var(--size-650);
    padding-bottom: var(--size-650);
  }
  .gap-lg-650 {
    gap: var(--size-650);
  }
  .gap-x-lg-650 {
    column-gap: var(--size-650);
  }
  .gap-y-lg-650 {
    row-gap: var(--size-650);
  }
}
@media (min-width: 1200px) {
  .m-xl-650 {
    margin: var(--size-650);
  }
  .mt-xl-650 {
    margin-top: var(--size-650);
  }
  .mr-xl-650 {
    margin-right: var(--size-650);
  }
  .mb-xl-650 {
    margin-bottom: var(--size-650);
  }
  .ml-xl-650 {
    margin-left: var(--size-650);
  }
  .mx-xl-650 {
    margin-left: var(--size-650);
    margin-right: var(--size-650);
  }
  .my-xl-650 {
    margin-top: var(--size-650);
    margin-bottom: var(--size-650);
  }
  .p-xl-650 {
    padding: var(--size-650);
  }
  .pt-xl-650 {
    padding-top: var(--size-650);
  }
  .pr-xl-650 {
    padding-right: var(--size-650);
  }
  .pb-xl-650 {
    padding-bottom: var(--size-650);
  }
  .pl-xl-650 {
    padding-left: var(--size-650);
  }
  .px-xl-650 {
    padding-left: var(--size-650);
    padding-right: var(--size-650);
  }
  .py-xl-650 {
    padding-top: var(--size-650);
    padding-bottom: var(--size-650);
  }
  .gap-xl-650 {
    gap: var(--size-650);
  }
  .gap-x-xl-650 {
    column-gap: var(--size-650);
  }
  .gap-y-xl-650 {
    row-gap: var(--size-650);
  }
}
.radius-200 {
  border-radius: var(--radius-200);
}

.radius-300 {
  border-radius: var(--radius-300);
}

.radius-400 {
  border-radius: var(--radius-400);
}

.grid {
  display: grid;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (min-width: 768px) {
  .grid--md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--md-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--md-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid--md-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 992px) {
  .grid--lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--lg-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid--lg-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1025px) {
  .grid-xl {
    display: grid;
  }
  .grid--xl-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--xl-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--xl-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1200px) {
  .grid-xxl {
    display: grid;
  }
  .grid--xxl-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--xxl-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--xxl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--xxl-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* =============== DARK MODE OVERRIDES ===============  */
/* Overrides for Bootstrap, third-party, and inline-style components */
[data-theme=dark] .form-control,
[data-theme=dark] .form-select {
  background-color: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-350) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .form-control:focus,
[data-theme=dark] .form-select:focus {
  background-color: var(--clr-neutral-150) !important;
  border-color: var(--clr-primary-400) !important;
  color: var(--clr-neutral-650) !important;
  box-shadow: 0 0 0 0.2rem rgba(63, 131, 248, 0.15) !important;
}
[data-theme=dark] .form-control::placeholder,
[data-theme=dark] .form-select::placeholder {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--clr-neutral-650);
  --bs-table-border-color: var(--clr-neutral-300);
  --bs-table-striped-bg: var(--clr-neutral-150);
  --bs-table-hover-bg: var(--clr-neutral-200);
  color: var(--clr-neutral-650);
}
[data-theme=dark] .table-light,
[data-theme=dark] .table-light > th,
[data-theme=dark] .table-light > td {
  --bs-table-bg: var(--clr-neutral-200) !important;
  --bs-table-color: var(--clr-neutral-650) !important;
  background-color: var(--clr-neutral-200) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .modal-content {
  background-color: var(--clr-neutral-100);
  border-color: var(--clr-neutral-300);
  color: var(--clr-neutral-650);
}
[data-theme=dark] .modal-header {
  border-color: var(--clr-neutral-300);
}
[data-theme=dark] .modal-footer {
  border-color: var(--clr-neutral-300);
}
[data-theme=dark] .dropdown-menu {
  background-color: var(--clr-neutral-100);
  border-color: var(--clr-neutral-300);
  box-shadow: 0px 0px 0px 1px var(--clr-neutral-300), 0px 1px 3px rgba(0, 0, 0, 0.4) !important;
}
[data-theme=dark] .dropdown-item {
  color: var(--clr-neutral-650);
}
[data-theme=dark] .dropdown-item:hover, [data-theme=dark] .dropdown-item:focus {
  background-color: var(--clr-neutral-250);
  color: var(--clr-neutral-650);
}
[data-theme=dark] .alert {
  border-color: var(--clr-neutral-300);
}
[data-theme=dark] .card {
  background-color: var(--clr-neutral-100);
  border-color: var(--clr-neutral-300);
}
[data-theme=dark] .toast-info, [data-theme=dark] .toast-success, [data-theme=dark] .toast-warning, [data-theme=dark] .toast-error {
  opacity: 0.95;
}
[data-theme=dark] a:not([class]) {
  color: var(--clr-primary-400);
}
[data-theme=dark] img[src*=placeholder] {
  opacity: 0.9;
}
[data-theme=dark] hr {
  border-color: var(--clr-neutral-300);
  opacity: 0.5;
}
[data-theme=dark] * {
  scrollbar-color: var(--clr-neutral-350) var(--clr-neutral-150);
}
[data-theme=dark] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-theme=dark] ::-webkit-scrollbar-track {
  background: var(--clr-neutral-150);
}
[data-theme=dark] ::-webkit-scrollbar-thumb {
  background: var(--clr-neutral-350);
  border-radius: 4px;
}
[data-theme=dark] .myinput--select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%239CA3AF' d='M8.12 9.29L12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 2rem !important;
}
[data-theme=dark] .dropdown .dropdown-toggle::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 10l5 5l5-5'/%3E%3C/svg%3E");
}
[data-theme=dark] .header__logo-link .logo-light,
[data-theme=dark] .logo-section .logo-light {
  display: none;
}
[data-theme=dark] .header__logo-link .logo-dark,
[data-theme=dark] .logo-section .logo-dark {
  display: block;
}
[data-theme=dark] .sg-board,
[data-theme=dark] .sg-panel {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .sg-controls select,
[data-theme=dark] .sg-controls input[type=number],
[data-theme=dark] .sg-search-input {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-controls .field label {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-search-results {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .sg-search-result:hover,
[data-theme=dark] .sg-search-result-hover {
  background: var(--clr-neutral-200) !important;
}
[data-theme=dark] .sg-search-result-name {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-card {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .sg-avatar {
  background: var(--clr-neutral-300) !important;
}
[data-theme=dark] .sg-legend {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-tooltip {
  background: var(--clr-neutral-650) !important;
  color: var(--clr-neutral-100) !important;
}
[data-theme=dark] .sg-board svg .grid line {
  stroke: var(--clr-neutral-300) !important;
}
[data-theme=dark] .sg-board svg .axis text {
  fill: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-board svg .axis-title {
  fill: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-board svg .label {
  fill: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-board svg .label.sel {
  fill: var(--clr-primary-400) !important;
}
[data-theme=dark] .sg-board svg .label.highlight {
  fill: #f59e0b !important;
}
[data-theme=dark] .sg-search-wrap i {
  color: var(--clr-neutral-400) !important;
}
[data-theme=dark] .sg-search-result {
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .sg-search-result-team {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-search-empty {
  color: var(--clr-neutral-400) !important;
}
[data-theme=dark] .sg-empty {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-x {
  color: var(--clr-neutral-400) !important;
}
[data-theme=dark] .sg-title {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-sub {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-kv span {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-kv b {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-kv__highlight--x {
  background: rgba(3, 105, 161, 0.15) !important;
}
[data-theme=dark] .sg-kv__highlight--x span,
[data-theme=dark] .sg-kv__highlight--x b {
  color: #38bdf8 !important;
}
[data-theme=dark] .sg-kv__highlight--y {
  background: rgba(21, 128, 61, 0.15) !important;
}
[data-theme=dark] .sg-kv__highlight--y span,
[data-theme=dark] .sg-kv__highlight--y b {
  color: #4ade80 !important;
}
[data-theme=dark] .sg-metric-box--x {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
}
[data-theme=dark] .sg-metric-box--x .sg-metric-label {
  color: #7dd3fc !important;
}
[data-theme=dark] .sg-metric-box--x .sg-metric-value {
  color: #93c5fd !important;
}
[data-theme=dark] .sg-metric-box--y {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.2) 100%) !important;
}
[data-theme=dark] .sg-metric-box--y .sg-metric-label {
  color: #86efac !important;
}
[data-theme=dark] .sg-metric-box--y .sg-metric-value {
  color: #4ade80 !important;
}
[data-theme=dark] .sg-link-full {
  color: var(--clr-primary-400) !important;
}
[data-theme=dark] .sg-link-sm {
  color: var(--clr-primary-400) !important;
}
[data-theme=dark] .sg-track-btn {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-track-btn:hover {
  background: var(--clr-neutral-200) !important;
}
[data-theme=dark] .sg-track-btn.tracked {
  background: rgba(22, 101, 52, 0.2) !important;
  border-color: rgba(134, 239, 172, 0.3) !important;
  color: #4ade80 !important;
}
[data-theme=dark] .sg-track-btn.tracked:hover {
  background: rgba(22, 101, 52, 0.3) !important;
}
[data-theme=dark] .sg-chart-section {
  background: var(--clr-neutral-150) !important;
}
[data-theme=dark] .sg-chart-title {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-card__sub {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-card__title {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-card__metric span {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .sg-card__metric b {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-card__metric--x b {
  color: #38bdf8 !important;
}
[data-theme=dark] .sg-card__metric--y b {
  color: #4ade80 !important;
}
[data-theme=dark] .switch {
  background: var(--clr-neutral-300) !important;
}
[data-theme=dark] .switch::after {
  background: var(--clr-neutral-100) !important;
}
[data-theme=dark] .btn-primary,
[data-theme=dark] .mybtn--primary,
[data-theme=dark] .mybtn--primary-green,
[data-theme=dark] .buttonGreen,
[data-theme=dark] .rec-toggle-btn.active {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}
[data-theme=dark] .btn-primary:hover,
[data-theme=dark] .mybtn--primary:hover,
[data-theme=dark] .mybtn--primary-green:hover,
[data-theme=dark] .buttonGreen:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
[data-theme=dark] .sg-controls .btn:not(.btn-primary) {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-controls .btn:not(.btn-primary):hover {
  background: var(--clr-neutral-200) !important;
}
[data-theme=dark] .sg-legend .btn {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .sg-legend .btn:hover {
  background: var(--clr-neutral-200) !important;
}
[data-theme=dark] [style*="border-top:1px solid #eef2f7"],
[data-theme=dark] [style*="border-top: 1px solid #eef2f7"] {
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .radar-table thead th {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .radar-table tbody tr:hover {
  background: var(--clr-neutral-150) !important;
}
[data-theme=dark] .radar-table tbody td {
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .radar-player-cell .player-name {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .metric-value {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .radar-download-btn {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .radar-download-btn:hover {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-350) !important;
}
[data-theme=dark] .radar-empty-state h5 {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .comparison-context {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .comparison-context-title {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .comparison-context-item strong {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .league-tier-badge.other {
  background: var(--clr-neutral-250) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .radar-modal-header h2 {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .radar-search-input {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .radar-search-input:focus {
  background: var(--clr-neutral-100) !important;
}
[data-theme=dark] .radar-search-result:hover {
  background: var(--clr-neutral-150) !important;
}
[data-theme=dark] .radar-search-result-name {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .radar-selected-player {
  background: var(--clr-neutral-150) !important;
}
[data-theme=dark] .radar-selected-player-name {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .radar-selected-header span {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .radar-cancel-btn {
  background: var(--clr-neutral-250) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .radar-cancel-btn:hover {
  background: var(--clr-neutral-300) !important;
}
[data-theme=dark] .meta .name a {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .rec-toggle-btn {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .rec-toggle-btn:hover {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-350) !important;
}
[data-theme=dark] .rec-toggle-btn.active,
[data-theme=dark] .rec-toggle-btn.active:hover {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}
[data-theme=dark] .ai__table th {
  background-color: var(--clr-neutral-150) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .ai__table td {
  color: var(--clr-neutral-650) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .ai__table tr {
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .rule .rm {
  background: var(--clr-neutral-200) !important;
  border-color: var(--clr-neutral-350) !important;
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] #tbl td strong a {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .tracked-feed,
[data-theme=dark] .insight-card {
  --border: var(--clr-neutral-300);
}
[data-theme=dark] .pro-modal {
  background: var(--clr-neutral-100) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
[data-theme=dark] .pro-modal__close {
  background: var(--clr-neutral-250) !important;
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .pro-modal__close:hover {
  background: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .pro-modal__title {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .pro-modal__message {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .pro-modal__benefit {
  background: var(--clr-success-50) !important;
  color: var(--clr-success-600) !important;
}
[data-theme=dark] .pro-modal__feature {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .pro-modal__feature i {
  background: var(--clr-neutral-250) !important;
}
[data-theme=dark] .pro-modal__price-amount {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .pro-modal__price-period {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .pro-modal__footer {
  color: var(--clr-neutral-400) !important;
}
[data-theme=dark] .pro-locked::after {
  background: rgba(17, 19, 24, 0.7) !important;
}
[data-theme=dark] .metric-locked {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}
[data-theme=dark] svg [stroke="#596174"] {
  stroke: var(--clr-neutral-450);
}
[data-theme=dark] .onboarding-wrapper,
[data-theme=dark] .onboard-page {
  background: var(--clr-body-bg) !important;
}
[data-theme=dark] .onboarding-card,
[data-theme=dark] .onboard-card,
[data-theme=dark] .step-card {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .onboarding-header {
  background: linear-gradient(135deg, var(--clr-neutral-100) 0%, var(--clr-neutral-200) 100%) !important;
}
[data-theme=dark] .onboarding-card h2,
[data-theme=dark] .onboarding-card h3,
[data-theme=dark] .step-card h2,
[data-theme=dark] .step-card h3 {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .onboarding-card p,
[data-theme=dark] .step-card p {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .role-card,
[data-theme=dark] .selection-chip {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .role-card:hover,
[data-theme=dark] .selection-chip:hover {
  border-color: var(--clr-neutral-350) !important;
}
[data-theme=dark] .progress-step .step-label {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] .progress-step.completed .step-circle {
  background: #03543F !important;
  border-color: #03543F !important;
}
[data-theme=dark] .auth-card,
[data-theme=dark] .auth-box,
[data-theme=dark] .account-card,
[data-theme=dark] .settings-card {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .auth-divider,
[data-theme=dark] .settings-divider {
  background: var(--clr-neutral-300) !important;
}
[data-theme=dark] .login-container {
  background: var(--clr-neutral-100) !important;
}
[data-theme=dark] .login-header h1,
[data-theme=dark] .login-header p {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .login-container label {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] .login-container input[type=text],
[data-theme=dark] .login-container input[type=email],
[data-theme=dark] .login-container input[type=password] {
  background: var(--clr-neutral-150) !important;
  border-color: var(--clr-neutral-350) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .login-container input::placeholder {
  color: var(--clr-neutral-400) !important;
}
[data-theme=dark] .stats-badge {
  background: rgba(4, 120, 87, 0.15) !important;
  color: #4ade80 !important;
}
[data-theme=dark] .switch {
  background: var(--clr-neutral-300) !important;
}
[data-theme=dark] .switch::after {
  background: var(--clr-neutral-100) !important;
}
[data-theme=dark] input:checked + .switch {
  background: #0ea5a6 !important;
}
[data-theme=dark] .sg-controls .btn:not(.btn-primary),
[data-theme=dark] .radar-controls .btn:not(.btn-primary) {
  background: var(--clr-neutral-100) !important;
  border-color: var(--clr-neutral-300) !important;
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] .sg-controls .btn:not(.btn-primary):hover,
[data-theme=dark] .radar-controls .btn:not(.btn-primary):hover {
  background: var(--clr-neutral-150) !important;
}
[data-theme=dark] .sg-controls .btn.active,
[data-theme=dark] .radar-controls .btn.active {
  background: var(--clr-neutral-250) !important;
}
[data-theme=dark] [style*="background: #fff"],
[data-theme=dark] [style*="background:#fff"],
[data-theme=dark] [style*="background: white"],
[data-theme=dark] [style*="background:white"],
[data-theme=dark] [style*="background: #ffffff"],
[data-theme=dark] [style*="background:#ffffff"],
[data-theme=dark] [style*="background-color: #fff"],
[data-theme=dark] [style*="background-color:#fff"],
[data-theme=dark] [style*="background-color: white"],
[data-theme=dark] [style*="background-color:white"],
[data-theme=dark] [style*="background-color: #ffffff"],
[data-theme=dark] [style*="background-color:#ffffff"] {
  background: var(--clr-neutral-100) !important;
  background-color: var(--clr-neutral-100) !important;
}
[data-theme=dark] [style*="background: #f9fafb"],
[data-theme=dark] [style*="background:#f9fafb"],
[data-theme=dark] [style*="background-color: #f9fafb"],
[data-theme=dark] [style*="background-color:#f9fafb"],
[data-theme=dark] [style*="background: #f8fafc"],
[data-theme=dark] [style*="background:#f8fafc"],
[data-theme=dark] [style*="background: #f3f4f6"],
[data-theme=dark] [style*="background:#f3f4f6"],
[data-theme=dark] [style*="background: #f1f5f9"],
[data-theme=dark] [style*="background:#f1f5f9"],
[data-theme=dark] [style*="background-color: #f3f4f6"],
[data-theme=dark] [style*="background-color:#f3f4f6"],
[data-theme=dark] [style*="background: #fafafa"],
[data-theme=dark] [style*="background:#fafafa"],
[data-theme=dark] [style*="background: #f2f2f2"],
[data-theme=dark] [style*="background:#f2f2f2"],
[data-theme=dark] [style*="background: #f5f5f5"],
[data-theme=dark] [style*="background:#f5f5f5"] {
  background: var(--clr-neutral-150) !important;
  background-color: var(--clr-neutral-150) !important;
}
[data-theme=dark] [style*="color: #111827"],
[data-theme=dark] [style*="color:#111827"],
[data-theme=dark] [style*="color: #1e293b"],
[data-theme=dark] [style*="color:#1e293b"],
[data-theme=dark] [style*="color: #1a202c"],
[data-theme=dark] [style*="color:#1a202c"],
[data-theme=dark] [style*="color: #000"],
[data-theme=dark] [style*="color:#000"] {
  color: var(--clr-neutral-650) !important;
}
[data-theme=dark] [style*="color: #374151"],
[data-theme=dark] [style*="color:#374151"],
[data-theme=dark] [style*="color: #334155"],
[data-theme=dark] [style*="color:#334155"],
[data-theme=dark] [style*="color: #475569"],
[data-theme=dark] [style*="color:#475569"],
[data-theme=dark] [style*="color: #4b5563"],
[data-theme=dark] [style*="color:#4b5563"],
[data-theme=dark] [style*="color: #4a5568"],
[data-theme=dark] [style*="color:#4a5568"] {
  color: var(--clr-neutral-550) !important;
}
[data-theme=dark] [style*="color: #6b7280"],
[data-theme=dark] [style*="color:#6b7280"],
[data-theme=dark] [style*="color: #64748b"],
[data-theme=dark] [style*="color:#64748b"],
[data-theme=dark] [style*="color: #9ca3af"],
[data-theme=dark] [style*="color:#9ca3af"] {
  color: var(--clr-neutral-450) !important;
}
[data-theme=dark] [style*="border: 1px solid #e5e7eb"],
[data-theme=dark] [style*="border:1px solid #e5e7eb"],
[data-theme=dark] [style*="border-color: #e5e7eb"],
[data-theme=dark] [style*="border-color:#e5e7eb"],
[data-theme=dark] [style*="border: 1px solid #e2e8f0"],
[data-theme=dark] [style*="border:1px solid #e2e8f0"],
[data-theme=dark] [style*="border-bottom: 1px solid #e5e7eb"],
[data-theme=dark] [style*="border-bottom:1px solid #e5e7eb"],
[data-theme=dark] [style*="border-top: 1px solid #e5e7eb"],
[data-theme=dark] [style*="border-top:1px solid #e5e7eb"] {
  border-color: var(--clr-neutral-300) !important;
}
@keyframes dark-skeleton {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
[data-theme=dark] .skeleton,
[data-theme=dark] [class*=skeleton] {
  background: linear-gradient(90deg, var(--clr-neutral-200) 25%, var(--clr-neutral-250) 50%, var(--clr-neutral-200) 75%) !important;
  background-size: 200px 100% !important;
  animation: dark-skeleton 1.5s infinite !important;
}
[data-theme=dark] [style*="background: #fef3c7"],
[data-theme=dark] [style*="background:#fef3c7"],
[data-theme=dark] [style*="background-color: #fef3c7"],
[data-theme=dark] [style*="background-color:#fef3c7"] {
  background: rgba(251, 191, 36, 0.15) !important;
  background-color: rgba(251, 191, 36, 0.15) !important;
}
[data-theme=dark] [style*="color: #92400e"],
[data-theme=dark] [style*="color:#92400e"] {
  color: #fbbf24 !important;
}
[data-theme=dark] .ms-change.positive {
  background: rgba(5, 150, 105, 0.15) !important;
}
[data-theme=dark] .ms-change.negative {
  background: rgba(220, 38, 38, 0.15) !important;
}
[data-theme=dark] .ms-breakout-row {
  background: rgba(251, 191, 36, 0.12) !important;
}
[data-theme=dark] .ta-updates-banner {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}
[data-theme=dark] .ta-new-count-badge {
  background: rgba(220, 38, 38, 0.15) !important;
}
[data-theme=dark] .headline-new-badge {
  opacity: 0.9;
}
[data-theme=dark] .tp-count-badge {
  background: rgba(59, 130, 246, 0.12) !important;
}
[data-theme=dark] .tp-locked-banner {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  color: #fbbf24 !important;
}
[data-theme=dark] .tp-index-change.positive {
  background: rgba(5, 150, 105, 0.15) !important;
}
[data-theme=dark] .tp-index-change.negative {
  background: rgba(220, 38, 38, 0.15) !important;
}
[data-theme=dark] .metric-cell-locked:hover {
  background: rgba(251, 191, 36, 0.12) !important;
}
[data-theme=dark] .league-locked-notice {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  color: #fbbf24 !important;
}
[data-theme=dark] .league-locked-notice a {
  color: #fbbf24 !important;
}
[data-theme=dark] .avatar {
  background: var(--clr-neutral-200) !important;
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] .indexRow .rank {
  background: rgba(59, 130, 246, 0.15) !important;
}
[data-theme=dark] .pro-locked-notice {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  color: #fbbf24 !important;
}
[data-theme=dark] .pro-locked-notice a {
  color: #fbbf24 !important;
}
[data-theme=dark] .indexRow .rank.crown {
  background: rgba(255, 216, 77, 0.15) !important;
  border-color: rgba(255, 216, 77, 0.3) !important;
}
[data-theme=dark] .subscription-card--pro {
  background: rgba(251, 191, 36, 0.08) !important;
  border-color: rgba(253, 224, 71, 0.25) !important;
}
[data-theme=dark] .settings-toast.success {
  background: rgba(5, 150, 105, 0.15) !important;
  color: #4ade80 !important;
}
[data-theme=dark] .settings-toast.error {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #f87171 !important;
}
[data-theme=dark] .mybtn--primary-green.mybtn--outline {
  color: #22c55e !important;
  border-color: #22c55e !important;
  background: transparent !important;
}
[data-theme=dark] .mybtn--primary-green.mybtn--outline:hover {
  background: #22c55e !important;
  color: #fff !important;
}
[data-theme=dark] .ta-player-untrack:hover,
[data-theme=dark] .ta-card-untrack:hover {
  background: rgba(220, 38, 38, 0.12) !important;
}
[data-theme=dark] .onboarding-logo img {
  filter: brightness(0) invert(1);
}
[data-theme=dark] .league-tier-badge.top7 {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}
[data-theme=dark] .minutes-warning {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
}
[data-theme=dark] .pro-league-notice {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  color: #fbbf24 !important;
}
[data-theme=dark] .pro-league-notice a {
  color: #fbbf24 !important;
}
[data-theme=dark] [style*="color: #94a3b8"],
[data-theme=dark] [style*="color:#94a3b8"] {
  color: var(--clr-neutral-400) !important;
}
[data-theme=dark] [style*="color: #d97706"],
[data-theme=dark] [style*="color:#d97706"] {
  color: #fbbf24 !important;
}
[data-theme=dark] [style*="border-top: 1px solid #f1f5f9"],
[data-theme=dark] [style*="border-top:1px solid #f1f5f9"],
[data-theme=dark] [style*="border: 1px solid #fcd34d"],
[data-theme=dark] [style*="border:1px solid #fcd34d"] {
  border-color: var(--clr-neutral-300) !important;
}
[data-theme=dark] [style*="background-color: #FDF6B2"] {
  background-color: rgba(251, 191, 36, 0.15) !important;
}
[data-theme=dark] [style*="color: #723B13"],
[data-theme=dark] [style*="color:#723B13"] {
  color: #fbbf24 !important;
}
[data-theme=dark] [style*="border: 1px solid #dc2626"],
[data-theme=dark] [style*="border:1px solid #dc2626"] {
  border-color: #991b1b !important;
}
[data-theme=dark] [style*="color: #dc2626"],
[data-theme=dark] [style*="color:#dc2626"] {
  color: #E02424 !important;
}
[data-theme=dark] .chart-legend,
[data-theme=dark] canvas + div {
  color: var(--clr-neutral-550) !important;
}

.mybtn {
  font-size: var(--fs-200);
  color: var(--clr-neutral-650);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-250);
}
.mybtn--outline {
  border: 1px solid var(--clr-neutral-300);
  border-radius: var(--radius-250);
}
.mybtn--arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.mybtn--primary {
  background-color: var(--clr-primary-600);
  color: var(--clr-neutral-100);
}

.mybox {
  background-color: var(--clr-neutral-100);
  box-shadow: var(--box-shadow);
  border-radius: var(--radius-250);
}

.circle-progress {
  position: relative;
  width: 7.1rem;
  height: 7.1rem;
}
.circle-progress__svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.circle-progress__bg, .circle-progress__bar {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.circle-progress__bg {
  stroke: #e6e6e6;
}
.circle-progress__bar {
  stroke: #FACA15;
  stroke-dasharray: 172.78;
  stroke-dashoffset: 172.78;
  transition: stroke-dashoffset 0.5s ease;
}
.circle-progress__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: #333;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.circle-progress--success .circle-progress__bar {
  stroke: var(--clr-success-400);
}
.circle-progress--warning .circle-progress__bar {
  stroke: var(--clr-warning-500);
}
.circle-progress--danger .circle-progress__bar {
  stroke: var(--clr-danger-300);
}
.circle-progress--warning-light .circle-progress__bar {
  stroke: #FDBA8C;
}
.circle-progress--teal .circle-progress__bar {
  stroke: #16BDCA;
}
.circle-progress--pink .circle-progress__bar {
  stroke: #F17EB8;
}
.circle-progress--purple .circle-progress__bar {
  stroke: #AC94FA;
}
.circle-progress--primary .circle-progress__bar {
  stroke: var(--clr-primary-600);
}
.circle-progress--lg {
  width: 9.1rem;
  height: 9.1rem;
}
.circle-progress--sm {
  width: 4.5rem;
  height: 4.5rem;
}
.circle-progress--sm .circle-progress__value {
  font-size: 0.6rem;
}
.circle-progress--sm .circle-progress__bar, .circle-progress--sm .circle-progress__bg {
  stroke-width: 5;
}
@media (max-width: 768px) {
  .circle-progress {
    width: 6.5rem !important;
    height: 6.5rem !important;
  }
  .circle-progress--lg {
    width: 5rem;
    height: 5rem;
  }
  .circle-progress--sm {
    width: 3.8rem;
    height: 3.8rem;
  }
  .circle-progress--sm .circle-progress__value {
    font-size: 0.5rem;
  }
  .circle-progress .circle-progress__bar, .circle-progress .circle-progress__bg {
    stroke-width: 4.5;
  }
}
@media (max-width: 480px) {
  .circle-progress--lg {
    width: 4.3rem;
    height: 4.3rem;
  }
  .circle-progress--sm {
    width: 3.4rem;
    height: 3.4rem;
  }
}

.progress {
  background: var(--clr-neutral-300);
  border-radius: 2px;
  height: 6px;
  transition: height 0.2s ease;
}
.progress--lg {
  height: 12px;
}
.progress--match {
  height: 4px;
  border-radius: 3px;
}
.progress-warning {
  background-color: #FDBA8C;
}
.progress-primary {
  background-color: var(--clr-primary-100);
}
.progress-bar {
  border-radius: 2px;
  background-color: var(--clr-primary-600);
  transition: width 0.1s linear;
}
.progress-bar__warning {
  background-color: #FF5A1F;
  margin-left: auto;
  border-radius: 3px;
}
.progress-bar__success {
  background-color: var(--clr-success-500);
}
.progress-bar__warning-light {
  background-color: #FACA15;
}

.mybadg {
  padding: 3px 1.2rem;
  border-radius: 6px;
  text-align: center;
  font-size: var(--fs-100);
  font-weight: 500;
}
.mybadg .myicon {
  width: 16px;
  height: 16px;
}
.mybadg--primary {
  background-color: var(--clr-primary-100);
  color: var(--clr-primary-700);
}
.mybadg--success {
  background-color: var(--clr-success-50);
  color: var(--clr-success-800);
  padding: 2px 1.2rem;
  font-size: var(--fs-100) !important;
}
.mybadg--warning {
  background-color: #FDF6B2;
  color: #723B13;
}
.mybadg--danger {
  background-color: var(--clr-danger-100);
  color: var(--clr-danger-600);
  padding: 2px 1.2rem;
}
.mybadg--danger .myicon {
  scale: -1;
}
.mybadg--secondary {
  background-color: var(--clr-neutral-250);
}

.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-200);
  color: var(--clr-neutral-450);
  padding: 0 2rem;
}
.legend__scale {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #2563EB, #10B981, #FACC15, #EF4444);
}
.legend__scale--column {
  background: linear-gradient(90deg, #57DAA3 26.5%, #057A55 66%, #03543F 100%);
}

@media (min-width: 768px) {
  .mybadg {
    padding: 4px 1.2rem;
    font-size: var(--fs-200);
  }
}
.dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: block;
}
.dot--primary {
  background-color: var(--clr-primary-600);
}
.dot--teal {
  background-color: #16BDCA;
}
.dot--orange {
  background-color: #FDBA8C;
}
.dot--pink {
  background-color: #E74694;
}
.dot--purpel {
  background-color: #7879F1;
}

@media (max-width: 767px) {
  .dot {
    width: 8px;
    height: 8px;
  }
}
.dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--clr-neutral-100);
  border-radius: var(--radius-300);
  font-size: var(--fs-200);
  color: var(--clr-primary-400);
  max-width: 100%;
  border: 0;
  transition: all 0.3s;
}
.dropdown .dropdown-toggle.show::after {
  scale: -1;
}
.dropdown .dropdown-toggle:hover {
  background: var(--clr-neutral-100);
  color: var(--clr-primary-400);
}
.dropdown .dropdown-toggle--md {
  padding: var(--size-100) var(--size-300);
}
.dropdown .dropdown-toggle--sm {
  padding: var(--size-50) var(--size-200);
}
.dropdown .dropdown-toggle::after {
  display: inline-block;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 10l5 5l5-5'/%3E%3C/svg%3E");
  height: 2rem;
  width: 2rem;
  border: 0;
  margin-left: 0;
  transition: all 0.3s;
}
.dropdown .dropdown-menu {
  margin: 0;
  padding: var(--size-150);
  border-radius: var(--radius-300);
  border: 0;
  box-shadow: 0px 0px 0px 1px #E8EAED, 0px 1px 3px rgba(33, 33, 38, 0.25), inset 0px 1px 0px rgba(255, 255, 255, 0.07);
  font-size: var(--fs-200);
}
.dropdown .dropdown-menu li:not(:last-child) {
  margin-bottom: 1rem;
}
.dropdown .dropdown-menu li .dropdown-item {
  padding: 0;
}
.dropdown .dropdown-menu li .dropdown-item:hover {
  background-color: transparent;
}
.dropdown--edit .dropdown-toggle::after {
  display: none;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  border-color: transparent;
}

.tabbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem;
  box-shadow: var(--box-shadow);
  border-radius: var(--radius-250);
  background-color: var(--clr-neutral-100);
}
@media (max-width: 949px) {
  .tabbar {
    display: block;
  }
}
.tabbar__tabs {
  display: flex;
  gap: 1.6rem;
  border: 0;
}
@media (max-width: 600px) {
  .tabbar__tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar__tabs::-webkit-scrollbar {
    display: none;
  }
}
.tabbar__tab {
  font-size: var(--fs-200);
  color: var(--clr-neutral-450);
  text-decoration: none;
  padding: 0.8rem 1.6rem !important;
  border-radius: var(--radius-250) !important;
  transition: background 0.3s, color 0.3s;
  box-shadow: none;
  border-color: transparent !important;
  font-weight: 500;
}
.tabbar__tab.active {
  background-color: var(--clr-primary-600) !important;
  color: var(--clr-neutral-100) !important;
}

@media (max-width: 767px) {
  .tabbar {
    padding: 1rem;
  }
}
@media (max-width: 767px) and (max-width: 949px) {
  .tabbar {
    display: block;
  }
}
@media (max-width: 767px) {
  .tabbar__tabs {
    display: flex;
    gap: 1rem;
    border: 0;
  }
}
@media (max-width: 767px) and (max-width: 600px) {
  .tabbar__tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar__tabs::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 767px) {
  .tabbar__tab {
    font-size: var(--fs-200);
    text-decoration: none;
    padding: 0.8rem 1.2rem !important;
    border-radius: var(--radius-250) !important;
  }
  .tabbar__tab.active {
    background-color: var(--clr-primary-600) !important;
    color: var(--clr-neutral-100) !important;
  }
  .tabbar__match-info {
    display: flex;
    justify-content: center;
    gap: 1.3rem;
    padding: 0.8rem 1.2rem;
  }
}
@media (max-width: 767px) and (max-width: 949px) {
  .tabbar__match-info {
    margin-top: 1rem;
  }
}
@media (max-width: 767px) and (max-width: 768px) {
  .tabbar__match-info {
    flex-basis: 100%;
    justify-content: space-between;
  }
}
.reports {
  height: 100%;
}
.reports__header {
  padding: 2.4rem;
}
.reports__builder {
  font-size: 14px;
}
.reports__footer {
  padding: 2.4rem;
}
.reports__footer small {
  font-size: 13px;
}

@media (max-width: 991px) {
  .reports__header {
    padding: 1.2rem;
  }
  .reports__footer {
    padding: 1.2rem;
  }
}
.pagination .page-item.active {
  background: var(--clr-primary-100) !important;
  color: var(--clr-primary-600) !important;
}
.pagination .page-item:first-child .page-link {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.pagination .page-item:last-child .page-link {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.pagination .page-link {
  font-size: var(--fs-200);
  color: var(--clr-neutral-450);
  font-weight: 500;
  padding: 6px 1.2rem;
  border-color: var(--clr-neutral-350);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.pagination .page-link:hover {
  background: var(--clr-primary-100) !important;
  color: var(--clr-primary-600) !important;
}

.active > .page-link {
  background: var(--clr-primary-100) !important;
  color: var(--clr-primary-600) !important;
  border-color: var(--clr-neutral-350);
}

.table {
  --bs-table-border-color: var(--clr-neutral-200);
}
.table tr th {
  font-weight: 600;
  background: var(--clr-neutral-250);
  padding: 1.2rem 1.6rem;
}
.table tr td {
  padding: 1.2rem 1.6rem;
  white-space: nowrap;
  color: var(--clr-neutral-650);
  font-weight: 500;
}
.table__analysis {
  --bs-table-border-color: var(--clr-neutral-300);
  margin-top: 2.4rem;
}
.table__analysis tr td {
  padding: 1.1rem !important;
}
.table__tracker tr:not(:last-child) {
  border-bottom: 1px solid var(--clr-neutral-300);
}
.table__tracker tr th {
  background-color: var(--clr-neutral-150);
  color: var(--clr-neutral-450);
  padding: 1.6rem;
  font-size: var(--fs-100);
  text-transform: uppercase;
  font-weight: 600;
}
.table__tracker tr th:first-child {
  min-width: 7rem;
  width: 7rem;
}
.table__tracker tr td {
  font-size: var(--fs-200);
  border: 0;
}
.table__report {
  --bs-table-border-color: var(--clr-neutral-300);
}
.table__report tr th {
  background-color: var(--clr-neutral-150);
  padding: 1.6rem 2.4rem;
  color: var(--clr-neutral-450);
  font-size: var(--fs-100);
  text-transform: uppercase;
}
.table__report tr th:first-child {
  width: 100%;
}
.table__report tr td {
  padding: 1rem 2.4rem;
  font-size: var(--fs-200);
}
.table__players tr td {
  padding: 1rem 0;
}
.table__players tr td:first-child {
  min-width: 220px;
}
.table__players tr td:nth-child(2) {
  min-width: 160px;
}
.table__general td {
  min-width: 200px;
}
.table__general tfoot {
  border: 0;
}
.table__general tfoot tr td {
  padding-top: 2.4rem;
  border: 0;
  padding-bottom: 0;
}
.table__status tr td:first-child {
  width: 33%;
  min-width: 30rem;
}
.table__title {
  color: var(--clr-neutral-450) !important;
  text-align: left;
  font-weight: 400 !important;
}

@media (max-width: 767px) {
  .table {
    --bs-table-border-color: var(--clr-neutral-200);
  }
  .table tr th {
    padding: 1rem 1.4rem;
  }
  .table tr td {
    padding: 1rem 1.4rem;
    font-size: var(--fs-200);
  }
  .table__analysis {
    margin-top: 2rem;
  }
  .table__analysis tr td {
    padding: 1rem !important;
  }
  .table__tracker tr th {
    padding: 1.4rem;
  }
  .table__tracker tr th:first-child {
    min-width: 7rem;
    width: 7rem;
  }
  .table__tracker tr td {
    border: 0;
    padding: 1rem 1.2rem;
  }
  .table__report {
    --bs-table-border-color: var(--clr-neutral-300);
  }
  .table__report tr th {
    padding: 1.4rem 2rem;
  }
  .table__report tr td {
    padding: 1rem 2rem;
  }
  .table__general tfoot tr td {
    padding-top: 1.8rem;
  }
  .table__players .rounded-circle {
    width: 3.8rem;
    height: 3.8rem;
  }
}
.myinput {
  border-radius: var(--radius-250);
  border: 1px solid var(--clr-neutral-350);
  background-color: var(--clr-neutral-150) !important;
  padding: 12px 40px 12px 12px;
  color: var(--clr-neutral-650);
  font-size: var(--fs-200);
  font-weight: 400;
}
.myinput::placeholder {
  color: var(--clr-neutral-450);
}
.myinput--field {
  padding: 1.2rem 1.6rem !important;
}
.myinput--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 2rem !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='M8.12 9.29L12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0'/%3E%3C/svg%3E");
}
.myinput--number {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.myinput--cbox {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  position: relative;
  padding: 0;
  cursor: pointer;
}
.myinput:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
  overflow: hidden;
}
.myinput:checked::after {
  content: "";
  position: absolute;
  background-color: #3b82f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.577 6.183a1 1 0 0 1 .24 1.394l-5.666 8.02c-.36.508-.665.94-.94 1.269c-.287.34-.61.658-1.038.86a2.83 2.83 0 0 1-2.03.153c-.456-.137-.82-.406-1.149-.702c-.315-.285-.672-.668-1.09-1.116l-1.635-1.753a1 1 0 1 1 1.462-1.364l1.606 1.722c.455.487.754.806.998 1.027c.24.216.344.259.385.271c.196.06.405.045.598-.046c.046-.022.149-.085.36-.338c.216-.257.473-.62.863-1.171l5.642-7.986a1 1 0 0 1 1.394-.24'/%3E%3C/svg%3E");
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.mylabel {
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--clr-neutral-450);
}

.profile {
  padding: 2.4rem;
}
.profile__header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.profile__img {
  border-radius: 50%;
  width: 9.6rem;
  height: 9.6rem;
  object-fit: cover;
}
.profile__rating {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .profile {
    padding: 1.2rem;
  }
  .profile__header {
    gap: 1.2rem;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .profile__header p {
    text-align: center;
    justify-content: center;
  }
  .profile__img {
    width: 6.6rem;
    height: 6.6rem;
  }
  .profile__rating {
    gap: 1rem;
    margin: auto;
  }
}
.myicon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.myicon--sm {
  width: 1.2rem !important;
  height: 1.2rem !important;
}
.myicon--md {
  width: 1.6rem !important;
  height: 1.6rem !important;
}
.myicon--search {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='m21 21l-3.5-3.5M17 10a7 7 0 1 1-14 0a7 7 0 0 1 14 0Z'/%3E%3C/svg%3E");
}
.myicon--notify {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 2a6 6 0 0 0-6 6v3.586l-.707.707A1 1 0 0 0 4 14h12a1 1 0 0 0 .707-1.707L16 11.586V8a6 6 0 0 0-6-6m0 16a3 3 0 0 1-3-3h6a3 3 0 0 1-3 3'/%3E%3C/svg%3E");
}
.myicon--home {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10.707 2.293a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 1.414 1.414L4 10.414V17a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-6.586l.293.293a1 1 0 0 0 1.414-1.414z'/%3E%3C/svg%3E");
}
.myicon--profile {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 256a112 112 0 1 0-112-112a112 112 0 0 0 112 112m0 32c-69.42 0-208 42.88-208 128v64h416v-64c0-85.12-138.58-128-208-128'/%3E%3C/svg%3E");
}
.myicon--pie {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Cpath d='M2 10a8 8 0 0 1 8-8v8h8a8 8 0 1 1-16 0'/%3E%3Cpath d='M12 2.252A8.01 8.01 0 0 1 17.748 8H12z'/%3E%3C/g%3E%3C/svg%3E");
}
.myicon--video {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7m8.616-1.077l1.519-.673a.27.27 0 0 1 .366.253v2.994a.27.27 0 0 1-.366.254l-1.52-.674v.808a.54.54 0 0 1-.538.539h-4.04a.54.54 0 0 1-.538-.539v-3.77a.54.54 0 0 1 .539-.539h4.04a.54.54 0 0 1 .538.539z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.myicon--file {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0zm192 0v128h128zM80 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16m0 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16m54.2 253.8c-6.1 20.3-24.8 34.2-46 34.2H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h8.2c7.1 0 13.3-4.6 15.3-11.4l14.9-49.5c3.4-11.3 13.8-19.1 25.6-19.1s22.2 7.7 25.6 19.1l11.6 38.6c7.4-6.2 16.8-9.7 26.8-9.7c15.9 0 30.4 9 37.5 23.2l4.4 8.8H304c8.8 0 16 7.2 16 16s-7.2 16-16 16h-64c-6.1 0-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2 2.1-8.8 5.5l-8.8 17.7c-2.9 5.9-9.2 9.4-15.7 8.8s-12.1-5.1-13.9-11.3L144 349z'/%3E%3C/svg%3E");
}
.myicon--binoculars {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M128 32h32c17.7 0 32 14.3 32 32v32H96V64c0-17.7 14.3-32 32-32m64 96v320c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32v-59.1c0-34.6 9.4-68.6 27.2-98.3C40.9 267.8 49.7 242.4 53 216l7.5-60c2-16 15.6-28 31.8-28h99.8zm227.8 0c16.1 0 29.8 12 31.8 28l7.4 60c3.3 26.4 12.1 51.8 25.8 74.6c17.8 29.7 27.2 63.7 27.2 98.3V448c0 17.7-14.3 32-32 32H352c-17.7 0-32-14.3-32-32V128zM320 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32v32h-96zm-32 64v160h-64V128z'/%3E%3C/svg%3E");
}
.myicon--custom-binoculars {
  --svg: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.1 2.14282C2.77625 2.14282 1.7 3.2479 1.7 4.60711V11.7073C2.3375 11.1221 3.1775 10.7678 4.1 10.7678V4.60711H20.9V10.7678C21.8225 10.7678 22.6625 11.1221 23.3 11.7073V4.60711C23.3 3.2479 22.2238 2.14282 20.9 2.14282H4.1ZM6.5 14.4643C6.5 13.8107 6.24714 13.1839 5.79706 12.7217C5.34697 12.2596 4.73652 12 4.1 12C3.46348 12 2.85303 12.2596 2.40294 12.7217C1.95286 13.1839 1.7 13.8107 1.7 14.4643C1.7 15.1178 1.95286 15.7446 2.40294 16.2068C2.85303 16.6689 3.46348 16.9285 4.1 16.9285C4.73652 16.9285 5.34697 16.6689 5.79706 16.2068C6.24714 15.7446 6.5 15.1178 6.5 14.4643ZM0.5 20.625C0.5 21.3065 1.03625 21.8571 1.7 21.8571H6.5C7.16375 21.8571 7.7 21.3065 7.7 20.625C7.7 19.2658 6.62375 18.1607 5.3 18.1607H2.9C1.57625 18.1607 0.5 19.2658 0.5 20.625ZM14.9 14.4643C14.9 13.8107 14.6471 13.1839 14.1971 12.7217C13.747 12.2596 13.1365 12 12.5 12C11.8635 12 11.253 12.2596 10.8029 12.7217C10.3529 13.1839 10.1 13.8107 10.1 14.4643C10.1 15.1178 10.3529 15.7446 10.8029 16.2068C11.253 16.6689 11.8635 16.9285 12.5 16.9285C13.1365 16.9285 13.747 16.6689 14.1971 16.2068C14.6471 15.7446 14.9 15.1178 14.9 14.4643ZM8.9 20.625C8.9 21.3065 9.43625 21.8571 10.1 21.8571H14.9C15.5638 21.8571 16.1 21.3065 16.1 20.625C16.1 19.2658 15.0238 18.1607 13.7 18.1607H11.3C9.97625 18.1607 8.9 19.2658 8.9 20.625ZM20.9 16.9285C21.5365 16.9285 22.147 16.6689 22.5971 16.2068C23.0471 15.7446 23.3 15.1178 23.3 14.4643C23.3 13.8107 23.0471 13.1839 22.5971 12.7217C22.147 12.2596 21.5365 12 20.9 12C20.2635 12 19.653 12.2596 19.2029 12.7217C18.7529 13.1839 18.5 13.8107 18.5 14.4643C18.5 15.1178 18.7529 15.7446 19.2029 16.2068C19.653 16.6689 20.2635 16.9285 20.9 16.9285ZM19.7 18.1607C18.3763 18.1607 17.3 19.2658 17.3 20.625C17.3 21.3065 17.8363 21.8571 18.5 21.8571H23.3C23.9638 21.8571 24.5 21.3065 24.5 20.625C24.5 19.2658 23.4238 18.1607 22.1 18.1607H19.7Z' fill='%239CA3AF'/%3E%3C/svg%3E");
}
.myicon--setting {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5'/%3E%3C/svg%3E");
}
.myicon--moon {
  --svg: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.05398 6.76082C-0.04035 6.98543 -0.0134 7.24148 0.12586 7.44363L2.92449 11.5001L0.12586 15.5565C-0.0134 15.7587 -0.04035 16.0147 0.05398 16.2393C0.14832 16.4639 0.35047 16.6257 0.58855 16.6706L5.43562 17.5645L6.32508 22.4116C6.37 22.6497 6.53172 22.8518 6.75633 22.9462C6.98093 23.0405 7.23699 23.0136 7.43914 22.8743L11.5001 20.0757L15.5565 22.8743C15.7587 23.0136 16.0147 23.0405 16.2393 22.9462C16.4639 22.8518 16.6257 22.6497 16.6706 22.4116L17.5645 17.5645L22.4116 16.6751C22.6497 16.6302 22.8518 16.4684 22.9462 16.2438C23.0405 16.0192 23.0136 15.7632 22.8743 15.561L20.0757 11.5001L22.8743 7.44363C23.0136 7.24148 23.0405 6.98543 22.9462 6.76082C22.8518 6.53621 22.6497 6.37449 22.4116 6.32957L17.5645 5.43562L16.6706 0.58855C16.6257 0.35047 16.4639 0.14832 16.2393 0.05398C16.0147 -0.04035 15.7587 -0.0134 15.5565 0.12586L11.5001 2.92449L7.44363 0.12586C7.24148 -0.0134 6.98543 -0.04035 6.76082 0.05398C6.53621 0.14832 6.37449 0.35047 6.32957 0.58855L5.43562 5.43562L0.58855 6.32957C0.35047 6.37449 0.14832 6.53621 0.05398 6.76082ZM17.9688 11.5001C17.9688 13.2157 17.2873 14.861 16.0742 16.0742C14.861 17.2873 13.2157 17.9688 11.5001 17.9688C9.78446 17.9688 8.1391 17.2873 6.92598 16.0742C5.71285 14.861 5.03133 13.2157 5.03133 11.5001C5.03133 9.78446 5.71285 8.1391 6.92598 6.92598C8.1391 5.71285 9.78446 5.03133 11.5001 5.03133C13.2157 5.03133 14.861 5.71285 16.0742 6.92598C17.2873 8.1391 17.9688 9.78446 17.9688 11.5001Z' fill='%239CA3AF'/%3E%3Cpath d='M11.5449 6.37888C8.69687 6.37888 6.37891 8.66541 6.37891 11.5C6.37891 14.3345 8.69687 16.6211 11.5449 16.6211C12.942 16.6211 14.2133 16.0685 15.1432 15.1746C15.3723 14.9545 15.4307 14.6131 15.2869 14.3345C15.1432 14.056 14.8332 13.8988 14.5232 13.9482C14.3346 13.9797 14.1414 13.9976 13.9393 13.9976C12.0615 13.9976 10.5521 12.4927 10.5521 10.651C10.5521 9.40662 11.2395 8.31502 12.2727 7.74002C12.5467 7.58728 12.6904 7.26833 12.623 6.95837C12.5557 6.64841 12.2951 6.41931 11.9807 6.39236C11.8369 6.37888 11.6887 6.37439 11.5449 6.37439V6.37888Z' fill='%23111928'/%3E%3C/svg%3E");
}
.myicon--btn-arrow {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.707 7.293a1 1 0 1 0-1.414 1.414L15.586 11H6a1 1 0 1 0 0 2h9.586l-2.293 2.293a1 1 0 0 0 1.414 1.414l4-4a1 1 0 0 0 0-1.414z'/%3E%3C/svg%3E");
}
.myicon--arrow-up {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 5.714a1 1 0 0 1 1 1v12.5a1 1 0 0 1-2 0v-12.5a1 1 0 0 1 1-1' clip-rule='evenodd'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 4.214a1 1 0 0 1 .707.293l4.5 4.5a1 1 0 0 1-1.414 1.415L12 6.628l-3.793 3.793a1 1 0 0 1-1.414-1.415l4.5-4.5A1 1 0 0 1 12 4.214' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.myicon--link-arrow {
  width: 1.8rem;
  height: 1.8rem;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 17l5-5l-5-5'/%3E%3C/svg%3E");
}
.myicon--time {
  width: 1.6rem;
  height: 1.6rem;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%236B7280' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4a1 1 0 0 0-1 1v5a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V7a1 1 0 0 0-1-1'/%3E%3C/g%3E%3C/svg%3E");
}
.myicon--pause {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm7 0a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.myicon--play {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.105 11.446a2.34 2.34 0 0 1-.21 1c-.15.332-.38.62-.67.84l-9.65 7.51a2.3 2.3 0 0 1-1.17.46h-.23a2.2 2.2 0 0 1-1-.24a2.29 2.29 0 0 1-1.28-2v-14a2.2 2.2 0 0 1 .33-1.17a2.27 2.27 0 0 1 2.05-1.1c.412.02.812.148 1.16.37l9.66 6.44c.294.204.54.47.72.78c.19.34.29.721.29 1.11'/%3E%3C/svg%3E");
}
.myicon--play-back {
  --svg: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.44467 0.5C2.8337 0.500101 3.056 0.771435 3.056 1V7.94336L3.91635 7.0459C3.99867 6.9601 4.02481 6.92887 4.06479 6.89551L11.2816 1.12207C11.7966 0.708314 12.5177 0.604851 13.1673 0.866211V0.865234C13.8106 1.12494 14.1662 1.65584 14.1664 2.22656V13.7734C14.1662 14.3442 13.8101 14.8741 13.1673 15.1328C12.9283 15.2291 12.6797 15.2773 12.4369 15.2773C12.016 15.2773 11.6082 15.139 11.2816 14.877L4.06479 9.10352C4.0252 9.0715 4.00104 9.04236 3.91635 8.9541L3.056 8.05664V15C3.056 15.2286 2.83369 15.4999 2.44467 15.5C2.05551 15.5 1.83334 15.2286 1.83334 15V1C1.83334 0.771392 2.05551 0.5 2.44467 0.5Z' fill='%236B7280' stroke='%236B7280'/%3E%3C/svg%3E");
}
.myicon--play-next {
  --svg: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5556 0C12.9411 0 12.4445 0.447 12.4445 1V6.7C12.3811 6.634 12.3211 6.565 12.2478 6.506L5.03223 0.732C4.3689 0.201 3.45557 0.0759999 2.64557 0.402C1.83557 0.729 1.33334 1.429 1.33334 2.227V13.774C1.33334 14.572 1.83557 15.271 2.64557 15.598C2.94334 15.718 3.25557 15.778 3.56445 15.778C4.09445 15.778 4.61334 15.604 5.03223 15.268L12.2478 9.495C12.3211 9.436 12.3811 9.367 12.4445 9.301V15C12.4445 15.553 12.9411 16 13.5556 16C14.17 16 14.6667 15.553 14.6667 15V1C14.6667 0.447 14.17 0 13.5556 0Z' fill='%236B7280'/%3E%3C/svg%3E");
}
.myicon--shuffle {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.484 9.166L15 7h5m0 0l-3-3m3 3l-3 3M4 17h4l1.577-2.253M4 7h4l7 10h5m0 0l-3 3m3-3l-3-3'/%3E%3C/svg%3E");
}
.myicon--repeat {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m16 10l3-3m0 0l-3-3m3 3H5v3m3 4l-3 3m0 0l3 3m-3-3h14v-3'/%3E%3C/svg%3E");
}
.myicon--exclamation {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m11-4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-1 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.myicon--check-circle {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.myicon--add-folder {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linejoin='round' d='M3 18V6a2 2 0 0 1 2-2h4.539a2 2 0 0 1 1.562.75L12.2 6.126a1 1 0 0 0 .78.375H20a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath stroke-linecap='round' d='M9.5 12.5h5M12 15v-5'/%3E%3C/g%3E%3C/svg%3E");
}
.myicon--edit {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 9.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3'/%3E%3C/svg%3E");
}
.myicon--pdf {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23clip0_0_6746)'%3E%3Cpath d='M3.6 8.8H3.2V9.6H3.6C3.8208 9.6 4 9.4208 4 9.2C4 8.9792 3.8208 8.8 3.6 8.8Z' fill='%23111928'/%3E%3Cpath d='M5.6 4V0.104C5.2144 0.2144 4.8568 0.4112 4.5656 0.7032L2.3032 2.9656C2.0112 3.2568 1.8144 3.6144 1.704 4H5.6Z' fill='%23111928'/%3E%3Cpath d='M8.3 8.8H8V11.2H8.3C8.576 11.2 8.8 10.976 8.8 10.7V9.3C8.8 9.024 8.576 8.8 8.3 8.8Z' fill='%23111928'/%3E%3Cpath d='M15.2 5.6H14.4V1.6C14.4 0.7176 13.7064 0 12.8536 0H7.2V4C7.2 4.8824 6.4824 5.6 5.6 5.6H0.8C0.3584 5.6 0 5.9584 0 6.4V13.6C0 14.0416 0.3584 14.4 0.8 14.4H1.6C1.6 15.2824 2.2936 16 3.1464 16H12.8536C13.7304 16 14.2112 15.0112 14.3384 14.7088C14.38 14.6096 14.3944 14.5048 14.3944 14.4H15.2C15.6416 14.4 16 14.0416 16 13.6V6.4C16 5.9584 15.6416 5.6 15.2 5.6ZM3.6 11.2H3.2V12C3.2 12.4416 2.8416 12.8 2.4 12.8C1.9584 12.8 1.6 12.4416 1.6 12V8C1.6 7.5584 1.9584 7.2 2.4 7.2H3.6C4.7024 7.2 5.6 8.0976 5.6 9.2C5.6 10.3024 4.7024 11.2 3.6 11.2ZM10.4 10.7C10.4 11.8576 9.4576 12.8 8.3 12.8H7.2C6.7584 12.8 6.4 12.4416 6.4 12V8C6.4 7.5584 6.7584 7.2 7.2 7.2H8.3C9.4576 7.2 10.4 8.1424 10.4 9.3V10.7ZM13.6 9.6C14.0416 9.6 14.4 9.9584 14.4 10.4C14.4 10.8416 14.0416 11.2 13.6 11.2H12.8V12C12.8 12.4416 12.4416 12.8 12 12.8C11.5584 12.8 11.2 12.4416 11.2 12V8C11.2 7.5584 11.5584 7.2 12 7.2H13.6C14.0416 7.2 14.4 7.5584 14.4 8C14.4 8.4416 14.0416 8.8 13.6 8.8H12.8V9.6H13.6Z' fill='%23111928'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_0_6746'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.myicon--download {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M13 11.15V4a1 1 0 1 0-2 0v7.15L8.78 8.374a1 1 0 1 0-1.56 1.25l4 5a1 1 0 0 0 1.56 0l4-5a1 1 0 1 0-1.56-1.25z'/%3E%3Cpath d='M9.657 15.874L7.358 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2.358l-2.3 2.874a3 3 0 0 1-4.685 0M17 16a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2z'/%3E%3C/g%3E%3C/svg%3E");
}
.myicon--info {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-32-352a32 32 0 1 1 64 0a32 32 0 1 1-64 0m-8 64h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24'/%3E%3C/svg%3E");
}
.myicon--download-border {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg class='download-outline'%3E%3Cg fill='%23000' fill-rule='evenodd' class='Vector' clip-rule='evenodd'%3E%3Cpath d='M7 22a5 5 0 0 1-5-5v-3a1 1 0 1 1 2 0v3a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-3a1 1 0 1 1 2 0v3a5 5 0 0 1-5 5z'/%3E%3Cpath d='M17.715 10.9a1 1 0 0 1-.016 1.415l-4.5 4.4a1 1 0 0 1-1.398 0l-4.5-4.4a1 1 0 1 1 1.398-1.43l2.801 2.739V5a1 1 0 1 1 2 0v8.624l2.8-2.739a1 1 0 0 1 1.415.016Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.myicon--arrow-down {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.12 9.29L12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0'/%3E%3C/svg%3E");
}
.myicon--pluse {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='M18 12.998h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5v-5a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .myicon {
    width: 22px;
    height: 22px;
  }
}
.league .league-tabs-wrapper {
  position: relative;
  margin-top: 1.6rem;
}
.league .league-tabs-wrapper .league-tabs {
  scroll-behavior: smooth;
  gap: 9px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  margin-right: 4rem;
}
.league .league-tabs-wrapper .league-tabs__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--clr-neutral-100);
  border: 1px solid #E5E7EB;
}
.league .league-tabs-wrapper .league-tabs__arrow--left {
  left: 0;
}
.league .league-tabs-wrapper .league-tabs__arrow--right {
  right: 0;
}
.league .league-tabs-wrapper .league-tabs__item {
  display: inline-block;
  padding: 1.2rem;
  background-color: var(--clr-neutral-100);
  border-radius: var(--radius-250);
  cursor: pointer;
  opacity: 0.5;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  border: 1px solid var(--clr-neutral-300);
}
.league .league-tabs-wrapper .league-tabs__item--active {
  opacity: 9;
}
.league__table {
  padding: 1.2rem;
  margin-bottom: 1.6rem;
}
.league__table tr:not(:last-child) {
  border-bottom: 1px solid var(--bs-table-border-color);
}
.league__table tr th {
  background: transparent;
  padding: 9px !important;
  font-weight: 400;
  font-size: var(--fs-200);
  color: var(--clr-zblack-100);
}
.league__table tr td {
  padding: 9px !important;
  font-weight: 400;
  font-size: var(--fs-200);
  border: 0;
}
.league__table-cell {
  min-width: 16rem;
}
.league__square {
  width: 11px;
  height: 11px;
  flex-wrap: wrap;
  display: inline-grid;
  justify-content: center;
  align-items: center;
}
.league__square-dot {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  display: block;
}
.league__match-list {
  display: grid;
  gap: 16px;
}
.league__match-card {
  padding: 1.2rem;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  background-color: var(--clr-neutral-100, #fff);
  border-bottom: 1px solid var(--clr-neutral-300);
  z-index: 1030;
  display: flex;
  align-items: stretch;
}
.header__logo-box {
  padding: 1.2rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__logo-link {
  width: 12.5rem;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__logo-link .logo-dark {
  display: none;
}
.header__toggle {
  display: none;
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  position: relative;
}
.header__toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--clr-neutral-650);
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.header__toggle span:nth-child(1) {
  top: 6px;
}
.header__toggle span:nth-child(2), .header__toggle span:nth-child(3) {
  top: 12px;
}
.header__toggle span:nth-child(4) {
  top: 18px;
}
.header__center {
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: var(--clr-neutral-300);
  padding: 1.2rem 3rem;
}
.header__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header__title {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--clr-neutral-650);
}
.header__breadcrumb-title {
  font-size: var(--fs-200);
  color: var(--clr-neutral-550);
}
.header__search {
  max-width: 544px;
  flex: 1;
  margin-left: auto;
  position: relative;
}
.header__search .myinput {
  width: 100%;
}
.header__search .myicon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-neutral-450);
}
.header__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header__right {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.header__ic-box {
  padding: 1.2rem 3rem;
  border-right: 1px solid var(--clr-neutral-300);
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__ic-box .myicon--notify {
  color: var(--clr-neutral-400);
}
.header__profile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 1.2rem 3rem;
}
.header__profile-img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.header__profile-info {
  display: flex;
  flex-direction: column;
}

.is-open .header__toggle span:nth-child(1) {
  top: 12px;
  width: 0%;
  left: 50%;
}
.is-open .header__toggle span:nth-child(2) {
  transform: rotate(45deg);
}
.is-open .header__toggle span:nth-child(3) {
  transform: rotate(-45deg);
}
.is-open .header__toggle span:nth-child(4) {
  top: 12px;
  width: 0%;
  left: 50%;
}

@media (max-width: 1200px) {
  .header__toggle {
    display: block;
  }
  .header__search {
    display: none;
  }
  .header__breadcrumb {
    display: none;
  }
}
@media (max-width: 767px) {
  .header__logo-box {
    padding: 1rem 1rem 1rem 2rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header__logo-link {
    width: 7.5rem;
    object-fit: contain;
  }
  .header__center {
    padding: 1rem 2rem;
  }
  .header__breadcrumb-title {
    font-size: var(--fs-200);
    color: var(--clr-neutral-550);
  }
  .header__ic-box {
    padding: 1rem 2rem;
  }
  .header__profile {
    gap: 0;
    padding: 1rem 2rem;
  }
  .header__profile-img {
    width: 3rem;
    height: 3rem;
  }
}
body {
  background-color: var(--clr-body-bg);
  color: var(--clr-body-text);
  overflow-x: hidden;
  padding-top: 7.1rem;
}

.content {
  margin-left: 6rem;
  padding: 1.6rem;
  min-height: calc(100vh - 7.1rem);
  transition: margin-left 0.3s ease;
}

.overlay {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1005;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.is-open .content {
  margin-left: 320px;
}
.is-open .overlay {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1200px) {
  .body {
    padding-top: 6rem;
  }
  .content {
    margin-left: 0;
    padding: 1.2rem;
  }
  .is-open .content {
    margin-left: 0 !important;
  }
}
@media (max-width: 1441px) {
  .is-open .content {
    margin-left: 6rem;
  }
}
.sidebar {
  position: fixed;
  top: 7.1rem;
  background-color: var(--clr-neutral-100);
  transition: transform 0.3s ease;
  border-right: 1px solid var(--clr-neutral-300);
}
.sidebar--icon {
  left: 0;
  bottom: 0;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px 12px;
}
.sidebar--menu {
  left: 60px;
  bottom: 0;
  width: 250px;
  background-color: var(--clr-neutral-100);
  overflow-y: auto;
  z-index: 1010;
  transform: translateX(-100%);
  padding: 20px 12px;
}
.sidebar__ic-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s;
  margin-bottom: 15px;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.sidebar__ic-link {
  padding: 10px;
  display: flex;
  color: var(--clr-neutral-400);
  border-radius: var(--radius-200);
  transition: all 0.3s;
}
.sidebar__ic-link.active, .sidebar__ic-link:hover {
  color: var(--clr-neutral-650);
  background-color: var(--clr-neutral-250);
}
.sidebar__ic-link[data-tooltip] {
  position: relative;
}
.sidebar__ic-link[data-tooltip]::before {
  content: "";
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--clr-neutral-650);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1030;
}
.sidebar__ic-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 15px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-neutral-650);
  color: var(--clr-neutral-100);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1030;
}
.sidebar__ic-link[data-tooltip]:hover::before, .sidebar__ic-link[data-tooltip]:hover::after {
  opacity: 1;
}
.sidebar__item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  color: var(--clr-neutral-650);
  text-decoration: none;
  transition: all 0.3s;
  margin-bottom: 15px;
}
.sidebar__toggle {
  cursor: pointer;
  margin-bottom: 1rem;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 13px;
  gap: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-200);
  transition: all 0.3s;
}
.sidebar__toggle:hover {
  background-color: var(--clr-neutral-250);
}
.sidebar__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--clr-neutral-650);
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  border-radius: 30px;
}
.sidebar__toggle span:nth-child(3) {
  width: 10px;
}
.sidebar__section {
  margin-bottom: 25px;
}
.sidebar__title {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: var(--clr-neutral-450);
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.sidebar__nav-link {
  color: var(--clr-neutral-650) !important;
  font-weight: 500;
  box-shadow: none;
  font-size: 1.6rem !important;
  line-height: 1.5;
  cursor: pointer;
  width: 100%;
  border-radius: var(--radius-250);
  padding: 8px;
}
.sidebar__nav-link:hover {
  color: var(--clr-neutral-650);
}
.sidebar__nav-link.dropdown-toggle::after {
  background: url("../img/chevron-down.svg");
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  content: "";
}
.sidebar__nav-link.show {
  background-color: var(--clr-neutral-150);
}
.sidebar__nav-link.show::after {
  scale: -1;
}
.sidebar__dropdown .dropdown-menu {
  position: relative !important;
  overflow: hidden;
}
.sidebar__dropdown-menu {
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
  position: relative !important;
  max-height: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(-10px);
  margin-top: 0;
  box-shadow: none !important;
  border: none !important;
  padding: 0 0 0 2.4rem !important;
  background: transparent !important;
  display: block !important;
}
.sidebar__dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  max-height: 500px;
  transform: translateY(0) !important;
  padding: 1rem 0 1rem 2.4rem !important;
}
.sidebar__dropdown-link {
  color: var(--clr-neutral-650);
  font-weight: 500;
  box-shadow: none;
  font-size: 1.6rem;
  line-height: 1.5;
  display: block;
  padding: 0.5rem 1rem;
  transition: all 0.2s;
}
.sidebar__dropdown-link:hover {
  color: var(--clr-primary);
  background: transparent;
}
.sidebar__dropdown-item {
  margin: 0;
}
.sidebar__nav-link {
  width: 100%;
  text-align: left;
  position: relative;
  padding: 8px;
}
.sidebar__theme-toggle {
  cursor: pointer;
  position: relative;
}
.sidebar__theme-icon--light {
  display: none;
}
.sidebar__theme-icon--dark {
  display: block;
}

.is-open .sidebar--icon {
  transform: translateX(0) !important;
}
.is-open .sidebar--menu {
  transform: translateX(0);
}
.is-open .sidebar__toggle span:nth-child(1) {
  transform: rotate(45deg);
  translate: 0 5.5px;
}
.is-open .sidebar__toggle span:nth-child(2) {
  width: 0%;
}
.is-open .sidebar__toggle span:nth-child(3) {
  transform: rotate(-45deg);
  translate: 0 -6px;
  width: 100%;
}

@media (max-width: 1200px) {
  .sidebar {
    top: 6.7rem !important;
  }
  .sidebar--icon {
    transform: translateX(-100%);
    z-index: 1025;
  }
  .sidebar--menu {
    left: 0;
    width: 80%;
    max-width: 300px;
  }
  .sidebar__ic-link[data-tooltip]::before, .sidebar__ic-link[data-tooltip]::after {
    display: none;
  }
  .is-open .sidebar--menu {
    transform: translateX(6rem) !important;
  }
}
@media (max-width: 767px) {
  .sidebar {
    top: 5.1rem !important;
  }
  .sidebar--icon {
    transform: translateX(-100%);
    z-index: 1025;
  }
  .sidebar__ic-list {
    gap: 8px;
  }
  .sidebar__ic-link {
    padding: 6px;
  }
  .is-open .sidebar--menu {
    transform: translateX(5.1rem) !important;
  }
}
[data-theme=dark] .sidebar__theme-icon--light {
  display: block;
}
[data-theme=dark] .sidebar__theme-icon--dark {
  display: none;
}

.summary__box {
  padding: 1.2rem 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}
.summary__box-item {
  flex-grow: 1;
}
.summary__box-count {
  font-size: var(--fs-400);
  font-weight: 700;
}
.summary__box-title {
  font-size: var(--fs-200);
  color: var(--clr-neutral-450);
}
.summary__box-desc {
  font-size: var(--fs-200);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.summary__img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--radius-250);
}

.ai__box {
  padding: 2.8rem;
  max-width: 100%;
  margin: auto;
  margin-top: 1.6rem;
  border-radius: 8px;
}
.ai__avtar-img {
  width: 4.8rem;
  height: 4.8rem;
  background: #EEEEEE;
  border: 1px solid var(--clr-danger-100);
  border-radius: 50%;
}
.ai__avtar-img:not(:first-child) {
  margin-left: -10px;
  position: relative;
  z-index: 9;
}
.ai__avtar-add {
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--clr-danger-100);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-neutral-650);
  color: var(--clr-neutral-100);
  margin-left: -10px;
  position: relative;
  z-index: 9;
}
.ai__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.ai__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}
.ai__players {
  display: flex;
  justify-content: space-between;
}
.ai__players .col {
  flex: 1;
}
.ai__players-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
}
.ai {
  /* Table styling */
}
.ai__table {
  width: 100%;
  border-collapse: collapse;
}
.ai__table th {
  padding: 1rem;
  text-align: left;
  background-color: #f8f9fa;
  font-weight: 600;
}
.ai {
  /* Make all progress bars same width */
}
.ai__table td:first-child {
  width: 40%;
}
.ai__table tr:first-child td:first-child, .ai__table tr:nth-child(2) td:first-child {
  padding: 2.6rem 1.6rem;
}
.ai__table td:not(:first-child) {
  width: 20%;
  min-width: 20rem;
}
.ai {
  /* Align player images with table data */
}
.ai__players .col {
  position: relative;
}
.ai__players .col::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  display: none;
}
.ai__players .col.active::after {
  display: block;
}

.stats {
  margin-top: 1.6rem;
}
.stats__card {
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
}
.stats__card canvas {
  height: 100% !important;
  width: 100% !important;
}
.stats__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stats__footer {
  margin-top: auto;
  border-top: 1px solid var(--clr-neutral-300);
  padding-top: 2rem;
}
.stats__info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stats__title {
  margin: 0;
  font-weight: 600;
  color: var(--clr-neutral-650);
}
.stats__subtitle {
  font-size: var(--fs-200);
  color: var(--clr-neutral-450);
}
.stats__percentage {
  font-weight: 600;
}
.stats__chart {
  width: 100%;
}
.stats__chart-box {
  height: 170px;
  width: 100%;
}
.stats__avatar {
  width: 3.3rem;
  height: 3.3rem;
}

.video-analysis {
  margin-top: 1.6rem;
}
.video-analysis__box {
  padding: 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.video-analysis__row:last-child {
  border-color: transparent;
}
.video-analysis__player {
  width: 3.2rem;
  aspect-ratio: 1;
  object-fit: contain;
  background-color: #F2F2F2;
  border-radius: 50%;
}
.video-analysis__time-box {
  border: 1px solid var(--clr-neutral-300);
  border-radius: var(--radius-250);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
}
.video-analysis__ic-btn {
  padding: 4px;
  border-radius: var(--radius-200);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
}
.video-analysis__ic-btn.active-pause {
  background-color: #FF5A1F;
}
.video-analysis__ic-btn.active-play {
  background-color: var(--clr-success-500);
}
.video-analysis__cell:first-child {
  min-width: 20rem;
}
.video-analysis__cell:last-child {
  min-width: 23rem;
}
.video-analysis__v-box {
  border-radius: var(--radius-300);
  overflow: hidden;
  position: relative;
  padding-bottom: 43rem;
  height: 100%;
}
.video-analysis__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.video-analysis__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 5.4rem;
  font-size: 13px;
  border-top: 1px solid var(--clr-neutral-300);
  padding-top: 2rem;
}
.video-analysis__custom-controls {
  padding: 2.4rem 2.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.video-analysis__play-button {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-primary-600);
  border-radius: 50%;
}
.video-analysis__timebar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-analysis__icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.recommendation {
  margin-top: 1.6rem;
}
.recommendation__box {
  padding: 2.5rem;
  height: 100%;
}
.recommendation__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--clr-neutral-300);
  padding-bottom: 1rem;
}
.recommendation__header__title {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--clr-neutral-800);
}
.recommendation__profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.recommendation__profile img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  object-fit: cover;
}
.recommendation__profile .recommendation__name {
  font-size: var(--fs-100);
  font-weight: 500;
}
.recommendation__profile .recommendation__description {
  font-size: var(--fs-20);
  color: var(--clr-neutral-50);
}
.recommendation__content-left {
  padding: 1.2rem;
  margin-top: 1.2rem;
  border-radius: var(--radius-250);
  background-color: var(--clr-neutral-150);
}
.recommendation__status {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
}
.recommendation__status-box {
  width: 100%;
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-250);
}
.recommendation__status-box--success {
  background-color: #F3FAF7;
}
.recommendation__status-box--warning {
  background-color: #FFF8F1;
}
.recommendation__status-box--danger {
  background-color: var(--clr-danger-100);
}
.recommendation__status-count {
  border-radius: 50%;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  font-size: var(--fs-200);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.recommendation__status-count--success {
  background-color: var(--clr-success-50);
  color: var(--clr-success-600);
}
.recommendation__status-count--warning {
  background-color: #FEECDC;
  color: #D03801;
}
.recommendation__status-count--danger {
  background-color: var(--clr-danger-200);
  color: var(--clr-danger-600);
}
.recommendation__status-label {
  font-size: var(--fs-200);
  font-weight: 500;
  margin-top: 8px;
}
.recommendation__status-label--success {
  color: #047481;
}
.recommendation__status-label--warning {
  color: #D03801;
}
.recommendation__status-label--danger {
  color: var(--clr-danger-600);
}
.recommendation__toggle {
  margin-top: 1.2rem;
}
.recommendation__toggle-link {
  font-size: var(--fs-100);
  color: var(--clr-neutral-500);
  text-decoration: underline;
}
.recommendation__toggle-link span {
  font-size: var(--fs-100);
  margin-left: 0.4rem;
}
.recommendation__trait-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recommendation__trait {
  color: var(--clr-neutral-450);
  row-gap: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.recommendation__trait .myicon {
  width: 1.6rem;
  height: 1.6rem;
}
.recommendation__detail {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--clr-neutral-300);
}
.recommendation__detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--clr-neutral-450);
  font-size: var(--fs-200);
}
.recommendation__highlight-box {
  margin-top: 1.2rem;
  padding: 1.6rem;
  background: #F3FAF7;
  border-radius: 6px;
}
.recommendation__highlight-box:nth-child(even) {
  background: #FFF8F1;
  color: #8A2C0D !important;
}
.recommendation__highlight-box:last-child {
  background: #FDF2F2;
  color: #9B1C1C;
}
.recommendation__track-btn {
  background-color: var(--clr-success-800);
  color: var(--clr-neutral-100);
  padding: 8px 1.2rem;
  border-radius: var(--radius-250);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-100);
  gap: 8px;
  font-weight: 500;
}
.recommendation__circluar {
  margin-top: 5rem;
}
.recommendation__circluar canvas {
  height: 20rem !important;
}
.recommendation__match {
  margin-top: 2.4rem;
}
.recommendation__match-img {
  width: 100%;
  aspect-ratio: 1/1.5;
  object-fit: cover;
}

.tracker {
  height: 100%;
  padding-bottom: 1rem;
}
.tracker__header {
  flex-wrap: wrap;
  padding: 2.4rem;
}
.tracker__filters {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  overflow-x: auto;
}
.tracker__filters input {
  margin-right: 8px;
}
.tracker__filter {
  display: flex !important;
  align-items: center;
  cursor: pointer;
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--clr-neutral-650);
  white-space: nowrap;
}
.tracker__filter input[type=radio] {
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--clr-neutral-350);
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  background-color: var(--clr-neutral-150);
}
.tracker__filter input[type=radio]:checked {
  border: 3.5px solid var(--clr-primary-600);
}
.tracker__filter input[type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  translate: -50% -50%;
  border-radius: 50%;
  background-color: var(--clr-neutral-150);
  opacity: 0;
  transition: opacity 0.2s;
}
.tracker__table table {
  min-width: 100%;
}

.notifications {
  padding: 2.4rem;
  height: 100%;
}
.notifications__title {
  font-weight: bold;
}
.notifications__list {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.6rem;
}
.notifications__list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  color: var(--clr-neutral-450);
  font-weight: 400;
}
.notifications__img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-250);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.players__box {
  padding: 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.players__header {
  margin-bottom: 2.4rem;
}
.players__footer {
  margin-top: auto;
}

.news {
  margin-top: 1.6rem;
  padding: 2.4rem;
}
.news__header {
  margin-bottom: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  border-bottom: 1px solid var(--clr-neutral-300);
}
.news__tabs {
  gap: 3rem;
}
.news__tabs .nav-link {
  color: var(--clr-neutral-450);
  font-weight: 500;
  padding: 8px 0;
}
.news__img {
  border-radius: var(--radius-250);
  width: 100%;
  aspect-ratio: 2/1.2;
  object-fit: cover;
}
.news .news__tabs .nav-link.active {
  color: #0d6efd;
  border: none;
  border-bottom: 2px solid #0d6efd;
  background: none;
}
.news__title {
  text-transform: uppercase;
  color: #5742A9;
  font-size: var(--fs-100);
  font-weight: 600;
  padding: 1.6rem 0;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ai__box {
    padding: 1.2rem;
  }
  .ai__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .ai__header .mybtn {
    display: none;
  }
  .ai__players {
    flex-wrap: wrap;
  }
  .ai__players .col {
    flex: 0 0 33.33%;
    margin-bottom: 1rem;
  }
  .stats {
    margin-top: 1.6rem;
  }
  .stats__card {
    height: 100%;
    padding: 1.2rem;
    gap: 1.6rem;
  }
  .stats__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .stats__footer {
    padding-top: 1.6rem;
  }
  .stats__chart-box {
    height: 140px;
    width: 100%;
  }
  .video-analysis {
    margin-top: 1.6rem;
  }
  .video-analysis__box {
    padding: 1.2rem;
  }
  .video-analysis__player {
    width: 3rem;
  }
  .video-analysis__v-box {
    border-radius: var(--radius-200);
    padding-bottom: 23rem;
  }
  .video-analysis__time-box {
    padding: 5px 6px;
    gap: 6px;
  }
  .video-analysis__footer {
    margin-top: 2rem;
    padding-top: 1rem;
  }
  .video-analysis__custom-controls {
    padding: 2rem 2rem 0;
    gap: 1rem;
  }
  .video-analysis__play-button {
    width: 3.4rem;
    height: 3.4rem;
  }
  .video-analysis__icons {
    gap: 1rem;
  }
  .recommendation {
    margin-top: 1.6rem;
  }
  .recommendation__box {
    padding: 1.2rem;
    height: 100%;
  }
  .recommendation__header {
    padding-bottom: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .recommendation__header__title {
    font-size: var(--fs-300);
  }
  .recommendation__profile {
    gap: 0.8rem;
  }
  .recommendation__profile img {
    width: 3.8rem;
    height: 3.8rem;
  }
  .recommendation__content-left {
    padding: 1rem;
    margin-top: 1rem;
  }
  .recommendation__status {
    gap: 1rem;
  }
  .recommendation__status-box {
    padding: 1rem;
  }
  .recommendation__status-count {
    width: 3rem;
    height: 3rem;
  }
  .recommendation__status-label {
    font-size: var(--fs-200);
    font-weight: 500;
    margin-top: 8px;
  }
  .recommendation__status-label--success {
    color: #047481;
  }
  .recommendation__status-label--warning {
    color: #D03801;
  }
  .recommendation__status-label--danger {
    color: var(--clr-danger-600);
  }
  .recommendation__toggle {
    margin-top: 1.2rem;
  }
  .recommendation__toggle-link {
    font-size: var(--fs-100);
    color: var(--clr-neutral-500);
    text-decoration: underline;
  }
  .recommendation__toggle-link span {
    font-size: var(--fs-100);
    margin-left: 0.4rem;
  }
  .recommendation__detail {
    margin-top: 1rem;
    gap: 1rem;
    padding-top: 1rem;
  }
  .recommendation__highlight-box {
    margin-top: 1rem;
    padding: 1.2rem;
  }
  .recommendation__circluar {
    margin-top: 3rem;
  }
  .tracker__header {
    padding: 1.2rem;
  }
  .tracker__filters {
    gap: 1.2rem;
  }
  .tracker__filters input {
    margin-right: 4px;
  }
  .tracker__filter {
    font-size: var(--fs-100);
  }
  .tracker__filter input[type=radio] {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 4px;
  }
  .tracker__filter input[type=radio]:checked::before {
    width: 4px;
    height: 4px;
  }
  .notifications {
    padding: 1.2rem;
  }
  .notifications__list {
    margin-top: 2rem;
    gap: 1.2rem;
  }
  .notifications__list-item {
    font-size: var(--fs-200);
  }
  .notifications__img {
    width: 2.4rem;
    height: 2.4rem;
  }
  .players__box {
    padding: 1.2rem;
  }
  .players__header {
    margin-bottom: 1.2rem;
  }
  .players__footer {
    margin-top: auto;
    padding-top: 2rem;
  }
  .news {
    padding: 1.2rem;
  }
  .news__header {
    margin-bottom: 2rem;
    flex-direction: column;
    gap: 2rem;
  }
  .news__tabs {
    gap: 2rem;
  }
  .news__tabs .nav-link {
    font-size: var(--fs-200);
  }
  .news__title {
    padding: 1.2rem 0;
  }
}
.rating__box {
  padding: 2.4rem;
  height: 100%;
}
.rating__profile {
  margin-bottom: 7rem;
}
.rating__profile-header {
  gap: 1.6rem;
}
.rating__profile-img {
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 8px;
}
.rating__profile-rating-circle {
  margin-left: auto;
}
.rating__progress {
  margin-top: 2.4rem;
}
.rating__score-header {
  padding: 2.4rem;
  border-bottom: 1px solid var(--clr-neutral-300);
  margin-bottom: 4.5rem;
}
.rating__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--clr-neutral-450);
  font-size: var(--fs-200);
  font-weight: 500;
}
.rating__score-item {
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
}
.rating__score-cbox {
  width: 28rem;
  height: 28rem;
  margin: auto;
}
.rating__score-grade {
  font-size: 3rem;
  font-weight: 700;
}
.rating__score-legend {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 2.4rem auto;
}
.rating__score-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-100);
  color: var(--clr-neutral-450);
}

.status {
  margin-top: 1.6rem;
}
.status__wrapper {
  padding: 2.4rem;
}

.details {
  margin-top: 1.6rem;
}

.notes {
  padding: 2rem;
  height: 100%;
}
.notes__form-group {
  margin-bottom: 2rem;
  flex: 1;
}
.notes__header {
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--clr-neutral-300);
}
.notes__form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.notes__assignees {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 8px;
}
.notes__avatars {
  display: flex;
  align-items: center;
  gap: 0;
}
.notes__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--clr-neutral-100);
}
.notes__avatar:not(:first-child) {
  margin-left: -1rem;
  position: relative;
  z-index: 9;
  background: var(--clr-neutral-100);
}
.notes__avatar--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111928 !important;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-neutral-100);
}
.notes__add-member {
  background: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.7rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
}
.notes__priority {
  display: flex;
  gap: 1rem;
  margin-top: 8px;
}
.notes__priority label {
  display: flex;
  align-items: center;
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--clr-neutral-650);
}
.notes__priority label input {
  margin-right: 0.4rem;
}
.notes__form-row {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.notes__reminder-selects {
  display: flex;
  gap: 1.6rem;
}
.notes__reminder-selects select,
.notes__reminder-selects input {
  flex: 1;
}
.notes__buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}
.notes__btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.notes__btn--primary {
  background: #2563eb;
  color: #fff;
}
.notes__btn--secondary {
  background: #f3f4f6;
  color: #111827;
}

@media (max-width: 767px) {
  .rating__box {
    padding: 1.2rem;
  }
  .rating__profile {
    margin-bottom: 4rem;
  }
  .rating__profile-header {
    gap: 1rem;
    align-items: flex-start !important;
  }
  .rating__profile-img {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 8px;
  }
  .rating__profile p {
    font-size: 1.4rem;
  }
  .rating__profile .circle-progress {
    width: 6.5rem;
    height: 6.5rem;
  }
  .rating__legend-item {
    font-size: var(--fs-100);
  }
  .rating__progress {
    margin-top: 2rem;
  }
  .rating__score-header {
    padding: 1.2rem;
    margin-bottom: 3rem;
  }
  .rating__score-item {
    padding: 1.2rem;
  }
  .rating__score-cbox {
    width: 20rem;
    height: 20rem;
  }
  .rating__score-grade {
    font-size: 2.2rem;
  }
  .rating__score-legend {
    margin: 2rem auto;
  }
  .status__wrapper {
    padding: 1.2rem;
  }
  .notes {
    padding: 1.2rem;
    height: 100%;
  }
  .notes__form-group {
    margin-bottom: 2rem;
  }
  .notes__header {
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;
  }
  .notes__avatar {
    width: 30px;
    height: 30px;
  }
  .notes__add-member {
    padding: 0.6rem 1.2rem;
  }
  .notes__form-row {
    gap: 1.2rem;
  }
  .notes__reminder-selects {
    gap: 1.2rem;
    flex-direction: column;
  }
  .notes__buttons {
    margin-top: 1.2rem;
  }
  .notes__btn {
    padding: 0.6rem 1.2rem;
  }
}