.visualisation-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top, increase if not on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity, for the background */
}

.visualisation-modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  /* Add more styling if needed */
  display: flex; /* Use flexbox */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Align horizontally at the center */
  justify-content: center; /* Align vertically at the center */
}

  .visualisation-container {
    display: flex;
    justify-content: center; /* Center the content horizontally */
  }

  .visualisation-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
  }

  .visualisation-tile {
    width: calc(33.33% - 10px);
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border-radius: 10px;
    transition: transform 0.2s;
  }

  .visualisation-tile:hover {
    transform: scale(1.05);
  }

  .visualisation-icon {
    font-size: 35px;
    margin-bottom: 10px;
    opacity: 0.5;
  }

  /* You can add specific styles for each tile if needed */
  .visualisation-tile:nth-child(odd) {
    background-color: #f2f2f2;
  }

  .visualisation-tile:nth-child(even) {
    background-color: #e0e0e0;
  }
 .close {
  cursor: pointer;
  font-weight: bold; /* Make text bold */
  border: 2px solid black; /* Adjust color and thickness as needed */
  border-radius: 50%; /* Creates a circle */
  padding: 5px; /* Or adjust to get the desired size */
  display: inline-block; /* Allows width and height to be set */
  text-align: center; /* Center the text/icon inside the circle */
  width: 25px; /* Adjust size as needed */
  height: 25px; /* Adjust size as needed */
  line-height: 20px; /* Adjust line height to vertically center the text, may need tweaking based on font size */
}