html {
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
    font-size: 20px;
}

body{
    background-color: white;
}

.parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows: repeat(4, 1fr); */
    gap: 5px;
}
    
.line_name {
    grid-column: span 12 / span 12;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: lightcoral;
}

.mc_monitor {
    grid-column: span 12 / span 12;
    grid-row-start: 2;
    border: solid black 2px;
    border-radius: 10px;
    gap: 5px;
    text-align: center;
}

.mc {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.mc_run {
    grid-column: span 12 / span 12;
    grid-row-start: 3;
    border: solid black 2px;
    border-radius: 10px;
    gap: 5px;
}

.pd {
    grid-column: span 12 / span 12;
    grid-row-start: 4;
    border: solid black 2px;
    border-radius: 10px;
    gap: 5px;
    text-align: center;
}

.container {
    border: solid black 2px;
    border-radius: 5px;
    padding : 5px;
    margin : 5px;
}

.timeline {
    position: relative;
    width: 500px;
    height: 30px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}
.segment {
    position: absolute;
    height: 100%;
    background-color: #28a745; /* สีเขียว = run */
}
.timeline-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-top: 5px;
    width: 500px;
}