/* Custom styles for toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px; /* Adjust width as necessary */
  height: 20px; /* Adjust height as necessary */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px; /* Ensures it is rounded */
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px; /* Slightly smaller than the slider */
  width: 14px; /* Slightly smaller than the slider */
  left: 3px; /* Centered with a small margin */
  bottom: 3px; /* Centered with a small margin */
  background-color: white;
  transition: .4s;
  border-radius: 50%; /* Makes the knob circular */
}

input:checked + .slider {
  background-color: #3e4a7a;
}

input:checked + .slider:before {
  transform: translateX(20px); /* Half the width of the slider */
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

/* Custom Tailwind CSS classes */
.bg-custom-blue {
  background-color: #3e4a7a;
}

.bg-custom-blue-dark:hover {
  background-color: #2e3a5a;
}

.text-custom-blue {
  color: #3e4a7a;
}

/* Custom styles for three-state switch */
.three-state-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60px; /* Adjust width as necessary */
  height: 20px; /* Adjust height as necessary */
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.4s;
}

.three-state-switch span {
  position: absolute;
  height: 14px; /* Slightly smaller than the slider */
  width: 14px; /* Slightly smaller than the slider */
  background-color: white;
  border-radius: 50%; /* Makes the knob circular */
  transition: transform 0.4s;
}

.three-state-switch[data-state="0"] span {
  transform: translateX(3px);
}

.three-state-switch[data-state="1"] span {
  transform: translateX(22px); /* Middle position */
}

.three-state-switch[data-state="2"] span {
  transform: translateX(41px); /* Right position */
}

.three-state-switch[data-state="0"] {
  background-color: #3e4a7a; /* Blue */
}

.three-state-switch[data-state="1"] {
  background-color: #ff0000; /* Red */
}

.three-state-switch[data-state="2"] {
  background-color: #ffa500; /* Orange */
}

.works[data-state="0"] {
  background-color: #ffa500; /* Orange */
}

.works[data-state="1"] {
  background-color: #ff0000; /* Red */
}

.works[data-state="2"] {
  background-color: #3a7a3a; /* Green */
}