.main-grid{
    display: grid;
    grid-template-areas:
    "card-1 card-2 card-9 card-9 card-9"
    "card-1 card-3 card-9 card-9 card-9"
    "card-4 card-4 card-9 card-9 card-9"
    "card-5 card-5 card-6 card-7 card-8";
    grid-template-columns: 15.3% 11% 24% 24% 24%;
    grid-template-rows: 12.5vh 12.5vh 32.6vh 32.6vh;
    grid-gap: 0.5rem;
}

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

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

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

.card-2{
    grid-area: card-2;
    background: linear-gradient(45deg, #2F3231 10%, #16A086);
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
}

.card-3{
    grid-area: card-3;
    background: linear-gradient(45deg, #2F3231 10%, #91C090);
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
}

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

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

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

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

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

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

figure #chart_mttr,
figure #chart_mtbf,
figure #chart_power_consumption,
figure #chart_total_production{
    height: 18rem;
}

figure #chart_availability{
    height: 12rem;
}

figure #chart_reason_ng{
    height: 17.5rem;
}

@media screen and (height: 1080px) {
    figure #chart_mttr,
    figure #chart_mtbf,
    figure #chart_power_consumption,
    figure #chart_total_production{
        height: 20rem;
    }

    figure #chart_availability{
        margin-top: 1.5rem;
        height: 14.5rem;
    }

    figure #chart_reason_ng{
        height: 20rem;
    }
}

@media screen and (height: 1076px) {
    figure #chart_mttr,
    figure #chart_mtbf,
    figure #chart_power_consumption,
    figure #chart_total_production{
        height: 20rem;
    }

    figure #chart_availability{
        margin-top: 1.5rem;
        height: 14.5rem;
    }

    figure #chart_reason_ng{
        height: 14.5rem;
    }
}

.legend-pie{
    color: #F4F4F2;
    font-family: "Kanit Regular";
    margin: 0rem;
    font-size: 0.7rem;
    padding-right: 0.5rem;
}

.bi.run{
    color: #52834B;
}

.bi.idl{
    color: #EECC1A;
}

.bi.alrm{
    color: #FE0000;
}

.bi.disc{
    color: #C0C0C0;
}

.text-val{
    width: 100%;
    text-align: end;
    color: #F4F4F2;
    font-family: "Kanit Medium";
    font-size: 2.5rem;
    line-height: 4rem;
    margin: 0rem;
}

.card-val-reason{
    width: 100%;
    height: auto;
    padding: 0.5rem;
    border: 2px solid #686868;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
}

.card-reason{
    width: 20%;
    text-align: center;
}

.card-reason div{
    width: 100%;
    height: 1.8rem;
    border-radius: 0.2rem;
    border: 1px solid #2F3231;
}

.card-reason:nth-child(1) div{
    background: #911F1D;
}

.card-reason:nth-child(2) div{
    background: #C52925;
}

.card-reason:nth-child(3) div{
    background: #E4302B;
}

.card-reason:nth-child(4) div{
    background: #EE6A67;
}

.card-reason:nth-child(5) div{
    background: #EFA19F;
}

.card-reason p{
    font-family: "Kanit Italic";
    color: #D8D8D8;
    font-size: 0.8rem;
    margin: 0rem;
}

.legendt-status{
    font-family: "Kanit Regular";
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin: 0rem;
    padding-right: 0.5rem;
}

.card-layout{
    width: 100%;
    height: 31.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}


@media screen and (height: 1080px) {
    .card-layout{
        height: 36.5rem;
    }
}

@media screen and (height: 1076px) {
    .card-layout{
        height: 36.5rem;
    }
}

.grid-layout{
    display: grid;
    grid-template-areas:
    "lyt-1 lyt-2 lyt-3 lyt-4 lyt-5 lyt-6 lyt-6 lyt-7 lyt-8"
    "lyt-9 lyt-9 lyt-9 lyt-10 lyt-10 lyt-10 lyt-11 lyt-11 lyt-11"
    "lyt-12 lyt-12 lyt-12 lyt-12 lyt-12 lyt-13 lyt-13 lyt-13 lyt-13";
    grid-template-columns: 8rem 8rem 10rem 10rem 8rem 4rem 4rem 8rem 8rem;
    grid-template-rows: 7rem 10rem auto;
    grid-gap: 0.5rem;
}

.lyt-1{
    grid-area: lyt-1;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
}

.lyt-2{
    grid-area: lyt-2;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
}

.lyt-3{
    grid-area: lyt-3;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
    padding-right: 2rem;
}

.lyt-4{
    grid-area: lyt-4;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
    padding-left: 2rem;
}

.lyt-5{
    grid-area: lyt-5;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
}

.lyt-6{
    grid-area: lyt-6;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
}

.lyt-7{
    grid-area: lyt-7;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
}

.lyt-8{
    grid-area: lyt-8;
    display: flex;
    justify-content: center;
    align-items: start;
    align-content: start;
    flex-wrap: wrap;
}

.rel-run{
    position: absolute;
    transform-style: preserve-3d;
	transform-origin: bottom;
    display: none;
}

[data-status=st1] .rel-run{
    display: block;
}

.rel-run::after {
	content: '';
	display: flex;
	width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, transparent 0%, transparent 70%, #787676 70%, #787676 100%);
	background-size: 1rem 100%;
    animation: animate-road linear 1s infinite;
}

@keyframes animate-road {
	from {
		background-position: 50px;
	}
	
	to {
		background-position: 0;
	}
}

.lyt-9{
    grid-area: lyt-9;
    display: flex;
    justify-content: end;
    position: relative;
}

.lyt-9 .rel-run:nth-child(2){
    top: 5.8rem;
    right: 0rem;
    width: 18.7rem;
    height: 2.7rem;
}

.lyt-9 .rel-run:nth-child(2)::after{
    animation-direction: reverse;
}

.lyt-9 .rel-run:nth-child(3){
    top: 0.5rem;
    left: 11.5rem;
    width: 5rem;
    height: 2.7rem;
    transform:rotate(270deg);
}

.lyt-9 i{
    content: url('../icon/icon-rel-1.svg');
    width: 70%;
    margin-left: 10rem;
}

.lyt-9[data-status='st1'] i{
    content: url('../icon/icon-a-rel-1.svg');
}

.lyt-10{
    grid-area: lyt-10;
    display: flex;
    justify-content: end;
    position: relative;
}

.lyt-10 .rel-run:nth-child(2){
    top: 5.8rem;
    right: 0rem;
    width: 16rem;
    height: 2.7rem;
}

.lyt-10 .rel-run:nth-child(3){
    top: 0.5rem;
    left: 11.9rem;
    width: 5rem;
    height: 2.7rem;
    transform:rotate(270deg);
}

.lyt-10 i{
    content: url('../icon/icon-rel-2.svg');
    width: 70%;
}

.lyt-10[data-status='st1'] i{
    content: url('../icon/icon-a-rel-2.svg');
}

.lyt-11{
    grid-area: lyt-11;
    display: flex;
    justify-content: start;
    position: relative;
}

.lyt-11 .rel-run:nth-child(2){
    top: 5.8rem;
    left: 0rem;
    width: 16rem;
    height: 2.7rem;
}

.lyt-11 .rel-run:nth-child(3){
    top: 0.5rem;
    left: 8.8rem;
    width: 5rem;
    height: 2.7rem;
    transform:rotate(270deg);
}

.lyt-11 i{
    content: url('../icon/icon-rel-3.svg');
    width: 77%;
}

.lyt-11[data-status='st1'] i{
    content: url('../icon/icon-a-rel-3.svg');
}

.lyt-12{
    grid-area: lyt-12;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
}

.lyt-13{
    grid-area: lyt-13;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
}

.status-machine{
    width: 100%;
    height: 0.7rem;
    border-radius: 0.1rem;
    background: #C0C0C0;
}

.status-machine[data-status='st1']{
    background: #52834B;
}

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

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

.grid-layout div .machine,
.grid-layout a .machine{
    width: 100%;
    margin-bottom: 0.5rem;
}

.grid-layout div .robot{
    width: 58%;
    margin-bottom: 0.5rem;
}

.lyt-9 img{
    width: 18rem;
}

.lyt-10 img{
    width: 15rem;
}

.lyt-11 img{
    width: 15rem;
}

.text-mch-name{
    font-family: "Kanit Medium";
    color: #FFFFFF;
    font-size: 0.8rem;
    margin: 0rem;
}

.card-ipc{
    width: 6rem;
    height: auto;
    margin: 0rem 0.2rem;
}

.card-ipc img{
    width: 100%;
    margin-bottom: 0.5rem;
}