:root {
--client-name: 'Ela Soccer Club – Soccerplex and Sports Center Lake Zurich';
--client-image: url("https://cdn.ottosport.ai/2u36jbhq22gzz/brand/61e1e7c544956dc5bc57543f.1699288271688.png?versionId=92p8gVhfYAlQj6BWvAeI_2FzI.nG0PVm") no-repeat;
--client-avatar: url("https://cdn.ottosport.ai/2u36jbhq22gzz/brand/client.logo.61e1e7c544956dc5bc57543f.1699287889381.png?versionId=6oLHk1RN5aAxP0qZYDxZZbfj1bWAOVCN") no-repeat;
--client-primary: #101010;
--client-secondary: #d1daf1;
--client-primary-darken: rgb(8, 8, 8);
--client-primary-lighten: rgb(34, 34, 34);
--client-sign-in-primary: #030303;
--client-sign-in-secondary: #292929;
/* BEGIN - REMOVE AFTER NEW UI OPT-OUT UNSUPPORTED */
--client-created-at: '2022-01-14T14:20:43.026Z';
/* END - REMOVE AFTER NEW UI OPT-OUT UNSUPPORTED */
}
:root {
  --color-client-25: #f8f8f8;
  --color-client-50: #f5f5f5;
  --color-client-100: #e8e8e8;
  --color-client-200: #d4d4d4;
  --color-client-300: #b7b7b7;
  --color-client-400: #8f8f8f;
  --color-client-500: #101010;
  --color-client-600: #0a0a0a;
  --color-client-700: #060606;
  --color-client-800: #030303;
  --color-client-900: #020202;
  --color-client-950: #000000;
  --color-client-header: #101010;
  --color-client-selected: #272727;
  --color-client-hover: #272727;
  --color-client-text: #787878;
  --color-client-footer: #2e2e2e;

  /* OKLCH values for modern browsers */
  --color-client-25-oklch: oklch(0.98 0 0);
  --color-client-50-oklch: oklch(0.97 0 0);
  --color-client-100-oklch: oklch(0.93 0 0);
  --color-client-200-oklch: oklch(0.87 0 0);
  --color-client-300-oklch: oklch(0.78 0 0);
  --color-client-400-oklch: oklch(0.65 0 0);
  --color-client-500-oklch: oklch(0.17304230872217735 0 0);
  --color-client-600-oklch: oklch(0.14708596241385075 0 0);
  --color-client-700-oklch: oklch(0.12112961610552414 0 0);
  --color-client-800-oklch: oklch(0.09517326979719755 0 0);
  --color-client-900-oklch: oklch(0.07786903892497982 0 0);
  --color-client-950-oklch: oklch(0.051912692616653204 0 0);
  --color-client-header-oklch: oklch(0.17304230872217735 0 0);
  --color-client-selected-oklch: oklch(0.2730423087221774 0 0);
  --color-client-hover-oklch: oklch(0.2730423087221774 0 0);
  --color-client-text-oklch: oklch(0.5730423087221774 0 0);
  --color-client-footer-oklch: oklch(0.3 0 0);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --color-client-25: var(--color-client-25-oklch);
    --color-client-50: var(--color-client-50-oklch);
    --color-client-100: var(--color-client-100-oklch);
    --color-client-200: var(--color-client-200-oklch);
    --color-client-300: var(--color-client-300-oklch);
    --color-client-400: var(--color-client-400-oklch);
    --color-client-500: var(--color-client-500-oklch);
    --color-client-600: var(--color-client-600-oklch);
    --color-client-700: var(--color-client-700-oklch);
    --color-client-800: var(--color-client-800-oklch);
    --color-client-900: var(--color-client-900-oklch);
    --color-client-950: var(--color-client-950-oklch);
    --color-client-header: var(--color-client-header-oklch);
    --color-client-selected: var(--color-client-selected-oklch);
    --color-client-hover: var(--color-client-hover-oklch);
    --color-client-text: var(--color-client-text-oklch);
    --color-client-footer: var(--color-client-footer-oklch);
  }
}
:root {
  --color-client-secondary-25: #f8f8f9;
  --color-client-secondary-50: #f5f5f6;
  --color-client-secondary-100: #e7e8ea;
  --color-client-secondary-200: #d1d4da;
  --color-client-secondary-300: #b3b7c1;
  --color-client-secondary-400: #898f9e;
  --color-client-secondary-500: #d1daf1;
  --color-client-secondary-600: #a7afc5;
  --color-client-secondary-700: #7f8699;
  --color-client-secondary-800: #5a606f;
  --color-client-secondary-900: #434753;
  --color-client-secondary-950: #22252e;
  --color-client-secondary-header: #d1daf1;
  --color-client-secondary-selected: #f6fbff;
  --color-client-secondary-hover: #f6fbff;
  --color-client-secondary-text: #fcffff;
  --color-client-secondary-footer: #b3bacc;

  /* OKLCH values for modern browsers */
  --color-client-secondary-25-oklch: oklch(0.98 0.0007943573190565447 268.6532069685208);
  --color-client-secondary-50-oklch: oklch(0.97 0.0015887146381130895 268.6532069685208);
  --color-client-secondary-100-oklch: oklch(0.93 0.003177429276226179 268.6532069685208);
  --color-client-secondary-200-oklch: oklch(0.87 0.00926750205565969 268.6532069685208);
  --color-client-secondary-300-oklch: oklch(0.78 0.014894199732310215 268.6532069685208);
  --color-client-secondary-400-oklch: oklch(0.65 0.023168755139149223 268.6532069685208);
  --color-client-secondary-500-oklch: oklch(0.888582221885628 0.03309822162735603 268.6532069685208);
  --color-client-secondary-600-oklch: oklch(0.7552948886027837 0.03309822162735603 268.6532069685208);
  --color-client-secondary-700-oklch: oklch(0.6220075553199396 0.02978839946462043 268.6532069685208);
  --color-client-secondary-800-oklch: oklch(0.4887202220370954 0.024823666220517022 268.6532069685208);
  --color-client-secondary-900-oklch: oklch(0.3998619998485326 0.01985893297641362 268.6532069685208);
  --color-client-secondary-950-oklch: oklch(0.2665746665656884 0.016549110813678016 268.6532069685208);
  --color-client-secondary-header-oklch: oklch(0.888582221885628 0.03309822162735603 268.6532069685208);
  --color-client-secondary-selected-oklch: oklch(0.9885822218856279 0.01985893297641362 268.6532069685208);
  --color-client-secondary-hover-oklch: oklch(0.9885822218856279 0.017873039678772257 268.6532069685208);
  --color-client-secondary-text-oklch: oklch(1 0.011915359785848172 268.6532069685208);
  --color-client-secondary-footer-oklch: oklch(0.788582221885628 0.026478577301884826 268.6532069685208);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --color-client-secondary-25: var(--color-client-secondary-25-oklch);
    --color-client-secondary-50: var(--color-client-secondary-50-oklch);
    --color-client-secondary-100: var(--color-client-secondary-100-oklch);
    --color-client-secondary-200: var(--color-client-secondary-200-oklch);
    --color-client-secondary-300: var(--color-client-secondary-300-oklch);
    --color-client-secondary-400: var(--color-client-secondary-400-oklch);
    --color-client-secondary-500: var(--color-client-secondary-500-oklch);
    --color-client-secondary-600: var(--color-client-secondary-600-oklch);
    --color-client-secondary-700: var(--color-client-secondary-700-oklch);
    --color-client-secondary-800: var(--color-client-secondary-800-oklch);
    --color-client-secondary-900: var(--color-client-secondary-900-oklch);
    --color-client-secondary-950: var(--color-client-secondary-950-oklch);
    --color-client-secondary-header: var(--color-client-secondary-header-oklch);
    --color-client-secondary-selected: var(--color-client-secondary-selected-oklch);
    --color-client-secondary-hover: var(--color-client-secondary-hover-oklch);
    --color-client-secondary-text: var(--color-client-secondary-text-oklch);
    --color-client-secondary-footer: var(--color-client-secondary-footer-oklch);
  }
}