.form-check {
  color: inherit !important;
}

.custom-check-input,
.form-check-input {
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;

  &:checked[type="radio"],
  &:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e") !important;
  }

  &[type="radio"],
  &[type="checkbox"] {
    border-radius: 50% !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin-top: -0.125rem;
    vertical-align: top !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
  }

  &:checked {
    background-color: #4fc9da !important;
    border-color: #4fc9da !important;
  }
}

.custom-check-group {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.custom-button {
  border: 0;
  background-color: #ddd;
  color: #333;
  padding: 10px 20px;
  border-radius: 12px !important;
  border: 0 !important;
  font-size: 14px;

  &.small {
    padding: 10px 7px;
    font-size: 12px;
    border-radius: 5px !important;
  }

  &.warn {
    color: #fff !important;
    background-color: #e8c444 !important;
    box-shadow: none !important;

    &:hover {
      background-color: #d4b23d !important;
    }
  }

  &.secondary {
    color: #403d38 !important;
    background-color: #dad3c3 !important;

    &:hover {
      background-color: #c1b9a8;
    }
  }

  &.danger {
    color: #fff !important;
    background-color: #f06445 !important;
    box-shadow: none !important;

    &:hover {
      background-color: #d45a3d !important;
    }
  }

  &.success {
    color: #fff !important;
    background-color: #b8d935 !important;
    box-shadow: none !important;

    &:hover {
      background-color: #99b42c !important;
    }
  }

  &.primary {
    color: #fff !important;
    background-color: #4fc9da !important;

    &:hover {
      background-color: #38a8b8 !important;
    }
  }
}

.form-control {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid #efe9e1 !important;
  border-radius: 12px;
}

.btn-outline-success,
.input-group-text,
.rounded-start,
.btn-secondary {
  color: #211f1c;
  text-align: center;
  white-space: nowrap;
  background-color: #f8f6f2;
  border: 1px solid #efe9e1;
  border-radius: 12px !important;

  &.btn:hover {
    background-color: #e8e4da !important;
    border-color: #e8e4da !important;
    color: #211f1c !important;
    cursor: pointer;
  }
}

.btn-outline-success,
.input-group-text,
.rounded-start,
.btn-secondary,
.form-control {
  padding: 10px 20px;
  font-size: 13px;
}

.form-group {
  gap: 0 !important;

  > div,
  > button {
    &:not(:first-child):not(:last-child),
    &:not(:first-child):not(:last-child) * {
      border-radius: 0 !important;
    }

    &:not(:first-child),
    &:not(:first-child) * {
      border-left: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    &:first-child,
    &:first-child * {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    &:last-child,
    &:last-child * {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
  }
}

.custom-button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;

  & > * {
    margin-right: 0 !important;
  }

  & > *:not(:last-child) {
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  & > *:not(:first-child) {
    margin-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}