.main-grid{
    display: grid;
    grid-template-areas:
    "card-1 card-2 "
    "card-3 card-3";
    grid-template-columns: 28% 71.5%;
    grid-template-rows: 79.5vh 12.5vh;
    grid-gap: 0.5rem;
}

@media screen and (height: 1080px) {
    .main-grid{
        grid-template-rows: 80.4vh 12.5vh;
    }
}

@media screen and (height: 1076px) {
    .main-grid{
        grid-template-rows: 80.4vh 12.5vh;
    }
}

.card-1{
    grid-area: card-1;
    background: #2F3231;
    border-radius: 0.3rem;
    padding: 0.5rem 0.5rem;
}

.card-2{
    grid-area: card-2;
    background: #2F3231;
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
}

.card-3{
    grid-area: card-3;
    background: #2F3231;
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
}

.main-card{
    width: 100%;
    background: #2F3231;
    border: 2px solid #4A4A4A;
    border-radius: 0.3rem;
}

.main-card:nth-child(1){
    height: 12rem;
    margin-bottom: 0.5rem;
}

.main-card:nth-child(2){
    height: 17.5rem;
    margin-bottom: 0.5rem;
}

.main-card:nth-child(3){
    height: 16rem;
}

@media screen and (height: 1080px) {
    .main-card:nth-child(2){
        height: 19rem;
    }

    .main-card:nth-child(3){
        height: 21rem;
    }
}

@media screen and (height: 1076px) {
    .main-card:nth-child(2){
        height: 19rem;
    }

    .main-card:nth-child(3){
        height: 21rem;
    }
}

.main-card .header{
    width: 100%;
    padding: 0.5rem;
    border-bottom: 2px solid #4A4A4A;
    display: flex;
    justify-content: start;
}

.main-card .body{
    width: 100%;
    padding: 0.5rem;
}

.main-card .footer{
    width: 100%;
    padding: 0.5rem;
    border-top: 2px solid #4A4A4A;
}

.val-progress-bar{
    font-family: "Kanit Light Italic";
    color: #AEAEAE;
    margin: 0rem;
    font-size: 1.1rem;
}

.progress-bar{
    background-color: #52834B;
}

.main-card:nth-child(1) .body{
    height: 8.7rem;
    display: flex;
    align-items: center;
    align-content: center
}

.main-card:nth-child(2) .body{
    height: 10.4rem;
    display: flex;
    align-items: center;
    align-content: center
}

.main-card:nth-child(3) .body{
    height: 12.6rem;
}

@media screen and (height: 1080px) {
    .main-card:nth-child(2) .body{
        height: 11.9rem;
    }
    
    .main-card:nth-child(3) .body{
        height: 17.5rem;
    }
}

@media screen and (height: 1076px) {
    .main-card:nth-child(2) .body{
        height: 11.9rem;
    }
    
    .main-card:nth-child(3) .body{
        height: 17.5rem;
    }
}

figure #timechart{
    height: 12.6rem;
}

@media screen and (height: 1076px) {
    figure #timechart{
        height: 17.5rem;
    }
}

@media screen and (height: 1076px) {
    figure #timechart{
        height: 17.5rem;
    }
}

.image-machine{
    width: 100%;
}

dt{
    font-size: 0.9rem;
    color: #FFFFFF;
    font-family: "Kanit Medium";
}

dd{
    font-size: 0.9rem;
    color: #AEAEAE;
    font-family: "Kanit Light Italic";
}

.card-dd-status{
    width: 100%;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #C0C0C0;
    font-size: 0.9rem;
    font-family: "Kanit Light Italic";
    color: #3E3E3E;
    text-align: center;
}

.card-dd-status::before{
    content: 'DISCONNECT';
}

.card-dd-status[data-status='st1']::before{
    content: 'RUNNING';
}

.card-dd-status[data-status='st2']::before{
    content: 'IDLE';
}

.card-dd-status[data-status='st3']::before{
    content: 'ALARM';
}

.card-dd-status[data-status='st1']{
    background: #52834B;
    color: #FFFFFF;
}

.card-dd-status[data-status='st2']{
    background: #EECC1A;
}

.card-dd-status[data-status='st3']{
    background: #FE0000;
    color: #FFFFFF;
    animation: blink 1s infinite;
}

.card-dd-cycl{
    width: 100%;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #A2E0E8;
    font-size: 0.9rem;
    font-family: "Kanit Light Italic";
    color: #2F3231;
    text-align: center;
}


.card-dd-power{
    width: 100%;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: #C0C0C0;
    font-size: 0.9rem;
    font-family: "Kanit Light Italic";
    color: #3E3E3E;
    text-align: center; 
}

.card-dd-power::before{
    content: 'OFF';
}

.card-dd-power[data-status='st1']::before{
    content: 'ON';
}

.card-dd-power[data-status='st1'][status-type='bg_dr']::before{
    content: 'OFF';
}

.card-dd-power[data-status='st1']{
    background: #52834B;
    color: #FFFFFF;
}

.card-dd-power[data-status='st0'][status-type='bg_dr']{
    background: #52834B;
    color: #FFFFFF;
}

.card-dd-power[data-status='st1'][status-type='bg_dr']{
    background: #C0C0C0;
    color: #3E3E3E;
}

.card-chart-info{
    width: 100%;
    height: 22rem;
    border: 2px solid #4A4A4A;
    border-radius: 0.5rem;
    padding:0.5rem;
    margin-top: 0.5rem;
}

.card-chart-info figure div{
    height: 19.5rem;
}

@media screen and (height: 1076px) {
    .card-chart-info{
        height: 25.2rem;
    }

    .card-chart-info figure div{
        height: 23rem;
    }
}

@media screen and (height: 1076px) {
    .card-chart-info{
        height: 25.2rem;
    }

    .card-chart-info figure div{
        height: 23rem;
    }
}

.card-select{
    width: 20rem;
    margin: 0rem 1rem;
}