input[type="checkbox"] {
  accent-color: #344054;
  color-scheme: light;
  cursor: pointer;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid #98a2b3;
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Every application-drawn checkmark uses this shared component. */
.check-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1em;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 1em;
}

.check-icon svg {
  display: block;
  fill: none;
  height: 100%;
  left: 50%;
  overflow: visible;
  position: absolute;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.availability {
  align-items: center;
  background: #f6f8fa;
  border: 1px solid var(--line, #d0d5dd);
  border-radius: 999px;
  color: var(--muted, #667085);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
  margin: 8px 0 0 10px;
  padding: 3px 9px 3px 5px;
  width: max-content;
}

.availability[hidden] {
  display: none !important;
}

.availability-dot {
  align-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  height: 17px;
  justify-content: center;
  width: 17px;
}

.availability-dot .check-icon {
  display: none;
}

.availability.is-available {
  background: var(--green-soft, #e9f6ee);
  border-color: #b7dfc3;
  color: var(--green, #15803d);
}

.availability.is-available .availability-dot {
  background: var(--green, #15803d);
  border-color: var(--green, #15803d);
}

.availability.is-available .availability-dot .check-icon {
  color: #ffffff;
  display: inline-flex;
  font-size: 10px;
}

.availability.is-unavailable {
  background: var(--danger-soft, #fef3f2);
  border-color: #fecdca;
  color: var(--danger, #b42318);
}

.availability.is-unavailable .availability-dot::after {
  content: "\00d7";
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
}