.heme-panel {
    text-align: center;
    font-size: 1.3em;
}

.heme .warn {
    color: yellow;
}

.heme .error {
    color: red;
}

.heme .ok {
    color: #00ff00;
}

.heme-bands .error {
    color: red;
}

.diamond-container {
    position: relative;
    width: 150px;
    height: 150px;
}

.diamond-container div {
    position: absolute;
    transform: rotate(30deg);
    color: #00ff00;
    font-weight: bold;
}

.diamond-container .top, 
.diamond-container .bottom {
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
}

.diamond-container .top {
    top: 10px;
}

.diamond-container .bottom {
    bottom: 10px;
}

.diamond-container .left {
    left: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: yellow;
}

.diamond-container .right {
    right: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}

.bands-box {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    text-align: center;
    padding: 5px;
    border: 1px solid white;
}

.bands-box .error {
    color: red;
    font-size: 1.2em;
    font-weight: bold;
}