/*
	* Settings
	*
	* D. Shulga, 2020, HighDim GmbH
	*/

body{
	font-family:Arial, Helvetica, sans-serif !important;
	font-size:14px !important;
	margin: 0 auto;
	overflow: auto;
	background-color: rgb(200,200,200);
}

.Content{
	margin: 0 auto;
	width: 500px;
}

.Box{
	border:1px solid rgb(200,200,210);
	border-radius: 5px;
	background-color: rgb(252,252,252);
	margin:10px;
	box-shadow: 5px 10px 20px #888888;
}

.Title{
	font-weight: bold;
	font-style: italic;
	color:rgb(50,50,100);
	border-bottom: 1px solid rgb(200,200,210);
	width: 100%;
	margin-bottom: 10px;
	text-align: left;
}

.Label{
	vertical-align: middle;
	line-height: 30px; 
}

.TextField{
	font-weight: bold;
	line-height: 30px; 
	vertical-align: middle;
	width: 330px;
}

.Row{
	margin:7px;
	display: flex;
	flex-direction: row;
	flex-wrap: none;
	justify-content: space-between;
}

.Bottom{
	/*border: solid 1px black;*/
	margin: 0 auto;
	padding:0px;
	z-index: 0;
	position:relative;
	overflow:auto; 
	height: 20px;
	text-align:center;
	padding-top: 5px;
}


.Input{
	width: 320px;
	font-size:14px;
	border-radius: 5px;
	border: 1px solid rgb(100,100,100);
	padding:4px;
}

/*
.Input{
	width: 250px; 
	border-radius: 5px;
	padding:5px;
	text-align:center;
	border: 1px solid rgb(100,100,100);
	margin:10px;	
}
*/

.Button{
	font-family:Arial, Helvetica, sans-serif !important;
	font-size:14px !important;
	width: 100px; 
	height: 30px; 
	text-decoration: none;
	cursor: pointer;
	background-color: rgb(50,130,215);
	border: none;
	border-radius: 5px;
	color: white;
}

.Button:hover{
	/*background-color:rgb(250,130,215);
	color: white;*/

	background-color:rgb(56,238,218);
	color: black;

}




.RecordButton{
	font-family:Arial, Helvetica, sans-serif !important;
	font-size:14px !important;
	width: 100px; 
	height: 30px; 
	text-decoration: none;
	cursor: pointer;
	background-color: rgb(255,50,50);
	border: none;
	border-radius: 5px;
	color: white;
}

.RecordButton:hover{
	background-color: rgb(255,155,155);
}


.RecordCounter{
	font-family:Arial, Helvetica, sans-serif !important;
	font-size:14px !important;
	width: 30px; 
	height: 30px; 
	text-decoration: none;
	cursor: pointer;
	background-color: rgb(255,50,50);
	border: none;
	border-radius: 5px;
	color: white;
	line-height: 30px; 
	vertical-align: middle;
	padding-left: 20px;
}

/* modal */

/* The Modal (background) */
.Modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 50px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	
	/*background-color: rgb(0,0,0);*/ /* Fallback color */
	/*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
}

/* video containers*/
.VideoContainer{
	/*border: solid 1px black;*/
	margin: 0 auto;
	padding:0px;
	z-index: 0;
	position:relative;
	overflow:hidden;
	width: 642px;
	height: 362px;
	background-color: black;
}

.RemoteVideoContainer {
	border: solid 1px black;
	margin:0px;
	padding:0px;
	z-index: 0;
	position: absolute;
	overflow: hidden;
	display:block;
}

.LocalVideoContainer {
	z-index: 1;
	/*border: solid 1px black;*/
	text-align: center;
	overflow: hidden;
	position: absolute;
}

.RemoteOverlay{
	z-index: 1;
	/*border: solid 1px black;*/
	text-align: center;
	overflow: hidden;
	position: absolute;
	/*background-color: transparent;*/
}




.Caption{
	font-weight: bold;
	font-style: bold;
	color:white;
	width: 100%;
	text-align: center;
	font-size: 20px;
	margin: 10px;

	
}


.ChatContent{
	display: flex;
	flex-direction: column;
	flex-wrap: none;
	height: 200px; 
	/*border:1px solid gray; */
	overflow-y: auto;
	font-size: 10px !important;
}


.ChatRowLocal{
	display: flex;
	flex-direction: row;
	flex-wrap: none;
	justify-content:flex-end;
}

.ChatRowRemote{
	display: flex;
	flex-direction: row;
	flex-wrap: none;
	justify-content:flex-start;
}

.ChatMessageLocal{
	padding:5px; 
	margin:5px; 
	border: 1px solid white; 
	background-color: rgb(200,255,200);
	text-align:right; 
	width:200px; 
	border-radius:10px;
}


.ChatMessageRemote{
	padding:5px; 
	margin:5px; 
	border: 1px solid white; 
	background-color: rgb(255,255,200);
	text-align:left; 
	border-radius:10px;
}


.MoveButton{
	height: 30px;
	width: 30px;
	line-height: 30px;
	margin: 10px;
	padding: 10xp;
	
	
	font-size: 30px;
	cursor: pointer;
}