//________________________
//
// Spoke card
//
//________________________
@import "legacy_includes/_mixins.scss";
@import "legacy_includes/_reset.scss";

.spokecard-wrap {
  position: relative;
  margin: 100px auto;
  width: 600px;
  height: 380px;
  padding: 0;

  & > span {
    border: 1px solid black;
    height: 20px;
    width: 20px;
    position: absolute;
    display: block;
  }

  .tleft {
    top: -20px;
    left: -20px;
    border-top: 0;
    border-left: 0;
  }

  .bleft {
    bottom: -20px;
    left: -20px;
    border-bottom: 0;
    border-left: 0;
  }

  .tright {
    top: -20px;
    right: -20px;
    border-right: 0;
    border-top: 0;
  }

  .bright {
    bottom: -20px;
    right: -20px;
    border-right: 0;
    border-bottom: 0;
  }
}

.spokecard-background {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.qr-code-f,
.qr-code-b {
  display: block;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  background: white;
  padding: 4px 10px;
  margin: -87px 0 0 -70px;

  img {
    height: 148px;
  }
}

.qr-code-b {
  margin: -87px 0 0 -103px;
}
