div.divContainStatus {
    background: white;
    box-shadow: var(--boxshadowOFFICIAL);
    border-radius: 20px;
    padding: 10px; margin: 10px;
    width: 280px; height: 100px;
    position: relative;
    pointer-events: none;
}

div.divContainStatus div {
    width: 25px; height: 25px;
    border-radius: 50%;
    position: absolute;
    left: 35px;
    border: 2px solid var(--lightBLUE);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    animation: rotateELTSTATUS 2s linear infinite;
}

div.divContainStatus h1 {
    align-items: flex-start !important;
    margin-left: 10px;
    position: absolute;
    left: 80px;
}

h1 span.STATEStatus {
    justify-content: flex-start;
    font-size: 20px;
}

h1 span:not(span.STATEStatus) {
    font-weight: lighter;
    font-size: 14px;
}

.primaire_changeFLEXtoGRID, .changeFLEXtoGRID { display: flex !important; }

.animatedSPANSTATUS_01 { background: greenyellow; }
.animatedSPANSTATUS_015 { background: orange; }
.animatedSPANSTATUS_02 { background: red; animation: none !important; border: 2px solid transparent !important; }

@media screen and (max-width: 1314px) {
    .changeFLEXtoGRID {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 684px) {
    .primaire_changeFLEXtoGRID { display: grid !important; }
    .primaire_changeFLEXtoGRID, .changeFLEXtoGRID { grid-template-columns: repeat(1, 1fr); }
}

@media screen and (max-width: 342px) {
    div.divContainStatus {
        transform: scale(0.9);
        margin: 5px;
    }
}
