#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;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

#camLarge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

/* Camera status indicator */
.cam-status {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 6px rgba(39, 174, 96, 0.6);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s;
}
body:hover .cam-status { opacity: 1; }




.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 {
    display: grid;
    width: 100vw;
    height: 100vh;
    gap: 2px;
    background: #0a0a0a;
    /* Grid set dynamically by cameras.js — default 3x3 */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

#webcams > img, #webcams > video, #webcams > div {
    width: 100%;
    height: 100%;
    min-height: 0;   /* prevents grid blowout from large images */
    min-width: 0;
    object-fit: fill;
    cursor: pointer;
    background: #111;
    transition: opacity 0.2s;
}

#webcams > img:hover {
    opacity: 0.85;
}

#time, .spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Play', -apple-system, sans-serif;
}

#time {
    font-size: 4em;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

.spacer {
    font-size: 1.5em;
    font-weight: 500;
    color: #888;
}


#keypad {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#keypad a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #2a2a2a;
    color: #fff;
    margin: 3px;
    font-size: 1.4em;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s;
}

#keypad a:hover { background: #3a3a3a; }
#keypad a:active { background: #444; }

.numpad_special {
    color: #e74c3c !important;
    font-weight: 600;
}


* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    user-select: none;
}

#toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    padding: 0 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:hover #toolbar { opacity: 1; }

.toolbar_icon {
    height: 36px;
    width: 36px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s;
}
.toolbar_icon:hover { transform: scale(1.1); }

#visual {
    padding: 8px 14px;
    width: 240px;
    font-size: 1.2em;
    color: #fff;
    background: #222;
    border: 1px solid #444;
    border-radius: 6px;
    text-align: center;
}