/* Type3 container - unique layout properties only */
.dialog-circular-demo {
  background: transparent;
  width: 1800px;
  height: 900px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: none;
  padding: 20px;
  gap: 0;
  position: fixed;
  overflow: hidden;
}
.dialog-circular-demo .video-container {
  display: block;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

/* Circle video specific to type3 */
.dialog-circular-demo .circle-video {
  position: absolute;
  height: 250px;
  width: 250px;
  border: 7px solid #81e5a6;
  z-index: 5;
  top: 102px;
  left: 351px;
}

.dialog-circular-demo .circle-video video {
  aspect-ratio: 1/1;
}

/* Triangle connector between circle and tall video */
.dialog-circular-demo .triangle {
  width: 0;
  height: 330px;
  left: 651px;
  top: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
}
.dialog-circular-demo .triangle::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: #fff;
}