@import 'styles.css';

.call-to-action {
  padding: 16px 0;

  & code {
    background-color: rgba(47, 128, 237, 1);
    color: white;
    font-size: .9rem;
    letter-spacing: 0px;
    padding: 4px 8px;
    border-radius: 4px;
  }

  & .summary {
    color: var(--green);

  }

  & .action-steps div {
    line-height: 41px;
    margin-bottom: 8px;
    max-width: 272px;
    height: 41px;

    @media screen and (min-width: 1120px) {
      float: left;
    }
  }

  & .step-container {
    border-radius: calc(var(--base-width)*4);
    margin-right: var(--base-width);
    width: 98%
  }

  & .step-container > div {
    float: left;
    text-align: center;
  }

  & .icon-container {
    width: 37px;
    border-radius: 0px;
    padding-left: var(--base-width);
  }

  & .step-container .fa {
    font-size: 2em;
    line-height: 41px;
    color: #fff;
  }

  & .action-steps {
    font-size: 14px;
    font-weight: var(--font-weight-bold);

    & .message {
      color: white;
      padding-left: 8px;
    }

    & .complete {
      color: var(--green);
      background-color: var(--green);
    }
    & .incomplete {
      color: #828282;
      background-color: #828282;
    }
  }
}