/* bootstrap css variables */
:root {
  --bs-body-bg: black;
  --bs-body-color: #ccc;
  --bs-primary: #bb95cc;
  --bs-dark-rgb: 36,36,36;
}

.bg-primary {
  background-color: #bb95cc !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #bb95cc;
  --bs-btn-border-color: #bb95cc;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b069d1;
  --bs-btn-hover-border-color: #b069d1;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #834e9b;
  --bs-btn-active-border-color: #ffffff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #bb95cc;
  --bs-btn-disabled-border-color: #bb95cc;
}

a {
  text-decoration: none;
}

.link-light {
  color: #ccc !important;
}

.link-light:hover {
  color: #ffffff;
}

/* .modal-backdrop.show {
  opacity: 0.5;
  backdrop-filter: blur(5px);
  filter: blur(5px);
} */
img.img-blur {
  filter: blur(10px);
}

/* upvote video button start */
#upvote-video-button.active .thumbs-up-icon-active {
}

#upvote-video-button:not(.active) .thumbs-up-icon-active {
  display: none;
}

#upvote-video-button.active .thumbs-up-icon-inactive {
  display: none;
}
#upvote-video-button:not(.active) .thumbs-up-icon-inactive {
  
}
/* upvote video button end */

/* downvote video button start */
#downvote-video-button.active .thumbs-down-icon-active {
}

#downvote-video-button:not(.active) .thumbs-down-icon-active {
  display: none;
}

#downvote-video-button.active .thumbs-down-icon-inactive {
  display: none;
}
#downvote-video-button:not(.active) .thumbs-down-icon-inactive {
  
}
/* downvote video button end */

/* favorite video button start */
#favorite-video-button.active .favorite-heart-icon-active {
}

#favorite-video-button:not(.active) .favorite-heart-icon-active {
  display: none;
}

#favorite-video-button.active .favorite-heart-icon-inactive {
  display: none;
}

#favorite-video-button:not(.active) .favorite-heart-icon-inactive {
  
}
/* favorite video button end */
.btn.btn-link.text-primary {
  color: #bb95cc !important;
  text-decoration: none;
}
.btn.btn-link.text-primary:hover,
.btn.btn-link.text-primary:active,
.btn.btn-link.text-primary:focus {
  text-decoration: underline;
}
li .btn.btn-link {
  text-align: left;
}

/* vjs skip button start */
.video-js .vjs-skip-button {
  position: absolute;
  right: 2rem; /* Adjust as necessary */
  bottom: 7rem; /* Adjust the distance above the progress bar */
  z-index: 10; /* Ensure it's above other player elements */
  height: 4rem;
  max-width: 8rem;
  cursor: pointer;
}

.video-js .vjs-skip-button .skip-button-button {
  /* 20% of the  */
  /* max-width: 20%; */
  background-color: black;
}

.video-js .vjs-skip-button .skip-button-thumbnail {

}
.video-js .vjs-skip-button .skip-button-text {
  font-size: 2rem;
  padding: 0.5rem;
  text-align: center;
}
/* vjs skip button end */
/* vjs view full scene button start */
.video-js .vjs-view-full-scene-button {
  position: absolute;
  right: 2rem;
  bottom: 11rem;
  z-index: 10;
  height: 4rem;
  max-width: 8rem;
}

.video-js .vjs-view-full-scene-button .view-full-scene-button-button {
  /* 20% of the  */
  /* max-width: 20%; */
  background-color: black;
  cursor: pointer;
}

.video-js .vjs-view-full-scene-button .view-full-scene-button-text {
  font-size: 1rem;
  padding: 0.5rem;
  text-align: center;
}
/* vjs view full scene button end */
/* vjs progress bar start */
.video-js .vjs-progress-bar {
  /* height: 0.5rem; */
  background-color: #bb95cc;

  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  z-index: 10;
  /* height: 1rem; */
}
.video-js .vjs-progress-bar .progress {
  border-radius: 0;
}
/* vjs progress bar end */
/* kumposer form start */
.kumposer-form {
  background-color: #ffffff;
  border-radius: 2px;
}
/* kumposer form end */
/* video thumbnail start */
.video-thumbnail-wrapper {
  max-width: 100%;
}
.video-recommendation-thumbnail-wrapper {
  max-width: 100%;
}
.video-recommendation-thumbnail-wrapper .video-js {
  max-width: 100%;
}
/* video thumbnail end */
/* modals start */
.modal.fade .modal-dialog {
  transition: transform 0.1s ease-out;
}
/* modals end */