/* ANIMAZIONE */
@borderThick: 5px;

.strokeThick {
  stroke-width: @borderThick !important;
}
/* Animazione per richiamo attenzione*/
.flashStroke {
  stroke: blue;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: blueFlash;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  /* Standard syntax */
  animation-name: blueFlash;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blueFlash {
  0% {
    stroke: #c4dbff;
  }

  25% {
    stroke: #9dc4ff;
  }

  50% {
    stroke: #5ca5ff;
  }

  75% {
    stroke: #1b82ff;
  }

  100% {
    stroke: #005ccc;
  }
}

/* COLORI */
.SFONDO {
  /*background-image: url("../Images/MT0006110.jpg");
  background-repeat: no-repeat; 
  background-size: cover;*/
  fill: #DEDEDE;
}
.GRIGIO {
  fill: #ACACAC;
}
.VERDE {
  fill: #28a745;
}
.BLU {
  fill: #007bff;
}
.ARANCIO {
  fill: orange;
}
.GIALLO {
  fill: yellow;
}
.PURPLE {
  fill: purple;
}
.TESTO {
  fill: white;
}

/* Classi da sostituire dinamicamente*/
#BLK-BCK {
  .SFONDO;
}
#BLK-CUT {
  .GRIGIO;
}
#BLK-SEL  {
  .ARANCIO;
  .flashStroke;
  .strokeThick;
}
#BLK-BIN {
  .VERDE;
}
#BLK-CART {
  .BLU;
}

#BLK-SEC-OP {
  .PURPLE;
}