/* Base styling for the led-indicator */
.led-indicator {
    width: 20px;                 /* Width of the LED */
    height: 20px;                /* Height of the LED */
    display: inline-block;
    margin-left: 5px; /* Optional: to add some space between the text and the image */
    vertical-align: middle;
    padding-bottom: 3px;         /* Adjust as needed to align the LED with the text */
}

/* Default State for when the LED is "True" */
.led-indicator.led-indicator-on {
    content: url('../images/Eo_circle_green_blank.svg'); /* Default green image */
}

/* Default State for when the LED is "False" */
.led-indicator.led-indicator-off {
    content: url('../images/Eo_circle_red_blank.svg'); /* Default red image */
}

.led-indicator.led-indicator-none {
    content: url('../images/Eo_circle_grey_blank.svg'); /* Default green image */
}

/* Override State for "True" with Check */
.led-indicator.led-indicator-on.led-indicator-check {
    content: url('../images/Eo_circle_green_checkmark.svg'); /* Green image with checkmark */
}

/* Override State for "False" with Check */
.led-indicator.led-indicator-off.led-indicator-check {
    content: url('../images/Eo_circle_red_letter-x.svg'); /* Red image with letter 'X' */
}

/* Size modifiers */
.led-indicator.led-indicator-big {
    width: 40px;
    height: 40px;
}

.led-indicator.led-indicator-huge {
    width: 60px;
    height: 60px;
}

.led-indicator.led-indicator-small {
    width: 10px;
    height: 10px;
}

.led-indicator.led-indicator-normal {
    width: 20px;
    height: 20px;
}