@media all and (display-mode: browser) {
		  .hideInBrowser {
		    display: none;
		  }
		}
		.paused {
            color: gray;
        }
		
		.silver {
		            color: silver;
		        }
		
		.table {
		  --bs-table-bg: initial;
		}
		
		tr.eventType0 {
            background-color: #bee5eb;
        }
		tr.eventType1 {
            background-color: #c3e6cb;
        }
		tr.eventType2 {
            background-color: #f5c6cb;
        }
		tr.eventType3 {
            background-color: #b8daff;
        }
		tr.eventType4 {
            background-color: #17a2b8;
        }
		tr.eventType7 {
            background-color: #ffeeba;
        }
		tr.eventType9 {
		   display: none;
		}
		
		#video {
		  border: 1px solid black;
		  box-shadow: 2px 2px 3px black;
		  width: 100%;
		}

		#photo {
		  border: 1px solid black;
		  box-shadow: 2px 2px 3px black;
		  width: 100%;
		 
		}

		#canvas {
		  display: none;
		}

		.camera {
		  width: 80%;
		  text-align: center;
		  display: inline-block;
		}

		.output {
		  width: 100%;
		  display: inline-block;
		  vertical-align: top;
		}
		
		.time {
			text-align: right;			
		}
		
		.invalid {
			color: orangered;
		}

		
		.btnOverVideo{
			display: grid;
			  position: absolute;
			  margin-left: auto;
			  margin-right: auto;
			  left: 16px;
			  background-color: rgb(0 150 0 / 50%);
			  border: 1px solid rgb(255 255 255 / 70%);
			  box-shadow: 0px 0px 1px 2px rgb(0 0 0 / 20%);
			  font-size: 14px;
			  font-family: "Lucida Grande", "Arial", sans-serif;
			  color: rgb(255 255 255 / 100%);
		}

		.contentarea {
		  font-size: 16px;
		  font-family: "Lucida Grande", "Arial", sans-serif;
		  width: 760px;
		}
		
		.userNameDiv {
			width:max-content;
			padding: 2px 5px;
		}