.form-control {
  font-family: $desktop-font;
  background-color: $white;
  border: 1px solid rgba($black, 0.3);
  box-shadow: inset 0 2px 2px rgba($black, 0.1);
  color: $gray-900;
  font-size: $font-size-large;
  border-radius: 4px;
  padding: $spacing/2 $spacing;

  &.append {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:disabled {
    border-color: rgba($black, 0.2);
    box-shadow: none;
  }

  &:not(:disabled) {
    &:focus {
      border-color: rgba($black, 0.4);
      box-shadow: 0 2px 3px rgba($black, 0.2);
    }
  }
}

.form-legend {
  margin-bottom: $spacing;
}

.form-legend-title {
  color: $text-black;
  font-size: $font-size-large;
  font-weight: $font-weight-bold;
}

.form-legend-content {
  border-top: 1px solid $border-gray-light;
  margin-top: $spacing/2;
  padding-top: $spacing/2;
}

.form-control-font {
  font-family: Arial, Helvetica, sans-serif;
  background-color: $white;
  border: 1px solid rgba($black, 0.3);
  box-shadow: inset 0 2px 2px rgba($black, 0.1);
  color: #035cc2;
  font-size: 16px;
  border-radius: 4px;
  padding: $spacing/2.8 $spacing;
}

.meeting-id-control {
  font-family: Arial, Helvetica, sans-serif;
  background-color: $white;
  border: 1px solid $gray-400;
  border-radius: 4px;
  padding: 1rem;
}