body {
	padding-top: 10px;
	padding-bottom: 40px; //
	background-color: #eee;
}

.form-signin {
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}

.form-signin .form-signin-heading, .form-signin .checkbox {
	margin-bottom: 10px;
}

.form-signin .checkbox {
	font-weight: normal;
}

.form-signin .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}

.form-signin .form-control:focus {
	z-index: 2;
}

.form-signin form:input {
	margin-top: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.form-signin input {
	margin-top: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.form-signin button {
	margin-top: 10px;
}

.has-error {
	color: red
}

#message {
	display: none
}

.join {
	position: relative;
	margin: 0 auto;
	padding: 20px 20px 20px;
	width: 310px;
	background: white;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	/*Transition*/
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.join:before {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
	z-index: -1;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}

.join h1 {
	margin: -20px -20px 21px;
	line-height: 40px;
	font-size: 15px;
	font-weight: bold;
	color: #555;
	text-align: center;
	text-shadow: 0 1px white;
	background: #f3f3f3;
	border-bottom: 1px solid #cfcfcf;
	border-radius: 3px 3px 0 0;
	background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
	background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
	background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
	background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
	-webkit-box-shadow: 0 1px whitesmoke;
	box-shadow: 0 1px whitesmoke;
}

.join p {
	margin: 20px 0 0;
}

.join p:first-child {
	margin-top: 0;
}

.join input[type=text], .join input[type=password] {
	width: 278px;
}

.join p.submit {
	text-align: center;
}

:-moz-placeholder {
	color: #c9c9c9 !important;
	font-size: 13px;
}

::-webkit-input-placeholder {
	color: #ccc;
	font-size: 13px;
}

#room {
	text-align: center;
	max-height: 100%;
}

#button-leave {
	/*position: absolute; */
    /* top: 19px; */
    /* right: 16px; */
    width: 131px;
    /* height: 33px; */
    color: #d11830;
}

.participant {
	border-radius: 4px;
	/* border: 2px groove; */
	margin-left: 5;
	margin-right: 5;
	width: 150;
	text-align: center;
	overflow: hide;
	float: left;
	padding: 5px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	/*Transition*/
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.participant:before {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
	z-index: -1;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}

.participant:hover {
	opacity: 1;
	background-color: 0A33B6;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.participant video, .participant.main video {
	width: 100%; ! important;
	height: auto;
	!
	important;
}

.participant span {
	color: PapayaWhip;
}

.participant.main {
	width: 20%;
	margin: 0 auto;
}

.participant.main video {
	height: auto;
}

.animate {
	-webkit-animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: 0.5s;
	-moz-animation-fill-mode: both;
	-o-animation-duration: 0.5s;
	-o-animation-fill-mode: both;
	-ms-animation-duration: 0.5s;
	-ms-animation-fill-mode: both;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.removed {
	-webkit-animation: disapear 1s;
	-webkit-animation-fill-mode: forwards;
	animation: disapear 1s;
	animation-fill-mode: forwards;
}

@
-webkit-keyframes disapear { 50% {
	-webkit-transform: translateX(-5%);
	transform: translateX(-5%);
}

100%
{
element.style {
	position: absolute;
	top: 19px;
	right: 16px;
	width: 131px;
	height: 33px;
	border: 3px solid #100f0f;
}

-webkit-transform












































:






















 






















translateX












































(200%);
transform












































:






















 






















translateX












































(200%);
}
}
@
keyframes disapear { 50% {
	-webkit-transform: translateX(-5%);
	transform: translateX(-5%);
}

100%
{
-webkit-transform












































:






















 






















translateX












































(200%);
transform












































:






















 






















translateX












































(200%);
}
}
a.hovertext {
	position: relative;
	width: 500px;
	text-decoration: none !important;
	text-align: center;
}

a.hovertext:after {
	content: attr(title);
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.5em 20px;
	width: 460px;
	background: rgba(0, 0, 0, 0.8);
	text-decoration: none !important;
	color: #fff;
	opacity: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}

a.hovertext:hover:after, a.hovertext:focus:after {
	opacity: 1.0;
}

/* new css for the chat box */
#msgBox {
	height: 200px;
	margin-bottom: 5px;
	overflow-x: hidden;
	margin-bottom: 5px;
}

#show-msg-window {
	
}

#msg-area {
	display: block;
	padding: 10px;
	border: black 2px;
	border-style: inset;
}

#msg-text-field {
	
}

#send-btn {
	
}

#room {
	border: 3px solid rgb(16, 15, 15);
}

.glyphicon.glyphicon-envelope {
	font-size: large;
}

#progress_bar {
	margin: 10px 0;
	padding: 3px;
	border: 1px solid #000;
	font-size: 14px;
	clear: both;
	opacity: 0;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	-webkit-transition: opacity 1s linear;
}

#progress_bar.loading {
	opacity: 1.0;
}

#progress_bar .percent {
	background-color: #99ccff;
	height: auto;
	width: 0;
}

.form-group span {
	position: absolute;
	left: 282px;
	top: 265px;
	padding: 9px 8px;
	color: #aaa;
	transition: 0.3s;
	font-size: 17px;
}



/* CHANGES MADE FOR TEST */
/* .btn-circle.btn-xl {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
} */
#tooldiv{
background: #ddd;
    padding: 12px 18px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 600px;
    width: 380px;	
}
/* .material-icons{
	position: absolute;
    left: 50%;
    margin-left: 13px;
    font-size: 30px;
    top: 33%;
}
.glyphicon-record:before {
    content: "\e165";
    position: absolute;
    left: 50%;
    margin-left: -14px;
    font-size: 30px;
    top: 29%;
    margin-top: -25px;
} */