.ob-form__auto-save-icon {
  position: fixed;
  bottom: 1px;
  left: 1px;
  font-size: $size-5;
  animation: spin 1.5s linear infinite;
  z-index: 100;
}

.ob-label__container {
  display: flex;
  align-items: center;
}

.ob-label {
  font-size: 1.1rem;
}

.ob-label__required::after {
  content: '*';
  display: inline;
}

.ob-label__hint {
  margin-left: $size-8;
}
.ob-hint-tooltip {
  a {
    color: #5496f3;
  }
  a:hover {
    text-decoration: underline;
  }
  a:visited {
    color: #b76bf5;
  }
}
.MuiTooltip-popper {
  .MuiTooltip-tooltip {
    background-color: rgba(26, 26, 26, 0.92);
  }
  .MuiTooltip-arrow {
    color: rgba(26, 26, 26, 0.92);
  }
}

.ob-form-container {
  position: relative;

  .field {
    width: 100%;

    &:not(:last-child) {
      margin-bottom: 0;
    }
  }
}

.ob-element:not(:last-child) {
  margin-bottom: $size-2;
}

.ob-buttons-submit__spacer {
  flex: 1;
}

@media only screen and (max-width: $mobile) {
  .ob-form-container {
    .ob-button {
      flex: 1;

      &:nth-child(even) {
        margin-right: 0;
      }
    }
  }
}

.ob-buttons-submit {
  container-name: ob-buttons-submit;
  container-type: inline-size;
}

@container ob-buttons-submit (max-width: #{$mobile}) {
  .ob-buttons-submit {
    .ob-button {
      flex: unset;
      min-width: unset;
    }
  }
}

.ob-hint-tooltip {
  max-width: 400px;
}

.MuiTooltip-popper {
  .MuiTooltip-tooltip {
    font-size: $size-6;
  }
}

.ob-customisable-button-inner {
  display: flex;
  gap: $size-8;
}

.ob-hint-text {
  font-size: $size-6;
}

.ob-hint-text__container {
  margin-bottom: $size-6;
}

.ob-error__text {
  display: flex;
}