sparq_video_chat/src/app/pd/chat-component/chat-component.component.scss

body{
    background: #71AFFF;
    padding: 0;
  }
// }
.copy_link {
    // position: absolute;
    // bottom: 40%;
    // margin-top: 21%;
    text-align: center;
    border: 1px dashed #cececef5;
    // padding: 5px;
    border-radius: 10px;
    position: absolute;
    top:10px;
    right: 10px;
    background-color: darkgray;
    opacity: 0.7;
    p{
        // color: #840000c9;
        color: black;
        font-weight: 500;
        font-family: monospace;
        padding: 5px;
    }
}
// @media(max-width:500px) {

//     div#myvideo {
//         max-width: 32%;
//         // min-width: 150px;
//         position: absolute;
//         // border: 2px solid #9E9E9E;
//         top:0;
//         left: 0;
//         // border-radius: 10px;
//         margin: 1%
//         // /* top: 20px;
// }
// .body-container {
//     padding: 0px !important;
// }
// div#peervideo {
//     /* height: 498px; */
//     // position: relative;
//     // margin-top: 126px;
//     width: 100%;
//     // margin-top: 25%;

// }

// // .peer_message{
// //     font-size: 20px;
// //     position: absolute;
// //     top: 11%;
// //     bottom: 10%;
// //     float: right;
// //     padding: 57px;
// //     /* border: 2px solid lavender; */
// //     left: 8%;
// //     p{
// //         text-align: center;
// //     }
// // }
//     }
    .peer_message > p {
        padding: 3px;
        border-radius: 5px;
        background-color: darkgray;
    }
    @media(min-width:500px) {
        .peer_video{
            max-height: 80vh;
        }
//     div#myvideo {
//         max-width: 22%;
//         // min-width: 150px;
//         position: absolute;
//         // border: 2px solid #9E9E9E;
//         top:0;
//         left: 0;
//         // border-radius: 10px;
//         margin: 1%
//         // max-width: 45%;
//         // text-align: center;
//         // margin-left:3%;
//         // margin-top:1%;
//         // min-width: 150px;
//         // position: absolute;
//         // border: 2px solid #9E9E9E;
//         // /* top: 20px;
// }

// div#peervideo {
//     /* height: 498px; */
//     max-width: 100%;
//     text-align: center;
//     margin-left:3%;
//     margin-top:1%;
//     // position: relative;
//     // margin-top: 126px;
//     // width: 100%;
// }
}
// .peer_video{
//     max-height: 85vh !important;
//     text-align: center
// }
// body{
//     margin:10px !important;
// }
.note-label{
    justify-content: center;
    text-align: center;
   
}
::ng-deep {
    span {
        margin-right: 0px !important;
    }
}




.grid {
    display: grid;
  }

  :root {
    --one-row: 87vh;
    --two-rows: repeat(2, calc(87vh / 2));
    --three-rows: repeat(3, calc(87vh / 3));
    --four-rows: repeat(4, calc(87vh / 4));
  }
  
  $one-row:88vh;
  // @media (orientation: portrait) {
  //   $one-row:88vh !important;
  // }
  $two-rows:repeat(2, calc(#{$one-row} / 2));
  $three-rows:repeat(3, calc(#{$one-row} / 3));
  $four-rows:repeat(4, calc(#{$one-row} / 4));

  .grid--1 {
    grid-template-rows: $one-row;
    grid-template-areas:
      "A";
  
    @media (orientation: portrait) {
      grid-template-areas:
        "A";
    }
  }
  .grid--2 {
    grid-template-rows: $one-row;
    grid-template-areas:
      "A B";
  
    @media (orientation: portrait) {
      grid-template-rows:  $one-row;
      grid-template-areas:
        "A";
        ::ng-deep .my-video{
          position: absolute;
          top: 0;
          height:145px;
          width: 140px;
        }
    }
   
  }
  
  .grid--3 {
    grid-template-rows:  $one-row;
    // grid-template-areas:
    //   "A B"
    //   "C C";
      grid-template-areas: "A B C";
    @media (orientation: portrait) {
      grid-template-rows: $one-row;
      // grid-template-areas:
      //   "A B"
      //   "C C";
        grid-template-areas:
        "A B";
        ::ng-deep .my-video{
          position: absolute;
          top: 0;
          height:145px;
          width: 140px;
        }
    }
  }
  
  .grid--4 {
    grid-template-rows: $two-rows;
    grid-template-areas:
      "A B"
      "C D";
  }

  .grid--5 {
    grid-template-rows: $two-rows;
    grid-template-areas:
      "A A B B C C" 
      "D D D E E E";
  
    @media (orientation: portrait) {
      grid-template-rows: $three-rows;
      grid-template-areas:
        "A A B B"
        "C C D D"
        "E E E E";
    }
  }
  
  .grid--6 {
    grid-template-rows: $two-rows;
    grid-template-areas:
      "A B C" 
      "D E F";
  
    @media (orientation: portrait) {
      grid-template-rows: $three-rows;
      grid-template-areas:
        "A B"
        "C D"
        "E F";
    }
  }
  
  .grid--7 {
    grid-template-rows: $two-rows;
    grid-template-areas:
      "A A A B B B C C C D D D" 
      "E E E E F F F F G G G G";
  
    @media (orientation: portrait) {
      grid-template-rows: $three-rows;
      grid-template-areas:
        "A A A B B B"
        "C C C D D D"
        "E E F F G G";
    }
  }
  
  .grid--8 {
    grid-template-rows:  $two-rows;
    grid-template-areas:
      "A B C D" 
      "E F G H";
  
    @media (orientation: portrait) {
      grid-template-rows: $four-rows;
      grid-template-areas:
        "A B"
        "C D"
        "E F"
        "G H";
    }
  }

 ::ng-deep .video-wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
    padding: 2px;
    .identity-name {
      position: relative;
    background-color: #b1b1b1;
    text-align: center;
    opacity: 0.8;
    padding: 0;
    bottom: 39px;
    left: 0%;
    .praticipant-name {
      // width: 80%;
      margin-left: 30px;
      margin-right: 30px;
      text-align: center;
      align-items: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    }
    .icons_participant {
      display: none;
    /* background: blue; */
    /* color: darkslategray; */
    position: absolute;
    z-index: 3;
    /* top: 0; */
    bottom: 6px;
    right: 5px;
    @media (orientation: portrait) {
      bottom: 1px !important;
    }
    }
   .audio {
      left: 5px !important;
     }
  }
  
  ::ng-deep  video {
    height: 100%;
    display: block;
    object-fit: cover;
    width: 100%;
  }