
@color-codes:
  "#2962FF",
  "#AA00FF",
  "#00C853",
  "#304FFE",
  "#0091EA",
  "#FF6D00",
  "#00BFA5",
  "#C51162",
  "#64DD17",
  "#6200EA",
  "#FFD600",
  "#00B8D4",
  "#FFAB00",
  "#DD2C00",
  "#2979FF",
  "#D500F9",
  "#00E676",
  "#3D5AFE",
  "#00B0FF",
  "#FF9100",
  "#1DE9B6",
  "#F50057",
  "#76FF03",
  "#651FFF",
  "#FFEA00",
  "#00E5FF",
  "#FFC400",
  "#FF3D00",
  "#448AFF",
  "#E040FB",
  "#69F0AE",
  "#536DFE",
  "#40C4FF",
  "#FFAB40",
  "#64FFDA",
  "#FF4081",
  "#B2FF59",
  "#7C4DFF",
  "#FFFF00",
  "#18FFFF",
  "#FFD740",
  "#FF6E40";

.dark-overlay {
  background-color: #292935;
  opacity: 0.5;
}

.light-overlay {
  background-color: #FFFFFF;
  opacity: 0.2;
}


// #D50000, //red-deep
// #FF1744, //red-med
// #FF5252, //red-light

@warningColor: #FF9800;
@criticalColor: #F44336;

@freeColor: #2E2E3B;
@errorColor: #FF1744;
@waitingColor: #DAD462;

.getColorIndex(@i){
  @index: @i; //mod(@i - 1, 3) * 7 + round((@i - 1) / 3 - .3);
}
.creatcolorclasses(@i:1) when(@i <= length(@color-codes)) {
  @colorCodeString: extract(@color-codes, @i);
  @colorCode: color(@colorCodeString);

  .getColorIndex(@i);
  .color-@{index} {
    background-color: @colorCode;
    fill: @colorCode;
    stroke: @colorCode;
  }


  .color-max-@{index} {
    background-color: lighten(@colorCode, 35%);
    border-color: lighten(@colorCode, 35%);
    fill: lighten(@colorCode, 35%);
  }

  md-grid-list.list-color-@{i} md-grid-tile.colored {
    background-color: @colorCode;
  }
  .creatcolorclasses((@i + 1));
}
.creatcolorclasses();

.color-warning {
  background-color: @warningColor !important;
  border-color: @warningColor !important;
  fill: @warningColor !important;
  stroke: @warningColor !important;
}

.color-critical {
  background-color: @criticalColor !important;
  border-color: @criticalColor !important;
  fill: @criticalColor !important;
  stroke: @criticalColor !important;
}

.status-waiting {
  background-color: @freeColor !important;
  border-color: @waitingColor !important;
  border-width: 2px !important;
  border-style: solid !important;
}

.status-succeeded {}

.status-terminated, .status-unknown {
  background-color: @errorColor !important;
  border-color: darken(@errorColor, 10%) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
