#btnSettingsClose {
  display: none;
}

body.connected #btnSettingsClose {
  display: block;
}

body.connected #connect-button {
  display: none;
}

#connect-area{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:min-content min-content;
    grid-auto-flow:column;
    grid-gap:10px;
    margin-bottom:15px
}
#options-area{
    display:flex;
    flex-wrap:wrap;
    margin-left:1.25rem;
    margin-right:1.25rem;
    column-gap:3rem;
    row-gap:1rem;
    margin-bottom:10px
}
#actions-area{
    display:grid;
    grid-template-columns:fit-content(100px) auto;
    grid-gap:1.25rem;
    margin-bottom:15px
}
#inputs-area{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-gap:1.25rem;
    margin-bottom:10px
}
#chat-input-area{
    margin-top:1.2rem;
    display:grid;
    grid-template-columns:auto min-content;
    gap:1.25rem
}
#screenshare-area{
    position:relative;
    margin-bottom:15px;
    display:none;
}
#screenshare-area video{
    width:100%;
    max-height:100%;
    border:3px solid rgba(0,0,0,.5)
}
#participants-area, #areaLocalParticipant{
    /*display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px*/
}

#participants-area>.participant.hasVideo, #areaLocalParticipant>.participant{
    width:100%
}

#participants-area>.participant:before, #areaLocalParticipant>.participant.hasVideo:before{
    content:"";
    display:inline-block;
    width:1px;
    height:0;
    padding-bottom:56.25%
}
#log-area{
    margin-top:1.25rem;
    margin-bottom:1rem
}
#log{
    width:66.6%;
    height:100px
}

.participant{
    position:relative;
    padding:0;
    margin:0;
    border-radius:5px;
    border:3px solid rgba(0,0,0,0);
    overflow:hidden;
}

#participants-area .participant {
  max-width: 300px;
}

#participants-area .participant.hasVideo {
  max-width: 100%;
}

.participant video{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#aaa;
    object-fit:contain;
    border-radius:5px;
}
.participant .info-bar{
    position:absolute;
    width:100%;
    bottom:0;
    display:grid;
    color:#eee;
    padding:2px 8px;
    background-color:#00000059;
    grid-template-columns:minmax(50px,auto) 1fr minmax(50px,auto);
    z-index:5
}
.participant .size{
    text-align:center
}
.participant .right{

}
.participant.speaking{
    border:3px solid rgba(94,166,190,.7)
}
.participant .mic-off{
    color:#d33;
    text-align:right
}
.participant .mic-on{
    text-align:right
}
.participant .connection-excellent{
    color:green
}
.participant .connection-good{
    color:orange
}
.participant .connection-poor{
    color:red
}
.participant .volume-control{
    position:absolute;
    top:4px;
    right:2px;
    display:flex;
    z-index:4;
    height:100%
}
.participant .volume-control>input{
    width:16px;
    height:40%;
    -webkit-appearance:slider-vertical
}
.participant .volume-meter{
    position:absolute;
    z-index:4
}

#areaButtonsJoin {
  position: fixed;
  top: 7px;
  right: 10px;
  z-index: 1000;
}

#areaButtons {
  position: fixed;
  top: 60px;
  right: 0px;
  background: #fff;
  z-index: 1000;
  padding: 10px;
  border: 1px solid #777;
  border-width: 1px 0px 1px 1px;
  border-radius: 5px 0px 0px 5px;
}

#areaParticipantSlide {
  position: fixed;
  bottom: 20px;
  right: 0px;
  width: 400px;
  background: #fff;
  z-index: 1000;
  padding: 10px;
  border: 1px solid #777;
  border-width: 1px 0px 1px 1px;
  border-radius: 5px 0px 0px 5px;
}

#areaChat {
  position: absolute;
  top: 55px;
  right: -400px;

  width: 400px;
  padding: 10px;
  border-left: 1px solid #777;
}

.btnPulsating {
  animation: pulsateButton 1s infinite;
}

@keyframes pulsateButton {
  0% {background-color: #6c757d;}
  50% {background-color: #39e600;}
  100% {background-color: #6c757d;}
}