html {
  font-family: arial;
}
body {
  max-width: 90rem;
  margin: 0 auto;
}
h1 { font-size: 2rem; }
h2 { font-size: 1rem; }
.verifyStatus {

  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 1rem;

  margin: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #000;
  background : #eee;

  & span { margin-left: 0rem; font-family: monospace; }
  & span:before { content: " : "; };
  .na:after {
    color: lightgrey;
    content: "N/A";
  }
  .no:after {
    color: red;
    content: "NO!";
  }
  .yes:after {
    color: green;
    content: "YES";
  }

  .maybe:after {
    color: darkorange;
    content: "###";
  }

}
button { 
  display:block; 
  margin: 0.0rem;
  padding: 0.5rem;
  background: #ccc;
  border: 1px solid #000;
  border-radius: 0.5rem;
  
}
.buttongroup {
  border: 1px solid #000;
  background : #eee;
  padding: 0.5rem;
  margin: 0.5rem;
}
.group {
  border: 1px solid #000;
  background : #eee;
  padding: 0.5rem;
  margin: 0.5rem;
  min-width: 50%;
}
.code {
  font-family: monospace;
  border: 2px dashed #000;
  background: #fff;
  padding: 0.5rem;
  /* overflow-wrap: anywhere; */
  text-wrap: nowrap;
  overflow: auto;
  display: block;
  
}
.grid {
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}