@import '../../assets/styles/variable.scss';

.setAlerts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  .common-heading {
    margin-bottom: 40px;
    h3 {
      font-weight: $font-weight-600;
      font-size: $font-size-24;
      line-height: $line-height-26;
      letter-spacing: $letter-spacing-point4;
      color: $black_variation-2;
    }
  }
  .common-container {
    display: flex;
    justify-content: space-evenly;
    width: 67%;
  }
  .alerts-card {
    width: 43%;
    padding: 40px 55px;
    text-align: center;
    background: $white;
    box-shadow: 4px 6px 32px -2px rgba(226, 226, 226, 0.24);
    border-radius: 20px;
    position: relative;
    img {
      margin-bottom: 24px;
    }
    h3 {
      font-weight: $font-weight-600;
      font-size: $font-size-18;
      line-height: $line-height-20;
      text-align: center;
      letter-spacing: $letter-spacing;
      color: $black_variation-2;
      margin-bottom: 12px;
    }
    h5 {
      font-weight: $font-weight-600;
      font-size: $font-size-18;
      line-height: $line-height-20;
      text-align: center;
      color: $white;
      letter-spacing: $letter-spacing;
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 50px;
      background: $green;
      border-radius: 0px 20px 0px 80px;
      box-shadow: 4px 6px 32px -2px rgba(226, 226, 226, 0.24);
      width: 88px;
      height: 88px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    p {
      font-weight: $font-weight-normal;
      font-size: $font-size-14;
      line-height: $line-height-22;
      text-align: center;
      letter-spacing: $letter-spacing;
      color: $grey_variation-3;
      margin-bottom: 32px;
    }
    .alert-button {
      display: flex;
      justify-content: center;
      img {
        margin-bottom: 0px;
      }
    }
  }
}
