.card {
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  height: 200px;
  background-color: #fefefe;
  z-index: 100;

  &-number {
    width: 100%;
  }

  &-holder-name {
    width: 100%;
  }

  &-expiration-date {
    width: 30%;
  }

  &-container {
    width: 100%;
  }

  &-types-container {
    height: 50px;
    width: 200px;

    .card-types,
    .type {
      height: 100%;
      width: 100%;

      & img {
        max-width: 40px;
      }
    }

    mat-button-toggle::ng-deep{
      .mat-button-toggle-button {
        height: 100%;
      }
    }
  }

  &-behind {
    width: 430px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 30%;
    z-index: 99;
  }
}

.card-behind-background {
  background-color: #f0f0ed;
  height: 100%;
  width: 100%;

  .card-cvc {
    width: 20%;
    margin-top: 30px;
    padding: 0 20px;
    background: white;
  }

  .card-strip {
    height: 50px;
    background-color: #8d8a85;
  }
}

.credit-card-container {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
}

.wrapper {
  height: 80vh;
  width: 100%;
}