.myVideoWrap {
    display: inline-block;
    position: fixed;
    bottom: 10rem;
    z-index: 10;
    margin: 0 1rem;
}

.myVideoWrap.talent {
    bottom: 3rem;
}

.myVideoInner {
    display: inline-block;
    transition: height 150ms ease-in-out, opacity 150ms ease-in-out;
}

@media screen and (min-width: 0px) {
    .myVideoInner {
        height: calc(1.5 * 16vh); /* 1.5 times 20% of viewport height */
        width: calc(1.5 * (9 / 16) * 16vh); /* 1.5 times the original width */
    }
}

.myVideoInner.hide {
    height: 10vh;
    opacity: 0;
}

.myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.remoteVideoWrap {
    width: 100%;
    height: 100%;
    background-color: rgb(10 10 10);
}

.remoteVideo {
    object-fit: cover;
    height: 100%;
    width: calc(1.0 * (9 / 16) * 100vh);
    margin: auto;
    pointer-events: none;
}

.botViewVideoWrap,
.modViewTalentVideoWrap {
    display: inline-block;
    margin: 10px;
    position: fixed;
    bottom: 15%;
    z-index: 10;
}

.botViewVideoWrap {
    bottom: 30%;
    display: none;
    pointer-events: none;
    z-index: -1;
}

/* Use a media query to dynamically set height and width */
@media screen and (min-width: 0px) {
    .botViewVideoWrap,
    .modViewTalentVideoWrap {
        height: calc(25vh); /* 25% of viewport height */
        width: calc((9 / 16) * 25vh); /* Width based on 9:16 aspect ratio */
    }
}

.modViewTalentVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.countdown-timer {
    @apply relative w-40 h-40;
  }

  .circle-bg {
    @apply absolute inset-0 w-full h-full rounded-full bg-gray-200;
  }

  .circle-progress {
    @apply absolute inset-0 w-full h-full rounded-full border-[6px] border-transparent border-t-blue-500 border-r-blue-500 animate-spin;
  }

  .timer-text {
    @apply absolute inset-0 flex items-center justify-center text-2xl font-bold text-white;
  }


:root {
    --timerColor: #eee; /* Default color for the timer */
    --timerTextColor: white; /* Default color for the background timer */
}
  
.timer {
    z-index: 10;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0) 50%, var(--timerColor) 50%);
    border-radius: 100%;
    height: calc(var(--size) * 1px);
    width: calc(var(--size) * 1px);
    position: relative;
    /* No animation defined here initially */
    -webkit-mask: radial-gradient(transparent 60%, #000 62%);
    mask: radial-gradient(transparent 60%, #494343 62%);
}

.mask {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    /* No animation defined here initially */
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

.timerText{
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--timerTextColor);
    font-size: 1.5rem;
}

#reloadBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    color: #fff;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    width: 90px;
    /* Make the height equal to the width to form a circle */

    /* Center the entire element */
    right: 0;
    z-index: 11;
    font-size: 10px;
    opacity: 0.5;
}

@-webkit-keyframes time {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes mask {
    0% {
        background: var(--timerColor);
        -webkit-transform: rotate(0deg);
    }
    50% {
        background: var(--timerColor);
        -webkit-transform: rotate(-180deg);
    }
    50.01% {
        background: rgba(0, 0, 0);
        -webkit-transform: rotate(0deg);
    }
    100% {
        background: rgb(0, 0, 0);
        -webkit-transform: rotate(-180deg);
    }
}