.un_1 {
  animation: tracking-in-expand-fwd 3.5s cubic-bezier(0.215, 0.61, 0.355, 1)
    infinite alternate;
}
.un_2 {
  animation: focus-in-expand 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
    alternate both;
}
.un_3 {
  animation: tracking-in-expand-fwd 1s infinite alternate both;
}
.un_4 {
  animation: heartbeat 3s infinite alternate both;
}
.un_5 {
  animation: shake-right 1s infinite alternate forwards;
}
.un_6 {
  animation: focus-in-expand 1s infinite alternate both;
}
.un_7 {
  animation: shake-lr 1s infinite alternate forwards;
}
.un_8 {
  animation: jello-horizontal 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite
    alternate;
}
.un_9 {
  animation: heartbeat 1.5s ease-in-out infinite both;
}
.un_10 {
  animation: shake-horizontal 3s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    infinite alternate-reverse both;
}
.un_11 {
  animation: shake-lr 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite
    reverse both;
}
.un_12 {
  animation: jello-horizontal 3s infinite alternate both;
}
.un_13 {
  animation: pulsate-bck 1s ease-in-out infinite both;
}
.un_14 {
  animation: shake-right 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite
    alternate both;
}
.un_15 {
  animation: shake-right 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite
    alternate;
}
.check_animation:before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 15px;
  vertical-align: middle;
  color: #ffffff !important;
  font-weight: 900;
  position: absolute;
  right: 1px;
  bottom: 21px;
}
.container_animation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 10px;
  padding: 5px;
}
.box_animation {
  width: 100px;
  height: 33px;
  border: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 8px;
  position: relative;
}
@keyframes shake-left {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 0 50%;
  }
  10% {
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}
@keyframes shake-right {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 100% 50%;
  }
  10% {
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}
@keyframes pulsate-bck {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes shake-lr {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  10% {
    transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-8deg);
  }
  90% {
    transform: rotate(8deg);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    transform: translateX(10px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}
@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-left {
  0% {
    transform: translateX(-48px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateX(-26px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateX(-13px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateX(-6.5px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateX(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87%,
  98% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateX(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes text-pop-up-tr {
  0% {
    transform: translateY(0) translateX(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-50px) translateX(50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
      0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
      0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
      0 0 #555555, 0 0 #555555, 0 0 #555;
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555,
      0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555;
    transform: translateY(8px);
  }
}
@keyframes text-shadow-drop-center {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  }
}
@keyframes text-shadow-drop-tr {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 6px -6px 18px rgba(0, 0, 0, 0.35);
  }
}
@keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.audio_prof {
  height: 39px !important;
  width: 300px !important;
  margin-left: 18px !important;
  margin-bottom: 5px !important;
}
@media (max-width: 700px) {
  .audio_prof {
    width: 300px !important;
  }
}
@media (max-width: 600px) {
  .audio_prof {
    width: 200px !important;
  }
}
@media (max-width: 500px) {
  .audio_prof {
    width: 145px !important;
  }
}
@media (max-width: 390px) {
  .audio_prof {
    width: 130px !important;
  }
}

.cd-icon {
  width: 50px;
  height: 50px;
  margin-right: 18px;
}

.profile-music-container {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 10px;
  margin-top: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.profile-music-content {
  display: flex;
  align-items: center;
  margin-left: 25px;
}

.music-info {
  font-size: 1em;
  font-weight: 500;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}

.style-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}

.style-item.check_style {
  outline: 2px solid;
}
.ajax-file-upload-statusbar {
  margin: 10px 0;
  width: 100% !important;
  max-width: 420px;
  border-radius: 6px;
  padding: 8px 15px;
  background-color: #f0f7f8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ajax-file-upload-filename,
.ajax-file-upload-filesize,
.ajax-file-upload-progress {
  margin: 5px 10px 5px 0;
  display: inline-block;
  vertical-align: middle;
}

.ajax-file-upload-filename {
  width: calc(100% - 60px);
}

.ajax-file-upload-filesize {
  width: 50px;
  text-align: right;
}

.ajax-file-upload-progress {
  width: 100%;
  max-width: 300px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  background-color: #e1f0f4;
}

.ajax-file-upload-bar {
  background-color: #01ff15;
  height: 100%;
  width: 0;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: width 0.4s ease;
}

.ajax-file-upload-red,
.ajax-file-upload-green {
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  padding: 6px 15px;
  cursor: pointer;
  margin: 8px 10px 8px 0;
}

.ajax-file-upload-red {
  background-color: #e4685d;
  box-shadow: inset 0 39px 0 -24px #e67a73;
}

.ajax-file-upload-green {
  background-color: #77b55a;
  box-shadow: inset 0 39px 0 -24px #5b8a3c;
}

.ajax-upload-dragdrop {
  border: 2px dotted #a5a5c7;
  width: 100%;
  max-width: 420px;
  color: #444;
  padding: 20px;
  text-align: center;
  background-color: #f7f9fb;
  border-radius: 6px;
}

.ajax-file-upload-container {
  margin: 20px 0;
}

.form_full {
  border-radius: 8px;
  padding: 15px;
  max-width: 500px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.pf_1 {
  background-image: linear-gradient(
      45deg,
      rgba(203, 78, 191, 0.5) 0%,
      rgba(203, 78, 191, 0.5) 12%,
      transparent 12%,
      transparent 20%,
      rgba(225, 118, 209, 0.5) 20%,
      rgba(225, 118, 209, 0.5) 24%,
      rgba(236, 138, 217, 0.5) 24%,
      rgba(236, 138, 217, 0.5) 35%,
      rgba(192, 58, 183, 0.5) 35%,
      rgba(192, 58, 183, 0.5) 36%,
      rgba(214, 98, 200, 0.5) 36%,
      rgba(214, 98, 200, 0.5) 100%
    ),
    linear-gradient(
      135deg,
      rgb(203, 78, 191) 0%,
      rgb(203, 78, 191) 11%,
      transparent 11%,
      transparent 23%,
      transparent 23%,
      transparent 33%,
      rgb(236, 138, 217) 33%,
      rgb(236, 138, 217) 64%,
      rgb(192, 58, 183) 64%,
      rgb(192, 58, 183) 83%,
      rgb(214, 98, 200) 83%,
      rgb(214, 98, 200) 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: black;
}
.pf_2 {
  background-image: linear-gradient(
      135deg,
      rgba(139, 53, 123, 0.5) 0%,
      rgba(139, 53, 123, 0.5) 10%,
      transparent 10%,
      transparent 19%,
      rgba(84, 33, 86, 0.5) 19%,
      rgba(84, 33, 86, 0.5) 27%,
      rgba(157, 60, 135, 0.5) 27%,
      rgba(157, 60, 135, 0.5) 53%,
      transparent 53%,
      transparent 56%,
      rgba(176, 66, 147, 0.5) 56%,
      rgba(176, 66, 147, 0.5) 61%,
      rgba(102, 40, 98, 0.5) 61%,
      rgba(102, 40, 98, 0.5) 100%
    ),
    linear-gradient(
      45deg,
      rgb(139, 53, 123) 0%,
      rgb(139, 53, 123) 8%,
      transparent 8%,
      transparent 9%,
      transparent 9%,
      transparent 10%,
      rgb(157, 60, 135) 10%,
      rgb(157, 60, 135) 14%,
      rgb(121, 46, 110) 14%,
      rgb(121, 46, 110) 50%,
      rgb(176, 66, 147) 50%,
      rgb(176, 66, 147) 97%,
      rgb(102, 40, 98) 97%,
      rgb(102, 40, 98) 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: white;
}

.pf_3 {
  background-image: linear-gradient(
      45deg,
      rgba(11, 95, 67, 0.5) 0%,
      rgba(11, 95, 67, 0.5) 5%,
      transparent 5%,
      transparent 38%,
      transparent 38%,
      transparent 60%,
      rgba(7, 115, 73, 0.5) 60%,
      rgba(7, 115, 73, 0.5) 100%
    ),
    linear-gradient(
      135deg,
      rgb(4, 136, 80) 0%,
      rgb(4, 136, 80) 14%,
      rgb(0, 156, 86) 14%,
      rgb(0, 156, 86) 75%,
      rgb(7, 115, 73) 75%,
      rgb(7, 115, 73) 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: white;
}

.pf_4 {
  background-image: linear-gradient(
    45deg,
    rgb(133, 28, 39) 0%,
    rgb(133, 28, 39) 1%,
    rgb(191, 40, 36) 1%,
    rgb(191, 40, 36) 15%,
    rgb(76, 15, 42) 15%,
    rgb(76, 15, 42) 38%,
    rgb(162, 34, 38) 38%,
    rgb(162, 34, 38) 55%,
    rgb(220, 46, 35) 55%,
    rgb(220, 46, 35) 62%,
    rgb(105, 21, 41) 62%,
    rgb(105, 21, 41) 63%,
    rgb(47, 9, 44) 63%,
    rgb(47, 9, 44) 69%,
    rgb(18, 3, 45) 69%,
    rgb(18, 3, 45) 100%
  );
  color: white;
}

.pf_5 {
  background-image: linear-gradient(
    135deg,
    rgb(203, 70, 215) 0%,
    rgb(203, 70, 215) 28%,
    rgb(138, 55, 153) 28%,
    rgb(138, 55, 153) 39%,
    rgb(94, 44, 112) 39%,
    rgb(94, 44, 112) 41%,
    rgb(160, 60, 174) 41%,
    rgb(160, 60, 174) 42%,
    rgb(181, 65, 194) 42%,
    rgb(181, 65, 194) 44%,
    rgb(73, 39, 92) 44%,
    rgb(73, 39, 92) 59%,
    rgb(116, 49, 133) 59%,
    rgb(116, 49, 133) 95%,
    rgb(51, 34, 71) 95%,
    rgb(51, 34, 71) 100%
  );
  color: black;
}

.pf_6 {
  background-image: linear-gradient(
      45deg,
      rgba(13, 0, 61, 0.2) 0%,
      rgba(13, 0, 61, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 100.002%
    ),
    linear-gradient(
      22.5deg,
      rgba(13, 0, 61, 0.2) 0%,
      rgba(13, 0, 61, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 100.002%
    ),
    linear-gradient(
      0deg,
      rgba(13, 0, 61, 0.2) 0%,
      rgba(13, 0, 61, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 100.002%
    ),
    linear-gradient(90deg, rgb(73, 73, 73), rgb(94, 94, 94));
  color: white;
}

.pf_7 {
  background-image: linear-gradient(
      135deg,
      rgba(98, 147, 221, 0.2) 0%,
      rgba(98, 147, 221, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 100.002%
    ),
    linear-gradient(
      90deg,
      rgba(98, 147, 221, 0.2) 0%,
      rgba(98, 147, 221, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 100.002%
    ),
    linear-gradient(
      0deg,
      rgba(98, 147, 221, 0.2) 0%,
      rgba(98, 147, 221, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 100.002%
    ),
    linear-gradient(90deg, rgb(125, 161, 246), rgb(27, 147, 241));
  color: black;
}

.pf_8 {
  background-image: linear-gradient(
      216deg,
      rgba(77, 77, 77, 0.05) 0%,
      rgba(77, 77, 77, 0.05) 25%,
      rgba(42, 42, 42, 0.05) 25%,
      rgba(42, 42, 42, 0.05) 38%,
      rgba(223, 223, 223, 0.05) 38%,
      rgba(223, 223, 223, 0.05) 75%,
      rgba(36, 36, 36, 0.05) 75%,
      rgba(36, 36, 36, 0.05) 100%
    ),
    linear-gradient(
      44deg,
      rgba(128, 128, 128, 0.05) 0%,
      rgba(128, 128, 128, 0.05) 34%,
      rgba(212, 212, 212, 0.05) 34%,
      rgba(212, 212, 212, 0.05) 57%,
      rgba(25, 25, 25, 0.05) 57%,
      rgba(25, 25, 25, 0.05) 89%,
      rgba(135, 135, 135, 0.05) 89%,
      rgba(135, 135, 135, 0.05) 100%
    ),
    linear-gradient(
      241deg,
      rgba(55, 55, 55, 0.05) 0%,
      rgba(55, 55, 55, 0.05) 14%,
      rgba(209, 209, 209, 0.05) 14%,
      rgba(209, 209, 209, 0.05) 60%,
      rgba(245, 245, 245, 0.05) 60%,
      rgba(245, 245, 245, 0.05) 69%,
      rgba(164, 164, 164, 0.05) 69%,
      rgba(164, 164, 164, 0.05) 100%
    ),
    linear-gradient(
      249deg,
      rgba(248, 248, 248, 0.05) 0%,
      rgba(248, 248, 248, 0.05) 32%,
      rgba(148, 148, 148, 0.05) 32%,
      rgba(148, 148, 148, 0.05) 35%,
      rgba(202, 202, 202, 0.05) 35%,
      rgba(202, 202, 202, 0.05) 51%,
      rgba(181, 181, 181, 0.05) 51%,
      rgba(181, 181, 181, 0.05) 100%
    ),
    linear-gradient(92deg, hsl(214, 0%, 11%), hsl(214, 0%, 11%));
  color: white;
}

.pf_9 {
  background-image: radial-gradient(
    circle at center center,
    rgb(143, 39, 176) 0%,
    rgb(143, 39, 176) 11%,
    rgb(128, 38, 169) 11%,
    rgb(128, 38, 169) 13%,
    rgb(113, 38, 163) 13%,
    rgb(113, 38, 163) 17%,
    rgb(98, 37, 156) 17%,
    rgb(98, 37, 156) 28%,
    rgb(83, 37, 150) 28%,
    rgb(83, 37, 150) 40%,
    rgb(68, 36, 143) 40%,
    rgb(68, 36, 143) 72%,
    rgb(53, 36, 137) 72%,
    rgb(53, 36, 137) 81%,
    rgb(38, 35, 130) 81%,
    rgb(38, 35, 130) 100%
  );
  color: white;
}

.pf_10 {
  background-image: linear-gradient(
      34deg,
      transparent 0%,
      transparent 20%,
      rgba(6, 6, 6, 0.02) 20%,
      rgba(6, 6, 6, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      300deg,
      transparent 0%,
      transparent 20%,
      rgba(254, 254, 254, 0.01) 20%,
      rgba(254, 254, 254, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      275deg,
      transparent 0%,
      transparent 20%,
      rgba(4, 4, 4, 0.01) 20%,
      rgba(4, 4, 4, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      95deg,
      transparent 0%,
      transparent 20%,
      rgba(207, 207, 207, 0.01) 20%,
      rgba(207, 207, 207, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      330deg,
      transparent 0%,
      transparent 20%,
      rgba(177, 177, 177, 0.01) 20%,
      rgba(177, 177, 177, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      264deg,
      transparent 0%,
      transparent 20%,
      rgba(171, 171, 171, 0.01) 20%,
      rgba(171, 171, 171, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      359deg,
      transparent 0%,
      transparent 20%,
      rgba(229, 229, 229, 0.02) 20%,
      rgba(229, 229, 229, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      238deg,
      transparent 0%,
      transparent 20%,
      rgba(150, 150, 150, 0.02) 20%,
      rgba(150, 150, 150, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      295deg,
      transparent 0%,
      transparent 20%,
      rgba(52, 52, 52, 0.03) 20%,
      rgba(52, 52, 52, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      215deg,
      transparent 0%,
      transparent 20%,
      rgba(165, 165, 165, 0.02) 20%,
      rgba(165, 165, 165, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      69deg,
      transparent 0%,
      transparent 20%,
      rgba(41, 41, 41, 0.03) 20%,
      rgba(41, 41, 41, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      357deg,
      transparent 0%,
      transparent 20%,
      rgba(181, 181, 181, 0.01) 20%,
      rgba(181, 181, 181, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      272deg,
      transparent 0%,
      transparent 20%,
      rgba(93, 93, 93, 0.01) 20%,
      rgba(93, 93, 93, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      329deg,
      transparent 0%,
      transparent 20%,
      rgba(109, 109, 109, 0.03) 20%,
      rgba(109, 109, 109, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      57deg,
      transparent 0%,
      transparent 20%,
      rgba(153, 153, 153, 0.02) 20%,
      rgba(153, 153, 153, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      269deg,
      transparent 0%,
      transparent 20%,
      rgba(159, 159, 159, 0.02) 20%,
      rgba(159, 159, 159, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      144deg,
      transparent 0%,
      transparent 20%,
      rgba(9, 9, 9, 0.03) 20%,
      rgba(9, 9, 9, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      217deg,
      transparent 0%,
      transparent 20%,
      rgba(157, 157, 157, 0.03) 20%,
      rgba(157, 157, 157, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      31deg,
      transparent 0%,
      transparent 20%,
      rgba(91, 91, 91, 0.01) 20%,
      rgba(91, 91, 91, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      277deg,
      transparent 0%,
      transparent 20%,
      rgba(132, 132, 132, 0.02) 20%,
      rgba(132, 132, 132, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      164deg,
      transparent 0%,
      transparent 20%,
      rgba(67, 67, 67, 0.03) 20%,
      rgba(67, 67, 67, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      24deg,
      transparent 0%,
      transparent 20%,
      rgba(174, 174, 174, 0.01) 20%,
      rgba(174, 174, 174, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      342deg,
      transparent 0%,
      transparent 20%,
      rgba(168, 168, 168, 0.02) 20%,
      rgba(168, 168, 168, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      61deg,
      transparent 0%,
      transparent 20%,
      rgba(58, 58, 58, 0.03) 20%,
      rgba(58, 58, 58, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      305deg,
      transparent 0%,
      transparent 20%,
      rgba(127, 127, 127, 0.03) 20%,
      rgba(127, 127, 127, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      291deg,
      transparent 0%,
      transparent 20%,
      rgba(213, 213, 213, 0.01) 20%,
      rgba(213, 213, 213, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      114deg,
      transparent 0%,
      transparent 20%,
      rgba(241, 241, 241, 0.01) 20%,
      rgba(241, 241, 241, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      35deg,
      transparent 0%,
      transparent 20%,
      rgba(140, 140, 140, 0.03) 20%,
      rgba(140, 140, 140, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      344deg,
      transparent 0%,
      transparent 20%,
      rgba(10, 10, 10, 0.01) 20%,
      rgba(10, 10, 10, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      259deg,
      transparent 0%,
      transparent 20%,
      rgba(215, 215, 215, 0.02) 20%,
      rgba(215, 215, 215, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      333deg,
      transparent 0%,
      transparent 20%,
      rgba(73, 73, 73, 0.03) 20%,
      rgba(73, 73, 73, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      290deg,
      transparent 0%,
      transparent 20%,
      rgba(28, 28, 28, 0.03) 20%,
      rgba(28, 28, 28, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      42deg,
      transparent 0%,
      transparent 20%,
      rgba(65, 65, 65, 0.01) 20%,
      rgba(65, 65, 65, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      308deg,
      transparent 0%,
      transparent 20%,
      rgba(80, 80, 80, 0.01) 20%,
      rgba(80, 80, 80, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      107deg,
      transparent 0%,
      transparent 20%,
      rgba(96, 96, 96, 0.01) 20%,
      rgba(96, 96, 96, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      352deg,
      transparent 0%,
      transparent 20%,
      rgba(94, 94, 94, 0.02) 20%,
      rgba(94, 94, 94, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      167deg,
      transparent 0%,
      transparent 20%,
      rgba(82, 82, 82, 0.02) 20%,
      rgba(82, 82, 82, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      200deg,
      transparent 0%,
      transparent 20%,
      rgba(12, 12, 12, 0.03) 20%,
      rgba(12, 12, 12, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      206deg,
      transparent 0%,
      transparent 20%,
      rgba(64, 64, 64, 0.03) 20%,
      rgba(64, 64, 64, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      29deg,
      transparent 0%,
      transparent 20%,
      rgba(107, 107, 107, 0.01) 20%,
      rgba(107, 107, 107, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: black;
}

.pf_11 {
  background-image: radial-gradient(
      circle 8px at 80% 68%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 8px at 24% 41%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 34% 66%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 56% 55%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 11% 60%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 6% 89%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 0% 36%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 20% 56%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 44% 56%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 0% 43%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 19% 33%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle at center left,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 10%,
      transparent 10%,
      transparent 90%
    ),
    linear-gradient(135deg, rgb(231, 16, 102), rgb(231, 158, 27));
  color: white;
}

.pf_12 {
  background-image: repeating-radial-gradient(
    circle at center center,
    rgb(241, 43, 239),
    rgb(239, 246, 244) 5px
  );
  color: black;
}

.pf_13 {
  background-image: repeating-radial-gradient(
    circle at center center,
    rgb(81, 9, 72),
    rgb(72, 90, 223),
    rgb(162, 119, 27),
    rgb(34, 134, 255),
    rgb(65, 217, 176),
    rgb(214, 56, 162),
    rgb(118, 213, 206) 1px
  );
  color: white;
}

.pf_14 {
  background-image: repeating-radial-gradient(
    circle at 17% 32%,
    rgb(235, 243, 60),
    rgb(149, 112, 197),
    rgb(115, 252, 224),
    rgb(116, 71, 5),
    rgb(223, 46, 169),
    rgb(73, 80, 75),
    rgb(231, 248, 17) 2px
  );
  color: white;
}

.pf_15 {
  background-image: radial-gradient(
      circle at 24% 76%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 76%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 24%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 24%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(1, 61, 23) 0%,
      rgb(1, 61, 23) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, hsl(112, 49%, 26%), hsl(112, 49%, 26%));
  background-size: 59px 59px;
  color: white;
}

.pf_16 {
  background-image: radial-gradient(
      circle at 24% 76%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 76%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 24%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 24%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(196, 15, 87) 0%,
      rgb(196, 15, 87) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(114, 6, 53), rgb(114, 6, 53));
  background-size: 28px 28px;
  color: white;
}

.pf_17 {
  background-image: radial-gradient(
      circle at 24% 76%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 76%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 24%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 24%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(54, 3, 88) 0%,
      rgb(54, 3, 88) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(33, 5, 66), rgb(33, 5, 66));
  background-size: 19px 19px;
  color: white;
}

.pf_18 {
  background-image: radial-gradient(
    circle at center center,
    rgb(59, 135, 192) 0%,
    rgb(59, 135, 192) 15%,
    rgb(61, 152, 201) 15%,
    rgb(61, 152, 201) 70%,
    rgb(63, 169, 209) 70%,
    rgb(63, 169, 209) 84%,
    rgb(65, 186, 218) 84%,
    rgb(65, 186, 218) 100%
  );
  background-size: 41px 41px;
  color: white;
}

.pf_19 {
  background-image: repeating-radial-gradient(
      circle at center center,
      rgba(249, 92, 47, 0.4) 0px,
      rgba(249, 92, 47, 0.4) 3px,
      transparent 3px,
      transparent 7px,
      rgba(220, 87, 48, 0.4) 7px,
      rgba(220, 87, 48, 0.4) 19px,
      transparent 19px,
      transparent 23px,
      rgba(132, 72, 51, 0.4) 23px,
      rgba(132, 72, 51, 0.4) 33px
    ),
    repeating-linear-gradient(
      0deg,
      rgb(0, 0, 0) 0px,
      rgb(0, 0, 0) 2px,
      rgb(0, 0, 0) 2px,
      rgb(0, 0, 0) 9px,
      rgb(0, 0, 0) 9px,
      rgb(0, 0, 0) 15px,
      rgb(0, 0, 0) 15px,
      rgb(0, 0, 0) 26px
    );
  background-size: 60px 60px;
  color: white;
}

.pf_20 {
  background-image: radial-gradient(
      circle at 25% 75%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 25%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 25% 25%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(235, 127, 52) 0%,
      rgb(235, 127, 52) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(255, 163, 44), rgb(255, 163, 44));
  background-size: 100px 100px;
  color: black;
}

.upload_modal {
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.upload_modal .modal_header {
  padding: 1rem;
  border-bottom: 1px solid;
}

.upload_modal .modal_header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.upload_modal .modal_content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#fileuploader_bg {
  width: 100%;
  min-height: 120px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload_label {
  font-size: 0.9rem;
  text-align: center;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}


/* Elegant Reds & Burgundies */
.prograd1, .pgrad1 { background: linear-gradient(135deg, #8B0000, #4A0000) !important; }
.prograd2, .pgrad2 { background: linear-gradient(135deg, #A52A2A, #5D1E1E) !important; }
.prograd3, .pgrad3 { background: linear-gradient(135deg, #B22222, #661111) !important; }

/* Warm Oranges & Ambers */
.prograd4, .pgrad4 { background: linear-gradient(135deg, #D2691E, #7A3D10) !important; }
.prograd5, .pgrad5 { background: linear-gradient(135deg, #CD853F, #734C1C) !important; }
.prograd6, .pgrad6 { background: linear-gradient(135deg, #F4A460, #8F5D2A) !important; }

/* Golden Yellows */
.prograd7, .pgrad7 { background: linear-gradient(135deg, #DAA520, #7D6116) !important; }
.prograd8, .pgrad8 { background: linear-gradient(135deg, #B8860B, #6B4F06) !important; }
.prograd9, .pgrad9 { background: linear-gradient(135deg, #FFD700, #997A00) !important; }

/* Olive Greens */
.prograd10, .pgrad10 { background: linear-gradient(135deg, #6B8E23, #3F5415) !important; }
.prograd11, .pgrad11 { background: linear-gradient(135deg, #556B2F, #324019) !important; }
.prograd12, .pgrad12 { background: linear-gradient(135deg, #808000, #4C4D00) !important; }

/* Forest Greens */
.prograd13, .pgrad13 { background: linear-gradient(135deg, #006400, #003B00) !important; }
.prograd14, .pgrad14 { background: linear-gradient(135deg, #228B22, #145214) !important; }
.prograd15, .pgrad15 { background: linear-gradient(135deg, #2E8B57, #1B5234) !important; }

/* Teal & Mint */
.prograd16, .pgrad16 { background: linear-gradient(135deg, #008080, #004C4C) !important; }
.prograd17, .pgrad17 { background: linear-gradient(135deg, #20B2AA, #136863) !important; }
.prograd18, .pgrad18 { background: linear-gradient(135deg, #40E0D0, #26857A) !important; }

/* Ocean Blues */
.prograd19, .pgrad19 { background: linear-gradient(135deg, #000080, #00004D) !important; }
.prograd20, .pgrad20 { background: linear-gradient(135deg, #191970, #0F0F42) !important; }
.prograd21, .pgrad21 { background: linear-gradient(135deg, #00008B, #000052) !important; }

/* Royal Blues */
.prograd22, .pgrad22 { background: linear-gradient(135deg, #4169E1, #273C8A) !important; }
.prograd23, .pgrad23 { background: linear-gradient(135deg, #1E90FF, #1257A6) !important; }
.prograd24, .pgrad24 { background: linear-gradient(135deg, #6495ED, #3B5A8E) !important; }

/* Deep Purples */
.prograd25, .pgrad25 { background: linear-gradient(135deg, #4B0082, #2C004D) !important; }
.prograd26, .pgrad26 { background: linear-gradient(135deg, #483D8B, #2B2453) !important; }
.prograd27, .pgrad27 { background: linear-gradient(135deg, #6A5ACD, #3F367A) !important; }

/* Violet Dreams */
.prograd28, .pgrad28 { background: linear-gradient(135deg, #8A2BE2, #52198A) !important; }
.prograd29, .pgrad29 { background: linear-gradient(135deg, #9370DB, #574383) !important; }
.prograd30, .pgrad30 { background: linear-gradient(135deg, #9932CC, #5B1E7A) !important; }

/* Magenta & Rose */
.prograd31, .pgrad31 { background: linear-gradient(135deg, #8B008B, #520052) !important; }
.prograd32, .pgrad32 { background: linear-gradient(135deg, #BA55D3, #6F3280) !important; }
.prograd33, .pgrad33 { background: linear-gradient(135deg, #DA70D6, #82437E) !important; }

/* Earth Tones */
.prograd34, .pgrad34 { background: linear-gradient(135deg, #A0522D, #5F3019) !important; }
.prograd35, .pgrad35 { background: linear-gradient(135deg, #8B4513, #522907) !important; }
.prograd36, .pgrad36 { background: linear-gradient(135deg, #D2B48C, #7D6B53) !important; }

/* Soft Pastels - Light Theme */
.prograd37, .pgrad37 { background: linear-gradient(135deg, #FFB6C1, #FF69B4) !important; }
.prograd38, .pgrad38 { background: linear-gradient(135deg, #FFDAB9, #FFA07A) !important; }
.prograd39, .pgrad39 { background: linear-gradient(135deg, #E6E6FA, #D8BFD8) !important; }
.prograd40, .pgrad40 { background: linear-gradient(135deg, #F0FFF0, #98FB98) !important; }
.prograd41, .pgrad41 { background: linear-gradient(135deg, #F0F8FF, #87CEFA) !important; }
.prograd42, .pgrad42 { background: linear-gradient(135deg, #FFF0F5, #FFC0CB) !important; }

/* Misty Mornings */
.prograd43, .pgrad43 { background: linear-gradient(135deg, #F5F5DC, #DEB887) !important; }
.prograd44, .pgrad44 { background: linear-gradient(135deg, #FAF0E6, #BC8F8F) !important; }
.prograd45, .pgrad45 { background: linear-gradient(135deg, #FFF8DC, #F0E68C) !important; }

/* Sky & Cloud */
.prograd46, .pgrad46 { background: linear-gradient(135deg, #87CEEB, #4682B4) !important; }
.prograd47, .pgrad47 { background: linear-gradient(135deg, #B0E0E6, #5F9EA0) !important; }
.prograd48, .pgrad48 { background: linear-gradient(135deg, #F0FFFF, #AFEEEE) !important; }

/* Sunset Hues */
.prograd49, .pgrad49 { background: linear-gradient(135deg, #FFA07A, #FF6347) !important; }
.prograd50, .pgrad50 { background: linear-gradient(135deg, #FF7F50, #FF4500) !important; }
.prograd51, .pgrad51 { background: linear-gradient(135deg, #FF8C00, #FF6900) !important; }

/* Deep Sea */
.prograd52, .pgrad52 { background: linear-gradient(135deg, #2F4F4F, #1E2E2E) !important; }
.prograd53, .pgrad53 { background: linear-gradient(135deg, #008B8B, #005353) !important; }
.prograd54, .pgrad54 { background: linear-gradient(135deg, #48D1CC, #2A7C79) !important; }

/* Berry Mix */
.prograd55, .pgrad55 { background: linear-gradient(135deg, #8B0000, #4B0082) !important; }
.prograd56, .pgrad56 { background: linear-gradient(135deg, #800080, #FF1493) !important; }
.prograd57, .pgrad57 { background: linear-gradient(135deg, #C71585, #8B008B) !important; }

/* Autumn Leaves */
.prograd58, .pgrad58 { background: linear-gradient(135deg, #D2691E, #A52A2A) !important; }
.prograd59, .pgrad59 { background: linear-gradient(135deg, #CD5C5C, #8B4513) !important; }
.prograd60, .pgrad60 { background: linear-gradient(135deg, #F4A460, #DAA520) !important; }

/* Winter Frost */
.prograd61, .pgrad61 { background: linear-gradient(135deg, #E6E6FA, #B0C4DE) !important; }
.prograd62, .pgrad62 { background: linear-gradient(135deg, #F8F8FF, #DCDCDC) !important; }
.prograd63, .pgrad63 { background: linear-gradient(135deg, #F0F8FF, #E0FFFF) !important; }

/* Spring Blossom */
.prograd64, .pgrad64 { background: linear-gradient(135deg, #FFE4E1, #FFB6C1) !important; }
.prograd65, .pgrad65 { background: linear-gradient(135deg, #FFF0F5, #FFC0CB) !important; }
.prograd66, .pgrad66 { background: linear-gradient(135deg, #FFEFD5, #FFDAB9) !important; }

/* Summer Garden */
.prograd67, .pgrad67 { background: linear-gradient(135deg, #98FB98, #90EE90) !important; }
.prograd68, .pgrad68 { background: linear-gradient(135deg, #F0FFF0, #ADFF2F) !important; }
.prograd69, .pgrad69 { background: linear-gradient(135deg, #7FFF00, #32CD32) !important; }

/* Deep Space */
.prograd70, .pgrad70 { background: linear-gradient(135deg, #000000, #191970) !important; }
.prograd71, .pgrad71 { background: linear-gradient(135deg, #000033, #000080) !important; }
.prograd72, .pgrad72 { background: linear-gradient(135deg, #2F4F4F, #000000) !important; }

/* Royal Jewel */
.prograd73, .pgrad73 { background: linear-gradient(135deg, #4B0082, #0000CD) !important; }
.prograd74, .pgrad74 { background: linear-gradient(135deg, #8B0000, #000080) !important; }
.prograd75, .pgrad75 { background: linear-gradient(135deg, #006400, #8B008B) !important; }

/* Earth & Stone */
.prograd76, .pgrad76 { background: linear-gradient(135deg, #696969, #2F4F4F) !important; }
.prograd77, .pgrad77 { background: linear-gradient(135deg, #808080, #A9A9A9) !important; }
.prograd78, .pgrad78 { background: linear-gradient(135deg, #C0C0C0, #D3D3D3) !important; }

/* Fire Ember */
.prograd79, .pgrad79 { background: linear-gradient(135deg, #8B0000, #FF4500) !important; }
.prograd80, .pgrad80 { background: linear-gradient(135deg, #B22222, #FF8C00) !important; }
.prograd81, .pgrad81 { background: linear-gradient(135deg, #DC143C, #FF6347) !important; }

/* Ocean Depths */
.prograd82, .pgrad82 { background: linear-gradient(135deg, #000080, #20B2AA) !important; }
.prograd83, .pgrad83 { background: linear-gradient(135deg, #191970, #48D1CC) !important; }
.prograd84, .pgrad84 { background: linear-gradient(135deg, #0000CD, #00CED1) !important; }

/* Forest Magic */
.prograd85, .pgrad85 { background: linear-gradient(135deg, #006400, #9ACD32) !important; }
.prograd86, .pgrad86 { background: linear-gradient(135deg, #2E8B57, #ADFF2F) !important; }
.prograd87, .pgrad87 { background: linear-gradient(135deg, #228B22, #7CFC00) !important; }

/* Twilight Sky */
.prograd88, .pgrad88 { background: linear-gradient(135deg, #483D8B, #FF69B4) !important; }
.prograd89, .pgrad89 { background: linear-gradient(135deg, #6A5ACD, #FF1493) !important; }
.prograd90, .pgrad90 { background: linear-gradient(135deg, #9370DB, #FF00FF) !important; }

/* Desert Sand */
.prograd91, .pgrad91 { background: linear-gradient(135deg, #F4A460, #D2B48C) !important; }
.prograd92, .pgrad92 { background: linear-gradient(135deg, #DEB887, #BC8F8F) !important; }
.prograd93, .pgrad93 { background: linear-gradient(135deg, #DAA520, #CD853F) !important; }

/* Wine & Velvet */
.prograd94, .pgrad94 { background: linear-gradient(135deg, #800000, #4B0082) !important; }
.prograd95, .pgrad95 { background: linear-gradient(135deg, #8B0000, #8B008B) !important; }
.prograd96, .pgrad96 { background: linear-gradient(135deg, #B22222, #9932CC) !important; }

/* Mint Chocolate */
.prograd97, .pgrad97 { background: linear-gradient(135deg, #98FB98, #8B4513) !important; }
.prograd98, .pgrad98 { background: linear-gradient(135deg, #90EE90, #A0522D) !important; }
.prograd99, .pgrad99 { background: linear-gradient(135deg, #00FA9A, #D2691E) !important; }

/* Lavender Fields */
.prograd100, .pgrad100 { background: linear-gradient(135deg, #E6E6FA, #9370DB) !important; }
.prograd101, .pgrad101 { background: linear-gradient(135deg, #D8BFD8, #8A2BE2) !important; }
.prograd102, .pgrad102 { background: linear-gradient(135deg, #DDA0DD, #BA55D3) !important; }

/* Peach Blush */
.prograd103, .pgrad103 { background: linear-gradient(135deg, #FFDAB9, #FF69B4) !important; }
.prograd104, .pgrad104 { background: linear-gradient(135deg, #FFE4E1, #FF1493) !important; }
.prograd105, .pgrad105 { background: linear-gradient(135deg, #FFF0F5, #DC143C) !important; }

/* Steel & Silver */
.prograd106, .pgrad106 { background: linear-gradient(135deg, #708090, #2F4F4F) !important; }
.prograd107, .pgrad107 { background: linear-gradient(135deg, #778899, #696969) !important; }
.prograd108, .pgrad108 { background: linear-gradient(135deg, #B0C4DE, #4682B4) !important; }

/* Tropical Waters */
.prograd109, .pgrad109 { background: linear-gradient(135deg, #00CED1, #1E90FF) !important; }
.prograd110, .pgrad110 { background: linear-gradient(135deg, #40E0D0, #0000FF) !important; }
.prograd111, .pgrad111 { background: linear-gradient(135deg, #AFEEEE, #4169E1) !important; }

/* Golden Hour */
.prograd112, .pgrad112 { background: linear-gradient(135deg, #FFD700, #FF8C00) !important; }
.prograd113, .pgrad113 { background: linear-gradient(135deg, #FFA500, #FF4500) !important; }
.prograd114, .pgrad114 { background: linear-gradient(135deg, #FFEFD5, #FFA07A) !important; }

/* Midnight Garden */
.prograd115, .pgrad115 { background: linear-gradient(135deg, #2F4F4F, #8B008B) !important; }
.prograd116, .pgrad116 { background: linear-gradient(135deg, #000000, #4B0082) !important; }
.prograd117, .pgrad117 { background: linear-gradient(135deg, #191970, #8B0000) !important; }

/* Dawn Sky */
.prograd118, .pgrad118 { background: linear-gradient(135deg, #FF69B4, #1E90FF) !important; }
.prograd119, .pgrad119 { background: linear-gradient(135deg, #FF1493, #00BFFF) !important; }

.prograd120,.pgrad120{--g-bg:#070408;--g-char:#0f0b10;--g-plum:#2a1222;--g-crimson:#3c0f14;background-color:var(--g-bg)!important;background-image:linear-gradient(135deg,var(--g-char),var(--g-plum) 55%,var(--g-crimson) 95%),radial-gradient(circle at 10% 10%,rgba(255,255,255,0.02),transparent 18%),linear-gradient(180deg,rgba(0,0,0,0.45),transparent 60%)!important;background-blend-mode:multiply,overlay,normal!important}


.color-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.color-picker {
  margin-right: 10px;
}
.color-text-input {
  width: 92%;
  padding: 13px;
  margin-left: 11px;
  border-radius: 10px;
}
.custom-input {
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 100px;
  margin-bottom: -2px;
}

.form-group {
  margin-bottom: 20px; /* Adds spacing between form groups */
}

label {
  margin-bottom: 5px; /* Space between label and input */
}

label i {
  margin-right: 10px; /* Adds space between icon and text */
}

.list_frame {
  width: 45px;
  position: absolute;
  top: -9px;
  left: -5px;
  visibility: visible;
}
.chat_frame {
  position: absolute;
  width: 50px;
  top: -10px;
  left: -6px;
}
.chat_frame.memo1\.gif {
    position: absolute;
    width: 50px;
    top: -10px;
    left: -5px;
}
.chat_frame.memo10\.gif {
    position: absolute;
    width: 45px;
    top: -8px;
    left: -2px;
}
.chat_frame.memo11\.gif {
    position: absolute;
    width: 46px;
    top: -9px;
    left: -3px;
}

.chat_frame.memo12\.gif {
    position: absolute;
    width: 45px;
    top: -9px;
    left: -4px;
}
.chat_frame.memo13\.gif {
  position: absolute;
  width: 45px;
  top: -9px;
  left: -4px;
}

.chat_frame.memo14\.gif {
    position: absolute;
    width: 49px;
    top: -11px;
    left: -5px;
}
.chat_frame.memo15\.gif {
    position: absolute;
    width: 46px;
    top: -9px;
    left: -3px;
}
.chat_frame.memo16\.gif {
  position: absolute;
  width: 56px;
  top: -8px;
  left: -9px;
}
.chat_frame.memo18\.gif {
  position: absolute;
  width: 52px;
  top: -5px;
  left: -7px;
}
.chat_frame.memo19\.gif {
  position: absolute;
  width: 51px;
  top: -11px;
  left: -6px;
}
.chat_frame.memo21\.gif {
  position: absolute;
  width: 51px;
  top: -8px;
  left: -6px;
}
.chat_frame.memo22\.gif {
  position: absolute;
  width: 51px;
  top: -8px;
  left: -6px;
}
.chat_frame.memo23\.gif {
  position: absolute;
  width: 51px;
  top: -8px;
  left: -6px;
}
.chat_frame.memo24\.gif {
  position: absolute;
  width: 50px;
  top: -8px;
  left: -5px;
}
.chat_frame.memo25\.gif {
  position: absolute;
  width: 50px;
  top: -7px;
  left: -5px;
}
.chat_frame.memo26\.gif {
  position: absolute;
  width: 50px;
  top: -7px;
  left: -5px;
}
.chat_frame.memo27\.gif {
  position: absolute;
  width: 50px;
  top: -7px;
  left: -5px;
}
.chat_frame.memo29\.gif {
    position: absolute;
    width: 50px;
    top: -6px;
    left: -5px;
}
.chat_frame.memo2\.gif {
  position: absolute;
  width: 49px;
  top: -10px;
  left: -4px;
}
.chat_frame.memo5\.gif {
  position: absolute;
  width: 49px;
  top: -10px;
  left: -5px;
}
.chat_frame.memo4\.gif {
  position: absolute;
  width: 50px;
  top: -10px;
  left: -5px;
}
.chat_frame.memo6\.gif {
  position: absolute;
  width: 47px;
  top: -9px;
  left: -4px;
}
.chat_frame.memo7\.gif {
  position: absolute;
  width: 46px;
  top: -7px;
  left: -3px;
}
.chat_frame.memo8\.gif {
  position: absolute;
  width: 47px;
  top: -9px;
  left: -4px;
}
.chat_frame.memo9\.gif {
  position: absolute;
  width: 46px;
  top: -9px;
  left: -3px;
}
.chat_frame.memo30\.gif {
  width: 50px;
  top: -5px;
  left: -5px;
}
.list_frame.memo15\.gif {
  width: 44px !important;
  top: -9px;
  left: -4px !important;
}
.list_frame.memo16\.gif {
  width: 51px !important;
  top: -8px !important;
  left: -8px !important;
}
.list_frame.memo17\.gif {
  width: 51px !important;
  top: -10px !important;
  left: -8px !important;
}
.list_frame.memo18\.gif {
  width: 50px !important;
  top: -6px !important;
  left: -9px !important;
}
.list_frame.memo19\.gif {
  width: 50px !important;
  top: -10px !important;
  left: -8px !important;
}
.list_frame.memo21\.gif {
  width: 50px !important;
  top: -8px !important;
  left: -8px !important;
}
.list_frame.memo22\.gif {
  width: 49px !important;
  top: -10px !important;
  left: -7px !important;
}
.list_frame.memo23\.gif {
  width: 49px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo24\.gif {
  width: 50px !important;
  top: -10px !important;
  left: -7px !important;
}
.list_frame.memo25\.gif {
  width: 49px !important;
  top: -6px !important;
  left: -7px !important;
}
.list_frame.memo26\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo27\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo28\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo29\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo5\.gif {
  width: 45px !important;
  top: -9px !important;
  left: -5px !important;
}
.list_frame.memo8\.gif {
  width: 43px !important;
  top: -7px !important;
  left: -4px !important;
}
.list_frame.memo9\.gif {
  width: 44px !important;
  top: -9px !important;
  left: -4px !important;
}
.list_frame.memo30\.gif {
  width: 49px;
  position: absolute;
  top: -7px;
  left: -7px;
}
.usergrad1,
.ugrad1 {
  background: linear-gradient(to top, #ff0000, #990000) !important;
  color: white !important;
}
.usergrad2,
.ugrad2 {
  background: linear-gradient(to top, #ff4500, #993300) !important;
  color: white !important;
}
.usergrad3,
.ugrad3 {
  background: linear-gradient(to top, #ff8c00, #996600) !important;
  color: white !important;
}
.usergrad4,
.ugrad4 {
  background: linear-gradient(to top, #ffd700, #997a00) !important;
  color: white !important;
}
.usergrad5,
.ugrad5 {
  background: linear-gradient(to top, #9acd32, #5a7000) !important;
  color: white !important;
}
.usergrad6,
.ugrad6 {
  background: linear-gradient(to top, #32cd32, #008000) !important;
  color: white !important;
}
.usergrad7,
.ugrad7 {
  background: linear-gradient(to top, #20b2aa, #006666) !important;
  color: white !important;
}
.usergrad8,
.ugrad8 {
  background: linear-gradient(to top, #00bfff, #0066cc) !important;
  color: white !important;
}
.usergrad9,
.ugrad9 {
  background: linear-gradient(to top, #1e90ff, #004488) !important;
  color: white !important;
}
.usergrad10,
.ugrad10 {
  background: linear-gradient(to top, #0000ff, #000099) !important;
  color: white !important;
}
.usergrad11,
.ugrad11 {
  background: linear-gradient(to top, #8a2be2, #4b0082) !important;
  color: white !important;
}
.usergrad12,
.ugrad12 {
  background: linear-gradient(to top, #9932cc, #660066) !important;
  color: white !important;
}
.usergrad13,
.ugrad13 {
  background: linear-gradient(to top, #ba55d3, #800080) !important;
  color: white !important;
}
.usergrad14,
.ugrad14 {
  background: linear-gradient(to top, #ff69b4, #cc3366) !important;
  color: white !important;
}
.usergrad15,
.ugrad15 {
  background: linear-gradient(to top, #ff1493, #b03060) !important;
  color: white !important;
}
.usergrad16,
.ugrad16 {
  background: linear-gradient(to top, #dc143c, #8b0000) !important;
  color: white !important;
}
.usergrad17,
.ugrad17 {
  background: linear-gradient(to top, #b22222, #660000) !important;
  color: white !important;
}
.usergrad18,
.ugrad18 {
  background: linear-gradient(to top, #ff4500, #cc3300) !important;
  color: white !important;
}
.usergrad19,
.ugrad19 {
  background: linear-gradient(to top, #ff6347, #cc4444) !important;
  color: white !important;
}
.usergrad20,
.ugrad20 {
  background: linear-gradient(to top, #ff7f50, #cc5c33) !important;
  color: white !important;
}
.usergrad21,
.ugrad21 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.15),
    rgba(0, 0, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
} /* Frosted Glassy */
.usergrad22,
.ugrad22 {
  background: linear-gradient(to top, #1b1b1b, #090909) !important;
  color: #e6e6e6 !important;
} /* Shadowed Gothic */
.usergrad23,
.ugrad23 {
  background: linear-gradient(to top, #800080, #da70d6) !important;
  color: white !important;
} /* Purple Dream */
.usergrad24,
.ugrad24 {
  background: linear-gradient(
    to right,
    #ff4500,
    #ff1493,
    #9400d3,
    #20b2aa
  ) !important;
  color: white !important;
} /* Sunset Dream */
.usergrad25,
.ugrad25 {
  background: linear-gradient(
    to top,
    rgba(255, 182, 193, 0.25),
    rgba(255, 105, 180, 0.75)
  ) !important;
  backdrop-filter: blur(10px);
  color: white !important;
} /* Soft Blush */
.usergrad26,
.ugrad26 {
  background: linear-gradient(to top, #292929, #505050) !important;
  color: #b0b0b0 !important;
} /* Metallic Noir */
.usergrad27,
.ugrad27 {
  background: linear-gradient(to top, #3b0a45, #000000) !important;
  color: white !important;
} /* Dark Elegance */
.usergrad28,
.ugrad28 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.05),
    rgba(0, 0, 0, 0.5)
  ) !important;
  backdrop-filter: blur(12px);
  color: black !important;
} /* Sleek Glass */
.usergrad29,
.ugrad29 {
  background: linear-gradient(to top, #ff1493, #ff69b4) !important;
  color: white !important;
} /* Sweet Pink */
.usergrad30,
.ugrad30 {
  background: linear-gradient(to top, #006400, #8fbc8f) !important;
  color: white !important;
} /* Serene Forest */
.usergrad31,
.ugrad31 {
  background: linear-gradient(to top, #232c36, #45525b) !important;
  color: white !important;
} /* Steely Blue */
.usergrad32,
.ugrad32 {
  background: linear-gradient(to top, #9b59b6, #f5a623) !important;
  color: white !important;
} /* Lavender Haze */
.usergrad33,
.ugrad33 {
  background: linear-gradient(to top, #003366, #000080) !important;
  color: white !important;
} /* Midnight Blues */
.usergrad34,
.ugrad34 {
  background: linear-gradient(to top, #ff6347, #ff4500) !important;
  color: white !important;
} /* Summer Sunset */
.usergrad35,
.ugrad35 {
  background: linear-gradient(to top, #2c3e50, #2980b9) !important;
  color: white !important;
} /* Evening Sky */
.usergrad36,
.ugrad36 {
  background: linear-gradient(to top, #d500f9, #8e24aa) !important;
  color: white !important;
} /* Electric Purple */
.usergrad37,
.ugrad37 {
  background: linear-gradient(to top, #76d7c4, #1abc9c) !important;
  color: white !important;
} /* Aqua Marine */
.usergrad38,
.ugrad38 {
  background: linear-gradient(to top, #ffcc00, #ff6600) !important;
  color: white !important;
} /* Golden Amber */
.usergrad39,
.ugrad39 {
  background: linear-gradient(to top, #6c4f3d, #8e7c49) !important;
  color: white !important;
} /* Rustic Brown */
.usergrad40,
.ugrad40 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.2),
    rgba(255, 255, 255, 0.2)
  ) !important;
  backdrop-filter: blur(12px);
  color: white !important;
} /* Frosted Night */
.usergrad41,
.ugrad41 {
  background: linear-gradient(to top, #ff8c00, #ee0979) !important;
  color: white !important;
} /* Warm Fiery Sunset */
.usergrad42,
.ugrad42 {
  background: linear-gradient(to top, #001f3d, #4c5c68) !important;
  color: white !important;
} /* Deep Sea */
.usergrad43,
.ugrad43 {
  background: linear-gradient(to top, #c0392b, #8e44ad) !important;
  color: white !important;
} /* Crimson Romance */
.usergrad44,
.ugrad44 {
  background: linear-gradient(to top, #ff6347, #1e90ff) !important;
  color: white !important;
} /* Fire & Ice */
.usergrad45,
.ugrad45 {
  background: linear-gradient(to top, #2f4f4f, #20b2aa) !important;
  color: white !important;
} /* Sea Breeze */
.usergrad46,
.ugrad46 {
  background: linear-gradient(to top, #fad0c4, #ffd1ff) !important;
  color: black !important;
} /* Soft Rose */
.usergrad47,
.ugrad47 {
  background: linear-gradient(to top, #383838, #5f6366) !important;
  color: white !important;
} /* Minimal Dark */
.usergrad48,
.ugrad48 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.1),
    rgba(0, 0, 0, 0.4)
  ) !important;
  backdrop-filter: blur(10px);
  color: white !important;
} /* Ice Frost */
.usergrad49,
.ugrad49 {
  background: linear-gradient(to top, #a64d79, #9b59b6) !important;
  color: white !important;
} /* Violet Dream */
.usergrad50,
.ugrad50 {
  background: linear-gradient(to top, #ff9a8b, #ffb3b3) !important;
  color: white !important;
} /* Pastel Delight */
.usergrad51,
.ugrad51 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.05),
    rgba(0, 128, 128, 0.4)
  ) !important;
  backdrop-filter: blur(10px);
  color: white !important;
} /* Ocean Breeze */
.usergrad52,
.ugrad52 {
  background: linear-gradient(to top, #b2f2bb, #49be6e) !important;
  color: white !important;
} /* Minty Green */
.usergrad53,
.ugrad53 {
  background: linear-gradient(to top, #f7b7a3, #f1c4b3) !important;
  color: white !important;
} /* Peach Glow */
.usergrad54,
.ugrad54 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.05),
    rgba(204, 0, 255, 0.3)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
} /* Purple Mist */
.usergrad55,
.ugrad55 {
  background: linear-gradient(to top, #2d3436, #dfe6e9) !important;
  color: white !important;
} /* Industrial Elegance */
.usergrad56,
.ugrad56 {
  background: linear-gradient(to top, #ab83a1, #d9a7c7) !important;
  color: white !important;
} /* Mauve Sunset */
.usergrad57,
.ugrad57 {
  background: linear-gradient(to top, #f06d06, #ff5722) !important;
  color: white !important;
} /* Fiery Orange */
.usergrad58,
.ugrad58 {
  background: linear-gradient(to top, #30cfd0, #330867) !important;
  color: white !important;
} /* Deep Turquoise */
.usergrad59,
.ugrad59 {
  background: linear-gradient(to top, #8e44ad, #e91e63) !important;
  color: white !important;
} /* Magenta Radiance */
.usergrad60,
.ugrad60 {
  background: linear-gradient(to top, #003366, #3366cc) !important;
  color: white !important;
} /* Royal Ocean */
.usergrad61,
.ugrad61 {
  background: linear-gradient(to top, #a8e063, #56ab2f) !important;
  color: white !important;
} /* Green Glow */
.usergrad62,
.ugrad62 {
  background: linear-gradient(to top, #0a3d62, #1c4f73) !important;
  color: white !important;
} /* Stormy Seas */
.usergrad63,
.ugrad63 {
  background: linear-gradient(to top, #ff477e, #f44336) !important;
  color: white !important;
} /* Bold Red */
.usergrad64,
.ugrad64 {
  background: linear-gradient(to top, #1a535c, #4ecdc4) !important;
  color: white !important;
} /* Tropical Oasis */
.usergrad65,
.ugrad65 {
  background: linear-gradient(
    to top,
    rgba(255, 20, 147, 0.3),
    rgba(255, 20, 147, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad66,
.ugrad66 {
  background: linear-gradient(
    to top,
    rgba(255, 69, 0, 0.3),
    rgba(255, 69, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad67,
.ugrad67 {
  background: linear-gradient(
    to top,
    rgba(255, 0, 0, 0.3),
    rgba(255, 0, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad68,
.ugrad68 {
  background: linear-gradient(
    to top,
    rgba(255, 99, 71, 0.3),
    rgba(255, 99, 71, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad69,
.ugrad69 {
  background: linear-gradient(
    to top,
    rgba(255, 165, 0, 0.3),
    rgba(255, 165, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad70,
.ugrad70 {
  background: linear-gradient(
    to top,
    rgba(0, 128, 0, 0.3),
    rgba(0, 128, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad71,
.ugrad71 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 255, 0.3),
    rgba(0, 0, 255, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad72,
.ugrad72 {
  background: linear-gradient(
    to top,
    rgba(0, 255, 255, 0.3),
    rgba(0, 255, 255, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: black !important;
}
.usergrad73,
.ugrad73 {
  background: linear-gradient(
    to top,
    rgba(138, 43, 226, 0.3),
    rgba(138, 43, 226, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad74,
.ugrad74 {
  background: linear-gradient(
    to top,
    rgba(255, 105, 180, 0.3),
    rgba(255, 105, 180, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad75,
.ugrad75 {
  background: linear-gradient(
    to top,
    rgba(0, 255, 127, 0.3),
    rgba(0, 255, 127, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad76,
.ugrad76 {
  background: linear-gradient(
    to top,
    rgba(240, 128, 128, 0.3),
    rgba(240, 128, 128, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad77,
.ugrad77 {
  background: linear-gradient(
    to top,
    rgba(255, 69, 0, 0.3),
    rgba(255, 69, 0, 0.6)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad78,
.ugrad78 {
  background: linear-gradient(
    to top,
    rgba(32, 178, 170, 0.3),
    rgba(32, 178, 170, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad79,
.ugrad79 {
  background: linear-gradient(
    to top,
    rgba(105, 105, 105, 0.3),
    rgba(105, 105, 105, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad80,
.ugrad80 {
  background: linear-gradient(
    to top,
    rgba(70, 130, 180, 0.3),
    rgba(70, 130, 180, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad81,
.ugrad81 {
  background: linear-gradient(
    to top,
    rgba(255, 140, 0, 0.3),
    rgba(255, 140, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad82,
.ugrad82 {
  background: linear-gradient(
    to top,
    rgba(128, 0, 128, 0.3),
    rgba(128, 0, 128, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad83,
.ugrad83 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad84,
.ugrad84 {
  background: linear-gradient(
    to top,
    rgba(255, 0, 255, 0.3),
    rgba(255, 0, 255, 0.6)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad85,
.ugrad85 {
background-image: radial-gradient(circle at 24% 76%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at 76% 76%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at 76% 24%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at 24% 24%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at center center, rgb(1, 61, 23) 0%, rgb(1, 61, 23) 71%,transparent 71%, transparent 100%),linear-gradient(90deg, hsl(112,49%,26%),hsl(112,49%,26%)); background-size: 59px 59px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad86,
.ugrad86 {
background-image: radial-gradient(circle at center center, rgb(59, 135, 192) 0%, rgb(59, 135, 192) 15%,rgb(61, 152, 201) 15%, rgb(61, 152, 201) 70%,rgb(63, 169, 209) 70%, rgb(63, 169, 209) 84%,rgb(65, 186, 218) 84%, rgb(65, 186, 218) 100%); background-size: 41px 41px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad87,
.ugrad87 {
background-image: radial-gradient(circle at center center, rgba(233, 162, 49,0.3) 0%, rgba(233, 162, 49,0.3) 78%,transparent 78%, transparent 100%),radial-gradient(circle at center center, rgba(251, 44, 123,0.3) 0%, rgba(251, 44, 123,0.3) 87%,transparent 87%, transparent 100%),radial-gradient(circle at center center, rgba(195, 90, 242,0.3) 0%, rgba(195, 90, 242,0.3) 80%,transparent 80%, transparent 100%),radial-gradient(circle at center center, rgba(21, 21, 61,0.3) 0%, rgba(21, 21, 61,0.3) 70%,transparent 70%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255)); background-size: 38px 38px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad88,
.ugrad88 {
background-image: radial-gradient(circle 29px at center center, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 79%,transparent 79%, transparent 80%,transparent 80%, transparent 100%),linear-gradient(270deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(0deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(180deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); background-size: 49px 49px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad89,
.ugrad89 {
background-image: radial-gradient(circle 90px at center center, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 23%,transparent 23%, transparent 66%,transparent 66%, transparent 100%),linear-gradient(270deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(0deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(180deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); background-size: 41px 41px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad90,
.ugrad90 {
background-image: repeating-radial-gradient(circle at center center, rgba(171,78,218, 0.3) 0px, rgba(171,78,218, 0.3) 7px,transparent 7px, transparent 10px),linear-gradient(67.5deg, hsl(274,72%,18%) 0%,hsl(274,72%,18%) 55%); background-size: 18px 18px;  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad91, .ugrad91 {
  background: linear-gradient(135deg, #4b0010, #8b1e3f) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad92, .ugrad92 {
  background: linear-gradient(120deg, #1f0033, #5c2d91) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad93, .ugrad93 {
  background: radial-gradient(circle, #003d3d, #001a1a) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad94, .ugrad94 {
  background: conic-gradient(from 180deg, #1a1a00, #666600, #1a1a00) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad95, .ugrad95 {
  background: linear-gradient(to bottom right, #0f1b0f, #274d27) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad96, .ugrad96 {
  background: conic-gradient(from 45deg, #1b0033, #330033, #1b0033) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad97, .ugrad97 {
  background: linear-gradient(135deg, #001a2e, #004466) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad98, .ugrad98 {
  background: radial-gradient(circle, #202020, #000000) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad99, .ugrad99 {
  background: linear-gradient(145deg, #30001e, #60003d) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad100, .ugrad100 {
  background: linear-gradient(to top, #0c0c0c, #1f1f1f, #000000) !important;
  backdrop-filter: blur(10px);
  color: white !important;
}

.usergrad101, .ugrad101 {
  background: conic-gradient(from 90deg, #003300, #004d00, #003300) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad102, .ugrad102 {
  background: linear-gradient(to right, #1a0033, #330066, #1a0033) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad103, .ugrad103 {
  background: radial-gradient(circle at center, #2a1a00, #4d3300) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad104, .ugrad104 {
  background: conic-gradient(from 0deg, #002222, #005555, #002222) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad105, .ugrad105 {
  background: linear-gradient(to bottom, #110011, #330033, #110011) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad106, .ugrad106 {
  background: linear-gradient(to top right, #2e0f00, #5e1a00) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad107, .ugrad107 {
  background: radial-gradient(circle, #1a0033, #00001a) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad108, .ugrad108 {
  background: conic-gradient(from 30deg, #004040, #002020, #004040) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad109, .ugrad109 {
  background: linear-gradient(to top left, #333300, #666600) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad110, .ugrad110 {
  background: linear-gradient(to bottom right, #1a0000, #660000, #1a0000) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad111, .ugrad111 {
  background: radial-gradient(circle at 30% 30%, #111144, #000022) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad112, .ugrad112 {
  background: conic-gradient(from 45deg, #112211, #445544, #112211) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad113, .ugrad113 {
  background: linear-gradient(to right, #221100, #443300, #221100) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad114, .ugrad114 {
  background: linear-gradient(to top, #100033, #3a0066) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad115, .ugrad115 {
  background: radial-gradient(circle, #001a0d, #00331a, #001a0d) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad116, .ugrad116 {
  background: conic-gradient(from 180deg, #002222, #004444, #002222) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad117, .ugrad117 {
  background: linear-gradient(135deg, #29002a, #52004f) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad118, .ugrad118 {
  background: radial-gradient(circle at center, #0a0a0a, #1a1a1a, #000000) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad119, .ugrad119 {
  background: conic-gradient(from 300deg, #4d1a00, #993300, #4d1a00) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad120, .ugrad120 {
  background: linear-gradient(to bottom right, #003333, #005555, #003333) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}


img.frame_class {
  height: 45px;
  left: -4px;
  width: 43px;
  position: absolute;
  top: -5px;
}

.frame-container {
  border: 1px solid #ccc;
  text-align: center;
}

div.frame-container img {
  height: 50px;
  width: 50px;
}

.frame-responsive {
  padding: 6px;
  float: left;
  width: 25%;
}

@media only screen and (max-width: 700px) {
  .frame-responsive {
    width: 33%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .frame-responsive {
    width: 33%;
  }
}
img.mySmile {
  height: 23px;
  position: absolute;
  margin-left: 5px;
  margin-top: -7px;
}
.over2 {
  position: absolute;
  display: inline-block;
  left: -27px;
  top: -41px;
  z-index: 9999;
  width: 190px;
}

.framelist1 {
  background: url(../frames/memo1.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist2 {
  background: url(../frames/memo2.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist3 {
  background: url(../frames/memo3.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist4 {
  background: url(../frames/memo4.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist5 {
  background: url(../frames/memo5.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist6 {
  background: url(../frames/memo6.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist6 {
  background: url(../frames/memo6.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist7 {
  background: url(../frames/memo7.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist8 {
  background: url(../frames/memo8.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}

.framelist9 {
  background: url(../frames/memo9.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist10 {
  background: url(../frames/memo10.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist11 {
  background: url(../frames/memo11.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist12 {
  background: url(../frames/memo12.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist13 {
  background: url(../frames/memo13.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist14 {
  background: url(../frames/memo14.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist15 {
  background: url(../frames/memo15.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist16 {
  background: url(../frames/memo16.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist17 {
  background: url(../frames/memo17.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist18 {
  background: url(../frames/memo18.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist19 {
  background: url(../frames/memo19.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist20 {
  background: url(../frames/memo20.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist21 {
  background: url(../frames/memo21.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist22 {
  background: url(../frames/memo22.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist23 {
  background: url(../frames/memo23.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist24 {
  background: url(../frames/memo24.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist25 {
  background: url(../frames/memo25.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist26 {
  background: url(../frames/memo26.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}

.framelist27 {
  background: url(../frames/memo27.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist28 {
  background: url(../frames/memo28.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist29 {
  background: url(../frames/memo29.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}

.frame1 {
  background: url(../frames/memo1.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame1 {
  height: 60px;
  left: -5px;
  width: 60px;
  top: -11px;
  background-size: 47px;
}

.frame2 {
  background: url(../frames/memo2.gif);
  height: 63px;
  left: -4px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 44px;
  background-repeat: no-repeat;
}

.chat_avatar .frame2 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -8px;
  background-size: 43px;
}

.frame3 {
  background: url(../frames/memo3.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame3 {
  height: 60px;
  left: -5px;
  width: 60px;
  top: -10px;
  background-size: 46px;
}

.frame4 {
  background: url(../frames/memo4.gif);
  height: 53px;
  left: -4px;
  width: 47px;
  position: absolute;
  top: -9px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame4 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -8px;
  background-size: 42px;
}

.frame5 {
  background: url(../frames/memo5.gif);
  height: 63px;
  left: -4px;
  width: 46px;
  position: absolute;
  top: -8px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame5 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -10px;
  background-size: 55px;
}

.frame6 {
  background: url(../frames/memo6.gif);
  height: 51px;
  left: -3px;
  width: 45px;
  position: absolute;
  top: -8px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame6 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -10px;
  background-size: 54px;
  background-repeat: no-repeat;
}

.frame7 {
  background: url(../frames/memo7.gif);
  height: 63px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame7 {
  height: 60px;
  left: -4px;
  width: 60px;
  top: -7px;
  background-size: 43px;
}

.frame8 {
  background: url(../frames/memo8.gif);
  height: 52px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame8 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -9px;
  background-size: 43px;
}

.frame9 {
  background: url(../frames/memo9.gif);
  height: 63px;
  left: -2px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 41px;
  background-repeat: no-repeat;
}

.chat_avatar .frame9 {
  height: 60px;
  left: -2px;
  width: 60px;
  top: -8px;
  background-size: 41px;
}

.frame10 {
  background: url(../frames/memo10.gif);
  height: 53px;
  left: -2px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 41px;
  background-repeat: no-repeat;
}

.chat_avatar .frame10 {
  height: 60px;
  left: -2px;
  width: 60px;
  top: -7px;
  background-size: 40px;
}

.frame11 {
  background: url(../frames/memo11.gif);
  height: 52px;
  left: -5px;
  width: 48px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame11 {
  height: 60px;
  left: -2px;
  width: 60px;
  top: -7px;
  background-size: 41px;
}

.frame12 {
  background: url(../frames/memo12.gif);
  height: 51px;
  left: -3px;
  width: 49px;
  position: absolute;
  top: -10px;
  background-size: 42px;
  background-repeat: no-repeat;
}

.chat_avatar .frame12 {
  height: 60px;
  left: -4px;
  width: 60px;
  top: -11px;
  background-size: 44px;
}

.frame13 {
  background: url(../frames/memo13.gif);
  height: 63px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 42px;
  background-repeat: no-repeat;
}

.chat_avatar .frame13 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -10px;
  background-size: 44px;
}

.frame14 {
  background: url(../frames/memo14.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -10px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame14 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -12px;
  background-size: 47px;
}

.frame15 {
  background: url(../frames/memo15.gif);
  height: 63px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame15 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -9px;
  background-size: 43px;
}

.frame16 {
  background: url(../frames/memo16.gif);
  height: 63px;
  left: -11px;
  width: 61px;
  position: absolute;
  top: -9px;
  background-size: 54px;
  background-repeat: no-repeat;
}

.chat_avatar .frame16 {
  height: 60px;
  left: -8px;
  width: 60px;
  top: -8px;
  background-size: 51px;
}

.frame17 {
  background: url(../frames/memo17.gif);
  height: 63px;
  left: -7px;
  width: 56px;
  position: absolute;
  top: -10px;
  background-size: 49px;
  background-repeat: no-repeat;
}

.chat_avatar .frame17 {
  height: 60px;
  left: -7px;
  width: 60px;
  top: -10px;
  background-size: 50px;
}

.frame18 {
  background: url(../frames/memo18.gif);
  height: 50px;
  left: -7px;
  width: 50px;
  position: absolute;
  top: -5px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame18 {
  height: 60px;
  left: -7px;
  width: 60px;
  top: -7px;
  background-size: 49px;
}

.frame19 {
  background: url(../frames/memo19.gif);
  height: 63px;
  left: -7px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame19 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -11px;
  background-size: 49px;
}

.frame20 {
  background: url(../frames/memo20.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame20 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -12px;
  background-size: 47px;
}

.frame21 {
  background: url(../frames/memo21.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame21 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -7px;
  background-size: 48px;
}

.frame22 {
  background: url(../frames/memo22.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame22 {
  height: 60px;
  left: -7px;
  width: 60px;
  top: -10px;
  background-size: 50px;
}

.frame23 {
  background: url(../frames/memo23.gif);
  height: 63px;
  left: -7px;
  width: 61px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame23 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 48px;
}

.frame24 {
  background: url(../frames/memo24.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame24 {
  height: 60px;
  left: -5px;
  width: 60px;
  top: -9px;
  background-size: 47px;
}

.frame25 {
  background: url(../frames/memo25.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame25 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 47px;
}

.frame26 {
  background: url(../frames/memo26.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame26 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -9px;
  background-size: 48px;
}

.frame27 {
  background: url(../frames/memo27.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -6px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame27 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 48px;
}

.frame28 {
  background: url(../frames/memo28.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame28 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 48px;
  background-repeat: no-repeat;
}

.frame29 {
  background: url(../frames/memo29.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame29 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -7px;
  background-size: 48px;
}
.gift-container {
    text-align: center;
    float: left;
    margin-bottom: 8px;
    margin-right: 8px;
}
	div.gift-container img {
    height: 70px;
    width: 70px;
}
	div.gift-container img {
    padding: 10px 5px 0px;
    height: auto;
    width: 50px;
    height: 50px;
	border-radius: 10px;
    background: #393939a6;
}
.info_icon {
	font-size: 15px; 
	margin: 5px;
}
#add_info {
    max-width: 400px;
    margin: auto;
    padding: 15px;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.main_aitem {
    width: 40px;
    height: 100%;
    text-align: center;
    font-size: 20px;
    display: inline-grid;
    z-index: 1;
    vertical-align: middle;
    position: relative;
}
  .glow-content { 
    padding: 1rem; 
  }
  #spectrum-container { 
    display: flex; 
    justify-content: flex-start; 
    margin-bottom: 1rem; 
  }
  .glow-buttons { 
    display: flex; 
    gap: 0.5rem; 
    margin-top: 1rem; 
  }
  .glow-buttons .reg_button { 
    min-width: 120px; 
  }
.rules-wrapper{display:flex;gap:24px;align-items:flex-start;min-height:320px}
.rules-leftmenu{width:260px;flex:0 0 260px;background:transparent;padding:12px;border-radius:10px}
.rules-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:8px}
.rule-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .18s,transform .12s}
.rule-item:hover{transform:translateX(6px)}
.rule-number{min-width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,0.04);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.rule-label{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rules-page{flex:1;display:flex;flex-direction:column;gap:18px;padding:6px}
.rule-card{background:transparent;padding:14px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,0.18);display:block}
.rule-inline-icon{margin-left:8px;font-size:14px;vertical-align:middle;opacity:.95}
.rule-mid-icon{margin:0 6px;font-size:12px;vertical-align:middle;opacity:.9}
@media (max-width:900px){.rules-wrapper{flex-direction:column}.rules-leftmenu{width:100%;flex-basis:auto;order:2}.rules-page{order:1}}