.opacityin {
  opacity: 0.5;
  animation-name: opacitya;
  animation-duration: 500ms;
}
.opacityout {
  opacity: 1;
  animation-name: opacityb;
  animation-duration: 500ms;
}

@keyframes opacitya {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes opacityb {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.screen-height {
  height: 100vh;
}
.scroll-bar {
  max-height: 50px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.content-displayed {
  min-height: 150px;
}
#buttons {
  z-index: 1000;
}

input[type="range"]::-moz-range-progress {
  background: var(--bs-primary);
  height: 0.5rem;
  border-radius: 1rem;
  box-shadow: inset;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--bs-primary);
}
:root {
  --bs-primary: #663366 !important;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(102, 51, 102, 0.5);
}

input[type="range"]::-moz-range-thumb {
  background-color: var(--bs-primary);
}
input[type="range"]::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}
input[type="range"]::-ms-thumb {
  background-color: var(--bs-primary);
}

input[type="range"]::-moz-focus-inner {
  border-color: var(--bs-primary);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23ff85ff'/></svg>") !important; */
}
.form-check-input:focus {
  color: #663366;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23ff85ff'/></svg>") !important;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(102, 51, 102, 0.502);
}
.form-check-input:focus-visible {
  outline-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(102, 51, 102, 0.5);
}