.gang-point {
  border-radius: 3rem;
  background: #ecf8ff;
  padding: 8px 10px;
  display: flex;
  width: fit-content;
  flex-shrink: 0;
  gap: 4px;

  color: #009ef6;
  font-family: Inter, serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}

#gang-point-mission {
  .title {
    color: #181c32;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
  }

  padding: 6px 3px;
}

.mission-card {
  flex-grow: 1;

  .card {
    height: 100%;
  }

  .title {
    .icon {
      width: 50px;
      height: 50px;
      background-color: #ecf8ff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
    }
  }

  .description {
    color: #7e8299;
    margin-bottom: 30px;
  }
}

.btn-explore {
  --btn-explore-text: #009ef6;
  --btn-explore-bg: #ecf8ff;
  --btn-explore-bg-hover: #ccecff;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--btn-explore-text);
  --bs-btn-bg: var(--btn-explore-bg);
  --bs-btn-border-color: var(--btn-explore-bg);
  --bs-btn-hover-color: var(--btn-explore-text);
  --bs-btn-hover-bg: var(--btn-explore-bg-hover);
  --bs-btn-hover-border-color: var(--btn-explore-bg-hover);
}

.user-point-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  padding: auto;
  border-radius: 0.5rem;
  background-color: #ecf8ff;
}
.user-point-item-icon > .ki-duotone {
  color: #009ef6;
  font-size: 25px;
}