.t .sp_wrapper {
  display: block;
}

.mfa-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -.5rem;

  .mfa {
    background-color: #6a506e;
    color: white;
  }

  .mfa,
  .new-mfa {
    border: 1px solid var(--grey);
    border-radius: .5rem;
    display: grid;
    align-items: center;
    justify-content: center;
    margin: .5rem;
    padding: 10px;
    position: relative;
    min-height: 70px;
    min-width: 150px;

    .rm {
      position: absolute;
      display: none;
      top: -2px;
      left: -2px;
      transform: translateX(-50%) translateY(-50%);
      cursor: pointer;
      color: var(--warn);
      transition: all .2s ease;

      &[disabled] {
        display: none;
      }
    }

    &:not(.disabled) {
      cursor: default;

      &:hover {
        .rm {
          display: block;
        }
      }
    }

    &.disabled {
      opacity: .5;
      cursor: not-allowed;
    }
  }

  .new-mfa:not(.disabled) {
    cursor: pointer;
  }
}