#loading{
  position:absolute;
  top:0vh;
  width:100vw;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#initial{
  display:none;
}
#identify{
  display:none;
  position:absolute;
  top:0vh;
  width:100vw;
  height:20vh;
  display: flex;
  align-items:center;
  justify-content: center;
  background:#333;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:5vh;
}
#idol{
  position:absolute;
  top:20vh;
  width:100vw;
  height:80vh;
  margin-left:2.5vw;
  display: table;
  align-items:center;
  justify-content: center;
  background:#333;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:5vh;
}
.cid{
  width:15vw;
  height:10vw;
  background: #c39bd3;
  margin:2vw;
  border-radius:4px;
  display: table-cell;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:4vh;
}

.cid-reg{
  width:15vw;
  height:10vw;
  background: #82e0aa;
  margin:2vw;
  border-radius:4px;
  display: table-cell;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:4vh;
}

.clear-reg{
  position:absolute;
  width:10vw;
  height:3vw;
  bottom:2vh;
  left:41vw;
  margin:2vw;
  border-radius:4px;
  background: #cc9999;
  color:#000;
  font-family:tahoma,sans serif;
  font-size:2.5vh;
}

.dwnldir{
  position:absolute;
  width:10vw;
  height:3vw;
  bottom:2vh;
  left:47vw;
  margin:2vw;
  border-radius:4px;
  background: #cc9999;
  color:#000;
  font-family:tahoma,sans serif;
  font-size:2.5vh;
}

#main{
  display:none;
}
#selfid{
  position:absolute;
  top:0vh;
  width:100vw;
  height:20vh;
  display: flex;
  align-items:center;
  justify-content: center;
  background:#333;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:5vh;
  margin-bottom:2vh;
}

#remoteid{
  position:absolute;
  top:0vh;
  left:50vw;
  width:50vw;
  height:20vh;
  display: none;
  align-items:center;
  justify-content: center;
  background:#333;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:5vh;
  margin-bottom:2vh;
}

#call{
  position:relative;
  top:20vh;
  width:100vw;
  height:60vh;
  display: flex;
  align-items:center;
  justify-content: center;
  background:#333;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:5vh;
}
#control{
  position:absolute;
  top:87vh;
  width:100vw;
  height:10vh;
  display: flex;
  align-items:center;
  justify-content: center;
  background:#333;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:2vh;
}


#buttons{
  position:absolute;
  top:0vh;
  width:1.8vw;
  height:100vh;
  color:#fff;
  background:#333;
  opacity:0.9;
  font-family:tahoma,sans serif;
  font-size:2vh;
  overflow-X:hidden;
  overflow-y:hidden;
  cursor:pointer;
  transition: 0.2s;
  background-image:url('../images/contact.png');
  background-repeat:no-repeat;
  background-position: center right;
  background-size:25px;
  border:5px solid #333;
}

#buttons:hover{
  width:20vw;
  background-image:none;
  overflow-y:auto;
}

.video{
  background:#555;
  border-radius:8px;
  width:44vw;height:33vw;
  margin:2vw;
}


.contacts:hover{
  background: #95fbc0;
}

.contacts{
  width:15vw;
  height:3vw;
  background: #82e0aa;
  margin:2vw;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:3vh;
  cursor:pointer;
}

.contacts-unreg{
  width:15vw;
  height:3vw;
  background: #c39bd3;
  margin:2vw;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:3vh;
  cursor:pointer;
  opacity:0.6;
}

.callbutton{
  width:15vw;
  height:3vw;
  background: #c39bd3;
  margin:2vw;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  font-family:tahoma,sans serif;
  font-size:3vh;
}

#recordings{
  position:absolute;
  top:0vh;
  right:0vw;
  width:1.8vw;
  height:100vh;
  color:#fff;
  background:#333;
  opacity:0.9;
  font-family:tahoma,sans serif;
  font-size:2vh;
  overflow-X:hidden;
  overflow-y:hidden;
  cursor:pointer;
  transition: 0.2s;
  background-image:url('../images/recordings.png');
  background-repeat:no-repeat;
  background-position: center left;
  background-size:25px;
  border:5px solid #333;
}

#recordings:hover{
  width:20vw;
  background-image:none;
  overflow-y:auto;
}

.recording{
  width:15vw;
  height:3vw;
  background: #ddd;
  margin:2vw;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#000;
  text-decoration:none;
  font-family:tahoma,sans serif;
  font-size:2vh;
  cursor:pointer;

}

.recording:hover{
  background:#eee;
}

#callrecordbar,#receiverecordbar{
  position:absolute;
  bottom:36px;
  left:30px;
  width:43.7vw;
  height:40px;
  background:#aaa;
  opacity:0.8;
  border-radius-bottom:8px;
  display:none;
}

.record{
  position:absolute;
  left:5px;
  top:5px;
  padding:5px;
  width:75px;
  text-align:center;
  background:#bbb;
  color:#333;
  border:1px solid #333;
  border-radius:10px;
  /*background-image:url('../images/rl_off.png');
  background-repeat:no-repeat;
  background-position: center right;
  background-size:20px;*/
  animation:recording 0s infinite;
}

    @keyframes recording
    {
      0%   {background: #bbb}
      50%  {background: #cc5658}
      100% {background: #bbb}
    }

.record:hover{
  background-color:#ddd;
}

.stop{
  position:absolute;
  left:85px;
  top:5px;
  padding:5px;
  width:75px;
  text-align:left;
  background:#bbb;
  color:#333;
  border:1px solid #333;
  border-radius:5px;
  background-image:url('../images/stop.png');
  background-repeat:no-repeat;
  background-position: center right;
  background-size:20px;
}

.stop:hover{
  background-color:#ddd;
}



.pause{
  position:absolute;
  left:165px;
  top:5px;
  padding:5px;
  width:80px;
  text-align:left;
  background:#bbb;
  color:#333;
  border:1px solid #333;
  border-radius:5px;
  background-image:url('../images/pause.png');
  background-repeat:no-repeat;
  background-position: center right;
  background-size:20px;
}

.pause:hover{
  background-color:#ddd;
}

.download_folder{
  position:absolute;
  left:250px;
  top:5px;
  padding:5px;
  width:300px;
  text-align:left;
  background:#bbb;
  color:#333;
  font: 400 13.3333px Arial;
}

#dlf{
  position:absolute;
  left:255px;
  top:5px;
  padding:5px;
  width:300px;
  text-align:left;
  background:#bbb;
  color:#333;
  border:1px solid #333;
  border-radius:5px;
}

#clear-recordings{
  width:10vw;
  height:2vw;
  background:#cc9999;
  margin:2vw;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#000;
  text-decoration:none;
  font-family:tahoma,sans serif;
  font-size:2vh;
  cursor:pointer;

}