.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:40px; height:40px;
    border:1px solid #656565;
    background-color:white;
    text-align:center;
    font-family:sans-serif; font-size:14px
}
.grid td:hover {
  background-color: #eee;
}

.grid td.clicked {
    background-color: #0d6efd;
    font-weight:bold; color:white;
}



/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #ddd;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #bbb;
}

/* Style the buttons that are used to open and close the accordion panel */
.ContractAccordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .ContractAccordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  border:1px solid #ccc;
}

.ContractPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  border:1px solid #ccc;
}