/*
    WebSocket chat client

    WebSocket and WebRTC based multi-user chat sample with two-way video
    calling, including use of TURN if applicable or necessary.

    This file describes the styling for the contents of the site as
    presented to users.

    To read about how this sample works:
    https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling

    Any copyright is dedicated to the Public Domain.
    http:   creativecommons.org/publicdomain/zero/1.0/
*/

/* The grid that contains it all */

.container {
  display: grid;
  min-width: 1250px;
  height: 100%;
  grid-template-areas:
    "infobox infobox infobox"
    "userlistbox chatbox camerabox"
    "empty-container chat-controls chat-controls";
  grid-template-columns: 10em 1fr 500px;
  grid-template-rows: 16em 1fr 5em;
  grid-gap: 1rem;
}

.infobox {
  grid-area: infobox;
  overflow: auto;
}

.userlistbox {
  grid-area: userlistbox;
  border: 1px solid black;
  margin: 0;
  padding: 1px;
  list-style: none;
  line-height: 1.1;
  overflow-y: auto;
  overflow-x: hidden;
}

.userlistbox li {
  cursor: pointer;
  padding: 1px;
}

.chatbox {
  grid-area: chatbox;
  border: 1px solid black;
  margin: 0;
  overflow-y: scroll;
  padding: 1px;
  padding: 0.1rem 0.5rem;
}

.camerabox {
  grid-area: camerabox;
  width: 500px;
  height: 375px;
  border: 1px solid black;
  display: block;
  position: relative;
  overflow: auto;
}

.allvideos {
  position:relative;
  flex: 1 1 auto;
  border: 1px solid rgba(5, 34, 73, 0.75);
  box-shadow: 0 0 4px black;    
}
/* -------------------------------------------------------------------------------------
Chat bubbles
---------------------------------------------------------------------------------------*/
.rightchatentry,.leftchatentry {position:relative;width:fit-content;max-width:80%;
   box-shadow: 0 0 4px black;margin:1rem 0;padding:1rem; color:black;border-radius: 10px;}
.rightchatentry {align-self:flex-end;background-color:rgb(174, 174, 168);margin:1rem 1rem 1rem 0;}
.leftchatentry {align-self:flex-start;background-color:rgb(240, 243, 237);margin:1rem 0 1rem 1rem;}
.leftchaticon {position:absolute;top:0;right:-10px;background-color:rgb(240, 243, 237); box-shadow: 0 0 4px black;border-radius:10px;}
.rightchaticon {position:absolute;top:0;left:-10px;background-color:rgb(174, 174, 168); 
  box-shadow: 0 0 4px black;border-radius:10px;transform: rotate(180deg); }
/* ---------------------------------------------------------------------------------------*/
/* chat count circle 
------------------------------------------------------------------------------------------*/
.chatcount {position: absolute;top:2px;right:-5px;width:fit-content;height:16px;border-radius: 8px;
  background-color: red;color:white;font-size:10px;text-align: center;padding:4px;line-height: 8px;}  
/*
*/
@media only screen and (min-height:0px) {.allvideos {height:100%;max-width: fit-content;} }
@media only screen and (min-height:300px) {.allvideos {height:300px;max-width: fit-content;} }
@media only screen and (min-height:600px) {.allvideos {height:350px;max-width: fit-content;} }
@media only screen and (min-height:1250px) {.allvideos {height:400px;max-width: fit-content;} }
.flexvideos {display:flex;flex-flow:row wrap;justify-content:center;align-content:center;align-items:center;}
.singlevideo {height:100%;width:auto}
.videocaption {width:auto;position:absolute;bottom:0;left:0;text-align:center;background-color: #000000a0;color:white;width:100%}
/* The small "preview" view of your camera */
.local_video {
  width: 120px;
  height: 90px;
  position: absolute;
  top: 1rem;
  left: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 4px black;
}
.hidevideo > video {visibility:hidden;}
.hidevideo > div {height:100%;top:0%;display:flex;justify-content: center;align-items: center;}

.empty-container {
  grid-area: empty-container;
}