body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.container {
    margin: 15px;
    column-count: 3;
}

.ligne {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    background-color: #e6e6e6;

    margin: 5px;
    white-space: nowrap; /* Prevent the content from wrapping */
}

.serieStation, .idStation, .nomStation, .electricIndicator, .disponibility, .numElectric, .numDisabled {
    margin: 0 5px;
    text-align: left;
    flex: none; /* Prevent the elements from stretching */
    padding: 2px;
    border: 1px solid #ccc;
}
.nomStation{
    width: auto;
    text-overflow: ellipsis;
    overflow: hidden;
}
.nomStation, .electricIndicator{

    border: 1px solid transparent;
}
.electricIndicator{
    margin-left: auto;
}
.electricIndicator i {
    margin-right: 5px;
}



.serieStation i {
    cursor: pointer;
}

/* Dynamic classes */
.clock-normal {
    color: black;
}

.clock-red {
    color: red;
}

.id-normal {
    background-color: transparent;
}

.id-orange {
    background-color: darkorange;
}

.id-green {
    background-color: #c8d20a;
}
.id-red {
    background-color: red;
    color:#fff;
}
.id-black{
    background-color: black;
    color:#fff;
}

.disabled-red {
    background-color: red;
    color:#fff;
}

.tempty{
    color: red;
}
.tfull{
    color: green;
}
.tmedium{
    color: orange;
}

@media screen and (max-width: 1450px) {
    .container {
        margin: 15px;
        column-count: 2;
    }
}

@media screen and (max-width: 992px) {
    .container {
        margin: 15px;
        column-count: 1;
    }
}