.wrapper.img-1 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/ne-1.jpg');
}
.wrapper.img-2 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/ragnaros.jpg');
}
.wrapper.img-3 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/illidan-1.jpg');
}
.wrapper.img-4 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/death-angel.jpg');
}
.wrapper.img-5 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/ne-2.jpg');
}
.wrapper.img-6 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/ne-3.jpg');
}
.wrapper.img-7 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/orc-1.jpg');
}
.wrapper.img-8 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/orc-2.jpg');
}
.wrapper.img-9 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/orc-campfire.jpg');
}
.wrapper.img-10 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/undead-1.jpg');
}
.wrapper.img-11 {
  background-image: url('../../../../apps/keira/src/assets/img/login-backgrounds/chromie.jpg');
}

$main-color-blue: #0052a7;
$secondary-color-blue: #cdcfff;
$main-color-red: #772b2b;
$secondary-color-red: #ff7683;
$main-color-green: #00520a;
$secondary-color-green: #b7e2ad;

// Blue (default)
.wrapper {
  .input-group-prepend span {
    background-color: $main-color-blue;
  }
  .btn {
    background-color: $main-color-blue;
    border-color: $main-color-blue;
  }
  a,
  a:hover {
    color: $secondary-color-blue;
  }
}

// Red
.wrapper.img-11,
.wrapper.img-7,
.wrapper.img-8,
.wrapper.img-2 {
  .input-group-prepend span {
    background-color: $main-color-red;
  }
  .btn {
    background-color: $main-color-red;
    border-color: $main-color-red;
  }
  a,
  a:hover {
    color: $secondary-color-red;
  }
}

// Green
.wrapper.img-10,
.wrapper.img-3 {
  .input-group-prepend span {
    background-color: $main-color-green;
  }
  .btn {
    background-color: $main-color-green;
    border-color: $main-color-green;
  }
  a,
  a:hover {
    color: $secondary-color-green;
  }
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  height: 100vh;

  .content {
    position: relative;
    width: 500px;
    min-height: 55px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    padding: 30px;
    color: white;

    .title {
      text-align: center;
    }

    .form-wrapper {
      max-width: 360px;
      margin: 20px auto auto;

      .recent-container {
        // height: 38px;
        margin-bottom: 6px;
        padding-right: 4px;

        .form-check-input {
          width: 16px;
          height: 16px;
        }

        .form-check-label {
          margin-top: 2px;
          font-weight: bold;
        }

        .btn-group {
          float: right;

          .dropdown-menu {
            background-color: #000;

            a {
              font-weight: bold;
              color: #fff;

              &:hover,
              &:focus,
              &:active {
                background-color: #2b2b2b;
              }
            }
          }
        }
      }

      .form-group {
        display: flex;

        .input-group-prepend span {
          width: 130px;
          font-weight: bold;
          color: #fff;
          border: 0 !important;

          i {
            margin-right: 10px;
            margin-bottom: 2px;
          }
        }

        .form-control {
          width: auto;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }

      .connect-button {
        font-weight: bold;
        width: 70%;
        margin: auto;
        display: block;
      }

      .btn {
        font-weight: bold;

        &:focus {
          box-shadow: none;
        }
      }
    }

    .end-text {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);

      a,
      a:hover {
        font-weight: bold;
        text-decoration: none;
      }
    }
  }
}
