:root {
  --bs-primary: #18baa8 !important;
  --bs-secondary: #186c75 !important;
  --monocromo: #186c75 !important;

  --verde: #00851B !important;
  --arancio: #CD4704 !important;
  --rosso: #CE0000 !important;


  --warning: #664d03;
  --danger: #58151c;
  --success: #0a3622;
}


/*ICONE SPRITE*/

/*dimensioni*/

.icon-xs {
  width: 20px;
  height: 20px;
}

.icon-s {
  width: 30px;
  height: 30px;
}

.icon-m {
  width: 50px;
  height: 50px;
}

.icon-l {
  width: 75px;
  height: 75px;
}

.icon-xl {
  width: 100px;
  height: 100px;
}

.icon-xxl {
  width: 150px;
  height: 150px;
}


/*comportamento*/
.icon-colors {
  --color: #000;
  --color-1: var(--bs-primary);
  --color-2: var(--bs-secondary);
}

a:hover .icon-colors,
button:hover .icon-colors {
  --color: var(--bs-secondary);
  --color-1: var(--bs-secondary);
  --color-2: var(--bs-primary);
}


.icon-monocromo {
  --color-1: var(--monocromo);
  --color-2: var(--monocromo);
}

a:hover .icon-monocromo,
button:hover .icon-monocromo {
  --color-1: var(--monocromo);
  --color-2: var(--monocromo);
}


.icon-monocromo-button {
  --color-1: var(--bs-primary);
  --color-2: var(--bs-primary);
}

a:hover .icon-monocromo-button,
button:hover .icon-monocromo-button {
  --color-1: var(--monocromo);
  --color-2: var(--monocromo);
}


.icon-semaforo {
  --color: #000;
  --color-arancio: var(--arancio);
  --color-rosso: var(--rosso);
  --color-verde: var(--verde);
}

.icon-white {
  --color-1: #fff;
  --color-2: #fff;
}

a:hover .icon-white,
button:hover .icon-white {
  --color-1: #fff;
  --color-2: #fff;
}

.icon-black {
  --color-1: #000000;
  --color-2: #000000;
}

a:hover .icon-black,
button:hover .icon-black {
  --color-1: #000000 !important;
  --color-2: #000000 !important;
}

.icon-warning {
  --color: var(--warning);
  --color-1: var(--warning);
  --color-2: var(--warning);
}

.icon-danger {
  --color: var(--danger);
  --color-1: var(--danger);
  --color-2: var(--danger);
}

.icon-success {
  --color: var(--success);
  --color-1: var(--success);
  --color-2: var(--success);
}

/*fine ICONE SPRITE*/