/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 08 2026 | 08:14:12 */
/* =========================
   BASE
========================= */
.alert-simple {
  position: relative;
  padding: 14px 16px 14px 48px;
  border-radius: 10px;
  margin: 15px 0;
  font-family: Quicksand, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  color: var(--pc-body-color);
  background: rgba(150,118,193,0.12);
  border: 1px solid rgba(150,118,193,0.4);
}

/* accent line */
.alert-simple::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: currentColor;
}

/* icon */
.alert-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* =========================
   TEXT MODES
========================= */

/* STATIC */
.alert-static::after {
  display: block;
  white-space: pre-line;
}

/* DYNAMIC */
.alert-dynamic::after {
  display: block;
  white-space: pre-line;
  content: attr(data-title) "\A" attr(data-text);
}

/* =========================
   ANIMATIONS
========================= */
@keyframes blink-soft {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}
@keyframes pop-soft {
  0%,100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.15); }
}
@keyframes rotate-wiggle {
  0% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(-50%) rotate(-10deg); }
  50% { transform: translateY(-50%) rotate(0deg); }
  75% { transform: translateY(-50%) rotate(10deg); }
  100% { transform: translateY(-50%) rotate(0deg); }
}
@keyframes pulse-urgent {
  0% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.2); }
  100% { transform: translateY(-50%) scale(1); }
}

/* =========================
   VARIANTS + STATIC TEXT
========================= */

/* WARNING */
.alert-warning {
  color: #f3c969;
  background: rgba(243,201,105,.15);
  border-color: rgba(243,201,105,.55);
}
.alert-warning.alert-static::after {
  content: "You can keep or share this work but do not sell this work for any purpose (such as putting shortlink, etc). Also please watch it on the official site if there's any and possible for you. Don't forget to support Gracia and JKT48 by watching it on the official YouTube or buying their official releases/merchandise.";
}
.alert-warning .alert-icon {
  animation: blink-soft 1.4s infinite;
}

/* INFO */
.alert-info {
  color: #6aa8ff;
  background: rgba(106,168,255,.12);
  border-color: rgba(106,168,255,.45);
}
.alert-info.alert-static::after {
  content: "RAW used in here is taken from Youtube. Though, the RAW I used for the softsub is the cut version that I cut myself. Therefore, the softsub can't be used with any other RAW except the one that is provided.";
}
.alert-info .alert-icon {
  animation: rotate-wiggle 1.8s ease-in-out infinite;
}

/* SUCCESS */
.alert-success {
  color: #5fd3a3;
  background: rgba(95,211,163,.12);
  border-color: rgba(95,211,163,.45);
}
.alert-success.alert-static::after {
  content: "Softsub is compatible with any RAW available online with the same duration.";
}
.alert-success .alert-icon {
  animation: pop-soft 1.8s infinite;
}

/* DANGER */
.alert-danger {
  color: #ff7b7b;
  background: rgba(255,123,123,.14);
  border-color: rgba(255,123,123,.6);
}
.alert-danger.alert-static::after {
  content: "All rights of this content is own by JKT48. This is purely just for archive, therefore, please do not sell this for any reasons including putting shortlink, etc.";
}
.alert-danger .alert-icon {
  animation: pulse-urgent 1.0s infinite;
}