overleaf/services/web/frontend/stylesheets/app/subscription.less

.form-helper {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3;
  vertical-align: initial;
  background-color: @gray;
  color: #fff;
  font-weight: bolder;
  border-radius: 50%;

  &:hover,
  &:focus {
    color: #fff;
    text-decoration: none;
  }
}

.price-breakdown {
  text-align: center;
  margin-bottom: -10px;
}

.input-feedback-message {
  display: none;
  font-size: 0.8em;

  .has-error & {
    display: inline-block;
  }
}

.payment-submit {
  padding-top: (@line-height-computed / 2);
}

.payment-method-toggle {
  margin-bottom: (@line-height-computed / 2);

  &-switch {
    display: inline-block;
    width: 50%;
    text-align: center;
    border: solid 1px @gray-lighter;
    border-radius: @border-radius-large 0 0 @border-radius-large;
    padding: (@line-height-computed / 2);
    color: @btn-switch-color;

    &:hover,
    &:focus {
      color: @btn-switch-color;
      text-decoration: none;
    }

    &:hover {
      color: @btn-switch-hover-color;
    }

    & + & {
      border-left-width: 0;
      border-radius: 0 @border-radius-large @border-radius-large 0;
    }

    &-selected {
      color: @link-active-color;
      box-shadow: inset 0 -2px 0 0;

      &:hover,
      &:focus {
        color: @link-active-color;
      }
    }
  }
}

.team-invite .message {
  margin: 3em 0;
}

.capitalised {
  text-transform: capitalize;
}

.three-d-secure-container {
  > .three-d-secure-recurly-container {
    height: 400px;

    > div[data-recurly='three-d-secure-container'] {
      height: 100%;
    }
  }
}