* { 
        margin: 0; 
        padding: 0;
        font-family: Sans-serif;
       }
html,
 body {
        background: #282828;
        font: 62.5%/1.2 Sans-Serif;
        width: 100%;
      }

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row_header {

  flex: 0 1 ; /*50px;*/
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.box .row_content {
  flex: 1 1 auto;
  overflow: auto;
    margin:                 0px;
    padding:                0px 0 5px 0;
    display: flex;
		flex-direction: row;
	align-items: center;
}


.box .row.footer {
  flex: 0 1 40px;
}

h1{
	color: white;
}

	 
.row_header div {
		float: left;
    margin:   2px;
    border:1px solid #CCC;
	font-size: 13pt;
	font-weight: bold;
	color: white;
	padding: 0px 3px 0px 3px;
	text-decoration: none;
	text-align: center;

}
.row_header div a {
	text-decoration:        none;
	display: block;
	color:                    white;
    padding:   5px;
}