:root{
  --custom-red-color: #ff453a;
  --cyan-color: rgba(0, 255, 255, 0.36);
  --transparent-bg: rgba(0, 0, 0, 0);

  --font-color: white;
  --message-font-size: 15px;
  
  --cyan-caret-color: cyan;

  --corner-radius: 8px;
  --cyan-border:2px solid cyan;

  --layout-margin: 5px;

  --chat-width-desktop: 30%;
  --log-width-desktop: 30%;

  --corner-button-inflate:110%;
  --corner-button-size:30px;
}

.corner-button{
  position: fixed;

  right:calc(0% + var(--layout-margin));

  height:var(--corner-button-size);
  width:var(--corner-button-size);

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.corner-button.toggle-fit{
  top:calc(0% + var(--layout-margin));
  z-index:800;
  background-image:url("http://dagi.ai/assets/call/icons/png/object_fit.png");
}

.corner-button.hide-button{
  position: fixed;
  top:calc(0% + 2*var(--layout-margin) + var(--corner-button-size));
  z-index:800;
  background-image:url("http://dagi.ai/assets/call/icons/png/hide_button.png");
}

.corner-button:hover{
  transform:scale(var(--corner-button-inflate));
}

.main-video {
  height: calc(80% - (1.5 * (var(--layout-margin))));
  width: calc(100% - (2 * (var(--layout-margin))));

  background-color:transparent;

  object-fit: cover;
  object-position: 50% 50%;

  border-radius: var(--corner-radius);

  margin-left: var(--layout-margin);
  margin-right: var(--layout-margin);
  margin-top: var(--layout-margin);
  margin-bottom: calc(0.5 * var(--layout-margin));
}

.main-video-fullscreen{
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background-color: var(--transparent-bg);
  object-fit: cover;
}

.video-list{
  height: calc(20% - (1.5 * (var(--layout-margin))));
  width: calc(100% - (2 * (var(--layout-margin))));

  background-color: var(--transparent-bg);

  border-radius: var(--corner-radius);

  margin-left: var(--layout-margin);
  margin-right: var(--layout-margin);
  margin-top: calc(0.5 * var(--layout-margin));
  margin-bottom: var(--layout-margin);

  display:flex;
  flex-direction: row;
  justify-content:flex-start;
  align-items: center;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.video-stream {
  object-fit: cover;
  flex-shrink: 0;/*prevent he shrinking of the elements*/
  float:left;
  position: relative;
  border-radius: var(--corner-radius);

  background-color: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter:blue(10px);
}

/* Hide scrollbar*/
.video-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.video-list::-webkit-scrollbar {
  display: none;
}

.video-stream:hover{
  border:var(--cyan-border);
}

.log-container {
  position: absolute;
  display: none;
  background-color: rgb(0, 107, 107);
}