:root {
  --progress_r: 0;
  --progress_g: 123;
  --progress_b: 255;
}

.vcontainer {
    text-align: center;
    background: transparent; /* Set container background to transparent */
    padding: 20px 10px;
    border-radius: 15px;
    box-shadow: none; /* Remove shadow */
    width: 100%;
    margin: auto; /* Centering */
}

.vprogress_bar {
    position: relative;
    width: 100%;
    height: 30px;
    border-radius: 15px;
    background-color: rgba(var(--progress_r), var(--progress_g), var(--progress_b), 0.5);
    overflow: hidden;
    margin-bottom: 0px;
}

.vprogress {
    height: 100%;
    width: 0%; /* Start at 0% and increase dynamically */
    background: linear-gradient(90deg, #3498db, #2980b9);
    transition: width 0.5s ease;
    border-radius: 15px 0 0 15px;
    position: relative;
}

.vprogress_label {
    position: absolute;
    left: 50%; /* Centers the text horizontally */
    top: 50%; /* Centers the text vertically */
    transform: translate(-50%, -50%); /* Centers both horizontally and vertically */
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    z-index: 1;
    white-space: nowrap; /* Prevents text wrapping */
    pointer-events: none; /* Ensures the text doesn't interfere with user interactions */
}

/* Responsive widths for the progress bar */
@media screen and (max-width:300px) {
  .vcontainer { width: 90%; }
}

@media screen and (min-width:301px) and (max-width:800px) {
  .vcontainer { width: 70%; }
}

@media screen and (min-width:801px) and (max-width:1200px) {
  .vcontainer { width: 50%; }
}

@media screen and (min-width:1201px) {
  .vcontainer { width: 30%; }
}

.videobox {
    text-align:center;
    display:inline-block;
    padding:3px 3px;
    font-size:18px;
    font-weight:normal;
    /* cursor:pointer; */
    /*background-color: #000000;
    color:#000;*/
    width:65%;
    border-radius:16px
}

.video_custom_controls
{
  position: absolute;
  top: 92%;
  left:2%; /* Adjust left position as needed */
  transform: translate(-50%,-50%);
  z-index: 1;
}

.video_custom_controls button
{
  background-color:transparant;
  border:none;
  font-size:2vw;
  color:#000;
  cursor:pointer;
}

.intro_video_container {
  position: relative;
  width: 100%;
  /* height: 0; IMPORTANT to maintain aspect ratio */
  /* See javascript for setting padding-bottom for landscape and portrait */
  /* padding-bottom: 23.3%; */
  /* overflow: hidden; */
}

.background_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This ensures the video covers the entire container */
}

.CenteredVideo
{
  border-radius: 0px; /* Adjust the value for the desired corner radius */
  display: block; /* Ensure the video is treated as a block element */
  margin: 0 auto; /* Center the video within its container */
  width: 100%
}

.video_result_container
{
  background-color:rgba(0,100,100,0.2);
  padding: 0.2%; /* Width of screen edge */
  border-radius: 10px;
  width: 40%;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.video_result_container_white
{
  background-color:rgba(255,255,255,1.0);
}

.roundContainer
{
  border-radius: 25px;
  width:20%;
}

.CustomVideoControl
{
  border-radius: 0px; /* Adjust the value for the desired corner radius */
  display: block; /* Ensure the video is treated as a block element */
  margin: 0 auto; /* Center the video within its container */
  width: 100%
}

/* Adjust the size of the video controls */
.CustomVideoControl::-webkit-media-controls-panel {
  width: auto !important;
  height: 8px; /* Adjust this value as needed */
}

/* Example for Firefox */
.CustomVideoControl::-moz-media-controls-panel {
  width: auto !important;
  height: 8px; /* Adjust this value as needed */
}

/* Example for Edge */
.CustomVideoControl::-ms-media-controls {
  width: auto !important;
  height: 8px; /* Adjust this value as needed */
}

.AudioContainer
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12vh;
}

.AudioPlayer
{
  display: none;
}

@media screen and (max-width:300px)
{
  .roundContainer { width: 35%; }
  .video_result_container { width: 95%; }
  .videobox { width:90% }
}

@media screen and (min-width: 301px) and (max-width: 650px)
{
  .videobox { width:60% }
  .canvasInfo { width: 60%; font-size: 1.0em; }
  .roundContainer { width: 35%; }
  .video_result_container { width: 92%; }
}

@media screen and (min-width:651px) and (max-width:800px)
{
  .canvasInfo { width: 60%; font-size: 1.0em; }
  .roundContainer { width: 35%; }
  .video_result_container { width: 92%; }
  .videobox { width:90% }
}

@media screen and (min-width:801px) and (max-width:1200px)
{
  .canvasInfo { width: 34%; font-size: 0.8em; }
  .roundContainer { width: 20%; }
  .video_result_container { width: 50%; }
  .videobox { width:40% }
}

@media screen and (min-width:1201px)
{
  .canvasInfo { width: 25%; font-size: 0.9em; }
  .roundContainer { width: 10%; }
  .video_result_container { width: 40%; }
  .videobox { width:40% }
}