/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#CCFF99;
    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    /*min-height:100vh;*/
	height: 100%;
	width:100%;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/*   Griglia dello schermo */

.sidebar, .sidebar2, .header {

		top: 0;
		width: 100%;
}

.sidebar {
    grid-area: sidebar;
	background-color: #E60000;	
  }

  .sidebar2 {
    grid-area: sidebar2;
	background-color: #E60000;
  }
  
  .info {	
    grid-area: info;
	background-color: #CCFF99;
/*	border-radius:2px;			*/
	vertical-align:center;

  }  

  .content {	
    grid-area: content;
	background-color: #CCFF99;
/*	border-radius:2px;			*/
	vertical-align:center;

  }

.header {
	grid-area: header;
	background-color: #E60000;			/*#E60000*/
	color: yellow;						/*#CCFF99*/
	font-size: 2em;
	font-weight: 600;
	text-align:center;
	}
  
.footer {
		position: fixed;
//		left: 0;
		bottom: 0;
		width: 100%;
		background-color:#CCFF99;
		color: white;
		text-align: center;
		height: 2.5em;
	}
 


.grid-container {
  display: grid;
  grid-template-columns: 64px auto 64px; 		/* Three columns, 100px, 50px, and 200px wide */
  grid-template-rows: 64px 32px calc(100vh - 64px); 			/* Two rows, 50px and 100px tall*/
	grid-template-areas:
        "sidebar header sidebar2"
		"info info info"
        "content content content"
        "footer footer footer";
  gap: 1px;
 // background-color: #EDEDE7;			/*#EDEDE7      #ff0000 */
//  padding: 1px;  
  align-content:center;
}

.grid-container > div {
/*  background-color: rgba(255, 255, 255, 0.8);    /*tutto bianco */
  text-align: center;
  padding: 0 0;
  font-size: 1.2em;
}

/* Portrait layout (default) */
.app {
    /*background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:1%;
    top:1%;
    height:99%;                   /* text area height */
    width:99%;                   /* text area width */
    text-align:center;
    padding:1px 1px 1px 1px;     	/* image height is 200px (bottom 20px are overlapped with text) */
    margin:-1px 0px 0px -1px;  		/* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:50px 1px 1px 50px;  /* padding-top + padding-bottom + text area = image height */
        margin:-1px 0px 0px -1px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
	
}


/* Ensure the main container takes full width and height */ 
/* Portrait layout (default) */

	button{
		color:#00ff00;
		font-family: Arial;			//width: 80%;
		text-align: center;border: solid thin #008000; cursor: pointer;								
		-webkit-border-radius: .6em;-moz-border-radius: .6em;border-radius: .6em;				
		-webkit-box-shadow: 2px 2px 3px #999;box-shadow: 2px 2px 2px #bbb;  background-color: #000404;
		-webkit-transition-duration: 0.4s; transition-duration: 0.4s;
		}
		
	button:hover{background-color:#00ff00; color: black}
	button:active{position: relative; top: 0.5em}
	
	input{ 
		padding:2px 2px;
		color:#000000;
		font-family: Arial;	/*width: 98%;*/
		font-size:1.2em;
		text-align: center;
		text-decoration:none;
		text-shadow:0px 1px 0px #e1e2ed;
		background:linear-gradient(to bottom, #ededed 5%, #bab1da 100%);
		background-color:#ededed;		
		border: solid thin #008000; 
		cursor: pointer;								
		-webkit-border-radius: .2em;
		-moz-border-radius: .2em;
		border-radius: 5px;				
		-webkit-box-shadow: 2px 2px 3px #999;
		box-shadow:inset 0px 1px 0px 0px #899599;
		-webkit-transition-duration: 0.4s; 
		transition-duration: 0.4s;
		display:inline-block
		
		}	
	
	input:hover{background-color:#00ff00; color: black}
	
	input:active{position: relative; top: 0.5em}
	
	span{background-color:#FF0000;}
	
	
	.input1 {			
			-webkit-border-radius: .2em;
			-moz-border-radius: .2em;
			border-radius: .2em;
			box-shadow:inset 0px 1px 0px 0px #899599;
			background:linear-gradient(to bottom, #ededed 5%, #bab1da 100%);
			background-color:#ededed;
			border-radius:5px;
			/*border:1px solid #d6bcd6; */
			display:inline-block;
			cursor:pointer;
			color:#000000;
			font-family:Arial;
			font-size:1.2em;
			padding:2px 2px;
			text-decoration:none;
			text-shadow:0px 1px 0px #e1e2ed;
			}
			
		
	
	/* variazioni a button*/
	.button {
			background-color: #04AA6D;			
			}
			
	.button2 	{
			padding: 3px;
			font-size:1.2em;
			color: #ffffff;
			font-weight:bold;
			text-shadow: 2px 2px 2px #000;
			border: solid thin #5b1e0d;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #ccc;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000),color-stop(0.4, #000f00));
			}
			
	.button3 	{
		width: 30%;
		padding: 2px;
		font-size:1em;
		color: #ffffff;
		font-weight:bold;
		text-shadow: 2px 2px 2px #000;
		border: solid thin #5b1e0d;
		border-radius: .4em;
		box-shadow: 3px 3px 3px #ccc;
		background-image: -webkit-gradient(linear, left top, left bottom,
		  from(#ff0000), to(#000000),color-stop(0.8, #0f0000));
			}	
			
	.button4 {													/*blu */
		box-shadow:inset 0px 1px 0px 0px #1564ad;
		background:linear-gradient(to bottom, #e1e9f2 2%, #65aff5 100%);
		background-color:#e1e9f2;
		border-radius:6px;
		border:1px solid #337bc4;
		display:inline-block;
		cursor:pointer;
		color:#000000;
		font-family:Arial;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 2px;
		text-decoration:none;
		text-shadow:0px 1px 0px #528ecc;
		}
	.button4:hover {
			background:linear-gradient(to bottom, #65aff5 20%, #e1e9f2 100%);
			background-color:#65aff5;
		}
	.button4:active {
			position:relative;
			top:5px;
		}
			
			
			
			
	.button5 {												/*grigio */
		box-shadow:inset 0px 1px 0px 0px #899599;
		background:linear-gradient(to bottom, #ededed 2%, #bab1ba 100%);
		background-color:#ededed;
		border-radius:6px;
		border:1px solid #d6bcd6;
		display:inline-block;
		cursor:pointer;
		color:#000000;
		font-family:Arial;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 2px;
		text-decoration:none;
		text-shadow:0px 1px 0px #e1e2ed;
		}
	.button5:hover {
		background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
		background-color:#bab1ba;
		}
	.button5:active {
		position:relative;
		top:5px;
		}		

	.button6 {													/*oliva */
		box-shadow:inset 0px 0px 14px -3px #f2fadc;
		background:linear-gradient(to bottom, #dbe6c4 5%, #5aa127 100%);
		background-color:#dbe6c4;
		border-radius:6px;
		border:1px solid #b2b8ad;
		display:inline-block;
		cursor:pointer;
		color:#000000;
		font-family:Arial;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 2px;
		text-decoration:none;
		text-shadow:0px 1px 0px #ced9bf;
		}
	.button6:hover {
		background:linear-gradient(to bottom, #5aa127 5%, #dbe6c4 100%);
		background-color:#5aa127;
		}
	.button6:active {
		position:relative;
		top:5px;
		}
			
		
	.button7 {												/*rosso */
		box-shadow:inset 0px 1px 0px 0px #e67a73;
		background:linear-gradient(to bottom, #faf5f5 5%, #f0554d 100%);
		background-color:#faf5f5;
		border-radius:6px;
		border:1px solid #ffffff;
		display:inline-block;
		cursor:pointer;
		color:#000000;
		font-family:Arial;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 2px;
		text-decoration:none;
		text-shadow:0px 1px 0px #b23e35;
		}
	.button7:hover {
		background:linear-gradient(to bottom, #f0554d 5%, #faf5f5 100%);
		background-color:#f6f6f6;
		}
	.button7:active {
		position:relative;
		top:5px;
		}		

	.button8 {									/*giallo*/
		box-shadow: 0px 1px 0px 0px #fff6af;
		background:linear-gradient(to bottom, #f7e888 5%, #c2841f 100%);
		background-color:#f7e888;
		border-radius:6px;
		border:1px solid #ffaa22;
		display:inline-block;
		cursor:pointer;
		color:#000000;
		font-family:Arial;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 2px;
		text-decoration:none;
		text-shadow:0px 1px 0px #ffee66;
		}
	.button8:hover {
		background:linear-gradient(to bottom, #c2841f 5%, #f7e888 100%);
		background-color:#c2841f
		}
	.button8:active {
		position:relative;
		top:1px;
		}
		
		
	.button9 {									/*giallo*/
	box-shadow:inset 0px 1px 0px 0px #ad918e;
	background:linear-gradient(to bottom, #f0e7df 5%, #d48c3f 100%);
	background-color:#f0e7df;
		border-radius:6px;
	border:1px solid #f09e57;
		display:inline-block;
		cursor:pointer;
	color:#000000;
		font-family:Arial;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 2px;
		text-decoration:none;
	text-shadow:0px 1px 0px #4d3534;
		}
	.button9:hover {
	background:linear-gradient(to bottom, #d48c3f 5%, #f0e7df 100%);
	background-color:#d48c3f;
		}
	.button9:active {
		position:relative;
		top:1px;
		}	
		
	
	.pcedisp {
		background-color: #1d3053;
		color:white; 				/*color:#00ff00;*/
		border: 2px solid green;
		margin:auto;
		padding: 1px;
		text-align:left;
		width:	99vw;
		font-size: 3.2vw;
		font-family: COURIER NEW;
		font-weight:bold;
			}
	.pcekey	{
		background-color: #EDEDE7;		
		color:#00ff00;
		border: 2px green;
		margin:auto;
		padding: 1px;
		width:	99vw;  		
		text-align:center;
/*		font-size: 1em;  */
		}
		
	.btn-keyb{
		width:	16vw;
		font-size:5vw;
		}		
			
	.pre{
		color:solid green;
		font-size:16px;
		margin:auto;
		
		}	
	
	


.h1 {
	height:1em;
    font-size:1em;
    font-weight:normal;
    margin:1px;
    overflow:visible;
    padding:1px 1px;
    text-align:center;
}

.event {
    border-radius:4px;
    color:blue;
    font-size:0.6em;
    margin:1px 1px;
    padding:2px 2px;
/*	width:	60%;  */


}

.event.listening {
    background-color:yellow;
    display:block;
}

.event.received {
    background-color:yellow;
    display:none;
	font-size:0.6em;
}

.event listening, .event received
	{
	bottom: 0;
	left: 0;
  }

#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}


@media screen and (prefers-color-scheme: dark) {
    body {
        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
    }
}

.dropbtn {
 /* background-color: #f9f9f9;*/
/*  color: white;*/
  height: 5vh;
  padding: 2px;
  font-size: 1em;
  font-family:Arial;
  border: none;
  min-width: 250px;
  text-align:left;
}

.dropdown {
  position: relative;
  display: inline-block;
  
}

.dropdown-content {		
  display: none;
  position: absolute;
  right: 0;
  background-color:	#E4E4E4;						/*sfondo*/
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
  border-radius:3px;

}

.dropdown-content a {
  color: black;
  padding: 4px 4px;
  text-decoration: none;
  display: block;
}

.show {display: block;}

.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}



.table {
	table-layout: auto;
	width: auto;
    border-spacing: 1px;
    border-collapse: collapse;
    background: #CCFF99;
    border-radius: 3px;
    margin: 3 auto;
    position: relative;
    overflow: hidden;

	
}

.table button {
    cursor: pointer;
}



td {
 /*   padding: 2px; */
    text-align: center;

}

thead tr {
 /*   height: 1em;	*/
	height:auto;
    background:#CCFF99;	/* #ffec64;*/
    font-size: 1em;

}

tr:nth-child(1) {
/*    height: 1em; */
	height:auto;
    background: #CCFF99 !important;		/*#ffec64*/
    border-color: #CCFF99;
}

tr {
 /*   height: 1em;  */
	height:auto;
 /*   border-bottom: 1px solid #C8D8C7;   */
	font-size: 1em;
}

tr:nth-child(even) {
    background: #CCFF99;

}

tr:nth-child(odd) {
    background: #CCFF99;		/*#ffec64*/

}

/* tr td:hover { background: #666; color: #FFF; }  */


.button-panel {
    margin: 0 auto;
    background-color:#CCFF99;
 /*   border: 1px solid crimson; */
    border-radius: 2px;
    padding: 2px;
/*  width: 90%;*/
  margin-top: 2px
}

.header1{
    text-align: center;
    width: 50%;
    background-color: #ffec64;
    margin-bottom: 2px !important;
    padding: 2px;
    margin: 0 auto;
    font-size: 1.2em;
    font-weight: 300;
    color: #7F3D17;
}
.form-control1 {						
    padding: 10px 20px;
    font-size: 20px;
    line-height: 1.42857143;
    border: 1px solid #ccc;
    border-radius: 4px;
	max-width:15%
}
.form-control2 {						
    padding: 10px 20px;
    font-size: 20px;
    line-height: 1.42857143;
    border: 1px solid #ccc;
    border-radius: 4px;

}

.btn {
    display: inline-block;
    padding: 3px 3px;
    margin-bottom: 0;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-danger:hover{
    background-color: #a83734;
    border-color: #a83734;
}
.btn-info:hover {
    background-color: #459eda;
    border-color: #459eda;
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-warning{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}



.btn-size10{
	width:	10%;
}
.btn-size15{
	width:	15%;
}

.btn-size20{
	width:	20%;
}

.btn-size30{
	width:	30%;
}

.btn-size40{
	width:	40%;
}
.btn-size45{
	width:	45%;
}

.btn-size50{
	width:	50%;
}
.btn-size60{
	width:	60%;
}

.btn-size80{
	width:	80%;
}
.btn-size90{
	width:	90%;
}

.btn-size100{
	width:	100%;
}

.selectedElement{
    background-color:#b2a4b0;
}

.btn-md{
    padding: 2px 2px;
    font-size: 15px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.btn-block{
    display: block;
 /*   width: 80%;  */
}
.btn-row{
    color: #fff;
    background-color: #01ACAC;

    border-color: #01ACAC;
}

.btn-row:hover{
    background-color: #027c7c;
    border-color: #027c7c;
}

.btn-success:hover{
    background-color: #348734;
    border-color: #348734;
}

/*------------------------------------*/

.container {
  display: block;
  position: relative;
  padding-left: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 1.2em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container1 {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	min-height: 100vh;
}

.flex-btn {
	flex: 1;
	-webkit-flex: 1;
	margin: 0 10px;
}

.icon-box {
	flex: 1 1 40%;
	-webkit-flex: 1 1 40%;
	margin-left: 5%;
	margin-right: 5%;
	border: 1px solid #666;
	border-radius: 4px;
	line-height: 2;
	text-align: center;
	/* ... */
}


/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

.label{
		display: inline-block;
		text-align: left;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.center {
	text-align:center;
	vertical-align: middle;
}

.richdata {
	background-color: #EDEDE7;
	color:#666666;
	font-size: 1.2em;
}

.loader {
  position: fixed;
  left: calc( 50% - 32px);	
  top: 96px;
  z-index: 1;
  width:  32px;
  height: 32px;
 margin: 10px 0 0 10px;
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



fieldset {
  border: 2px solid green;
  width: 80vw;
  margin:auto;
  text-align:left;
  font-size: 1.5em;
  color:blue;
}

legend {
  color: red;
  padding: 5px 5px;
}

fieldset input {
  text-align: left;
}

input[type=radio] {
    border: 3px;
    width: 4vw;
    height: 1em;
	margin: 5px;
}

input[type=checkbox] {
    border: 3px;
    width: 4vw;
    height: 1em;
	margin:5px;
}