body {

  margin: 0;

  padding: 0;

  overflow: hidden;

}



.position-modal {

  align-items: center;

  overflow: hidden;

  width: 390px;

  height: 100vh;

}



/*Participants Start*/

.participant-modal-page {

  margin-left: 5%;

  margin-right: 5%;

}



/*Participants End*/



.text-width-area {

  width: 30%;

  z-index: 1;

}



.btn-text-width {

  z-index: 20;

}



#scroll-bar {

  overflow-y: auto; /* Enable vertical scrolling */

  height: 90vh; /* Set the height of the element */

}



#scroll-bar::-webkit-scrollbar {

  display: none; /* Hide the scrollbar */

}



#scroll-bar2 {

  overflow-y: auto; /* Enable vertical scrolling */

  height: 100%; /* Set the height of the element */

}



#scroll-bar2::-webkit-scrollbar {

  display: none; /* Hide the scrollbar */

}



#scroll-bar3 {

  overflow-y: auto; /* Enable vertical scrolling */

  height: 100%; /* Set the height of the element */

}



#scroll-bar3::-webkit-scrollbar {

  display: none; /* Hide the scrollbar */

}



.bottom-controls-1 {

  bottom: 0%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.bottom-controls-2 {

  bottom: 0%;

  right: 0%;

  transform: translate(-50%, -50%);

}



.caption-position {

  position: absolute;

  bottom: 2%;

  left: 50%;

  transform: translate(-50%, -50%);

}



#videoContainer {

  cursor: move;

  position: absolute;

  z-index: 9999999;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}



#videoElement {

  width: 30%;

}



@keyframes slide-up {

  0% {

    transform: translateX(100%);

  }

  100% {

    transform: translateX(0);

  }

}



.animate-slide-up {

  animation: slide-up 0.3s ease-out;

}



@media screen and (max-width: 1200px) {

  .text-translation {

    font-size: 14px;

  }

  .icon-width {

    width: 50%;

  }

}



@media screen and (max-width: 1599px) {

  /* .video-margin{

    margin-top:0px;

  } */

  #scroll-bar {

    overflow-y: auto; /* Enable vertical scrolling */

    height: 88.5vh; /* Set the height of the element */

  }

  .text-translation {

    font-size: 18px;

  }

  .header-margin {

    margin-top: 20px;

  }

  .header-margin-grid2 {

    margin-top: 9px;

  }

  .header-margin-grid3 {

    margin-top: 9px;

  }

  .video-width {

    max-width: 75%;

    height: auto;

  }

  .padding-controls {

    padding: 8px;

  }

  .padding-controls2 {

    padding: 3px;

  }

  .padding-grid {

    padding-top: 10px;

  }

  .bottom-position {

    position: absolute;

    bottom: -70px;

    left: 0%;

    right: 0%;

  }

}



@media screen and (min-width: 1600px) {

  #scroll-bar {

    overflow-y: auto; /* Enable vertical scrolling */

    height: 89vh; /* Set the height of the element */

  }



  #scroll-bar::-webkit-scrollbar {

    display: none; /* Hide the scrollbar */

  }



  /* .video-margin{

      margin-top:20px;

  }

  */

  .text-translation {

    font-size: 24px;

  }

  .header-margin {

    margin-top: 20px;

  }

  .header-margin-grid2 {

    margin-top: 20px;

  }

  .header-margin-grid3 {

    margin-top: 19px;

  }

  .padding-controls {

    padding: 10px;

  }

  .padding-controls2 {

    padding: 8px;

  }

  .bottom-position {

    position: absolute;

    bottom: -76px;

    left: 0%;

    right: 0%;

  }

}