.bar-bg-mana {
  width: 100%;
  background-color: #0a004d;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
.bar-bg-health {
  width: 100%;
  background-color: #a10000;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.bar-fg {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-in-out;
}

.bar-fg-red {
  background-color: rgb(52, 190, 24);
}

.bar-fg-blue {
  background-color: blue;
}

.gender-icon {
  background: linear-gradient(
    45deg,
    #FF69B4 0%,    /* Pink */
    #8A2BE2 50%,   /* Purple */
    #4169E1 100%   /* Blue */
  );
  border-radius: 5px;
}

.rarity-1 {
  color: #9d9d9d !important;
  border: 4px solid #9d9d9d;
}

.rarity-2 {
  color: #ffffff !important;
  border: 4px solid #ffffff;
}

.rarity-3 {
  color: #15ff00 !important;
  border: 4px solid #1eff00;
}

.rarity-4 {
  color: #0070dd !important;
  border: 4px solid #0070dd;
}

.rarity-5 {
  color: #a335ee !important;
  border: 4px solid #a335ee;
}

.rarity-6 {
  color: #ff8000 !important;
  border: 4px solid #ff8000;
}

.rarity-7 {
  color: #fa0101 !important;
  border: 4px solid #fa0101;
}


.rarity-image {
  border-radius: 3px;
}

.rarity-name-1 {
  color: #9d9d9d !important;
  font-weight: bold !important;
}

.rarity-name-2 {
  color: #ffffff !important;
  font-weight: bold !important;
}

.rarity-name-3 {
  color: #15ff00 !important;
  font-weight: bold !important;
}

.rarity-name-4 {
  color: #0070dd !important;
  font-weight: bold !important;
}

.rarity-name-5 {
  color: #a335ee !important;
  font-weight: bold !important;
}

.rarity-name-6 {
  color: #ff8000 !important;
  font-weight: bold !important;
}

.rarity-name-7 {
  color: #fa0101 !important;
  font-weight: bold !important;
}