﻿html {
    position: relative;
    min-height: 100%;
    min-width: 100%;
    height: 100%;
}

body {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    background-color: black;
}

main {
    height: 100%;
    width: 100%;
}

.container {
    height: 100%;
    width: 100%;
}

.contain {
    display: grid;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "video video video video"
        "cmd1 cmd1 cmd2 cmd2"
        "cmd3 cmd3 cmd4 cmd4"
        "cmd5 cmd5 cmd6 cmd6";
    grid-template-rows: 5px 480px repeat(3,1fr);
    grid-gap: 5px;
}

    .contain > header.status-header {
        background-color: green;
        grid-area: header;
        transition: background 1s ease-in-out;
    }

    .contain > .video-container {
        background-color: black;
        grid-area: video;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .contain > .cmd1 {
        grid-area: cmd1;
        background-color: black;
    }

    .contain > .cmd2 {
        grid-area: cmd2;
        background-color: black;
    }

    .contain > .cmd3 {
        grid-area: cmd3;
        background-color: black;
    }

    .contain > .cmd4 {
        grid-area: cmd4;
        background-color: black;
    }

    .contain > .cmd5 {
        grid-area: cmd5;
        background-color: black;
    }

    .contain > .cmd6 {
        grid-area: cmd6;
        background-color: black;
    }

button {
    width: 100%;
    height: 100%;
    background-color: #5f66e6;
    color: white;
    font-size: 24px;
    transition: background 1s ease-in-out;
}

.btn-active {
    background-color: orangered;
    transition: background 500ms ease-in-out;
}

.heartbeat {
    background-color: lightgreen!important;
}

.disconnected {
    background-color: red!important;
}

#image-display {
    width: 100%;
    overflow: hidden;
    height: 100%;
    display: block;
    object-fit: contain;
}
