sparkletown/sparkle

@import "scss/constants.scss";
.TimingEventModal {
  &__container {
    display: flex;
    justify-content: space-between;

    label,
    div,
    input {
      width: 49%;
      display: inline-block;
      margin-bottom: 0;
    }
  }

  &__duration_container {
    input {
      display: inline-block;
      width: auto;
      border: $border-width--slim solid var(--accent--over-20a);
      text-align: left;
    }

    label {
      margin-left: 4px;
      margin-right: 8px;
    }
  }

  .modal-content {
    background-color: $light-grey;
  }

  .model-content,
  .modal-dialog {
    width: 700px;
    max-width: 700px;
  }

  // @debt this should be shorter, not having to compensate for `global.scss` interference. remove when no longer necessary
  &__input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.8rem;

    input.input-block {
      margin-bottom: 0.3rem;
    }

    .input-info {
      font-size: 0.8em;
      opacity: 0.8;
      align-self: center;
    }

    &.input-info {
      align-self: center;
    }

    .input-error {
      text-align: center;
      color: var(--danger--under);
      font-size: 0.9em;
      font-weight: bold;
    }

    &__modal-input {
      width: 100% !important;
      border: $border-width--slim solid var(--accent--over-20a);
      text-align: left;

      &--indented {
        margin-right: $spacing--sm;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-text-fill-color: var(--content--over);
        -webkit-box-shadow: box-shadow--input-autofill(
            var(--content--under-70a)
          )
          inset;
        box-shadow: box-shadow--input-autofill(var(--content--under-70a)) inset;
      }
    }
  }

  .ButtonNG {
    max-width: none;
  }
}