/*
    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:  http://bit.ly/webrtc-from-chat

    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 camerabox chatbox"
  "empty-container camera-controls chat-controls";
  grid-template-columns: 10em 1fr 500px;
  //grid-template-rows: 16em 1fr 5em;
  grid-gap: 1rem;
}

/*.container {
    display: grid;
    min-width: 1250px;
    height: 100%;
    grid-template-areas: "infobox infobox" "userlistbox camerabox" "empty-container chat-controls";
    grid-template-columns: 10em 800px;
    //grid-template-rows: 16em 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: 0px solid black;
  margin: 0;
  /*overflow-y: scroll;*/
  /*padding: 1px;
  padding: 0.1rem 0.5rem;*/
  width:400px;
  height:500px;
}

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

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

#received_video {
  width: 100%;
  height: 100%;
  position:absolute;
}

/* The small "preview" view of your camera */
#local_video {
  width: 90px;
  height: 120px;
  position: absolute;
  top: 1rem;
  left: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 4px black;
}

/* The "Hang up" button */
#hangup-button {
  display:block;
  width:80px;
  height:24px;
  border-radius: 8px;
  position:relative;
  margin:auto;
  top:calc(100% - 40px);
  background-color: rgba(150, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
  cursor: pointer;
}

#hangup-button:hover {
  filter: brightness(150%);
  -webkit-filter: brightness(150%);
}

#hangup-button:disabled {
  filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  cursor: default;
}

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

.chat-controls {
  grid-area: chat-controls;
  width: 100%;
  height: 100%;
}

.camera-controls {
    grid-area: camera-controls;
    width: 100%;
    height: 100%;
}

.video-controls {
    align-content:flex-end
}

/*#zoomin-button {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    position: absolute;
    margin-left: 460px;
    margin-top: -10px;
    background-color: rgba(150, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: rgba(255, 255, 255, 1.0);
    cursor: pointer;
}

#zoomout-button {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    position: absolute;
    margin-left: 430px;
    margin-top: -10px;
    background-color: rgba(150, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: rgba(255, 255, 255, 1.0);
    cursor: pointer;
}

#zoomout-button:hover {
    filter: brightness(150%);
    -webkit-filter: brightness(150%);
}

#zoomout-button:disabled {
    filter: grayscale(50%);
    -webkit-filter: grayscale(50%);
    cursor: default;
}

#zoomin-button:hover {
    filter: brightness(150%);
    -webkit-filter: brightness(150%);
}

#zoomin-button:disabled {
    filter: grayscale(50%);
    -webkit-filter: grayscale(50%);
    cursor: default;
}*/

#imgCaptured {
    width: 400px;
    height: 500px;
}