:root {
    --reqColor: rgba(18, 69, 140, 0.5); /* Required */
    --recColor: rgba(108, 166, 225, 0.5); /* Recommended */
    --spColor: rgba(123, 50, 148, 0.5); /* stateProgram */
    --unColor: rgba(194, 165, 207, 0.5); /* noneSpecified */
    --ntColor: rgba(204, 204, 204, 0.5); /* noTraining */
}

.requireLegend, .recommendLegend, .stateProgramLegend, .unspecifiedLegend, .noTrainingLegend {
    padding: 2px 2px;
    border-radius: 5px;
    fill-opacity: 0.5;
}

.requireLegend {
    background-color: var(--reqColor);
}

.recommendLegend {
    background-color: var(--recColor);
}

.stateProgramLegend { 
    background-color: var(--spColor);
}

.unspecifiedLegend { 
    background-color: var(--unColor);
}

.noTrainingLegend { 
    background-color: var(--ntColor);
}

#tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    max-width: 200px;
    padding: 2px;
    font: 14px sans-serif;
    background: #ffffff;
    border: 0px;
    border-radius: 5px;
    padding: 5px;
    transition:
        opacity 0.1s ease;
  }

#tbiTrainingContainer {
    position: relative;
    overflow: visible;
}

#tbiTrainingContainer .miniGraphStateLabel {
    font-size: 1.1em;
    dominant-baseline: hanging;
    pointer-events: none;
}

#tbiTrainingContainer .keyText {
    font-size: 0.9em;
    fill: #666666;
    font-weight: normal;
}

@media only screen and (min-width: 651px) and (max-width: 770px) {
    #tbiTrainingContainer .miniGraphStateLabel {
        font-size: 1.1em;
    }
}

@media only screen and (max-width: 650px) {
    #tbiTrainingContainer .miniGraphStateLabel {
        font-size: 1.3em;
    }
    #tooltip {
        max-width: 160px;
    }
}

@media only screen and (max-width: 550px) {
    #tbiTrainingContainer .miniGraphStateLabel {
        font-size: 1.4em;
    }
}