.alert_required_base {
  background-image: linear-gradient(90deg, #f41414, #f4148d, #ffbc69);
  color: #fff;
}

.alert_required_base_purple {
  background-image: linear-gradient(90deg, #4a90e2, #8e44ad, #6c3483);
  color: #fff;
}

.alert_required_base_warning {
  background-image: linear-gradient(90deg, #f1c40f, #f39c12, #e67e22);
  color: #fff;
}

.alert_required_base_warning_yellow_orange_red {
  background-image: linear-gradient(90deg, #f1c40f, #e67e22, #e74c3c);
  color: #fff;
}

.alert_required_base_gold {
  background-image: linear-gradient(90deg, #f39c12, #e67e22, #d35400);
  color: #fff;
}

.alert_required_base_blue_purple {
  background-image: linear-gradient(90deg, #3498db, #8e44ad, #9b59b6);
  color: #fff;
}

.alert_required_base_success {
  background-image: linear-gradient(90deg, #2ecc71, #27ae60, #16a085);
  color: #fff;
}

.alert_required_base_success_color {
  background: linear-gradient(90deg, #2ecc71, #27ae60, #16a085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.alert_required_base_danger {
  background-image: linear-gradient(90deg, #ff4d4d, #ff1a1a, #b30000);
  color: #fff;
}

.alert_required_base_red_rose_purple {
  background-image: linear-gradient(90deg, #e74c3c, #f06292, #9b59b6);
  color: #fff;
}

/* Required */

.required {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  border-radius: 15px;
  padding: 2px 8px;
  background-image: linear-gradient(90deg, #f41414, #f4148d, #ffbc69);
  color: #fff;
  border: none;
  transition: background 0.3s ease;
}

.required:after {
  content: " *";
  color: red;
  font-weight: normal;
}

.required_normal {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
}

.required_normal:after {
  content: " *";
  color: red;
  font-weight: normal;
}

/* End Required */

.gradient_blue-rainbow {
  background: linear-gradient(
    101deg,
    rgba(0, 240, 250, 1) 0%,
    rgba(244, 229, 83, 1) 100%
  );
}

.gradient_blue-rainbow_2_black_font {
  background: linear-gradient(
    101deg,
    rgba(0, 240, 250, 1) 0%,
    rgba(244, 229, 83, 1) 100%
  );
  color: #2f3133;
  transition: background-image 0.5s ease; /* Smooth transition for hover effect */
}

.gradient_blue-rainbow_2_black_font:hover {
  background: linear-gradient(
    101deg,
    rgba(244, 229, 83, 1) 0%,
    rgba(0, 240, 250, 1) 100%
  );
}

.gradient_blue-rainbow_black_font {
  background: rgb(0, 240, 250);
  background: linear-gradient(
    101deg,
    rgba(0, 240, 250, 1) 0%,
    rgba(244, 229, 83, 1) 100%
  );
  color: #55585c;
}

.gradient_blue-rainbow_black_pure_font {
  background: rgb(0, 240, 250);
  background: linear-gradient(
    101deg,
    rgba(0, 240, 250, 1) 0%,
    rgba(244, 229, 83, 1) 100%
  );
  color: #000;
}

.gradient_green_success {
  background-image: linear-gradient(90deg, #2ecc71, #27ae60, #16a085);
  color: #fff;
  transition: background-image 0.5s ease; /* Smooth transition for hover effect */
}

.gradient_green_success:hover {
  background-image: linear-gradient(90deg, #16a085, #27ae60, #2ecc71);
  color: #fff;
  /* Reverse the gradient */
}

.gradient_rainbow {
  background-image: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #8b00ff
  ); /* Rainbow gradient */
  color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  transition: background-image 0.5s ease; /* Smooth transition */
}

.gradient_rainbow:hover {
  background-image: linear-gradient(
    90deg,
    #8b00ff,
    #4b0082,
    #0000ff,
    #00ff00,
    #ffff00,
    #ff7f00,
    #ff0000
  ); /* Reversed rainbow gradient */
}

/* Thumbnail Fixed */

.darikehidupan_thumbnail_fixed_box {
  width: 150px; /* Set a fixed width */
  height: 150px; /* Set a fixed height */
  object-fit: cover; /* Ensures the image scales without distortion */
  margin: auto; /* Centers the thumbnail inside the card */
  display: block; /* Ensures consistent centering */
}

/* Wiggle */

.wiggle-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.wiggle-button:hover {
  animation: wiggle 0.5s ease;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Bounce */

.bouncing-button {
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}

/* Bouncing text */
.bouncing-text {
  display: inline-block;
  animation: bounce 2s infinite;
}

.bouncing-text_4s {
  display: inline-block;
  animation: bounce 4s infinite;
}

/* Bounce animation */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}