/* Change the overall player background to white */
#VJSInstance {
  background-color: black !important; /* White player background */
}

.vjs-play-control.vjs-control.vjs-button.vjs-playing {
  color: white;
}

.video-js .vjs-play-control {
  cursor: pointer;
  color: white !important;
}
/* Control bar background color set to white */
.vjs-control-bar {
  background-color: black !important; /* White control bar */
  display: flex;
  align-items: center; /* Align buttons vertically */
}


.vjs-progress-control.vjs-control {
  color: white;
}

/* Play button icon styling */
.vjs-play-control::before {
  font-size: 20px; /* Adjust icon size */
  color: #ffffff !important; /* Black play button */
}

.vjs-play-control::after {
  font-size: 20px; /* Adjust icon size */
  color: #ffffff !important; /* Black play button */
}
/* Volume (mute) button styling */
.vjs-mute-control::before {
  color: #ffffff !important; /* Black mute button */
}

.vjs-mute-control::after {
  color: #ffffff !important; /* Black mute button */
}

.vjs-volume-level {
  background-color: white !important;
}

.vjs-volume-level:active {
  color: white;
  background-color: white !important;
}

.vjs-volume-control.vjs-control.vjs-volume-horizontal:{
    color: #ffffff !important;
}

.vjs-volume-control.vjs-control.vjs-volume-horizontal:hover {
  color: white !important;
}

.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover {
  color: white !important;
}
/* Adjust alignment for the play button */
.vjs-play-control {
  vertical-align: middle; /* Center the play button */
  padding: 5px;
  margin-right: 10px; /* Add spacing */
}

/* Customize the progress bar appearance */
.vjs-progress-control .vjs-progress-holder {
  background-color: #ffffff !important; /* Light grey background for progress bar */
}

.vjs-progress-control .vjs-play-progress {
  background-color: #ffffff !important; /* Black for the played portion */
}

.vjs-progress-control .vjs-load-progress {
  background-color: #bbbbbb !important; /* Light grey for the loaded buffer */
}

/* Time text (current time, remaining time) set to white */
.vjs-current-time-display,
.vjs-remaining-time-display {
  color: #ffffff !important; /* Black text for time */
}

/* Customize other buttons */
.vjs-control button {
  color: #ffffff !important; /* Black buttons */
}

/* Custom white color for the big play button */
.vjs-big-play-button {
  background-color: black !important; /* Black background */
  border-color: black !important; /* Black border */
}

.vjs-big-play-button .vjs-icon-placeholder {
  color: black !important; /* White play icon inside big play button */
}

/**/
/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
  border-color: #00ff00;
}

/* change the color fo the static button*/
.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vjs-play-control .vjs-icon-placeholder::before, .vjs-icon-play::before {
  content: "\f101";
  color: white;
  background-color: black;
}
/* change the color of the fullscreen button*/
.vjs-fullscreen-control.vjs-control.vjs-button {
  color: white !important;
}
/* round corners */
.video-js *,.video-js :after,.video-js :before {
    box-sizing: border-box;
    border-radius: 10px !important;

}
.video-js,.video-js :after,.video-js :before {
    box-sizing: border-box;
    border-radius: 10px !important;
}