/* CSS-Styling für die Schaltflächen */

	* {
		box-sizing			: border-box;
		font-family 		: sans-serif, arial, calibri;
		margin 				: 0;
		padding 			: 0;
		color				: #fff;
	}

	h1 {
		font-family			: "Arial Black", Arial, sans-serif;
		color				: #FFF;
		text-shadow			: .1em .1em .25em #000;
		font-weight			: 700;
		text-align			: center;
	}
	
	h2 {
		display				: flex;
		justify-content		: flex-start;
		align-items			: baseline;
		font-family			: "Arial Black", Arial, sans-serif;
		padding				: 1.5em 0 .25em .5em;
		margin				: 0;
		color				: #F00;
		text-shadow			: .1em .1em .25em #000;
		text-align			: left;
		text-transform		: uppercase;
		border-radius		: .25em .25em 0 0;
		font-weight			: bold;
		border				: 1px solid #900;
		font-size			: 1.5em;
		background-image	: radial-gradient(farthest-side at -25% 70%, rgba(0,0,0,0.75), rgba(150,0,0,0.75));

	}

	h3 {
		margin				: .25em 0 .25em 0;
		text-transform		: uppercase;
		font-size			: 1.5em;
		color				: rgba(255, 0, 0, .75);
		text-shadow 		: 0 0 .5em rgba(0, 0, 0, 1);
		font-weight			: 800;
		letter-spacing		: .125em;
	}

	p {
		color				: #FFF;
	}


	a,
	a:active,
	a:hover
	{
		text-decoration 	: none;
		color				: #fff;
		transition			: .25s ease-in;
	}
	
	a:hover
	{
		color				: #F00;
		transition 			: .25s ease-out;
	}

	body{
		width					: 100vw;
		height 					: 100vh;
		background-color		: #000;
		background-image		: url('https://www.noxic.de/images/logos/logo_big.png'); 
/*		background-image		: url('https://cam.noxic.de/picture.php');*/
		background-repeat		: no-repeat;
		background-attachment	: fixed;
		background-position		: center;
	}

	.box{
		/*margin					: .5em 1em;*/
		border-radius			: .5em;
		border					: 1px solid rgba(50,0,0,.5);
		background-color		: rgba(100,0,0,0.75);
		vertical-align			: middle;

	}

	#main {
		background-color	: rgba(15,15,15,.9);
		overflow-x			: hidden;

	}
	
	#header,
	#footer
	{
		position			: fixed;
		background-color 	: rgba(100,0,0,.9);
		box-shadow			: 0 0 .5em #900;
	}

	#header
	{
		width 				: 100%;
		top 				: 0;
		height				: 4em;
		border-bottom		: 1px solid #900;
	}

	#footer {
		border-top			: 1px solid #900;
		width 				: 100%;
		bottom				: 0;
	}
	
	#info {
		margin-bottom		: 2em;
	}
	
	#infotable {
		width				: 100%;
		justify-content		: center;
/*		background-color	: rgba(0,0,0,.5);*/
	}

	#infotable table.infotable {
		width				: calc(100% - 2em);
		padding				: 0;
		border-radius		: 0 0 .25em .25em;
		border-bottom		: 1px solid #900;
		border-left			: 1px solid #900;
		border-right		: 1px solid #900;

	}
	
	#infotable table.infotrable > tbody > tr > td {
		padding 	: .125em 1em;
		width 		: 50%;
	}
	
	#infotable th, #infotable td{
		vertical-align	: middle;
	}

	#cam {
		width 		: 100%;
		height 		: auto;
	}
	
	.cam {
		border		: none;
		width 		: 100%;
		height 		: 56.25%;
	}
	
	.debug 
	{
		position			: absolute;
		top					: 2em;
		right				: 2em;
		border				: 1px solid #0f0;
		z-index				: 1;
		background-color	: rgba(0,0,0,.5);
		font-size			: 1em;
		width				: 50vw;
	}
	
	#ctrl {
	}
	
	#ctrl-buttons {
		display				: flex;
		justify-content		: center;
	}

	.button {
		box-sizing			: border-box;
		padding				: 1em;
		margin				: 0;
		text-decoration		: none;
		border				: none;
		cursor				: pointer;
		border-radius 		: .5em;
		box-shadow 			: 0 0 .25em #000;
		height				: 4em;
		font-weight			: bold;
	}
	
	.button-red {
		color				: #500;
		background-color 	: #F00;
	}
	
	.button-green {
		color				: #050;
		background-color 	: #0F0;
	}

	.event_anz
	{
		color				: #500;
		background-color	: #F00;
		height				: 4em;
		width				: 100%;
	}

	.mixed {
		width				: 100%;
		display				: flex;
		justify-content		: space-between;
		align-items			: center;
	}


	.left {
		/*border				: 1px solid #0f0; */
		font-weight			: normal;
		text-align 			: left;
	}

	td.block 
	{
		padding				: 0 0 2em 0;
	}
	
	td.block p
	{
		text-align			: center;
		margin				: 0 2em 0 2em;
	}
	
	td.block p,
	td.left p
	{
		color				: rgba(255, 255, 255, 1);
		font-weight			: bold;
		text-shadow			: 0 0 .75em #f00;
	}
	
	.right {
		text-align			: right;
		font-weight			: bold;
	}

	td.right p{
		color				: #F00;
	}
	
	.center {
		font-weight			: bold;
		text-align			: center;
		vertical-align		: middle;
	}

	.black
	{
		text-transform		: uppercase;
		color				: rgba(150,0,0,.5);
	}
	
	green {
		color				: green;
		font-weight			: bold;
	}
	
	red {
		color		: red;
		font-weight	: bold;
	}
	
	.cam-image{
		width				: 95%;
		height				: auto;
	}
	
	table.logfile {
		width				: 100%;
	}
	
	table.logfile p 
	{
	
	}

	table.logfile > tbody > tr 
	{
	}
	
	table.logfile > tbody > tr > td 
	{

		padding				: 0 .5em 0 .5em;
		margin				: 0;
	}
	
	.flex 
	{
		display				: flex;
		justify-content		: space-between;	
	}
	
	.image_graph {

		height				: 35px;
		width				: 235px;
		object-fit			: cover;
		object-position		: top left;
	}
	
	select,
	input,
	button
	{
		text-align			: center;
		border				: none;
		outline				: none;
		color				: #000;
		font-weight			: bold;
		font-size			: 2em;		
		height				: 2em;
		vertical-align		: middle;
		background-color	: rgba(255, 0, 0, .75);
		width				: 100%;
	}

	input[type=checkbox]:checked
	{
		color				: #0F0;
		background-color	: #0F0;
	}

	input[type=checkbox]
	{
		width				: 1.5em;
		font-size			: 1.5em;
		color				: #0F0;
		background-color	: #F00;
		
	}

	input[type=text],
	input[type=password]
	{
		background-color 	: #000;
		border				: 2px solid rgba(0, 0, 0, .25);
		border-radius		: .5em;
		color				: #900;
		border				: 2px solid #900;
	}
	
	input[type=text]:disabled 
	{
		background-color	: rgba(150,150,150,.5);
		color				: #AAA;
		border				: none;
	}
	
	.error {
		background-color	: rgba(0, 0, 0, .5);
	}
	
	#infotable td.galery
	{
		width				: calc(50% - 0.5em);
		vertical-align		: text-top;
		
	}

	div.files 
	{
		display				: block;
		flex-wrap			: wrap;
		width				: 100%;
		border				: 1px solid #F00;
		padding				: .5em;
	}
	
	div.file
	{
		margin-bottom		: 1em;
	}
	
	div.file a 
	{
	
	}

	p.pic_desc {
		margin				: -1.75em auto 1em auto;
		
		width				: 100%;
		text-align			: center;
		font-size			: 1.3em;
		color				: #F00;
		text-shadow			: 0 0 .1em #000;
	}

	
	div.files div.file
	{
		margin				: auto 0;
	}

	img.files-image
	{
		width				: calc(100%);
		height				: auto;
	}	
	
	video.files-video
	{
		width				: calc(100%);
		height				: auto;
	}	

	table#alarm 
	{
		width				: 100%;
		border				: 0px solid #000;
	}
	
	img.countdown 
	{
		margin				: auto 0;
		padding				: .5em;
		height				: 3em;
		width				: auto;
		border-radius		: .5em;
		border				: .125em solid #900;
	}
	
	.user-noti-top
	{
		border-top			: 2px solid #F00;
		padding				: 2em 0;

	}
	
	.user-noti-bottom
	{
	}
	
	.small 
	{
		font-size			: .75em;
	}
	
		
	#alarm td {
		padding				: .25em;
	}
	
	.symbol
	{
		height				: 5em;
		width				: auto;
	}

	ul {
		text-align			: center;
		list-style			: none;
		border				: 1px solid #f00;
		padding				: 1em;
	}
	
	li {
		margin				: .25em 0 0 0;
	}
	
	div#gal_nav
	{
		width				: 100%;
		margin 				: 2em auto 2em auto;
		display				: flex;
		justify-content		: space-evenly;
		flex-grow			: 1;
	}
	
	div#button_back,
	div#button_next,
	div#curr_folder 
	{
		width				: 30%;
	}	
	
	div#button_back .button,
	div#button_next .button,
	div#curr_folder .button
	{
		font-size			: 1.25em;
	}
	
	div#log
	{
		display				: block;
	}
	
	div#log_content
	{
	}
	
	td.log_time
	{
		width				: 50%;
	}
	
	td.log_data
	{
		width				: 50%;
	}
	
	div.log_anz
	{
		width				: 100%;
	}