/*Loader Dots Animation*/

.di-wrapper-loader-dot-sync {
  height: 100%;
  display: flex;
  column-gap: 10px;
  justify-content: center;
  align-items: center;
}

.di-wrapper-loader-dot-sync .di-loader-dot-sync {
  width: 0.5em;
  height: 0.5em;
  background-color: #007bff;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: animate-loader-dot-sync 1s
    linear(
      0 0%,
      0 1.8%,
      0.01 3.6%,
      0.03 6.35%,
      0.07 9.1%,
      0.13 11.4%,
      0.19 13.4%,
      0.27 15%,
      0.34 16.1%,
      0.54 18.35%,
      0.66 20.6%,
      0.72 22.4%,
      0.77 24.6%,
      0.81 27.3%,
      0.85 30.4%,
      0.88 35.1%,
      0.92 40.6%,
      0.94 47.2%,
      0.96 55%,
      0.98 64%,
      0.99 74.4%,
      1 86.4%,
      1 100%
    )
    infinite alternate;
}

.di-wrapper-loader-dot-sync .di-loader-dot-sync:nth-child(1) {
  animation-delay: -0.25s;
}

.di-wrapper-loader-dot-sync .di-loader-dot-sync:nth-child(2) {
  background-color: #ff0000;
  animation-delay: -0.5s;
}

.di-wrapper-loader-dot-sync .di-loader-dot-sync:nth-child(3) {
  background-color: #8000ff;
  animation-delay: -0.75s;
}

.di-wrapper-loader-dot-sync .di-loader-dot-sync:nth-child(4) {
  background-color: #ff007f;
  animation-delay: -1s;
}

@keyframes animate-loader-dot-sync {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(5px);
  }
}

.di-color-sync {
  background: linear-gradient(
    90deg,
    #007bff 0%,
    #8000ff 35%,
    #ff0040 70%,
    #007bff 100%
  );
  background-size: 400% 250%;
  animation: colorSyncAnimation 15s infinite linear;
  border-radius: 12px;
  border: none;
}

.di-color-sync-noanim {
  background: linear-gradient(
    150deg,
    #007bff 0%,
    #8000ff 35%,
    #ff0040 100%
  );
  border-radius: 12px;
  border: none;
}

.di-text-sync {
  font-weight: bold;
  background: linear-gradient(
    90deg,
    #007bff 0%,
    #8000ff 35%,
    #ff0040 70%,
    #007bff 100%
  );
  background-size: 400% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Membuat warna teks transparan agar background terlihat */
  animation: colorSyncAnimation 15s infinite linear;
}

.dinssid-card-footer {
  margin-top: 15px;
  font-size: 0.8em;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

/* Animasi garis bergerak */
@keyframes colorSyncAnimation {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* Efek animasi bergerak pada progress bar */
.progress-bar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #007bff 0%,
    #8000ff 40%,
    #ff0040 70%,
    #007bff 100%
  );
  background-size: 200% 100%;
  animation: progressAnimation 3s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Animasi garis bergerak */
@keyframes progressAnimation {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.workspace-switch {
  padding: 10px;
  margin: 0px 5px;
  transition: all 0.5s ease;
}

.workspace-switch:hover {
  border-radius: 12px;
  background-color: #111111;
}

.profile-workspace-la {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #FFFFFF;
}