#app_div{
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
}

#app_div_contents{
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#app_iframe{
    display:block;
    position:fixed;
    width:90%;
    height:90%;
    top: 50%;
    left: 50%;
    padding:5px;
    transform: translate(-50%, -50%);
    border: #1b1b1b 5px solid;
    background-color:#222222;
}


#camLargeContainer{
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    width:80%;
    max-height:80%;
    transform: translate(-50%, -50%);
    border: #1b1b1b 5px solid;
}

#camLarge{
    width:100%;
    height:100%;
}



.control_div{
	
}


.control_div .mdi::before {
	width: 100%;
    font-size: 60px !important;
    line-height: 60px !important;
    color: #FFFFFF;
    position: absolute;
    top: -60px;
    padding-top: 10px;
    left: -1px;
    border: 1px 1px 1px 0px;
    border-style: solid;
    border-color: #999999;
    border-width: 1px 1px 0px 1px;
}
	

.control_div a{
	position: relative;
    display: inline-block;
    margin-top: 70px;
    width: 80px;
    height: 40px;
    margin-left: 10px;
    padding: 10px;
    vertical-align: bottom;
    color: #FFFFFF;
    border-style: solid;
    text-decoration: none;
    border-color: #999999;
    border-width: 0px 1px 1px 1px;
}

.element_on{
	color:#FFFF00;
}

#sv_return{
	background-color:#FFFFFF;
	height:500px;
	overflow:auto;
	text-align:left;
	clear:both;
	max-width:1000px;
}

#sv_cmd, #sv_entity, #sv_value,#sv_run{
	width:calc(100% / 4 - 5px);
	padding:5px;
}

#sv_cmd, #sv_entity, #sv_value{
	float:left;
}

#sv_run{
	float: right;
    background-color: #88FF88;
    border: #88FF88 2px solid;
}

#sv_return pre {
	outline: 1px solid #ccc; 
	padding: 5px; 
	margin: 5px; 
	
}

#sv_return .string { color: green; }
#sv_return .number { color: darkorange; }
#sv_return .boolean { color: blue; }
#sv_return .null { color: magenta; }
#sv_return .key { color: red; }

#edit_cams{
	background-color:#FFFFFF;
	padding:20px;
	width:100%;
}

#edit_cams input{
	background-color:#FFFFFF;
	padding:5px;
	border:0px;
}

#edit_cams a, .button{
	background-color:#222222;
	padding:10px;
	text-decoration:none;
	color:#FFFFFF;
}

#edit_cams tr:first-of-type a{
	display:inline-block;
	margin-left:5px;
}

#edit_cams tr:first-of-type{
	height:60px;
}


#edit_cams tr>td input{
	width:100%;
}

#edit_cams tr>td:nth-of-type(1){
	width:5%;
}

#edit_cams tr>td:nth-of-type(2){
	width:5%;
}

#edit_cams tr>td:nth-of-type(3){
	width:10%;
}

#edit_cams tr>td:nth-of-type(4){
	width:50%;
}

#edit_cams tr>td:nth-of-type(5){
	width:5%;
}

#edit_cams tr>td:nth-of-type(6){
	width:25%;
}

#webcams>img, #time, .spacer{
    cursor: pointer;
    vertical-align:middle;

}

.rows_2{
    display:inline-block;
    width: calc(100% / 2);
    height:calc(100% / 2); 
}

.rows_3{
    display:inline-block;
    width: calc(100% / 3);
    height:calc(100% / 3); 
}

#time, .spacer{
    display:inline-block;
    color:#FFFFFF;
}

#time{
    font: 5em bold;
    font-family: 'Play', sans-serif;
    line-height:250px;
}

.spacer{
    font: 3em bold;
    font-family: 'Play', sans-serif;
}

#webcams{
    width:100%;
    height:calc(100% - 60px);
    margin:auto;
}

#keypad{
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    padding:5px;
    transform: translate(-50%, -50%);
    border: #1b1b1b 5px solid;
    background-color:#222222;
}

#keypad a{
    display: inline-block;
    width:100px;
    height:100px;
    text-align: center;
    line-height: 100px;
    background-color: #444444;
    color:#FFFFFF;
    margin:2px;
    font-size:1.5em;
    text-decoration: none;
}

.numpad_special{
    font-size:1.5em;
}

body{
    background-color:#1b1b1b;
    overflow-y: auto;
    text-align:center;
}

#toolbar{
    position: fixed;
    bottom:0px;
    z-index: 1000;
    width:100%;
    text-align: center;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.7161239495798319) 0%, rgba(0,0,0,0) 100%);
}

.toolbar_icon{
    height:60px;
    width:60px;
    margin:0px 3px;
}






#visual{
    padding:10px;
    width:315px;
    margin-bottom: 4px;
    font-size:1.3em;
    color:#FFFFFF;
    background-color: #444444;
    border: 0px;
}