/* Sync status icon styles */
.logbook-sync-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Style for when sync is successful */
.logbook-sync-status .material-icons.green-text {
  animation: fadeIn 0.3s ease-in-out;
}

/* Style for when sync has failed or not happened */
.logbook-sync-status .material-icons.red-text {
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

/* Add a diagonal line through the icon when sync failed */
.logbook-sync-status .material-icons.red-text::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 2px;
  background-color: #f44336;
  top: 50%;
  left: -10%;
  transform: rotate(-45deg);
}

/* Hover effect for sync status icons */
.logbook-sync-status:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hide tooltip text until hover */
.tooltipped {
  position: relative;
}

/* Ensure tooltips have high z-index */
.material-tooltip {
  z-index: 10000 !important;
}