/* CSS-Grid */ 
.grid-container1, .grid-container2, .grid-container3, .grid-container4, .grid-container5, .grid-container6, .grid-container7, .grid-container8 {
  display: grid;
  grid-gap: 2px;
  /*background-color: #c1c1c1; /*#2196F3;*/
  padding: 2px;
  /*border: 1px solid blue;*/
}
.grid-container1 { grid-template-columns: auto; }
.grid-container2 { grid-template-columns: auto auto; }
.grid-container3 { grid-template-columns: auto auto auto; }
.grid-container4 { grid-template-columns: auto auto auto auto; }
.grid-container5 { grid-template-columns: auto auto auto auto auto; }
.grid-container6 { grid-template-columns: auto auto auto auto auto auto; }
.grid-container7 { grid-template-columns: auto auto auto auto auto auto auto; }
.grid-container8 { grid-template-columns: auto auto auto auto auto auto auto auto; }

.grid-container1 > div,
.grid-container2 > div,
.grid-container3 > div,
.grid-container4 > div,
.grid-container5 > div,
.grid-container6 > div,
.grid-container7 > div,
.grid-container8 > div { /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: left;
  padding: 0px 5px;
  font-size: 16px;
  border: 1px solid blue;
}
.item2 {
  grid-area: 1 / 2 / 2 / span 2;
}
.item3 {
  grid-area: 1 / 4 / 2 / span 2;
}
td { background-color: rgba(255, 255, 255, 0.8); }
pre { font-size: 16px; }

.dot-primary {
  height: 30px;
  width: 40px;
  background-color: #007bff;
  border-collapse:collpse;
  border-radius: 50%;
  display: inline-block;
  text-align:center;
  line-height: 30px;
  color:  #f8f9fa;
}

.dot-bluegrey {
  height: 30px;
  width: 40px;
  background-color: #457b9d;
  border-collapse:collpse;
  border-radius: 50%;
  display: inline-block;
  text-align:center;
  line-height: 30px;
  color:  #f8f9fa;
}

.dot-lightblue {
  height: 30px;
  width: 40px;
  background-color: #f8f9fa;
  border-collapse:collpse;
  border-radius: 50%;
  display: inline-block;
  text-align:center;
  line-height: 30px;
  color:  #343a40;
}
mark, .mark {   
   padding: 0.2em;
   background-color: #e9c46a;
}
b { font-weight:900; }

.pron {
   padding:2px 2px;
   /*margin-left: 2px;
   margin-right: 2px; */
   font-size: 16px;
   color: #336699;
}
.pointer {cursor: pointer; }

/*--primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  */