
:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

html,
body {
  margin: 2rem;
  box-sizing: border-box;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  color: rgb(var(--foreground-rgb));
  background: white
}

hr {
  margin: 1rem 0;
}

table {
  display: table;
}

canvas {
  margin-bottom: 1rem;
  background: grey;
}

h3 {
  display: flex;
  justify-content: center;
  padding-top: 3rem
}

.center {
  display: flex;
  justify-content: center;
}

.log {
  flex: none;
  height: 300px;
}

.content {
  flex: 1 0 auto;
}

.margin-top {
  margin-top: 5rem
}

.button-container {
  display: flex !important;
  margin-top: 2.5rem;
  align-items: center;
  justify-content: space-around;
}

.button-container .button {
    width: auto
}

.local-container {
  position: relative;
}

.static-controls {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: -4rem;
  text-align: center;
}

.static-controls button {
  display: inline-block;
  margin: 1rem;
}

.hidden {
  display: none;
}

.participant-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 1rem;
}

.relative {
  position: relative;
}

.overlay-pill {
  position: absolute;
  bottom: 40px;
  left: 24px;
  padding: 0px 12px;
  background-color: #fff;
  color: black;
  border-radius: 20px;
  font-size: 14px;
}

.placeholder {
  background-color: #333333;
  display: flex;
  text-align: center;
  margin-bottom: 1rem;
}

.placeholder span {
  margin: auto;
  color: white;
}

.device-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.local-video {
  max-height: 300px;
  display: inline-block;
  width: 100vw;
  max-width: 500px
}

.video-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.video-grid-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: black;
  align-items: center;
  padding: 5rem 2rem;
}

.participant-grid-container {
      width: 100%;
      height: 100%;
      max-width: 800px;
      position: relative;
}

.participant-grid-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.5rem solid #555;
    border-radius: 0.5rem;
    aspect-ratio: 16/9;
}

.margin-right {
  margin-right: 1rem
}

/* Grid definitions */

/* https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids */

/*! allows the selected elements to be rendered as a grid container. */
.grid {
  display: grid;
  grid-gap: 2rem;
}

.slot-1 {
  grid-area: s-1;
}

.slot-2 {
  grid-area: s-2;
}

.slot-3 {
  grid-area: s-3;
}

.slot-4 {
  grid-area: s-4;
}

.slot-5 {
  grid-area: s-5;
}

.slot-6 {
  grid-area: s-6;
}

.slot-7 {
  grid-area: s-7;
}

.slot-8 {
  grid-area: s-8;
}

.slot-9 {
  grid-area: s-9;
}

.slot-10 {
  grid-area: s-10;
}

.slot-11 {
  grid-area: s-11;
}

.slot-12 {
  grid-area: s-12;
}

.slot-13 {
  grid-area: s-13;
}

.slot-14 {
  grid-area: s-14;
}

.slot-15 {
  grid-area: s-15;
}

.slot-16 {
  grid-area: s-16;
}

.slot-17 {
  grid-area: s-17;
}

.slot-18 {
  grid-area: s-18;
}

.slot-19 {
  grid-area: s-19;
}

.slot-20 {
  grid-area: s-20;
}

/*! This CSS code defines a dynamic grid layout with adjustable columns and rows using the grid-template-columns and grid-template-rows properties, alongside the grid-template-areas property to designate an area identified as 's-'. This configuration allows for flexible grid arrangements tailored for elements with the class .grid- */

.grid-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-areas: 's-1';
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-areas: 's-1 s-2';
  gap: 40px;
  /* Adjust the value as needed */

}

.grid-3 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2 s-2'
    '... s-3 s-3 ...';
}

.grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-2'
    's-3 s-4';
}

.grid-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2 s-2 s-3 s-3'
    '... s-4 s-4 s-5 s-5 ...';
}

.grid-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-2 s-3'
    's-4 s-5 s-6';
}

.grid-7 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2 s-2 s-3 s-3'
    's-4 s-4 s-5 s-5 s-6 s-6'
    '... ... s-7 s-7 ... ...';
}

.grid-8 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2 s-2 s-3 s-3'
    's-4 s-4 s-5 s-5 s-6 s-6'
    '... s-7 s-7 s-8 s-8 ...';
}

.grid-9 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-2 s-3'
    's-4 s-5 s-6'
    's-7 s-8 s-9';
}

.grid-10 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2 s-2 s-3  s-3  s-4 s-4'
    's-5 s-5 s-6 s-6 s-7  s-7  s-8 s-8'
    '... ... s-9 s-9 s-10 s-10 ... ...';
}

.grid-11 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2 s-2  s-3  s-3  s-4  s-4'
    's-5 s-5 s-6 s-6  s-7  s-7  s-8  s-8'
    '... s-9 s-9 s-10 s-10 s-11 s-11 ...';
}

.grid-12 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-2  s-3  s-4'
    's-5 s-6  s-7  s-8'
    's-9 s-10 s-11 s-12';
}

.grid-13 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2  s-2  s-3  s-3  s-4  s-4'
    's-5 s-5 s-6  s-6  s-7  s-7  s-8  s-8'
    's-9 s-9 s-10 s-10 s-11 s-11 s-12 s-12'
    '... ... .... s-13 s-13 .... .... ....';
}

.grid-14 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1 s-2  s-2  s-3  s-3  s-4  s-4'
    's-5 s-5 s-6  s-6  s-7  s-7  s-8  s-8'
    's-9 s-9 s-10 s-10 s-11 s-11 s-12 s-12'
    '... ... s-13 s-13 s-14 s-14 .... ....';
}

.grid-15 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1 s-1  s-2  s-2  s-3  s-3  s-4  s-4'
    's-5 s-5  s-6  s-6  s-7  s-7  s-8  s-8'
    's-9 s-9  s-10 s-10 s-11 s-11 s-12 s-12'
    '... s-13 s-13 s-14 s-14 s-15 s-15 ....';
}

.grid-16 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1  s-2  s-3  s-4'
    's-5  s-6  s-7  s-8'
    's-9  s-10 s-11 s-12'
    's-13 s-14 s-15 s-16';
}

.grid-17 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1  s-1  s-2  s-2  s-3  s-3  s-4  s-4  s-5  s-5'
    's-6  s-6  s-7  s-7  s-8  s-8  s-9  s-9  s-10 s-10'
    's-11 s-11 s-12 s-12 s-13 s-13 s-14 s-14 s-15 s-15'
    '.... .... .... s-16 s-16 s-17 s-17 .... .... ....';
}

.grid-18 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1  s-1  s-2  s-2  s-3  s-3  s-4  s-4  s-5  s-5'
    's-6  s-6  s-7  s-7  s-8  s-8  s-9  s-9  s-10 s-10'
    's-11 s-11 s-12 s-12 s-13 s-13 s-14 s-14 s-15 s-15'
    '.... .... s-16 s-16 s-17 s-17 s-18 s-18 .... ....';
}

.grid-19 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1  s-1  s-2  s-2  s-3  s-3  s-4  s-4  s-5  s-5'
    's-6  s-6  s-7  s-7  s-8  s-8  s-9  s-9  s-10 s-10'
    's-11 s-11 s-12 s-12 s-13 s-13 s-14 s-14 s-15 s-15'
    '.... s-16 s-16 s-17 s-17 s-18 s-18 s-19 s-19 ....';
}

.grid-20 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    's-1  s-2  s-3  s-4  s-5 '
    's-6  s-7  s-8  s-9  s-10'
    's-11 s-12 s-13 s-14 s-15'
    's-16 s-17 s-18 s-19 s-20';
}