:root {
    --normalTextColor: #000000;
    --availableTableColor: #FFFFFD;
    --takenTableColor: #E91E63;
    --takenTextColor: #FFFFFD;
    --selecttedTableColor: #57ff57;
}

/* Vista previa leyenda */
.previewTaken {
    color: var(--takenTableColor);
}

.previewSelected {
    color: var(--selecttedTableColor);
}

.previewAvailable {
    color: var(--availableTableColor);
}

/* Disponible */
.available ellipse {
    fill: var(--availableTableColor);
    stroke: none;
}

.available path {
    fill: var(--normalTextColor);
}

/* Ocupada */
.taken ellipse {
    fill: var(--takenTableColor);
    stroke: none;
}

.taken path {
    fill: var(--takenTextColor);
}

/* Hover */
.mouseOver ellipse {
    stroke: var(--selecttedTableColor);
    stroke-width: 3;
}

.mouseOver path {
    fill: var(--normalTextColor);
}

/* Seleccionada */
.selected ellipse {
    fill: var(--selecttedTableColor);
}

.selected path {
    fill: var(--normalTextColor);
}