@import 'includes/variables';

.twofas-print-backup-codes {
  width: 100%;
  text-align: center;

  .backup-codes-list {
    width: 300px;
    margin: auto;
    display: inline-block;
    text-align: left;

    ul {
      list-style: none;
      padding: 0 0 10px 0;
    }

    li {
      font-size: 1.5em;

      &:before {
        content: '●';
        margin-right: 10px;
        font-size: 18px;
        color: $backup-codes-list-bullet-color;
      }
    }

    span {
      color: $backup-codes-list-text-color;
      font-size: 0.8em;
    }
  }

  .twofas-print-backup-codes-footer {
    display: block;
    margin: auto;
    overflow: hidden;
    clear: both;
    line-height: 50px;

    .twofas-print-backup-codes-wrapper {
      width: auto;
      border-top: 1px solid #ddd;
      display: inline-block;

      img,
      span {
        display: inline-block;
        vertical-align: middle;
      }

      img {
        margin-right: 10px;
      }

      span {
        font-size: 1.2em
      }
    }
  }
}