body {
}


.memory_map
{
  display: flex;
  width: 100%;
  height: 6em;
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 0.1em;
  box-shadow: 0.1em 0.1em 0.5em 0 #ccc;
}

.memory_map_area
{
  width: 20%; /* default width, can be overridden by element-scoped style*/
  color: #ccc; /* default color, can be overridden by element-scoped style*/
  background-color: #404040; /* default color, can be overridden by element-scoped style*/
  margin-right: 0.1em;
  border-radius: 0.3em;
  text-align: center;
  align-content: center;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; /* children relative to this, used for round num label */
}

.vertical
{
  writing-mode: sideways-lr;
}

.note
{
  font-size: small;
  text-align: left;
  line-height: 1.3em;
}


/* The round numeric label must be like this example <div class="round_num_label"><div >1</div></div> */
.round_num_label
{
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
}

  .round_num_label div
  {
    color: black; /* default color, can be overridden by element-scoped style*/
    background-color: white; /* default color, can be overridden by element-scoped style*/
    font-size: smaller;
    font-weight: bold;
    display: flex;
    width: 3ch;
    height: 3ch; /*does not work when setting font-size aspect-ratio:1/1;*/
    border-radius: 50%;
    align-items: center;
    border: solid;
    border-width: 0.1em;
    border-color: black;
    justify-content: center;
  }