<style>
  .box-container {
    display: flex;
    gap: 10px; /* The space between boxes */
  }

  .box {
    width: 15px;
    height: 15px;
    border: 2px solid black;
    box-sizing: border-box; /* Ensures border is included in the 15px width */
    background-color: white;
  }

  /* Second Box: Bottom-Left to Top-Right Slash */
  .slash-single {
    background: linear-gradient(to top right, transparent calc(50% - 1px), black, transparent calc(50% + 1px));
  }

  /* Third Box: Double Slash (X) */
  .slash-double {
    background: 
      linear-gradient(to top right, transparent calc(50% - 1px), black, transparent calc(50% + 1px)),
      linear-gradient(to bottom right, transparent calc(50% - 1px), black, transparent calc(50% + 1px));
  }

  .circle-solid {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #000000;
  }

  .circle-open {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      /* Change background to transparent or remove it */
      background-color: transparent; 
      /* Add a border: thickness, style, and color */
      border: 2px solid #000000;
      /* Ensure the border doesn't add to the total width/height */
      box-sizing: border-box; 
  }
</style>