﻿.syncDialog {

}

.syncContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    max-height: 80vh;
    max-width: 1200px;
    width: 80vw;
}

/* Stack elements vertically on small screens */
@media (max-width: 800px) {
    .syncContent {
        grid-template-columns: 1fr;
    }
}

.sync-transfer-container {
  width: 80%; 
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
}

.moving-icon {
  position: absolute;
  animation: arc-move 3s infinite linear;
}

@keyframes arc-move {
  0%   { left: 0;    transform: translateY(0); }
  25%  { left: 25%;  transform: translateY(-20px); }
  45%  { left: 45%;  transform: translateY(-28px); }
  50%  { left: 50%;  transform: translateY(-30px); }
  55%  { left: 55%;  transform: translateY(-28px); }  
  75%  { left: 75%;  transform: translateY(-20px); }
  100% { left: 100%; transform: translateY(0); }
}