/* 
*   Handling Machine Status 
*   1. st0 = off
*   2. st1 = running
*   3. st2 = idle
*   4. st3 = alarm
*/

:root {
    --status-off: #9c9c9c;
    --status-running: #4caf50;
    --status-idle: #fbc02d;
    --status-alarm: #fe0000;
    --border-status-off: #b4b4b4;
    --border-status-running: #4caf50;
    --border-status-idle: #fbc02d;
    --border-status-alarm: #fe0000;
}

[data-status="st0"] {
    background: var(--status-off) !important;
    color: white !important;
    border: 0.3rem solid #b4b4b4 !important;
}
[data-status="st1"] {
    background: var(--status-running) !important;
    border: 0.3rem solid var(--border-status-running) !important;
}

[data-status="st2"] {
    background: var(--status-idle) !important;
    border: 0.3rem solid var(--border-status-idle) !important;
}

[data-status="st3"] {
    background: var(--status-alarm);
    border: 0.3rem solid var(--border-status-alarm);
    animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
}

.box-footer .status-off {
    color: var(--status-off);
}
.box-footer .status-running {
    color: var(--status-running);
}

.box-footer .status-idle {
    color: var(--status-idle);
}

.box-footer .status-alarm {
    color: var(--status-alarm);
}

.card-machine-refactor {
    border-radius: 0.3rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    text-align: center;
    padding-inline: 0.2rem;
    padding-top: 0.4rem;
    background: var(--status-off);
}

.card-machine-name-refactor {
    border-top: 2px solid black;
    border-end-start-radius: 0.3rem;
    font-size: small;
    margin-top: 0.2rem;
    padding-top: 0.4rem;
}