.mobile-view {
  .post-event-builder-modal {
    .modal-inner-container {
      .modal-body {
        .d-date-time-input-range {
          flex-direction: column;
          width: 100%;
          border: 0;

          .d-date-time-input {
            .d-date-input {
              width: 100%;
            }

            .name {
              font-size: var(--font-down-1);
            }

            &.from {
              margin-right: 2.65em;
            }

            &.to {
              margin-top: 0.5em;
            }
          }
        }
      }
    }
  }
}

.post-event-builder-modal {
  .modal-inner-container {
    width: 550px;
  }

  .conditional-loading-section {
    background: transparent;
  }

  .modal-body {
    min-height: 200px;

    .d-date-time-input-range {
      margin-bottom: 2em;
      flex-direction: column;

      .d-date-time-input {
        display: flex;
        justify-content: flex-start;
      }

      .select-kit-header {
        height: 100%;
      }

      .d-date-input {
        box-sizing: border-box;
        flex: 0;
        min-width: unset;

        .date-picker {
          width: 155px;
        }
      }

      .d-time-input {
        .combo-box {
          width: 130px;
        }

        .selected-name {
          border: 0;

          .name {
            font-size: var(--font-down-1);
          }
        }
      }

      .to.d-date-time-input {
        .d-time-input {
          order: 1;
        }

        .d-date-input {
          order: 0;
        }

        .clear-date-time {
          order: 2;
          margin-left: auto;
        }

        .pika-single.is-bound {
          left: -2px !important;
        }
      }
    }
  }

  .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .event-field {
    display: flex;
    margin-bottom: 2em;
    flex-direction: column;

    &.description {
      textarea {
        border-radius: var(--d-input-border-radius);
        margin: 0;
      }
    }

    &.name,
    &.url {
      input {
        width: 100%;
      }
    }

    .event-field-description {
      margin: 0 0 0.5em 0;
    }

    .event-field-label {
      display: flex;
      min-height: 1px;
      padding-top: 0;
      top: 0;
      vertical-align: middle;
      align-items: center;

      .label {
        font-weight: 700;
        margin-bottom: 0.5em;
      }
    }

    .event-field-control {
      display: flex;
      flex: 1;
      flex-direction: column;

      .select-kit.available-recurrences {
        width: 100%;
      }

      .custom-field-label {
        font-weight: 500;
        margin: 0.5em 0 0.25em 0;
      }

      .custom-field-input {
        width: 100%;
      }

      .radio-label,
      .checkbox-label {
        display: flex;
        align-items: center;
        margin-bottom: 1em;

        &:last-child {
          margin-bottom: 0;
        }

        input[type="radio"] {
          width: auto;
        }

        .message {
          margin: 0 0 0 1em;
          padding: 0;
          display: flex;
          flex-direction: column;

          .description {
            font-weight: normal;
          }
        }
      }

      .ac-wrap {
        max-width: 100%;
      }

      input {
        margin: 0;
      }
    }
  }

  .event-field.reminders {
    display: flex;

    .reminders-list {
      display: flex;
      flex-direction: column;
      margin-bottom: 1em;

      .reminder-item {
        display: flex;
        flex: 1 0 auto;
        padding: 0.25em 0;

        .select-kit-header {
          height: 100%;
        }

        .reminder-type {
          width: 320px;
          margin-right: 0.5em;
        }

        .reminder-value {
          width: 60px;
          margin-right: 0.5em;
        }

        .reminder-unit {
          width: 140px;
          margin-right: 0.5em;
        }

        .reminder-period {
          margin-right: 0.5em;
        }

        .remove-reminder {
          margin-left: auto;
        }
      }
    }

    .add-reminder {
      align-self: flex-start;
    }
  }
}