/* #local-video {
    position: absolute;
    width: 130px !important;
    height: 104px !important;
    z-index: 100 !important;
    border: 10px solid goldenrod;
    top: 0;
    left: 0;
    position: relative;
    left: 400px;
    top: 57px;
  }
  
   */



   *, ::after, ::before {
    box-sizing: border-box;
}


html {
	display: block;
	line-height: 1.15;
}

div {
	display: block;
}

body {
	margin: 0;
    line-height: 1.5;
    color: #212529;
    text-align: left;
	display: block;
	background-color: #a1d5ed;
	font-family: 'auto';
}

.h-100 {
	height: 100%!important;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

.ml-auto, .mx-auto {
    margin-left: auto!important;
}

.mr-auto, .mx-auto {
    margin-right: auto!important;
}

.font-weight-bold {
    font-weight: 600!important;
}

.text-center {
    text-align: center!important;
}


.jumbotron {
    background-color: #e9ecef;
}



.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}


.container {
    margin-right: auto;
    margin-left: auto;
}



/* For Desktop  */
	.col-12 {
		position: relative;
		width: 40%;
	}

	.jumbotron {
		padding: 2rem 1rem;
		margin-bottom: 2rem;
		border-radius: .3rem;
	}

	#h1 {
		font-size: 1.5rem;
		font-weight: 300;
		line-height: 1.2;
		margin-bottom: 1rem!important;
		margin-top: 0px!important;
	}
	
	

@media (orientation: landscape) {
	.btn-danger {
		display:block;
		font-size : 15px;
		margin:auto;
		width: 15%;
		height: 25px;
		color: #fff;
		background-color: #25274d;
		border-color: #25274d;
	}
		
	.btn {
		display:block;
		font-size : 15px;
		margin:auto;
		margin-right:0px;
		width: 15%;
		height: 25px;
		color: #fff;
		background-color: #25274d;
		border-color: #25274d;
	}
	
	.btn_option {
		display:block;
		font-size : 15px;
		margin:auto;
		width: 50%;
		height: 25px;
		color: #fff;
		background-color: #25274d;
		border-color: #25274d;
	}
	
	
	
	#room_value {
		margin-left: 20px;
	}
	
	.local_div {
		width:33%;
		float:left
	}

	.remote_div {
		width:33%;
		float:left
	}

	.remote2_div {
		width:33%;
		float:left
	}

	#video_container {
		display: flex;
		width: 85%;
		margin: auto;
		height: 80% 
	}
	
	video {
		width:100%;
	}

}
/* For Mobile */

@media (orientation: portrait)
{
	.row {
		margin-right: -15px;
		margin-left: -15px;
	}

	.col-12 {
		padding-right: 15px;
		padding-left: 15px;
		position: relative;
		width: 100%;
	}

	.container {
		max-width: 310px;
		padding-right: 5px;
		padding-left: 5px;
	}

	.jumbotron {
		/* padding: 0.02rem 2rem; */
		padding: 2rem 1rem;
		margin-bottom: 2rem;
		border-radius: .3rem;
	}

	#h1 {
		font-size: 1.5rem;
		font-weight: 300;
		line-height: 1.2;
		margin-bottom: 1rem!important;
		margin-top: 0px!important;
	}

	#label_name {
		font-size: 17px;
		width: 100%;
	}

	.form-group {
    margin-bottom: 1rem;
	}

	.form-control {
		height:35px;
		font-size:20px;
		display: block;
		width: 100%;
		padding: .375rem .75rem;
		font-weight: 400;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		border-radius: .25rem;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}

	.btn {
		font-size : 16px;
		width: 100%;
		height: 35px;
		color: #fff;
		background-color: #25274d;
		border-color: #25274d;
	}

	.local_div {
		display: flex
		;
		width: 100%;
		position:relative;
    overflow:hidden;
    z-index:-1;
	}

	.remote_div {
		width: 120px;
		display: block;
		position:absolute;
		top:0px;
		right:0px;
		z-index:1;
	}

	.remote2_div {
		width: 120px;
		display: block;
		position:absolute;
		top:95px;
		right:0px;
		z-index:1;
	}

	#video_container {
		height: 80%;
		position:relative;
		display:flex;
		flex-wrap:wrap
	}
	
	.remote_div video {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.remote2_div video {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.btn-danger {
		font-size : 16px;
		width: 100%;
		height: 35px;
		color: #fff;
		background-color: #25274d;
		border-color: #25274d;
	}
	
}
.tooltip{
	position: absolute;
    background: rgba(0, 0, 0, 0.5);
    left: 331px;
    top: 300px;
    color: antiquewhite;
}
.tooltip2{
	position: fixed;
    background: rgba(0, 0, 0, 0.5);
    left: -40px;
    top: 100px;
    justify-content: center;
    color: antiquewhite;
}
.header{
	font-size: 29px;
	font-weight: 600;
	color:white;
	font-family:'Courier New', Courier, monospace
}
.loader {
	color: #200d0d;
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    left: 200px;
    border-radius: 50%;
    position: fixed;
    text-indent: 0;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  @-webkit-keyframes load4 {
	0%,
	100% {
	  box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
	}
	12.5% {
	  box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
	}
	25% {
	  box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
	}
	37.5% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}
	50% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}
	62.5% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
	}
	75% {
	  box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
	}
	87.5% {
	  box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
	}
  }
  @keyframes load4 {
	0%,
	100% {
	  box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
	}
	12.5% {
	  box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
	}
	25% {
	  box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
	}
	37.5% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}
	50% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}
	62.5% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
	}
	75% {
	  box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
	}
	87.5% {
	  box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
	}
  }