:root {
  /*Colors*/
  --color-transparent: transparent;
  --color-mid-gray: #51535F;
  --color-gray: #CCCCCC;
  --color-dark-gray: #B1B3B9;
  --color-bright-gray: #F0F0F0;
  --color-bright-gray-fixed: #E0E0E0;

  --color-light-gray: #F8F8F8;
  --color-light-alpha80: rgba(255, 255, 255, 0.80);
  --color-white-alpha50: rgba(255, 255, 255, 0.60);
  --color-black-alpha50: rgba(0, 0, 0, 0.60);

  --color-light-alpha20: rgba(255, 255, 255, 0.20);
  --color-light2-alpha80: rgba(255, 255, 255, 0.80);
  --color-light-alpha90: rgba(255, 255, 255, 0.90);
  --color-black-alpha80: rgba(0, 0, 0, 0.80);
  --color-dark-alpha20: rgba(0, 0, 0, 0.20);
  --color-bg-popup: rgba(0, 0, 0, 0.60);
  --color-shadow-dark: rgba(0, 0, 0, 0.30);
  --color-black-alpha25: rgba(0, 0, 0, 0.25);
  --color-black-alpha20: rgba(0, 0, 0, 0.20);

  --color-white-alpha98: rgba(255,255,255,0.98);
  
  --color-component-nav: #FFFFFF;

  --color-border: #E0E1E3;
  --color-border-fixed: #E0E1E3;

  --color-gray-gradient: linear-gradient(0, var(--color-light), var(--color-bright-gray));

  --color-text: #03151B;

  --color-dark: #323447;
  --color-light-inverse: #FFFFFF;
  --color-light: #FFFFFF;
  --color-gray-fixed: #B7B8B9;
  --color-highlight: #FFFFFF;
  --color-section-primary: var(--color-dark);
  --color-dash: var(--color-gray);

  --color-profilenav-icon: var(--color-gray);
  --color-checkbox: var(--color-dark);

  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark-fixed: #323447;
  --color-language-header: var(--color-dark);
  --color-form: var(--color-light-gray);
  --color-form-text: var(--color-dark);
  --color-button-text: var(--color-dark-gray);
  --color-button-text-dark: var(--color-dark);
  --color-button: var(--color-white);
  --color-plans-highlight: var(--color-dark);
  --color-plans-items: var(--color-mid-gray);
  --color-webfolio-portfolio: #EBD7FF;
  --color-slider-cover: var(--color-light-alpha80);

  --color-button-custom: #FFFFFF;
  --color-button-custom-hover: var(--color-dark);
  --color-button-custom-text: var(--color-dark);
  --color-button-custom-text-hover: var(--color-white);

  --color-primary: #9F44FC;
  --color-primary-light: #D2A8FD;
  --color-primary-hover: rgba(159, 68, 252, 0.8);
  --color-primary-alpha40: rgba(159, 68, 252, 0.5);
  --color-primary-default: var(--color-primary);

  --color-bg-popup-body: #FFFFFF;
  --color-dropdown-body: #FFFFFF;
  --color-unavailable-wedge: #b7b8b9;
  --color-delete-header: var(--color-dark);
  --color-delete-header-line: #FF0000;

  --color-secondary: #5D5EFC;
  --color-secondary-light: #8490FD;
  --color-secondary-alternate: var(--color-secondary);
  --color-secondary-default: var(--color-secondary);
  --color-secondary-alpha40: rgba(132, 154, 253, 0.5);

  --color-primary-gradient: linear-gradient(290deg,var(--color-primary-light), var(--color-primary)); 
  --color-primary-gradient-reverse: linear-gradient(110deg, var(--color-primary-light), var(--color-primary)); 

  --color-secondary-gradient: linear-gradient(290deg, var(--color-secondary-light), var(--color-secondary));
  --color-secondary-gradient-reverse: linear-gradient(110deg, var(--color-secondary-light), var(--color-secondary)); 

  --color-both-gradient: linear-gradient(290deg, var(--color-secondary), var(--color-primary));
  --color-both-gradient-reverse: linear-gradient(110deg, var(--color-secondary), var(--color-primary));
  --color-both-gradient-reverse-default: linear-gradient(110deg, var(--color-secondary-default), var(--color-primary-default));
  --color-both-gradient-reverse-default-late: linear-gradient(110deg, var(--color-secondary-default) 60%, var(--color-primary-default) 100%);
  --color-both-gradient-reverse-default-late-webkit: -webkit-linear-gradient(290deg, var(--color-secondary-default) 60%, var(--color-primary-default) 100%);

  --color-both-gradient-reverse-home: linear-gradient(90deg, var(--color-secondary), var(--color-primary));

  --color-both-gradient-vertical: linear-gradient(200deg, var(--color-secondary), var(--color-primary));

  --color-both-gradient-light: linear-gradient(290deg, var(--color-secondary-light), var(--color-primary-light));
  --color-both-gradient-reverse-light: linear-gradient(110deg, var(--color-secondary-light), var(--color-primary-light));

  --color-both-gradient-late: linear-gradient(290deg, var(--color-secondary) 60%, var(--color-primary) 100%);
  --color-both-gradient-reverse-late: linear-gradient(110deg, var(--color-secondary) 60%, var(--color-primary) 100%);
  
  --color-cover-gradient: linear-gradient(290deg, var(--color-primary-alpha40), var(--color-secondary-alpha40));

  --color-red-gradient: linear-gradient(290deg, #B30000 50%, #800000 100%);

  /*Sizes*/
  --nav-height: 93px;
  --nav-profile-height: 62px;
  --nav-profile-mobile-height: 47px;
  --dashed-line-height: 1px;
  
  /*--original-body-width: 930px;
  --body-width: 930px;*/
  --original-body-width: 1280px;
  --body-width: 1280px;
  --side-menu-width: 0;
  --profile-margin: 80px;
  /*Components*/
  --border-default: 0.5px solid var(--color-border);
  --border-default-fixed: 0.5px solid var(--color-border-fixed);

  --border-debug: 1px solid red;
  --border-search-mobile: 0.5px solid var(--color-dark);

  --shadow: 0px 2px 3px var(--color-shadow-dark);

  --border-radius-tab: 15px;

  --shadow-default: 0px 2px 4px var(--color-gray);
  --shadow-light: 0px 2px 4px var(--color-black-alpha20);
  --shadow-thin: 0 0 1px var(--color-gray);

  --shadow-darker-default: 2px 2px 5px var(--color-dark-gray);
  --shadow-thin-darker: 0 1px 4px var(--color-dark-gray);

  --border-width: 0.5px;
  --size-mini-icon: 16px;
  --size-top-icon: 16px;
  --size-large-icon: 32px;
  --size-pic-icon: 40px;
  --size-badge: 196px;
  --size-small-icon: 24px;

  /*Z*/
  --z-nav: 9995;
  --z-search-results: 9996;
  --z-menu: 9997;
  --z-menu-body: 9998;
  --z-popup: 9999;
  --z-popup-body: 10000;
  --z-topmost: 10001;
}

html {
  background-color: var(--color-bright-gray);
}

@media only screen and (min-width: 1300px) {
  :root {
    /* Dimensions */
    --body-width: 1122px;
    --side-menu-width: 192px;
  }
}