.socket-status[data-v-96c71fca] {
    width: 360px;
    padding: 8px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.state-success[data-v-96c71fca] {
    background-color: #25b562;
}
.state-error[data-v-96c71fca] {
    background-color: #ef4444;
}

@keyframes fadeIn-dc41f7a0 {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes shimmer-dc41f7a0 {
0% {
    background-position: -1000px 0;
}
100% {
    background-position: 1000px 0;
}
}
.animate-fadeIn[data-v-dc41f7a0] {
  animation: fadeIn-dc41f7a0 0.3s ease-in;
}
.skeleton[data-v-dc41f7a0] {
  background: linear-gradient(
    90deg,
    #f0f0f0 0px,
    #f8f8f8 40px,
    #f0f0f0 80px
  );
  background-size: 1000px 100%;
  animation: shimmer-dc41f7a0 2s infinite linear;
  border-radius: 0.25rem;
}
@media (max-width: 1024px) {
.grid-cols-8[data-v-dc41f7a0] {
    grid-template-columns: repeat(4, 1fr);
}
.grid-cols-8 > div[data-v-dc41f7a0]:nth-child(n + 5) {
    display: none;
}
}