html, body {
  margin:0;
  padding:0;
  font-family: IBM Plex Sans, sans-serif;
  font-size: 10pt;
}

* { box-sizing:border-box }

h1, h2, h3, h4 { margin:0px 0px 8px 0px; font-size:10pt }

h1, .h1 { font-size:32px }
h2, .h2 { font-size:28px }
h3, .h3 { font-size:24px }
h4, .h4 { font-size:20px }
h5, .h5 { font-size:18px }

a { text-decoration:none; color:#000 }
p { margin:0 0 8px 0; }

img { object-fit:cover; }

figure, .Figure { padding:8px; margin:4px; border:1px solid black }
figure figcaption, .Figure p {}

ul, ol { margin:0px; padding: 0px 0px 0px 16px; }

.Figure div { 
  bottom:0px; 
  background-color: #eee; 
  width:calc(100% - 16px);
}

ul { margin:0; }
.tree { list-style:none; padding: 0px 0px 0px 16px; }

p { margin: 0px 0px 8px 0px; }
.error { color: #CC0000; }

.material-icons { font-size:10pt; max-width:10pt }
.material-icons.small { font-size:10pt; max-width:10pt }
.material-icons.medium { font-size:18pt; max-width:18pt }
.material-icons.big { font-size:24pt; max-width:24pt }
.material-icons.large { font-size:48pt; max-width:48pt }

[type="submit"].material-icons { border:0px; background:transparent; }

.Avatar {
  display:block; 
  object-position:center;
  object-fit:cover;
  overflow:hidden;
  
  width:48px;
  height:48px;
  
  border-radius:50%;
}

.Avatar.small { width:32px; height:32px; }
.Avatar.medium { width:64px; height:64px; }
.Avatar.big { width:92px; height:92px; }
.Avatar.large { width:128px; height:128px; }