.height-0-16 {height: calc(0/16 * 100%);}
.height-1-16 {height: calc(1/16 * 100%);}
.height-2-16 {height: calc(2/16 * 100%);}
.height-3-16 {height: calc(3/16 * 100%);}
.height-4-16 {height: calc(4/16 * 100%);}
.height-5-16 {height: calc(5/16 * 100%);}
.height-6-16 {height: calc(6/16 * 100%);}
.height-7-16 {height: calc(7/16 * 100%);}
.height-8-16 {height: calc(8/16 * 100%);}
.height-9-16 {height: calc(9/16 * 100%);}
.height-10-16 {height: calc(10/16 * 100%);}
.height-11-16 {height: calc(11/16 * 100%);}
.height-12-16 {height: calc(12/16 * 100%);}
.height-13-16 {height: calc(13/16 * 100%);}
.height-14-16 {height: calc(14/16 * 100%);}
.height-15-16 {height: calc(15/16 * 100%);}
.height-16-16 {height: calc(16/16 * 100%);}
.height-auto {height: auto;}

.width-0-16 {width: calc(0/16 * 100%);}
.width-1-16 {width: calc(1/16 * 100%);}
.width-2-16 {width: calc(2/16 * 100%);}
.width-3-16 {width: calc(3/16 * 100%);}
.width-4-16 {width: calc(4/16 * 100%);}
.width-5-16 {width: calc(5/16 * 100%);}
.width-6-16 {width: calc(6/16 * 100%);}
.width-7-16 {width: calc(7/16 * 100%);}
.width-8-16 {width: calc(8/16 * 100%);}
.width-9-16 {width: calc(9/16 * 100%);}
.width-10-16 {width: calc(10/16 * 100%);}
.width-11-16 {width: calc(11/16 * 100%);}
.width-12-16 {width: calc(12/16 * 100%);}
.width-13-16 {width: calc(13/16 * 100%);}
.width-14-16 {width: calc(14/16 * 100%);}
.width-15-16 {width: calc(15/16 * 100%);}
.width-16-16 {width: calc(16/16 * 100%);}
.width-auto {width: auto;}

.red {background-color: red;}
.green {background-color: green;}
.blue {background-color: blue;}
.yellow {background-color: yellow;}
.cyan {background-color: cyan;}
.magenta {background-color: magenta;}
.white {background-color: white;}
.special {background-color: rgb(73, 73, 73);}
.transparent {opacity: 0.5;}

.hide {
    visibility: visible;
}

body {
    /* background-color: gray; */
    overflow: hidden;
}

img {
    /* height: 25vh; */
    /* width: auto; */
}

#canvasOutput {
    background-color: white;
    /* height: 50vw; */
    /* width: 80vw; */
    /* width: 200px; */
    /* width: 400px; */
    width: 99%;
    height: auto;
    max-height: 100%;
}

#videoSrc {
    width: 99%;
    height: auto;
    max-height: 100%;
    /* background-color: black; */
    /* height: 150px; */
    /* height: 50%; */
    /* width: 200px; */
    /* width: 100%; */
    /* height: 100%; */
    /* max-height: 100%; */
}

#flowProgramming {
	/* background-color: rgb(73, 73, 73); */
}

#generatedVideo {
    /* visibility: hidden; */
    background-color: white;
}

.container-fluid {
    height: 100vh;
    width: 100vw;
}

.context-menu {
	top: 10px !important;
}

.analysis-canvas {
    background-color: black;
	height: 90%;
	width: 90%;
}

.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}