svg {
  display: block;
  width: 100%;
}
rect{
    
}
.textCom {
    font-family: arial narrow;
    font-size: 1px;
    text-anchor: middle;
    font-weight: bold;
    fill: whitesmoke;
    width: 2px;
    cursor: pointer;
}
.textSVG{
    font-family:arial narrow;
    font-size:1px;
    text-anchor:start;
    font-weight:bold;
    fill:whitesmoke;
    width:2px;
    cursor: pointer;
}
 .ACTIVE {
  fill: darkgreen;
  stroke-width:0.05;
  stroke:rgb(0,0,0);
  cursor: pointer;
  /*opacity:0.4;*/
}
 .ACTIVE:hover{
    fill: #ffd800;
  stroke-width:0.05;
  stroke:#d5b500;
  cursor: pointer;
}
 .BOOKED {
  fill: #FF0000;
  stroke-width:0.05;
  stroke:rgb(0,0,0);
  cursor: pointer;
}
.TEMP-BOOKED {
    fill: #FF0000;
    stroke-width: 0.05;
    stroke: rgb(0,0,0);
    cursor: pointer;
}
.HOLD {
  fill: #ffae34;
  stroke-width:0.05;
  stroke:rgb(0,0,0);
  cursor: pointer;
}
.PENDING {
  fill: #ffac30;
  stroke-width:0.05;
  stroke:rgb(0,0,0);
  cursor: pointer;
}
.FREEZE {
    fill: #3c3aff;
    stroke-width: 0.05;
    stroke: rgb(0,0,0);
    cursor: pointer;
}
.RESERVED {
    fill: #FF0000;
    stroke-width: 0.05;
    stroke: rgb(0,0,0);
    cursor: pointer;
}