html, body {margin: 0; padding:0; height: 100%;}
html {
    
}
body {
    margin-top: 12px;
    overflow: hidden;
}

/* ************** TILES ******************* */

#grid-container {
    margin-top: 0.5em;
    display: grid;
    gap: 6px;
    /*grid-template-columns: repeat(3, 1fr);
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 2fr 1fr;*/
}
.grid3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid1 {
    grid-template-columns: repeat(1, 1fr);
}

.tile {
    border: 1px rgba(100,100,100,0.2) dashed;

}
.tileLarge {
    border: 1px rgba(100,100,100,0.2) solid;
    grid-column: span 2;
    grid-row: span 2;

}
.tileXLarge {
    border: 1px rgba(100,100,100,0.2) solid;
    grid-column: span 3;
    grid-row: span 3;

}
.tile .tileInsider {
    min-height: 310px;
    max-height: 310px;
    height: 310px;
}
.tileMedium .tileInsider {
    min-height: 480px;
    max-height: 480px;
    height: 480px;
}
.tileLarge .tileInsider {
    min-height: 620px;
    max-height: 620px;
    height: 620px;
}
.tileXLarge .tileInsider {
    min-height: 930px;
    max-height: 930px;
    height: 930px;
}

.tileAddingButton {
    width: 100%; text-align: center; height: 100%;
    position: absolute;  margin: 0; top: 40%; cursor: pointer;
}

.tileInsider {
    position: relative;
    /*background-color: rgba(0,0,0,0.8);*/
    /*background: linear-gradient(0deg,rgba(0,0,0,0.5), #000);*/
    text-align: center;
    width: 100%;

    
}
.tileInsider:not(.video_active) {
    background: linear-gradient(0deg,rgba(0,0,0,0.3), #000);
}
/*  *********** VIDEOS  ******************** */
video {
    margin:0; padding: 0;
    cursor: crosshair;
    margin-left: auto; margin-right: auto;
    overflow: hidden;
}
video.local {
    cursor: grab;
}
.videoobject {
    overflow: hidden;
}

.tileInsider:hover .videobuttons {
    opacity: 0.8;
}
.videobuttons {
    z-index: 4;
    position: absolute;
    right: 1.5em;
    top: 1em;
    opacity: 0;
}

.videotitle {
    margin-left: 1em;
    background-color: rgba(0,0,0,1);
    color: #fff;
    padding: 0.5em;
    border-radius: 4px;
    font-size: 0.8em;
}

/*  ************ Animation ************************** */
.video_active {
    /*outline: rgb(255, 244, 91) solid 1px;*/
    /*
    outline: groove 8px #FC5185;
    transition: outline 0.6s linear infinite;
    */
    background: linear-gradient(0deg, #000, #272727);
    position: relative;
    /*
    --border-size: 3px;
    --border-angle: 0turn;
    background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03) !important; 
    background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover ;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    -webkit-animation: bg-spin 6s linear infinite;
            animation: bg-spin 6s linear infinite;
    */
}

.video_active:before, .video_active:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: steam 60s linear infinite;
}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.video_active:after {
	filter: blur(6px);
}

@-webkit-keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}
@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}


/*  ************************************** */

#log {
    padding: 0;
    display: none; position: fixed; 
    width: 500px; height: 200px; 
    color: #AAA;
    bottom: 0; right: 0; 
    background-color: rgba(0,0,0,0.5);
    border: 1px green dotted; 
    font-size: 0.6em;
}

/*  ****** Fix an issues that Autocomplete appear below the modal ************ */
.ui-autocomplete {
    z-index: 100051 !important; /* Higher than Bootstrap modal (1050) */
    position: absolute; /* Ensures it stays above */
    background: white; /* Ensures visibility */
    border: 1px solid #ddd; /* Adds some separation */
}