body {
  margin: 0;
  font-family: Arial;
}

.full-width-header,
.content-wrapper {
  width: 100%;
}

.content-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
}

.chart-container,
.video-section-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}

.video-section-container .video-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.video-section-container .styled-button {
  padding: 10px 20px;
  border: 3px solid;
  background-color: white;
  color: black;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex: 1 1 30%;
  margin: 0 5px;
  box-sizing: border-box;
  outline: none;
  text-align: center;
  width: calc(33.33% - 10px);
}

.video-section-container .styled-button:focus {
  outline: none;
}

.video-section-container .styled-button.one { border-color: #024d82; }
.video-section-container .styled-button.two { border-color: #C59DF0; }
.video-section-container .styled-button.three { border-color: #f47200; }

.video-section-container .styled-button.one:hover,
.video-section-container .styled-button.one:focus { background-color: #024d82; color: white; }

.video-section-container .styled-button.two:hover,
.video-section-container .styled-button.two:focus { background-color: #C59DF0; color: white; }

.video-section-container .styled-button.three:hover,
.video-section-container .styled-button.three:focus { background-color: #f47200; color: white; }

.video-section-container .video-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 43.75%;
  margin: 0 auto;
  background-color: #f0f0f0;
}

.video-section-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transform: scale(1.02);
}

.video-section-container video:first-of-type {
  display: block;
}

.video-section-container .info-container {
  width: 100%;
  padding-top: calc(100% / (16 / 3)); /* Maintain 16:3 aspect ratio */
  position: relative;
  margin: 10px auto;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.video-section-container .info-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the container while maintaining aspect ratio */
  border-radius: 10px;
}

/* Replay button on the right side (excluding replayButtonNucleotideView) */
#replayButton, #replayButton2, #replayButton3 {
  position: absolute; /* Position button relative to the container */
  right: 20px; /* Push button to the right edge */
  top: 50%; /* Vertically align the button */
  transform: translateY(-50%); /* Center the button vertically */
  width: 30px;
  height: 30px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  line-height: 30px;
  flex-shrink: 0;
}

/* Keep replayButtonNucleotideView in its original position */
#replayButtonNucleotideView {
  margin-left: 10px; /* Add margin to the left */
  width: 30px;
  height: 30px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  line-height: 30px;
  flex-shrink: 0;
}

/* Hover effect for all buttons */
#replayButton:hover, #replayButton2:hover, #replayButton3:hover, #replayButtonNucleotideView:hover {
  background-color: #5a6268;
}

.pause-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 30px;
  padding: 0;
  z-index: 1000;
}

.pause-button:hover {
  background-color: #5a6268;
}

.hide-button {
  display: none;
}

/* Adding styles for the new container layout */
.container {
  display: flex;
  align-items: center;
}

#previewImage {
  width: 270px;
  height: 270px;
  object-fit: cover;
  margin-right: 20px;
}

#myVideo {
  width: 270px;
  height: 270px;
  object-fit: cover;
  margin-right: 20px;
}

#myVideo2 {
  width: 270px;
  height: 270px;
  object-fit: cover;
  margin-right: 20px;
}

.fas.fa-arrow-right {
  font-size: 24px;
  margin: 0 10px;
}

#previewImage3, #myVideo3 {
  width: 900px;
  height: calc(900px / (16 / 4));
  object-fit: cover;
  margin-right: 20px;
}

#myVideo3 {
  display: none;
}

/* General container styling */
.encoding-video-container {
  position: relative; /* Needed to position the button relative to the container */
  display: flex; /* Keep video and button aligned horizontally */
  align-items: center;
  justify-content: center; /* Center video in the container */
  width: 100%; /* Take full width */
  margin: 20px 0; /* Space between containers */
}

.encoding-video-container video {
  display: block;
  margin: 0 auto;
}

/* Specific styling for videoA */
#videoA {
  height: 240px; /* Override width for videoA */
}

.encoding-video-container.videoB-container {
  max-width: none; /* Remove the restriction for videoA container */
}

#videoB {
  width: 600px; /* Override width for videoA */
}

.encoding-video-container.videoC-container {
  max-width: none; /* Remove the restriction for videoA container */
}

#videoC {
  height: 360px; /* Override width for videoA */
}

/* Play/Replay button styling - same size as previous replay buttons */
#playButtonNew {
  margin-left: 10px; /* Add space between video and button */
  width: 30px;
  height: 30px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  line-height: 30px; /* Adjust line height to fit the icon inside the button */
  flex-shrink: 0; /* Prevent the button from shrinking */
}

#playButtonNew:hover {
  background-color: #5a6268;
}

#replayButtonA, #replayButtonB, #replayButtonC {
  position: absolute;
  right: 20px; /* Push the button to the right edge with some spacing */
  top: 50%; /* Vertically align the button */
  transform: translateY(-50%); /* Center the button vertically */
  width: 30px;
  height: 30px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  line-height: 30px;
  flex-shrink: 0;
}

#replayButtonA:hover, #replayButtonB:hover, #replayButtonC:hover {
  background-color: #5a6268;
}

.encoding-image-container {
  display: flex;
  justify-content: center; /* Horizontally center the image */
  align-items: center; /* Vertically center the image */
  margin: 20px 0; /* Add spacing above and below the image */
}