:root {
    --bg-card:#2F3231;
}

[data-theme="dark"] {
    --bg-card:#2F3231;
}

@font-face {
    font-family: "Kanit Bold";
    src: url(../font/Kanit/Kanit-Bold.ttf);
}

.main-grid{
    display: grid;
    grid-template-areas:
    "mc-info mc-layout"
    "mc-info mc-gantt";
    grid-template-columns: 20% 79.5%;
    grid-template-rows: 77vh 15vh;
    grid-gap: 0.5rem;
}

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

.mc-info{
    grid-area: mc-info;
    background: var(--bg-card);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.mc-layout{
    grid-area: mc-layout;
    background: var(--bg-card);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.mc-gantt{
    grid-area: mc-gantt;
    background: var(--bg-card);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card{
    width: 100%;
    border-radius: 0.3rem;
    border: 2px solid #464848;
    background: transparent;
}

.card-head{
    width: 100%;
    padding: 0.5rem;
    border-bottom: 2px solid #464848;
}

.card-head p{
    margin: 0rem;
    font-size: 1.3rem;
    color: #C7C7C7;
    font-family: "Kanit Bold";
}

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

.cbh-info{
    height: 85vh;
    overflow-y: hidden;
    overflow-x: hidden;
}

.cbh-perfom{
    height: 25.5vh;
}

@media screen and (height: 1080px) {
    .cbh-info{
        height: 87vh;
    }
}

dt{
    color: #FFFFFF;
    margin-bottom: 0rem;
    padding-top: 0.2rem;
}

dd{
    margin-bottom: 0rem;
}

dd div span{
    font-style: italic;
    color: #AEAEAE;
    font-size: 1rem;
    padding-right: 0rem !important;
}

.card-layout{
    width: 100%;
    height: 67vh;
}

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

.highcharts-figure{
    width: 100%;
    position: relative;
}

#Time_Chart{
    position: absolute;
    width: 100%;
    height: 15rem;
    top: -1rem;
}

.cbh-perfom figure{
    height: 12rem;
}

@media screen and (height: 1080px) {
    #Time_Chart{
        height: 17rem;
    }

    
    .cbh-perfom figure{
        height: 14rem;
    }
}


/* Bnak Action */

/* status */
div[data-status=running],
div[data-status=running] .header-label-detail{
    background: #4CAF50;
    color: #FFFFFF;
}

div[data-status=idle],
div[data-status=idle] .header-label-detail{
    background: #FFFF01;
    color: #000000;
}

div[data-status=alarm],
div[data-status=alarm] .header-label-detail{
    background: #ED1C24;
    color: #FFFFFF;
    -webkit-animation: alarm 0.6s infinite alternate;
	animation: alarm 0.6s infinite alternate;
}

div[data-status=disconnect],
div[data-status=disconnect] .header-label-detail{
    background: #CCCCCC;
    color: #000000;
}

dl[data-status=running] dd .status{
    background: #4CAF50;
    color: #FFFFFF;
}

dl[data-status=idle] dd .status{
    background: #FFFF01;
    color: #000000;
}

dl[data-status=alarm] dd .status{
    background: #ED1C24;
    color: #FFFFFF;
    -webkit-animation: alarm 0.6s infinite alternate;
	animation: alarm 0.6s infinite alternate;
}

dl[data-status=disconnect] dd .status{
    background: #CCCCCC;
    color: #000000;
}

dl[data-status=running] dd .status::before{
    content: 'Running';
}

dl[data-status=idle] dd .status::before{
    content: 'Idle';
}

dl[data-status=alarm] dd .status::before{
    content: 'Alarm';
}

dl[data-status=disconnect] dd .status::before{
    content: 'Disconnect';
}

.select-chart{
    display: none;
}

.main-cbh-info {
    display: grid;
    height: 100%;
    overflow-y: hidden;
    grid-gap: 0.2rem;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}

.main-cbh-info-robot{
    display: grid;
    height: 30%;
    overflow-y: hidden;
    margin-bottom: 0.1rem;
    grid-gap: 0.2rem;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}

.card-main-cbh-info{
    background: #B7B7B7;
    border: 1px solid #B7B7B7;
    border-radius: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.5rem;
    font-weight: bold;
}

.main-cbh-info-robot .card-main-cbh-info{
    font-size: 0.7rem;
    padding: 0.1rem;
}

.name-robot{
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0rem;
}

[status-type=bg_g][data-status=st1],
[status-type=bg][data-status=st1],
[status-type=bg_gr][data-status=st0],
[status-type=bg_rg][data-status=st1]{
    background: #4CAF50;
    color: #414141;
    border: 1px solid #4CAF50;
}

[status-type=bg_r][data-status=st1],
[status-type=bg][data-status=st3],
[status-type=bg_gr][data-status=st1],
[status-type=bg_rg][data-status=st0]{
    background: #FE0000;
    color: #FFFFFF;
    border: 1px solid #FE0000;
    -webkit-animation: alarm 0.6s infinite alternate;
	animation: alarm 0.6s infinite alternate;
}

[status-type=bg_r][data-status=st1] div::before{
    border: 3px solid #FE0000;
}

[status-type=bg_y][data-status=st1],
[status-type=bg][data-status=st2]{
    background: #FFFF01;
    color: #414141;
    border: 1px solid #FFFF01;
}

@-webkit-keyframes alarm {
	0% { background-color: #ED1C24; }
	100% { background-color: #ED1C2448; }
}
@keyframes alarm {
	0% { background-color: #ED1C24; }
	100% { background-color: #ED1C2448; }
}