/* set color var  */
:root {
  --main-text: #1d273b;
  --second-text: #878a99;
  --third-text: #babcbe;
  --layout-bg: #dde0e9;
  --menu-bg: #2a2b3d; /* background per menu e tooltip*/
  --main-opacized-bg: #daf4f0;
  --third-bg: #90be6d;
  --menuSelected: #0c63e7;
  --menu-button: #cf3efa;
  --menu-button-opened: #ff8160;
  --tooltip-bg: #555;
  --tooltip-border: #444;
  --white: #fff;
  --bianco-trasparente: rgba(255, 255, 255, 0.4);
  --black: #000;
  --nero-chiaro: #222;
  --nero-trasparente-shadow: rgba(0, 0, 0, 0.2);
  --azzurro: #39b1cb;
  --blu-sbiadito:  #4a87cf;
  --red: #d63939; /* per le icone dello scadenziario*/
  --orange: #f7bf07; /* per le icone dello scadenziario*/ 
  --green: #2fb344; /* per le icone dello scadenziario*/
  
  --bianco-sporco: #e0e0e0;
  --grigio-chiaro: #9e9e9e;
  --grigio-azzurro: #a9bace;
  --grigio-medio: #757575;
  --grigio-scuro: #616161;
  --bianco-leggermente-sporco: #fafafa;
  --pagination-button-disabled-color: #bdbdbd;
  --modal-element-bg: #fff;
  --modal-element-border: #e0e0e0;
  --modal-element-text: #000;
  --modal-content-bg: #f9f7f6;
  --plus-bg: #e8fff9; /* background verdino (positivo) per le card statistiche nelle homepage */
  --plus-color: #43c6ab; /* colore verde (positivo) per le card statistiche nelle homepage  */
  --minus-bg: #ffeff3; /* background rosa chiaro (negativo) per le card statistiche nelle homepage */
  --minus-color: #dd1d43; /* colore rosso (negativo) per le card statistiche nelle homepage */
  --button-delete-bg: #d63939; /* Background rosso per il bottone di eliminazione */
  --button-delete-color: #fff; /* Testo bianco per il bottone di eliminazione */
  --button-delete-bg-hover: #ff8160; /* HOVER: Background rosso chiaro per il bottone di eliminazione */
  --button-delete-color-hover: #fff; /* HOVER: Testo bianco per il bottone di eliminazione */
  --button-delete-bg-disabled: #ff0000; /* Background giallo per il bottone di eliminazione disabilitato */
  --button-delete-color-disabled: #fff; /* Testo bianco per il bottone di eliminazione disabilitato */
  --button-delete-bg-disabled-hover: #f7bf07; /* HOVER: Background giallo per il bottone di eliminazione disabilitato */
  --menu-button-hover-bg: #5151f9; /* Background per il bottone del menu quando è in hover */
  --menu-button-color: #e4e4e4; /* Colore per il bottone del menu */
  --menu-bg: #3d444d; /* Background per il menu */
  --main-bg: #ebecf0; /* Background principale */
  --secondary-bg: #dbdee5; /* Background secondario */
  --button-primary-bg: #5151f9; /* Background per il bottone principale */
  --button-primary-color: #f0f0ff; /* Colore per il bottone principale */
  --button-primary-bg-hover: #cf3efa; /* ??? Background per il bottone principale in hover */
  --button-primary-color-hover: #000;  /* ??? Colore per il bottone principale in hover */
  --button-link-color: #5151f9; /* Colore per i bottoni o frecce link */
  --plus-percerntage-bg: #cfedfb; /* Background per il bottone di percentuale positiva */
  --plus-percerntage-color: #0ea5e9; /* Colore per il bottone di percentuale positiva */
  --negative-percerntage-bg: #f9d2da; /* Background per il bottone di percentuale negativa */
  --negative-percerntage-color: #e11d48; /* Colore per il bottone di percentuale negativa */
  --light-purple: #dcdcfe; /* Background per il bottone di percentuale uguale */
  --equal-percerntage-color: #5151f9; /* Colore per il bottone di percentuale uguale */
  --secondary-text: #848484; /* Colore per il testo secondario */
  --andrea1: #3d444d;
  --andrea2: #6d96ff;
  --andrea3: #cf3efa;
  --andrea4: #ff8160;
}


.button-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
  font-weight: 700;
}

.button-primary:hover {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-color-hover);
}


.button-delete {
  background-color: var(--button-delete-bg)!important;
  color: var(--button-delete-color)!important;
  font-weight: 700;
}

.button-delete:hover {
  background-color: var(--button-delete-bg-hover);
  color: var(--button-delete-color-hover);
}

.negative-percentage {
  background-color: var(--negative-percerntage-bg);
  color: var(--negative-percerntage-color);
  font-weight: 700;
}

.plus-percentage {
  background-color: var(--plus-percerntage-bg);
  color: var(--plus-percerntage-color);
  font-weight: 700;
}

.equal-percentage {
  background-color: var(--light-purple);
  color: var(--equal-percerntage-color);
  font-weight: 700;
}


.layout-bg {
  background-color: var(--layout-bg);
}

.navbar-nav {
  border-radius: 10px;
  padding: 0.5rem;
  margin: 0.5rem;
  box-shadow: none;
}

.nav-link {
  border-radius: 20px!important;
}


.nav-link-icon {
  color: var(--color-4);
}

.nav-link-title, .nav-link-icon{
  font-weight: 500;
}


.nav-link:hover > .nav-link-title, .nav-link:hover > .nav-link-icon {
  color: var(--color-4);
}




/* !!! Down below the style for the legend element in the table */
.red {
  color: var(--red)!important;
}
.orange {
  color: var(--orange)!important;
}

.green {
  color: var(--green)!important;
}

/* !Down below the style for icon-only menu */

.icon-menu {
  width: 3.8rem!important;
}
/* Rimuovi titolo accanto all'icona*/
.icon-menu .text-menu-cc{
  display: none;
}

/* Style for the button li on sidebar */
.icon-menu li.icon-only-li button {
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

/* Down below the style for table component */
/* Stile per l'icona del bottone link pagina */
#link-to-page-icon {
  transform: rotate(45deg);
  font-size: 15px;
}
/* Stile per il bottone link pagina da desktop */
button#table-title-link-to-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 25px;
  box-shadow: none;
  border:none;
}

#table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 25px;
  box-shadow: none;
  border:none;
}