.blue {
    background-color: rgba(0, 0, 255, 0.712);
    color:white;
    padding: 5px;
}

.red {
    background-color: rgba(255, 0, 0, 0.76);
    color:black;
    padding: 5px;
}

.white {
    background-color: rgba(230, 230, 230, 0.712);
    color: black;
    padding: 5px;
}

.blueBox {
    background-color: rgba(0, 0, 255, 0.712);
    color: white;
    vertical-align: top;
}

.whiteBox {
    background-color: rgba(230, 230, 230, 0.712);
    vertical-align: top;
}

.redBox {
    background-color: rgb(253, 37, 37);
    vertical-align: top;
}

.blueBoxHC {
    background-color: linear-gradient(to right, rgba(0,0,255,0.712),white);
    color: white;
    vertical-align: top;
}

.whiteBoxHC {
    background-color:linear-gradient(to right, rgba(230, 230, 230, 0.712),rgba(255,255,255,1));
    vertical-align: top;
}

.redBoxHC {
    background-color: linear-gradient(to right, rgb(253,37,37),white);
    vertical-align: top;
}

.blueCounter{
    width: 100px;
    background-color: rgba(0, 0, 255, 0.712);
    border: 2px solid blue;
    border-radius: 10px; 
    text-align: center;
    padding: 10px;
}

.whiteCounter{
    width: 100px;
    background-color:rgba(230, 230, 230, 0.712); 
    border: 2px solid gray;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}

.redCounter{
    width: 100px;
    background-color: rgb(253, 37, 37); 
    border: 2px solid red;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}