.legend {
    border-style: solid;
    border-width: 2px;
    border-color: grey;
    width: 50px;
    height: 15px;
    display: inline-block;
    white-space: nowrap;
}
.legend-rem {
    background-color: rgba(209, 0, 145, 0.4);
    border-color: rgb(209, 0, 145);
}

.legend-light {
    background-color: rgba(0, 90, 255, 0.4);
    border-color: rgb(0, 90, 255);
}

.legend-deep {
    background-color: rgba(0, 0, 177, 0.4);
    border-color: rgb(0, 0, 177);
}

.legend-wake {
    background-color: rgba(0, 175, 255, 0.4);
    border-color: rgb(0, 175, 255);
}
.legend-restless {
    background-color: rgba(0, 200, 0, 0.5);
    border-color: rgb(0, 200, 0);
}

.legend-text {
    font-size: 15px;
    text-align: center;
    color: lightgray;
    display: inline-block;
    white-space: nowrap;
}