@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
<style>
	.divider {
		width: 1px;
		height: 26px;
		background: rgba(255,255,255,0.1);
		border-radius: 1px;
		
	}
</style>
.my-grid {
  max-height: 85vh;
  max-width: 90vw;
  overflow: auto; /* Enables scrolling if content exceeds size */
  box-sizing: border-box; /* Ensures padding/border don’t increase actual size */
}
/*******************************************************************************************/

.blinking {
  animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
  50% {
    visibility: hidden;
  }
}

body {
}
.refresh {
  content: url("/images/reglage4.jpg");
  max-width: 20px;
  max-height: 20px;
}
.edit {
  content: url("/images/edit1.png");
  max-width: 20px;
  max-height: 20px;
}
.info {
  content: url("/images/info2.png");
  max-width: 20px;
  max-height: 20px;
}
.add {
  content: url("/images/ajouter.png");
  max-width: 18px;
  max-height: 18px;
}
.addgreen {
  content: url("/images/ajouterGreen.png");
  max-width: 18px;
  max-height: 18px;
}
.supp {
  content: url("/images/supp2.gif");
  max-width: 18px;
  max-height: 18px;
}
.delete {
  content: url("/images/delete.jpg");
  max-width: 18px;
  max-height: 18px;
}
.eliminer {
  content: url("/images/gomme.png");
  max-width: 18px;
  max-height: 18px;
}
.print {
  content: url("/images/print5.png");
  max-width: 20px;
  max-height: 20px;
}
.valider {
  content: url("/images/valider2.jpg");
  max-width: 20px;
  max-height: 20px;
}
.clock {
  content: url("/images/alarmclock.png");
  max-width: 20px;
  max-height: 20px;
}
.hgreen {
  content: url("/images/green.png");
  max-width: 20px;
  max-height: 20px;
}
.hred {
  content: url("/images/cerclered.png");
  max-width: 20px;
  max-height: 20px;
}
.stag {
  content: url("/images/absence2.png");
  max-width: 18px;
  max-height: 18px;
}
.cell-eliminated {
  background-color: black !important;
  color: white !important;
  text-align: center;
}
.cell-absent {
  background-color: #ff0000 !important;
  color: white !important;
  text-align: center;
}
.cell-success {
  background-color: #008000 !important;
  color: white !important;
  text-align: center;
}
.cell-reprise {
  background-color: lightblue !important;
  color: black !important;
  text-align: center;
}
.cell-stage {
  background-color: yellow !important;
  color: black !important;
}
.cell-terminated {
  background-color: tomato !important;
  color: white !important;
}
.cell-default {
  background-color: transparent;
  color: black;
  text-align: center;
}
.cell-stag-nom-reprise {
  background-color: lightblue !important;
  color: black !important;
}
.cell-stag-nom-eliminated {
  color: red !important;
  text-decoration: line-through !important;
}

/* Note Specific Cell Styling */
.cell-note-success {
  background-color: #c8e6c9 !important;
  color: black !important;
  text-align: center;
}
.cell-note-fail {
  background-color: #ffcdd2 !important;
  color: black !important;
  text-align: center;
}
.cell-note-absent {
  background-color: red !important;
  color: white !important;
  text-align: center;
}
.cell-note-eliminated {
  background-color: black !important;
  color: white !important;
  text-align: center;
}

/* Premium Grid Focused/Selected Row Styles */
.mud-table-row.mud-table-row-selected,
.dxbs-grid .dxbs-grid-focused-row,
.dx-grid-focused-row,
.custom-mudtable tbody tr.selected {
  background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
  border-left: 6px solid var(--mud-palette-primary) !important;
  position: relative;
  box-shadow: inset 0 0 15px rgba(var(--mud-palette-primary-rgb), 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-table-row.mud-table-row-selected td,
.dxbs-grid .dxbs-grid-focused-row td,
.dx-grid-focused-row td,
.custom-mudtable tbody tr.selected td {
  font-weight: 600 !important;
  color: var(--mud-palette-text-primary) !important;
}

/* Premium Hover Styles */
.mud-table-row:hover:not(.mud-table-row-selected),
.dxbs-grid .dx-grid-row:hover:not(.dx-grid-focused-row),
.custom-mudtable tbody tr:hover:not(.selected) {
  background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
  transition: background-color 0.2s ease;
}

/* Ensuring the focused row stands out even in dark mode or with zebra stripes */
.mud-table-striped .mud-table-row-selected {
  background-color: rgba(var(--mud-palette-primary-rgb), 0.18) !important;
}

/* Adding a subtle glow to the focused row's left border */
.mud-table-row.mud-table-row-selected,
.dx-grid-focused-row {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ===== PRINT STYLES ===== */
@media print {
  .sidebar-backdrop,
  .sidebar-frame,
  .topbar,
  .mobile-header-bar,
  .mud-snackbar-container,
  .mud-overlay,
  .no-print,
  .topbar-right,
  [data-no-print] {
    display: none !important;
  }

  .main-content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-content {
    padding: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
  .mud-paper,
  .mud-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  th,
  td {
    border: 1px solid #bbb !important;
    padding: 4px 8px !important;
    font-size: 11pt !important;
  }
  thead {
    background: #f0f0f0 !important;
    print-color-adjust: exact;
  }

  @page {
    margin: 1.5cm;
    size: A4 landscape;
  }
  a[href]:after {
    content: none !important;
  }
}

/* Premium Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 9999px;
    border: 2px solid transparent;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.4);
}