.tristate-checkbox-container  {
    display: flex;
}

.tristate-checkbox-container label  {
    flex: 1 1 auto;
    font-weight: normal;
    margin-left: 5px;
    user-select: none;
}

.tristate-checkbox  {
    flex: 0 0 24px;
    border: 1px solid black;
    height: 24px;
    display: block;
    cursor: pointer;
    text-align: center;
    color: white;
}

.tristate-checkbox.unselected {
    background-color: gray;
}

.tristate-checkbox.valid {
    background-color: green;
}

.tristate-checkbox.invalid {
    background-color: red;
}

.tristate-checkbox.readonly {
    cursor: not-allowed;
    opacity: 0.7;
}

.tristate-checkbox i {
    font-size: 12px;
    user-select: none;
}