.rating-label {
  color: var(--dark-blue);
  font-size: small;
}

.star {
  width: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.star.clicked {
  transform: scale(1.2);
  /* Slightly enlarges the star when clicked */
  opacity: 0.8;
  /* Adds a slight transparency when clicked */
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Star click animation */
@keyframes starClick {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1.2);
  }
}

audio {
  width: 100%;
}

.uploaded-files-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 10px;
  margin-bottom: 15px;
}

.file-box {
  border: none;
  padding: 10px;
  background-color: var(--background-primary-light-gray);
  border-radius: 20px;
  max-width: 200px;
  word-wrap: break-word;
  text-align: center;
  position: relative; /* This allows absolute positioning inside it */
  opacity: 1; /* Initial opacity */
  transition: opacity 0.5s ease; /* Transition for opacity */
}

.file-box.popped {
  opacity: 0; /* Fade out */
}

.file-box p {
  margin: 0;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--pink);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-file-btn {
  background-color: var(--light-blue);
  color: white;
}
.required-star{
  padding-inline-start: 0.5rem;
}

.uploaded-files-view-container {
  max-height: 300px; /* Adjust height as needed */
  overflow-y: scroll;
  overflow-x: hidden; /* Optional: hide horizontal scroll */
  scrollbar-color: var(--light-blue) transparent; /* Custom scrollbar color */
}

/* Optional: Customize the scrollbar for Webkit browsers */
.uploaded-files-view-container::-webkit-scrollbar {
  width: 50px !important; /* Scrollbar width */
}

.uploaded-files-view-container::-webkit-scrollbar-thumb {
  background-color: var(--background-primary-light-gray); /* Scrollbar thumb color */
  border-radius: 10px !important; /* Rounded corners */
}

.uploaded-files-view-container::-webkit-scrollbar-track {
  background-color: var(--background-primary-light-gray); /* Track color */
}

/* Base button style (inactive state) */
#Individual-or-all .Individual-or-all-btn {
  background-color: var(--background-primary-light-gray); /* Default inactive color */
  color: var(--dark-gray); /* Default text color */
  border: none;
  font-weight: bold;
  border-radius: 0; /* No rounded corners */
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sunken effect */
}

/* Active button style (raised effect with no shadow) */
#Individual-or-all .Individual-or-all-btn.active {
  background-color: white; /* Active button color */
  color: var(--dark-blue); /* Active text color */
  box-shadow: none; /* No shadow */
  position: relative;
  z-index: 1; /* Ensure it appears above */
}

/* Vertical line between buttons */
#Individual-or-all .vertical-line {
  width: 1px;
  background-color: var(--background-primary-light-gray); /* Gray line */
}

.view-respons-container{
  display: none;
}

.view-respons-container.active{
  display: block;
}

.page-link{
  color: var(--dark-blue) !important;
}

/* Medium devices */
@media (min-width: 768px) { 
  .star {
    width: 1.3rem;
    
  }

 }