body {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: url("./img/bg_im.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: relative; }

/* Removed media queries - always use standard background */
html {
  /* Add this block */
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0; }

/* TBD: are we using this? */
.focussed-video {
  background-color: #111;
  /* Dark gray, almost black */
  margin: auto; }

.agora_video_player {
  border-radius: 8px;
  overflow: hidden;
  /* ensures that anything extending beyond the video player's boundaries is clipped/hidden */
  object-fit: cover !important;
  /* tells the video how to resize to fill its container: cover means it will scale to cover the entire container. It may crop parts of the video to maintain aspect ratio */
  width: 100% !important; }

/* Ensure raw <video> elements inside are contained and centered */
.agora_video_player video,
.agora_video_player .agora-video-player-track-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  border-radius: inherit;
  /* inherit the parent's border-radius */ }

/* Prevent processed canvas from being stretched; keep aspect ratio */
.agora_video_player > canvas {
  max-width: 100%;
  width: 100% !important;
  height: auto !important;
  /* maintain aspect ratio by setting width to 100% and height to auto */
  display: block;
  margin: 0 auto;
  /* center the canvas horizontally */
  border-radius: 8px; }

/* a style for a dropdown/select element (camera / microphone / quality settings */
.agora_select {
  margin: 10px;
  /* Adds 10px space around all sides of the select */
  display: block;
  /* Makes the select element take up its own line */
  width: 240px;
  background-color: #111;
  /* Very dark gray, almost black background */
  color: #ddd;
  /* Light gray text color */ }

.cpu_stats {
  color: #81bfe4 !important; }

.cpu_statso {
  width: 250px !important;
  font-size: 18px;
  display: inline-block;
  color: #bfbfbf; }

.cpu_stats_mobile {
  color: #81bfe4 !important; }

.cpu_stats_mobile_o {
  width: 120px !important;
  font-size: 14px;
  display: inline-block;
  color: #bfbfbf; }

.fixed_stat {
  display: inline-block;
  width: 70px;
  text-align: left; }

.fixed_stat_short {
  display: inline-block;
  text-align: left;
  width: 16px; }

.stats_display_inner {
  background-color: #4d3904;
  padding: 2px;
  opacity: 0.9; }

.stats_display {
  color: #ffbf00;
  margin-left: 2px;
  margin-top: 2px;
  position: absolute;
  z-index: 100;
  font-size: 12px; }

.stats_display_inner_low {
  color: #ffbf00 !important; }

.stats_display_small_font {
  font-size: 8px !important; }

.stats_display_large_font {
  font-size: 16px !important; }

.stats_display_local {
  color: #ae47de;
  margin-left: 8px;
  margin-top: 8px;
  position: absolute;
  z-index: 100;
  font-size: 14px; }

.mic_talking {
  background-color: lime-green; }

/* currently we dont show the local video (self video) */
/*utility CSS class that's used to completely hide elements from display. */
.hidden {
  display: none !important; }

 /* Make the background completely transparent, ensure Agora's default styling doesn't show through 8/
  .remove_agora_video_style{
    background-color: transparent !important;
  }

  .agora-video-player-track-video,
  .agora-video-player-track-video[style*="background-color"] {
      background-color: transparent !important;
  }

  /* select any element whose id attribute starts with 'agora-video-player-track-video */
[id^="agora-video-player-track-video"] {
  overflow: visible !important;
  background-color: transparent !important; }

/* The code creates the layout containers (remote_videoX_box - define specific positions for each video box). When a participant joins, Agora creates a video player element (agora-video-player-track-video) */
.remote_video1_box .agora-video-player-track-video,
.remote_video2_box .agora-video-player-track-video,
.remote_video3_box .agora-video-player-track-video,
.remote_video4_box .agora-video-player-track-video {
  background-color: transparent !important; }

/* a container that shows a placeholder or fallback when there's no video content (A participant's video is not available /
Video failed to load / Participant turned off their camera ?)*/
.focussed-video-inner {
  background-color: #111;
  width: 100% !important;
  height: 100% !important;
  background-image: url("./img/novideo.png");
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: center 50%; }

/* base class for video elements in the grid */
.remote_video {
  margin: 0.5px;
  padding: 0px;
  display: inline-block;
  z-index: -1; }

/* add perspective view to the video streams 
 */
/* First stream */
.remote_video1_box .agora_video_player {
  transform-style: preserve-3d;
  transform: perspective(6vw) skewY(-12deg) rotateY(3deg) !important;
  background-color: transparent !important; }

/* Second stream */
.remote_video2_box .agora_video_player {
  transform-style: preserve-3d;
  transform: perspective(6vw) skewY(-3deg) rotateY(1deg) !important;
  background-color: transparent !important; }

/* Third stream */
.remote_video3_box .agora_video_player {
  transform-style: preserve-3d;
  transform: perspective(6vw) skewY(3deg) rotateY(-1deg) !important;
  background-color: transparent !important; }

/* Fourth stream */
.remote_video4_box .agora_video_player {
  transform-style: preserve-3d;
  transform: perspective(6vw) skewY(12deg) rotateY(-3deg) !important;
  background-color: transparent !important; }

.remote_video1,
.remote_video2,
.remote_video3,
.remote_video4 {
  width: 100%;
  height: 100%;
  position: relative;
  display: block; }

/* Agenda image container */
.agenda-container {
  position: absolute;
  left: 9.6vw;
  top: 19vh;
  width: 20vw;
  height: 35vh;
  display: block;
  z-index: 10;
  perspective: 0.4vw;
  transform-style: preserve-3d; }

.agenda-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: perspective(0.4vw) rotateY(0.05deg);
  transform-origin: left center; }

/* Action items image container */
.action-items-container {
  position: absolute;
  right: 12vw;
  top: 19vh;
  width: 20vw;
  height: 35vh;
  display: block;
  z-index: 10;
  perspective: 0.4vw;
  transform-style: preserve-3d; }

.action-items-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Update transform to include perspective */
  transform: perspective(0.4vw) rotateY(-0.03deg);
  transform-origin: right center; }

.remote_video_mobile {
  margin: 1px;
  padding: 1px; }

.remote_video_active {
  border-style: solid;
  padding: 0px;
  border-color: #FD5F00;
  border-width: 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

.agora_stats {
  width: 100% !important;
  height: 48px;
  pheight: 32px;
  font-size: 14px;
  padding: 2px;
  margin-top: 8px !important;
  margin: 2px;
  bbackground-color: #5b5b5b;
  background-color: #b8b8b8;
  color: black;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  vertical-align: middle; }

.media_controls {
  font-family: Arial, Helvetica, sans-serif;
  width: 160px;
  color: black;
  display: inline-block;
  z-index: 10; }

.settings_controls {
  font-family: Arial, Helvetica, sans-serif;
  float: right;
  color: black;
  display: inline-block; }

.main {
  background: #222; }

#toolbar {
  white-space: nowrap; }

#control_container {
  idisplay: inline-block;
  top: -46px;
  position: relative;
  left: 6px;
  top: -9px;
  left: 0px; }

#stats_container {
  width: 100%;
  float: left;
  margin-right: 3px;
  display: inline-block; }

#player_container {
  width: 85%;
  margin-left: 20px;
  /* Push it right after the buttons */
  margin-top: -45px;
  /* Pull it up to button level */
  padding: 4px;
  padding-top: 4px;
  display: inline-block;
  background-color: #81bfe4 !important;
  z-index: 10;
  position: relative; }

#mic_mute {
  background-image: url("img/microphone_1-512.webp"); }

.default_icon_mobile {
  width: 60px !important;
  height: 60px !important;
  margin-left: 10px !important;
  margin-right: 10px !important; }

.button_horizontally_flip {
  transform: scaleX(-1); }

.fullscreen {
  width: 1280px !important;
  height: 720px !important; }

.cam_off_reduced_mobile {
  width: 52px !important;
  height: 44px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 12px !important;
  padding-left: 8px !important;
  padding-right: 8px !important; }

.cam_off_reduced {
  width: 30px !important;
  height: 26px !important;
  padding: 6px !important;
  padding-left: 4px !important;
  padding-right: 4px !important; }

.default_icon_left_mobile {
  margin-left: 14px !important; }

.default_icon_right_mobile {
  margin-right: 14px !important; }

.default_icon_left {
  margin-left: 10px; }

.default_icon_right {
  margin-right: 10px; }

.default_icon {
  width: 34px;
  height: 34px;
  border-radius: 16%;
  padding: 2px;
  imargin: 6px;
  background-color: #cd5656;
  color: white;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: content-box; }

.play_icon {
  background-color: #81bfe4 !important; }

._icon {
  background-color: #81bfe4 !important; }

.stop_icon {
  width: 28px  !important;
  height: 28px !important;
  margin-top: -3px !important;
  margin-left: 12px;
  opacity: 80% !important; }

.cue_icon {
  width: 32px  !important;
  height: 32px !important;
  margin-top: -3px !important; }

.media_buttons_enabled {
  background-color: #47aa79 !important; }

.settings_icon {
  background-color: #909291 !important; }

#pre-local-player {
  width: 320px;
  height: 180px; }

.lds-ring {
  top: 50%;
  left: 50%;
  margin-left: -80px;
  margin-top: -80px;
  display: block;
  position: absolute;
  width: 80px;
  height: 80px; }

.mic_push {
  background: #5bb889 !important; }

.lds-ring div {
  z-index: 100;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 4px;
  border: 4px solid #5bb889;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #5bb889 transparent transparent transparent; }

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s; }

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s; }

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s; }

@keyframes lds-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.modal-content {
  background-color: #fafafa; }

/* Ensure modal stays above content */
.modal {
  z-index: 1050 !important;
  /* Bootstrap default modal z-index */ }

.grid_over {
  position: absolute;
  bottom: 10px;
  right: 10px; }

.mp4label {
  margin-left: 5px;
  margin-right: 5px !important;
  font-size: 14px;
  font-weight: 700; }

.watch_input {
  width: 350px; }

.watch_input_mobile {
  width: 70px; }

#watchiddd {
  width: 18px;
  height: 28px; }

#agoravideoplayer {
  width: 100%;
  border-radius: 10px; }

.status_good {
  color: #368b61; }

.status_fair {
  color: #6d7410; }

.status_poor {
  color: #865102; }

.status_critical {
  color: #5f0202; }

/* Mute icon indicator - positioned next to name tag at bottom */
.mute-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: rgba(80, 80, 80, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

.mute-icon svg {
  width: 18px;
  height: 18px;
  fill: #e0e0e0; }

/* Inline mute icon within name tag bar */
.mute-icon-inline {
  display: flex;
  align-items: center;
  justify-content: center; }

/* Inline camera-off icon within name tag bar */
.camera-off-icon-inline {
  display: flex;
  align-items: center;
  justify-content: center; }

/* Inline chat icon within name tag bar */
.chat-icon-inline {
  display: flex;
  align-items: center;
  justify-content: center; }

/* Participant name tag - now with flex layout for integrated icons */
.participant-name-tag {
  display: flex;
  align-items: center;
  gap: 8px; }

/* hide local video stream */
/* Hide local video elements */
.local_video {
  display: none !important; }

/* Also hide any elements with agora local video classes */
[id^="agora-video-player-local"] {
  display: none !important; }

/* In case the local video is wrapped in a container */
.local-video-wrapper,
.local-stream-container {
  display: none !important; }

/* Ensure this overrides any existing display properties */
#local-player,
#pre-local-player {
  display: none !important; }

/* Mirror video - ensure videos display at native aspect ratio without cropping */
.mirror-video-player video,
.mirror-video-player .agora-video-player-track-video {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important; }

/*# sourceMappingURL=index.css.map */