.clusterTable{
    border: 1px solid black;
    border-collapse: collapse; 
}

.cluster{
    width:240px;
    height:240px; 
    border: none; 
    border-collapse: collapse; 
    text-align: center; 
    vertical-align: middle;
}
.cluster_0{
 background-color: #ffffff;
}

.cluster_1{
 background-color: #dadde2; 
}

.cluster_2{
 background-color: #f2e0cd;
}
.cluster_3{
 background-color: #e1eee7;
}
.cluster_4{
 background-color: #cfc7ab;
}
.cluster_5{
 background-color: #fff8ec;
}
.cluster_6{
 background-color: #cbeadc;
}
.cluster_7{
 background-color: #f5f5f5;
}
.cluster_8{
 background-color: #c5cccc;
}


    /* Color palette for quality levels */
    .poor {
      color: hsl(0, 80%, 50%); /* Red for Poor */
    }

    .fair {
      color: hsl(39, 81%, 48%); /* Orange-Red for Fair */
    }

    .good {
      color:  hsl(69, 80%, 43%);/* Yellow for Good */
    }

    .very-good {
      color: hsl(102, 29%, 51%); /* Yellow-Green for Very Good */
    }

    .excellent {
      color: hsl(120, 88%, 37%); /* Green for Excellent */
    }


.varvalue{
 font-size: 24px;
}



.varmenu {
    float:right; 
    font-size:14px;
    text-decoration: underline;
    color: blue;
}
.varmenu:hover {
    float:right; 
    font-size:28px;
    color: darkblue;
    background-color: lightblue;
}

.br-left {
  border-left-style: solid;
}
.br-right {
  border-right-style: solid;
}
.br-top {
  border-top-style: solid;
}
.br-bottom {
  border-bottom-style: solid;
}

.chart-container{
 width:970px;
}



.chrtGfg{
 display:none;    
}

.chrtIco{
 display:inline-flex;    
}

.chrtWrapper:hover .chrtIco {
  display: none;
}

.chrtWrapper:hover .chrtGfg {
  display: inline-flex;
}