// Special styles, because older bootstrap:
#timeSelectionCustom {
  margin: 15px 0 0 0;
  &.show {
    display: flex;
  }
  label {
    margin-right: 0.5rem;
  }
  input {
    margin-right: 1rem;
    padding: 0.25rem;
  }
  .btn-success {
    margin-right: 0;
  }
}

// Duplicated from period_selection in packs
#timeSelectionBtnGroup {
  .period-select-standard {
    transition: opacity 0.5s ease-in-out;
  }
  &.custom-period-selected .period-select-standard {
    opacity: 0.6;
  }
}

.custom-time-selection {
  @extend .row;
  justify-content: flex-end;
  // We always want the form to be inline, so style manually
  .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }
  label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-control {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
  }
  .btn-success {
    margin-right: 15px;
  }

  .end-time-control {
    margin-left: 1rem;
  }
  @include media-breakpoint-down(sm) {
    justify-content: flex-start;
    margin: 15px 0 25px;
    .form-group {
      justify-content: flex-end;
      margin-top: 8px;
      flex: 0 0 75%;
      max-width: 75%;
      position: relative;
      padding-left: 0;
    }
    .end-time-control {
      margin-left: 0;
    }
  }
}

@media (max-width: 400px) {
  .custom-time-selection {
    .form-group {
      display: block;
      max-width: 100%;
      flex: 0 0 100%;
      label {
        text-align: left;
        display: inline-block;
      }
    }
    #updatePeriodSelectCustom {
      margin-top: 6px;
    }
  }
}
