body      { background: #fff; color: #000; text-align: center; font-size: 18px; font-family: "Libre Franklin", sans-serif; font-weight:200; margin: 0px; padding: 0px; overflow: hidden; }
h1        {}

header    { clear: both; font-size: 12px; margin: 0px; margin-bottom: 10px; border-radius: 5px; display:none; }
footer    { clear: both; font-size: 12px; padding-top: 20px; margin-bottom: 20px; border-radius: 5px; }
section   { clear: both; border-radius: 5px; text-align: center; }
/*video     { border-radius: 5px; box-shadow: 0px 0px 96px 0px rgba(255, 255, 255, 0.75); -webkit-box-shadow: 0px 0px 96px 0px rgba(255, 255, 255, 0.75); -moz-box-shadow: 0px 0px 96px 0px rgba(255, 255, 255, 0.75); }*/

header h1 { margin-left: 10px; margin-right: 10px; padding-top: 30px; padding-bottom: 30px; vertical-align: sub; }

.logo_wrapper  { text-align: left; }
.logo    { width: 170px; position: relative; padding: 2.5rem;}

label     { display: inline; cursor: pointer; text-transform: uppercase;}
input     { font-size: 11px; color: black; cursor: auto; padding: 6px 8px; border-radius: 0px; border: 1px solid black; font-size: 12px; margin: 10px 10px 0px 0;}
button    { font-size: 11px; color: white; cursor: pointer; }

button    { text-align: center; background-color: black; padding: 8px; outline: 1px; border: 0px; border-color: white; border-style: outset; border-radius: 0px; text-transform:uppercase; }
button:active { background-color: grey; border-style: inset; transform: translateY(1px); }

input:focus,
textarea:focus { outline: none; }

.leftmargin  { margin-left:  5px; }
.rightmargin { margin-right: 5px; }

.wrapper  { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; grid-auto-rows: minmax(20px, auto); align-items: center; margin-top:50px; }
.cell_left   { grid-column:  1; grid-row: 1; text-align: right;  }
.cell_center { grid-column:  2; grid-row: 1; text-align: center; width: 400px; }
.cell_right  { grid-column:  3; grid-row: 1; text-align: left;   }

.container { width: auto; text-align: center; }

.message {
	clear: both;
	margin: 10px;
	color: red;
}

.message-token {
	clear: both;
	width: 100%;
	color: black;
	background-color: #fff;
/*	padding: 6px 8px;
	margin-top: 15px; */
	border-radius: 4px;
	visibility: hidden;
}
	
input#myInput {
	width: 100%;
	margin-top: 15px;
}	
                      
.textleft { text-align: left; }

#rtc_media_player {max-width: 100%; max-height: 100vh;}

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 280px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: -150%;
  left: 50%;
  margin-left: -145px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: 5px solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}