:root {
    
  /* Background Colors */
  /* --color-bg-01: #131F26; */
  --color-bg-01: #000000;
  --color-bg-02: #0F0F0F;
  --color-bg-03: #222D34;
  --color-bg-04: #ffffff;

  /* Primary Colors */
  --color-primary-100: #228236;
  --color-primary-80: #2DB44A;

  /* Accent Colors */
  --color-accent-100: #2DB44A;
  --color-accent-80: #228236;

  /* Quote Colors */
  --quote-primary-bg: #228236;
  --quote-primary-hover-bg: #2DB44A;
  --quote-primary-border-color: #2DB44A;
  --quote-primary-pressed-bg: #59C446;
  --quote-primary-text: #ffffff;
  --quote-primary-hover-text: #000000;
  --quote-primary-pressed-text: #000000;

  /* Text Colors */
  --color-primary-text: #ffffff;
  --color-primary-text-hover: #ffffff;
  --color-primary-text-pressed: #ffffff;
  --color-secondary-text: #000000;
  --color-secondary-text-hover: #000000;
  --color-secondary-text-pressed: #000000;
  --color-temporary: red;
  --color-disabled: #ADADAC;

  /* Roles colors */
  --admin-color: #822222;
  --master-color: #00bf00;
  --agente-color: #0043ff;
  --subagente-color: #dfba49;
  --agenzia-color: #F3565D;
  --giocatore-color: #333333;

  /* Betting */
  --bl-ticket-pending-event: #D2D802;
  --bl-ticket-lost-event: #C23609;
  --bl-ticket-won-event: #0ABE11;
  --bl-ticket-void-event: #4040FF;
  --bl-ticket-hwon-event-gradient: -webkit-linear-gradient(300deg, #0abf11 0%, #0280ce 75%);
  --bl-ticket-hlost-event-gradient: -webkit-linear-gradient(300deg, #c23609 0%, #0280ce 75%);

  /*First Color*/

  /* Gradients */

  /* General Pure Colors */

  /* Neutral Colors */
  --color-bg-doppia: #A45DFF;
  --color-bg-tripla: #59C446;
  --color-bg-quadrupla: #1990FF;
  --color-bg-quintupla: #FF5E5E;
  --color-bg-10pla: #FFD900;
  --color-bg-altro: #FF8A00;

  /* Semantic Colors */

  /* Protection */

  /* Action Colors */
  --color-primary-enabled: #32a852;
  --color-primary-hover: #53b967;
  --color-primary-pressed: #2DB44A;
  --color-accent-enabled: var(--color-temporary);
  --color-accent-hover: var(--color-temporary);
  --color-accent-pressed: var(--color-temporary);
  --color-action-disabled: var(--color-disabled);

  /* Alert*/
  --bg-alert-success: #E4F2E9;
  --color-alert-success: #05B540;
  --bg-alert-danger: #F2E4E4;
  --color-alert-danger: #DF0000;
  --bg-alert-warning: #FFEBD5;
  --color-alert-warning: #FF8400;

  /*Typography*/
  --heading-font-family: 'DM Sans', sans-serif;
  --body-font-family: 'DM Sans', sans-serif;
  --font-awesome: 'Font Awesome 5 Free';

  /*Line Height*/
  --heading-line-height: 1.2;
  --body-line-height: 1.5;

    /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-medium: 600;
  --font-weight-regular: 400;
  --font-weight-uppercase-bold: 700;
  
  /* Font Sizes */
  --font-size-3xl: 48px;
  --font-size-2xl: 36px;
  --font-size-xl: 24px;
  --font-size-lg: 18px;
  --font-size-base: 16px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-2xs: 10px;
  --font-size-3xs: 8px;

  /* Container */
  --container-width: 1450px;
  --container-width-lg: 98%;
  --container-width-xs: 650px;
  --container-padding: 15px;

  /* Margin and spacing */
  --spacing-xs: 6px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-viewport: 1.5vw;
  --margin-xs: var(--spacing-xs);
  --margin-sm: var(--spacing-sm);
  --margin-md: var(--spacing-md);
  --margin-lg: var(--spacing-lg);
  --margin-xl: var(--spacing-xl);
  --padding-xs: var(--spacing-xs);
  --padding-sm: var(--spacing-sm);
  --padding-md: var(--spacing-md);
  --padding-lg: var(--spacing-lg);
  --padding-xl: var(--spacing-xl);

  /* Border Radius */
  --border-radius-xs: 4px;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  --border-radius-round: 80px;

  /* Z-index */
  --z-index-dropdown: 100;
  --z-index-modal: 200;
  --z-index-overlay: 999;

  /*Icon Size*/
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;

  /*Height*/
  --header-height: 100px;
  --footer-height: 80px;
  --button-height: 40px;
  --input-height: 50px;

  /*Transitions*/
  --transition-duration: 0.3s;
  --transition-easing: ease-in-out;

  /*Opacity*/
  --opacity-disabled: 0.5;

  /*Box Shadow*/
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);

  /*Translate*/
  --translate-x-50: -50%;
  --translate-y-50: -50%;

  /*Media Queries*/
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* ----------------------------------- */
  /* ------------ Page Colors ------------ */
  /* ----------------------------------- */

  /* Mobile Link */
  --mobile-link-bg: var(--color-bg-01);
  --mobile-link-hover-bg: var(--color-bg-01);
  --mobile-link-pressed-bg: var(--color-bg-01);
  --mobile-link-text-color: var(--color-primary-text);
  --mobile-link-text-hover-color: var(--color-primary-text-hover);
  --mobile-link-text-pressed-color: var(--color-primary-text-pressed);

  /* Top header */
  --top-header-color-bg: var(--color-bg-01);
  --top-header-color-text: var(--color-primary-text);
  --top-header-color-text-hover: var(--color-primary-text-hover);
  --top-header-color-text-pressed: var(--color-primary-text-pressed);
  --header-color-bg: var(--color-bg-02);
  --header-color-hover-bg: var(--color-bg-03);
  --header-color-pressed-bg: var(--color-bg-03);
  --header-color-text: var(--color-primary-text);
  --header-color-text-hover: var(--color-primary-text-hover);
  --header-color-text-pressed: var(--color-primary-text-pressed);

  /* Top header bar */
  --top-header-bar-color-bg: var(--color-bg-02);
  --top-header-bar-color-text: var(--color-primary-text);
  --top-header-bar-color-text-hover: var(--color-primary-text-hover);
  --top-header-bar-color-text-pressed: var(--color-primary-text-pressed);

  /* Header Page */
  --header-page-bg: var(--color-bg-03);
  --header-page-secondary-bg: var(--color-bg-02);
  --header-page-text-color: var(--color-primary-text);
  --header-page-text-hover-color: var(--color-primary-text-hover);
  --header-page-text-pressed-color: var(--color-primary-text-pressed);

  /* Main Menu */
  --menu-bg: var(--color-bg-02);
  --menu-pressed-bg: var(--color-bg-03);
  --menu-hover-bg: var(--color-bg-03);
  --menu-text-color: var(--color-primary-text);
  --menu-text-hover-color: var(--color-primary-text-hover);
  --menu-text-pressed-color: var(--color-primary-text-pressed);

  /* Menu Page */
  --menu-page-bg: var(--color-bg-02);
  --menu-element-bg: var(--color-bg-02);
  --menu-element-hover-bg: var(--color-bg-03);
  --menu-element-pressed-bg: var(--color-bg-03);
  --menu-element-text-color: var(--color-primary-text);
  --menu-element-text-hover-color: var(--color-primary-text-hover);
  --menu-element-text-pressed-color: var(--color-primary-text-pressed);

  /* Buttons */
  --button-primary-bg: var(--color-primary-100);
  --button-primary-hover-bg: var(--color-primary-80);
  --button-primary-pressed-bg: var(--color-primary-pressed);
  --button-primary-text: var(--color-primary-text);
  --button-primary-hover-text: var(--color-primary-text-hover);
  --button-primary-pressed-text: var(--color-primary-text-pressed);
  --button-secondary-bg: var(--color-bg-03);
  --button-secondary-hover-bg: var(--color-bg-03);
  --button-secondary-pressed-bg: var(--color-bg-03);
  --button-secondary-text: var(--color-primary-text);
  --button-secondary-hover-text: var(--color-primary-text-hover);
  --button-secondary-pressed-text: var(--color-primary-text-pressed);

  /* Modal */
  --modal-bg: var(--color-bg-02);
  --modal-bg-02: var(--color-white);
  --modal-text: var(--color-primary-text);
  --modal-placeholder: var(--color-primary-text);

  /* Last Minute Card */
  --last-minute-card-bg: var(--color-bg-03);
  --last-minute-card-text-color: var(--color-primary-text);
  --last-minute-card-text-hover-color: var(--color-primary-text-hover);
  --last-minute-card-text-pressed-color: var(--color-primary-text-pressed);

  /* Quote Buttons */
  --quote-button-bg: var(--quote-primary-bg);
  --quote-button-hover-bg: var(--quote-primary-hover-bg);
  --quote-button-pressed-bg: var(--quote-primary-pressed-bg);
  --quote-button-border-color: var(--quote-primary-border-color);
  --quote-button-text: var(--quote-primary-text);
  --quote-button-hover-text: var(--quote-primary-hover-text);
  --quote-button-pressed-text: var(--quote-primary-pressed-text);

  /* Links */
  --link-color: var(--color-primary-text);
  --link-hover-color: var(--color-primary-text-hover);
  --link-pressed-color: var(--color-primary-text-pressed);
  --link-text-color: var(--color-primary-text);
  --link-text-hover-color: var(--color-primary-text-hover);
  --link-text-pressed-color: var(--color-primary-text-pressed);

  /* Input */
  --input-bg: var(--color-bg-03);
  --input-bg-hover: var(--color-bg-02);
  --input-bg-pressed: var(--color-bg-02);
  --input-text: var(--color-primary-text);
  --input-text-hover: var(--color-primary-text-hover);
  --input-text-pressed: var(--color-primary-text-pressed);
  --input-placeholder: var(--color-primary-text);
  --input-border-color: var(--color-bg-03);

  /* Coupon */
  --cupon-bg: var(--color-bg-02);
  --cupon-text: var(--color-primary-text);
  --cupon-placeholder: var(--color-primary-text);

  /* Tabella Importi */
  --table-bg: var(--color-bg-02);
  --table-text: var(--color-primary-text);
  --table-placeholder: var(--color-primary-text);
  --table-border-color: var(--color-bg-03);
  --table-element-bg: var(--color-bg-02);
  --table-element-hover-bg: var(--color-bg-03);
  --table-element-pressed-bg: var(--color-bg-03);
  --table-element-text-color: var(--color-primary-text);
  --table-element-text-hover-color: var(--color-primary-text-hover);
  --table-element-text-pressed-color: var(--color-primary-text-pressed);
  --table-element-border-color: var(--color-bg-03);

  /* Palinsesti */
  --palinsesti-bg: var(--color-bg-02);
  --palinsesti-header-bg: var(--color-bg-03);
  --palinsesti-text: var(--color-primary-text);
  --palinsesti-placeholder: var(--color-primary-text);
  --palinsesti-border-color: var(--color-bg-03);
  --palinsesti-element-bg: var(--color-bg-02);
  --palinsesti-element-hover-bg: var(--color-bg-03);
  --palinsesti-element-pressed-bg: var(--color-bg-03);
  --palinsesti-element-text-color: var(--color-primary-text);
  --palinsesti-element-text-hover-color: var(--color-primary-text-hover);
  --palinsesti-element-text-pressed-color: var(--color-primary-text-pressed);
  --palinsesti-element-border-color: var(--color-bg-03);

  /* Tournament */
  --tournament-bg: var(--color-bg-02);
  --tournament-text: var(--color-primary-text);
  --tournament-placeholder: var(--color-primary-text);
  --tournament-border-color: var(--color-bg-03);
  --tournament-element-bg: var(--color-bg-02);
  --tournament-element-hover-bg: var(--color-bg-03);
  --tournament-element-pressed-bg: var(--color-bg-03);
  --tournament-element-text-color: var(--color-primary-text);
  --tournament-element-text-hover-color: var(--color-primary-text-hover);
  --tournament-element-text-pressed-color: var(--color-primary-text-pressed);
  --tournament-element-border-color: var(--color-bg-03);

  /* Championship Table */
  --championship-table-bg: var(--color-bg-02);
  --championship-table-header-bg: var(--color-bg-03);
  --championship-table-text: var(--color-primary-text);
  --championship-table-placeholder: var(--color-primary-text);
  --championship-table-border-color: var(--color-bg-03);
  --championship-table-element-bg: var(--color-bg-02);
  --championship-table-element-hover-bg: var(--color-bg-03);
  --championship-table-element-pressed-bg: var(--color-bg-03);
  --championship-table-element-text-color: var(--color-primary-text);
  --championship-table-element-text-hover-color: var(--color-primary-text-hover);
  --championship-table-element-text-pressed-color: var(--color-primary-text-pressed);
  --championship-table-element-border-color: var(--color-bg-03);

  /* Antepost */
  --antepost-bg: var(--color-bg-02);
  --antepost-text: var(--color-primary-text);
  --antepost-placeholder: var(--color-primary-text);
  --antepost-border-color: var(--color-bg-03);
  --antepost-element-bg: var(--color-bg-02);
  --antepost-element-hover-bg: var(--color-bg-03);
  --antepost-element-pressed-bg: var(--color-bg-03);
  --antepost-element-text-color: var(--color-primary-text);
  --antepost-element-text-hover-color: var(--color-primary-text-hover);
  --antepost-element-text-pressed-color: var(--color-primary-text-pressed);
  --antepost-element-border-color: var(--color-bg-03);

  /* Marcatori */
  --marcatori-bg: var(--color-bg-02);
  --marcatori-text: var(--color-primary-text);
  --marcatori-placeholder: var(--color-primary-text);
  --marcatori-border-color: var(--color-bg-03);
  --marcatori-element-bg: var(--color-bg-02);
  --marcatori-element-hover-bg: var(--color-bg-03);
  --marcatori-element-pressed-bg: var(--color-bg-03);
  --marcatori-element-text-color: var(--color-primary-text);
  --marcatori-element-text-hover-color: var(--color-primary-text-hover);
  --marcatori-element-text-pressed-color: var(--color-primary-text-pressed);
  --marcatori-element-border-color: var(--color-bg-03);

  /* Live Page */
  --live-page-bg: var(--color-bg-02);
  --live-page-text: var(--color-primary-text);
  --live-page-placeholder: var(--color-primary-text);
  --live-page-border-color: var(--color-bg-03);
  --live-page-element-bg: var(--color-bg-02);
  --live-page-element-hover-bg: var(--color-bg-03);
  --live-page-element-pressed-bg: var(--color-bg-03);
  --live-page-element-text-color: var(--color-primary-text);
  --live-page-element-text-hover-color: var(--color-primary-text-hover);
  --live-page-element-text-pressed-color: var(--color-primary-text-pressed);
  --live-page-element-border-color: var(--color-bg-03);
  --live-page-disabled-color: var(--color-disabled);
  
  /* Live Page Table */
  --live-page-table-bg: var(--color-bg-02);
  --live-page-table-text: var(--color-primary-text);
  --live-page-table-header-bg: var(--color-bg-03);
  --live-page-table-header-text-color: var(--color-primary-text);
  --live-page-table-placeholder: var(--color-primary-text);
  --live-page-table-border-color: var(--color-bg-03);
  --live-page-table-element-bg: var(--color-bg-02);
  --live-page-table-element-hover-bg: var(--color-bg-03);
  --live-page-table-element-pressed-bg: var(--color-bg-03);
  --live-page-table-element-text-color: var(--color-primary-100);
  --live-page-table-element-text-hover-color: var(--color-primary-100);
  --live-page-table-element-text-pressed-color: var(--color-primary-text-pressed);
  --live-page-table-element-border-color: var(--color-bg-03);

  /* Casino */
  --casino-bg: var(--color-bg-02);
  --casino-text: var(--color-primary-text);
  --casino-placeholder: var(--color-primary-text);
  --casino-border-color: var(--color-bg-03);
  --casino-element-bg: var(--color-bg-02);
  --casino-element-hover-bg: var(--color-bg-03);
  --casino-element-pressed-bg: var(--color-bg-03);
  --casino-element-text-color: var(--color-primary-text);
  --casino-element-text-hover-color: var(--color-primary-text-hover);
  --casino-element-text-pressed-color: var(--color-primary-text-pressed);
  --casino-element-border-color: var(--color-bg-03);

  /* User Profile */
  --user-profile-bg: var(--color-bg-02);
  --user-profile-text: var(--color-primary-text);
  --user-profile-placeholder: var(--color-primary-text);
  --user-profile-border-color: var(--color-bg-03);
  --user-profile-element-bg: var(--color-bg-02);
  --user-profile-element-hover-bg: var(--color-bg-03);
  --user-profile-element-pressed-bg: var(--color-bg-03);
  --user-profile-element-text-color: var(--color-primary-text);
  --user-profile-element-text-hover-color: var(--color-primary-text-hover);
  --user-profile-element-text-pressed-color: var(--color-primary-text-pressed);
  /* --user-profile-element-border-color: var(--color-bg-03); */
  --user-profile-element-border-color: #25282b;

  /* Agenzia */
  --agency-bg: var(--color-bg-02);
  --agency-text: var(--color-primary-text);
  --agency-placeholder: var(--color-primary-text);
  --agency-border-color: var(--color-bg-03);
  --agency-element-bg: var(--color-bg-02);
  --agency-element-hover-bg: var(--color-bg-03);
  --agency-element-pressed-bg: var(--color-bg-03);
  --agency-element-text-color: var(--color-primary-text);
  --agency-element-text-hover-color: var(--color-primary-text-hover);
  --agency-element-text-pressed-color: var(--color-primary-text-pressed);
  --agency-element-border-color: var(--color-bg-03);

  /* DropDown */
  --dropdown-bg: var(--color-bg-02);
  --dropdown-text: var(--color-primary-text);
  --dropdown-placeholder: var(--color-primary-text);
  --dropdown-border-color: var(--color-bg-03);
  --dropdown-element-bg: var(--color-bg-02);
  --dropdown-element-hover-bg: var(--color-bg-03);
  --dropdown-element-pressed-bg: var(--color-bg-03);
  --dropdown-element-text-color: var(--color-primary-text);
  --dropdown-element-text-hover-color: var(--color-primary-text-hover);
  --dropdown-element-text-pressed-color: var(--color-primary-text-pressed);
  --dropdown-element-border-color: var(--color-bg-03);

  /* Alert */
  --alert-bg: var(--color-bg-02);
  --alert-text: var(--color-primary-text);
  --alert-placeholder: var(--color-primary-text);
}


@media (max-width: 1680px) {
  :root {
    /* Font Sizes */
    --font-size-3xl: 44px;
    --font-size-2xl: 34px;
    --font-size-xl: 24px;
    --font-size-lg: 16px;
    --font-size-base: 14px;
    --font-size-md: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 10px;
    --font-size-2xs: 9px;
    --font-size-3xs: 8px;
  }
}