:root {
  /* Colors. Essa parte é o que vai ser salvo no banco de dados */
  --primary-color: #5A81FA;
  --light-color: #CFDEFF;
  --dark-color: #696E82;
  --secondary-light-color: #EBEEFC;
  --secondary-dark-color: #A8B1CE;
  --neutral-color: #F2F4FF;
  --dark-font-color: #1F1F1F;

  /* Menu / Scroll / Shadow */
  --top-menu-background: var(--primary-color);
  --top-menu-shadow: var(--light-color);
  --scroll-bar: var(--light-color);
  --input-panel-shadow: var(--dark-color);
  --dropdown-menu-background: var(--secondary-light-color);

  /* Buttons */
  --primary-button: var(--primary-color);
  --secondary-button: var( --light-color);
  --search-magnifier: var(--dark-color);

  /* List Items */
  --table-titles: var(--primary-color);
  --table-border: var(--dark-font-color);
  --with-color-list-item-menu: var(--secondary-light-color);
  --no-color-list-item-menu: var(--neutral-color);

  /* Font Colors */
  --dark-font: var(--dark-font-color);
  --light-font: var(--neutral-color);
  --secondary-dark-font: var(--dark-color);
  --secondary-light-font: var(--secondary-dark-color);
  --emphasis-font: var(--primary-color);
  --selected-menu-font: var(--primary-color);
  --selected-item-font: var(--primary-color);
  --top-menu-font: var(--neutral-color);
  --dropdown-menu-font: var(--secondary-dark-color);
  --placeholder-input-font: var(--dark-font-color);

  /* Background */
  --selected-panel-title-background: var(--primary-color);
  --unselected-panel-title-background: var(--secondary-dark-color);
  --secondary-panel-background: var(--secondary-light-color);
  --third-panel-background: var(--neutral-color);
  --page-background: var(--neutral-color);
  --light-input-background: var(--light-color);
  --selected-item-background: var(--light-color);
  --selected-tab-background: var(--primary-color);
  --unselected-tab-background: var(--dark-color);
  --student-grade-background: var(--light-color);
  --options-board-background: var(--neutral-color);
  --registration-data-input-background: var(--secondary-light-color);
  --phone-input-background: var(--neutral-color);

  /*Border*/
  --light-border: var(--light-color);

  /* Radio Input */
  --selected-radio-input: var(--primary-color);
  --unselected-radio-input: var(--light-color);

  /* Classes / Calendar */
  --classes-grid-border: var(--light-color);
  --calendar-border: var(--light-color);
  --light-calendar-day: var(--light-color);
  --dark-calendar-day: var(--primary-color);
  --next-month-arrow: var(--neutral-color);
  --background-calendar: var(--neutral-color);
  --header-calendar: var(--secondary-dark-color);
  --number-calendar-color: var(--secondary-dark-color);
  --event-background: var(--light-color);

  /*Others*/
  --green: #4CAF50;
  --dark-green: #45A049;
  --minimo: yellow;
  --nada: red;
}