@import "slick-carousel/slick/slick.css";
@import "slick-carousel/slick/slick-theme.css";

/* ============================================
   THEME CONFIGURATION
   ============================================ */

:root {
  /* Light Theme (Default) */
  --font-primary: 'Krona One', Arial, Helvetica, Trebuchet MS, Verdana, sans-serif;

  /* Font Sizes */
  --font-size-tiny: 10px;
  --font-size-extra-small: 12px;
  --font-size-small: 10px;
  --font-size-normal: 12px;
  --font-size-large: 14px;
  --font-size-larger: 16px;
  --font-size-enlarged: 18px;
  --font-size-big: 14px;
  --font-size-extra-big: 24px;
  --font-size-medium-extra-big: 36px;
  --font-size-extra-extra-big: 48px;

  --bottom-tips-container-height: 100px;

  /* Light Theme Colors */
  --font-color-primary: #FFFFFF;
  --font-color-black: #212121;
  --font-color-primary-darker: #1B443C;
  --font-color-inverted: #fff;
  --font-color-brand-dark: #211B50;
  --font-color-brand-light: #47C0AE;
  --font-color-blue: #596ACA;
  --font-color-link: #3171E0;

  /* New Zinc Scale */
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-800-50: #3c3c417a;
  --zinc-800-80: #27272ACC;
  --zinc-900: #18181b;
  --zinc-900-50: #18181b83;

  --zinc-950: #09090b;

  --violet-50: #faf5ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;

  --red-100: #FF3B30;

  --text-color: #F4F4F5;
  --text-color-secondary: var(--violet-400);
  --text-color-tertiary: var(--zinc-600);

  --stats-won-color: #7048C0;
  --stats-lost-color: #A032B9;
  --stats-void-color: #D129FF;
  --stats-pending-color: #CEB5FF;

  --color-success: #A3E635;
  --color-danger: #FA7676;


  /* new */
  --gradient-header-primary: radial-gradient(38.8% 325.56% at 52.04% 0%, rgba(175, 128, 255, 0.8) 0%, rgba(142, 74, 255, 0.4) 58.64%, rgba(124, 58, 237, 0.16) 100%);
;
  --gradient-header-secondary: linear-gradient(0deg, #27272A,  #27272A),linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));

  --color-input-border-primary: var(--zinc-600);
  --color-input-background-primary: var(--zinc-900);
  --color-input-border-primary: var(--zinc-800);
  --color-input-placeholder-primary: var(--zinc-600);
  --color-input-text-primary: var(--text-color);
  --color-input-label-primary: var(--zinc-400);
  --color-input-icon: var(--zinc-500);

  --icon-container-background: var(--zinc-800);
  --container-background: var(--zinc-900-50);



  --button-border-radius: 12px;
  --button-primary-color: var(--violet-700);
  --button-background-primary: var(--zinc-900);

  --modal-background: var(--zinc-900);
  --modal-selected: var(--zinc-950);
  --modal-item-title-color: var(--zinc-400);
  --modal-item-padding: 11px 12px;
  --modal-button-border-color: var(--zinc-700);

  --progress-bar-color-active: var(--violet-500);
  --progress-bar-label-font-color: var(--zinc-500);
  --progress-bar-label-active-font-color: var(--font-color-primary);
  --progress-bar-color: var(--zinc-800-50);

  --switch-color: var(--violet-600);

  --scrollbar-color: var(--violet-700);

  --table-border-color: var(--zinc-700);

  --disabled-color: var(--zinc-700);

  --card-box-shadow: 0px 4px 20px 0px #00000066;

  --border-primary: var(--zinc-800);
  --border-secondary: #DBA800;
  --border-tertiary: linear-gradient(90deg, var(--zinc-800-50) 0%, #5D5D5D 50.96%, var(--zinc-800-50) 97.6%);


  --loader-spinner-filter: brightness(0) saturate(100%) invert(32%) sepia(76%) saturate(4261%)
    hue-rotate(252deg) brightness(96%) contrast(98%);;





  /* new colors */
  --primary-background: #4C1D95;
  --primary-font-color: #FFFFFF;

  --color-brand-light: #DCECEC;
  --color-brand: #68D0BD;
  --color-brand-dark: #379D8B;
  --color-primary-light: #BDEAE2;
  --color-brand-pale: #C8EEE6;
  --color-warning: #EB445A;
  --color-warning-button: #F0445C;
  --color-success: #27C27D;
  --color-gray-poll: #EAEBF1;
  --color-gray-light: #F4F5F8;
  --color-gray-light-2: #F2F2F5;
  --color-gray-intermidiate: #E5E5E5;
  --color-gray-mild: #DDDDDD;
  --color-gray-C: #CCCCCC;
  --color-gray-dark: #A4A4A4;
  --color-gray-darker: #666666;
  --color-gray-darkest: #4D4D4D;
  --color-gray-darkest2: #363131;
  --color-gray-navigation: #92949C;
  --color-chosen-date: #FBCB24;
  --color-facebook-blue: #4267B2;
  --color-screen-background-light: #FBFBFC;
  --color-tertiary: #4854E0;
  --color-secondary: #E0BF4A;
  --color-quaternary: #FCE307;
  --color-quaternary-golden: #FFCA22;

  --r-color-secondary: #FBC654;
  --r-color-border-purple: #5547C0;
  --r-color-blue: #476BDE;
  --r-color-gray-C: #EFEFEF;
  --r-color-white: #FFFFFF;
  --r-color-black: #000000;
  --r-color-button: var(--button-primary-color);
  --r-color-gray-darker: #3C3C3C;
  --r-color-gray-inactive: #A3A3A3;
  --r-color-lilac: #F1F0FF;
  --r-color-brand-mint: #0A9081;
  --r-color-brand-lite: #E4F6F3;
  --r-color-lite-purple: #C1BBF0;
  --r-color-line-grey: #D4D4D4;
  --r-color-deep-grey: #404040;
  --r-color-success: #00A861;
  --r-color-danger: #CC4949;
  --r-color-background-gray: #F5F5F5;
  --r-color-logo-green: #48C0AE;
  --r-color-line-gray: #DBDDE0;
  --r-color-score-gray: #616C78;

  --font-color-gray-new: #ACB7C1;
  --font-color-gray-dark-new: #88919E;
  --font-color-gray-light-new: #939DA8;
  --font-color-primary-darker-new: #1B504A;
  --color-black-light-new: #404351;
  --color-green-new: #EDFFF8;
  --color-light-green: #37FFB9;
  --color-dark-green-new: #7AB7A5;
  --color-new-black: #1C1D21;
  --color-brand-dark-new: #1B504A;
  --color-gray-light-new: #EDF1F5;
  --color-gray-intermidiate-new: #EFECEB;
  --color-yellow: #FFD029;
  --color-red-new: #FA7676;
  --new-color-gold: #FFD029;
  --new-color-black: #3D3F48;
  --new-color-gray: #ADB1B6;
  --new-color-gray-extra-light: #B4BCC8;
  --new-color-gray-light: #F3F5F6;
  --new-color-gray-medium: #E5E9ED;
  --new-color-gray-neutral: #D9DFE5;
  --new-color-gray-dark: #5D656D;
  --new-color-blue: #5984D9;
  --color-mid-gray: #828DA1;
  --color-gray-darkest: #555A76;
  --color-mid-green: #0CA48D;

  /* Layout */
  --tipster-menu-button-size: 56px;
  --tipster-menu-button-padding: 15px;
  --standard-header-height: 103px;
  --tipster-menu-button-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

  /* ToolTips */
  --rt-color-dark: #FFF !important;
  --rt-opacity: 1 !important;

  --bg-primary: var(--zinc-800);
  --bg-secondary: var(--zinc-900);
  --bg-tertiary: var(--zinc-800-50);
  --bg-quaternary: var(--zinc-900);
  --bg-quinary: var(--violet-600);
  --bg-senary: var(--zinc-800-80);
  --bg-septenary: var(--zinc-700);
  --bg-octonary: #18181B99;
  --bg-nonary: var(--violet-900);
  --bg-decimary: linear-gradient(0deg, #252529, #252529),
  linear-gradient(360deg, rgba(39, 39, 42, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%),
  radial-gradient(65.87% 59.6% at 30.61% 15.24%, rgba(136, 39, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  --bg-undecimary: var(--violet-700);
  --bg-vicenmary: var(--zinc-700);
  --bg-danger: var(--red-100);


  --text-primary: #F4F4F5;
  --text-secondary: var(--violet-400);
  --text-tertiary: #A4A4A4;
  --text-quaternary: var(--zinc-400);
  --text-quinary: #D4D4D8;
  --text-senary: var(--zinc-50);
  --text-septenary: var(--zinc-500);
  --text-octonary: var(--violet-500);
  --text-nonary: var(--violet-300);
  --text-decimary: var(--zinc-300);
}

/* Dark Theme */
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
   --color-input-border-primary: var(--zinc-800);
  --color-input-background-primary: var(--zinc-800-50);
  --color-input-placeholder-primary: var(--zinc-600);
  --color-input-label-primary: var(--zinc-400);

}

/* ============================================
   GLOBAL STYLES
   ============================================ */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-size: var(--font-size-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body::-webkit-scrollbar {
  display: none;
}

small {
  font-size: var(--font-size-small);
}

/* ============================================
   TEXT TRANSFORMATION
   ============================================ */

.vb-font.uppercase {
  text-transform: uppercase;
}

.vb-font.lowercase {
  text-transform: lowercase;
}

.vb-font.capitalize {
  text-transform: capitalize;
}

.spaced {
  letter-spacing: .2em;
}

.vb-ellipsis-string,
.vb-font.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.vb-font.not-decor {
  text-decoration: none;
}

.vb-full-width {
  width: 100%;
}

.vb-text-left {
  text-align: left;
}

.vb-text-center {
  text-align: center;
}

/* ============================================
   SPACING - MARGIN
   ============================================ */

.vb-spacing.mr-4 {
  margin-right: .25rem;
}

.vb-spacing.ml-4 {
  margin-left: .25rem;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mx-10 {
  margin-right: 10px;
  margin-left: 10px;
}

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

.mx-30 {
  margin-left: 30px;
  margin-right: 30px;
}

.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

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

/* ============================================
   SPACING - PADDING
   ============================================ */

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

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-15 {
  padding-top: 20px;
  padding-bottom: 20px;
}

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

.pl-2 {
  padding-left: 2px;
}

.pl-4 {
  padding-left: 4px;
}

.pl-6 {
  padding-left: 6px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-20 {
  padding-right: 20px;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-30 {
  padding-left: 20px;
  padding-right: 20px;
}

.vb-spacing.px-1 {
  padding: 0 1rem;
}

.b-py {
  padding-left: 45px;
  padding-right: 45px;
}

/* ============================================
   FONT SIZE
   ============================================ */

.vb-font.x-big {
  font-size: var(--font-size-extra-big);
}

.vb-font.big {
  font-size: var(--font-size-big);
}

.vb-font.enlarged {
  font-size: var(--font-size-enlarged);
}

.vb-font.normal {
  font-size: var(--font-size-normal);
}

.vb-font.small {
  font-size: var(--font-size-small);
}

.vb-font.x-small {
  font-size: var(--font-size-extra-small);
}

.vb-font.tiny {
  font-size: var(--font-size-tiny);
}

.vb-font.medium-extra-big {
  font-size: var(--font-size-medium-extra-big);
}

/* ============================================
   FONT WEIGHT
   ============================================ */

.vb-font.w400 {
  font-weight: 400;
}

.vb-font.w500 {
  font-weight: 500;
}

.vb-font.w600 {
  font-weight: 600;
}

.vb-font.w700 {
  font-weight: 700;
}

.vb-font.w900 {
  font-weight: 900;
}

/* ============================================
   FONT COLOR
   ============================================ */

.vb-font.black {
  color: var(--font-color-black);
}

.vb-font.darker {
  color: var(--r-color-gray-darker);
}

.vb-font.dark {
  color: var(--color-gray-dark);
}

.vb-font.brandDarker {
  color: var(--font-color-primary-darker);
}

.vb-font.brandDark {
  color: var(--font-color-brand-dark);
}

.vb-font.warning {
  color: var(--color-warning);
}

.vb-font.darkest {
  color: var(--color-gray-darkest);
}

.vb-font.white {
  color: white;
}

.vb-font.purple {
  color: var(--text-primary);
}

.vb-font.lilac {
  color: var(--r-color-border-purple);
}

.vb-font.button-color {
  color: var(--button-primary-color);
}

.vb-font.gray-darker {
  color: var(--r-color-gray-darker);
}

.vb-font.grayC {
  color: var(--r-color-gray-C);
}

.vb-font.buttonColor {
  color: var(--bg-quinary);
}

.vb-font.success {
  color: var(--r-color-success);
}

.vb-font.inactive {
  color: var(--r-color-gray-inactive);
}

.vb-font.lite-success {
  color: var(--r-color-brand-mint);
}

.vb-font.button-success {
  color: var(--r-color-logo-green);
}

/* ============================================
   FLEXBOX TEMPLATES
   ============================================ */

.vb-flex-row-fs-c,
.vb-flex-row-c-c,
.vb-flex-row-spb-c,
.vb-flex-row-spb-fs,
.vb-flex-row-fs-fs,
.vb-flex-row-fs-fe,
.vb-flex-row-fs-bl {
  display: flex;
  flex-direction: row;
}

.vb-flex-column-fs-c,
.vb-flex-column-c-fs,
.vb-flex-column-fs-fs,
.vb-flex-column-fs-fe,
.vb-flex-column-c-c,
.vb-flex-column-c-fe {
  display: flex;
  flex-direction: column;
}

.vb-flex-row-fs-c,
.vb-flex-column-fs-c {
  justify-content: flex-start;
  align-items: center;
}

.vb-flex-row-fs-s,
.vb-flex-column-fs-s {
  justify-content: flex-start;
  align-items: stretch;
}

.vb-flex-column-fs-fs,
.vb-flex-row-fs-fs {
  justify-content: flex-start;
  align-items: flex-start;
}

.vb-flex-row-fs-fe,
.vb-flex-column-fs-fe {
  justify-content: flex-start;
  align-items: flex-end;
}

.vb-flex-column-c-c,
.vb-flex-row-c-c {
  justify-content: center;
  align-items: center;
}

.vb-flex-column-c-fs {
  justify-content: center;
  align-items: flex-start;
}

.vb-flex-column-c-fe {
  justify-content: center;
  align-items: flex-end;
}

.vb-flex-row-spb-c {
  justify-content: space-between;
  align-items: center;
}

.vb-flex-row-spb-fs {
  justify-content: space-between;
  align-items: flex-start;
}

.vb-flex-row-fs-bl {
  justify-content: flex-start;
  align-items: baseline;
}

.vb-flex-column-c-fei {
  justify-content: center;
  align-items: inherit;
}