html, body {
  height: 100%;
}

body {
  display: flex;
  flex-flow: column;
    min-height:100vh;
   
}

.header {
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  background: #123f6c;
  color: white;
      margin-bottom: 25px;
}

.header img{
    height:80px;
}

.config .input-group-text {
  width: 140px;
}

.config .alert:empty {
  display: none;
}

.video-container{
  position:relative;
  flex:0 0 75%;
  height:100%;
}

/* video area */
#room{
  width:100%;
  height:100%;
  position:relative;
}

/* floating controls */
.control{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);

  display:flex;
  gap:10px;
  padding:10px 14px;

  background:rgba(0,0,0,0.75);
  border-radius:12px;

  z-index:999;
}

.control select{
  width:140px;
}
/*.control {*/
/*      display: flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*    padding: 8px;*/
/*    background-color: #000000d6;*/
/*    margin: 5px 8px;*/
/*    border-radius: 8px;*/
/*    flex-wrap: wrap;*/
/*    align-content: space-around;*/
/*    justify-content: center;*/
/*    width: 420px;*/
/*    align-self: center;*/
/*}*/

/*.control{*/
/*  position:fixed;*/
/*  bottom:10px;*/
/*  left:50%;*/
/*  transform:translateX(-50%);*/
/*}*/

/*.control select {*/
/*  display: inline;*/
/*  width: max-content;*/
/*}*/



/*#room {*/
/*  display: flex;*/
/*  align-content: center;*/
/*  flex-wrap: wrap;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  vertical-align: middle;*/
/*  flex: 1;*/
/*  height: 100%;*/
/*  overflow: hidden;*/
/*  position: relative;*/
 
/*}*/

.main-container{
  display:flex;
  flex:1;
  height:100%;
  overflow:hidden;
}

/* 75% video area */
#room{
  flex:0 0 75%;
  position:relative;
  display:flex;
  align-content:center;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* 25% form area */
#forms{
  flex:0 0 25%;
  padding:15px;
  border-left:1px solid #ddd;
 
  overflow-y:auto;
}

#forms h5{
  margin-bottom:15px;
}


.participant {
  position: absolute;
  display: flex;
  
  background-color: #ffffff;
}

.participant .info {
position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background-color: #0f4a85;
    color: white;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    font-size: 8px;
}

.participant .info i.material-icons {
  font-size: 14px;
}

.participant video {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 18px;
  border: 1px solid #3b3333;
}

.participant img {
  width: 20%;
  aspect-ratio: 1;
  position: relative;
  margin: auto;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 8px 0;
  object-fit: cover;
   background-image: url('https://tse2.mm.bing.net/th/id/OIP.WyRImfRsgXetpRLA5D3QggHaHa?rs=1&pid=ImgDetMain&o=7&rm=3');
    background-size: cover; /* Scale image to fill */
    background-position: center;
}

/* Mobile Layout */
@media (max-width: 768px){

  .main-container{
    flex-direction: column;
  }

  #room{
    flex:1;
    width:100%;
  }

  #forms{
    display:none;
  }

  .control{
    bottom:15px;
  }

}

/* Hide modal button on desktop */
.form-toggle{
  display:none;
}

@media (max-width:768px){
  .form-toggle{
    display:inline-flex;
  }
}