* {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10pt;
  line-height: 1.5;
  box-sizing: border-box;
}
::selection {
  background: #000;
  color: #fff;
}
@page {
  margin: 0;
}
html {
  background: #efefef;
}
[contenteditable]:focus,
[contenteditable]:hover {
  outline: 2mm solid #daedf0;
  background: #daedf0;
}
letter {
  position: relative;
  display: block;
  background: #fff;
  width: 210mm;
  height: 297mm;
  padding: 20mm;
  margin: 0 auto;
}
letter:before,
letter:after {
  position: absolute;
  content: "";
  left: 0;
  width: 5mm;
  height: 0;
  border-bottom: 1px solid #ccc;
}
letter:before {
  top: 105mm;
}
letter:after {
  top: 200mm;
}
address {
  font-style: normal;  
}
from {
  display: block;
  margin-bottom: 14pt;
}
from > * {
  font-size: 7pt;
}
from > *:after {
  content: "|";
  padding: 0 1pt 0 4pt;
}
from > *:last-child:after {
  display: none;
}
to {
  display: block;
}
header {
  position: absolute;
  top: 55mm;
}
main {
  position: absolute;
  top: 110mm;
  left: 20mm;
  right: 20mm;
}
subject {
  display: block;
  margin-bottom: 28pt;
  margin-right: 40mm;
  font-weight: 600;
}
date {
  position: absolute;
  top: 0;
  right: 0;
}
text {
  display: block;
}
text p {
  margin-bottom: 14pt;
}
signature {
  display: block;
  padding-top: 14pt;
}
signature closing {
  display: block;  
}
signature name {
  display: block;
  margin-bottom: 14pt;
  font-weight: 600;
}
signature img {
  display: block;
  height: 42pt;
}
footer {
  position: absolute;
  bottom: 20mm;
  left: 20mm;
  right: 20mm;
  display: flex;
}
footer * {
  font-size: 7pt;
}
footer > * {
  flex-grow: 1;
}
footer > * > * {
  display: block;
}
footer label {
  color: rgba(0,0,0, .5);
  display: inline-block;
  width: 10mm;
}
footer address name {
  font-weight: 600;
}

selectiontools {
  padding:0;
  opacity: 0;
  margin-left: -9999px;
  background-color:#222;
  margin-top: -10px;
  transition: opacity 180ms 0s ease, margin-top 180ms 0s ease, margin-left 0s 180ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index:1000;
}

selectiontools.active {
  opacity: 1;
  margin-left: 4px;
  margin-top: 0;
  transition: opacity 240ms 100ms ease;
}

selectiontools:before {
  position:absolute;
  left:-7px;
  top:32px;
  content: '';
  width:0;
  height:0;
  border:7px solid transparent;
  border-left-color:#222;
  z-index: 10;
  transform: rotate(-135deg);
}

selectiontools button {
  font-size:150%;
  width:40px;
  height:40px;
  line-height: 39px;
  cursor:pointer;
  color: white;
  background: transparent;
  border:none;
  z-index: 100;
  float:left;
}

selectiontools button * {
  font: inherit;
}

selectiontools button em {
  font-style: italic;
  font-weight: normal;
}
selectiontools button strong {
  font-weight: bold;
}

selectiontools button:hover {
  background-color:#708090;
}

@media print {
  html {
    background: #fff;
  }
  html, body {
    width: 210mm;
    height: 100%;
    overflow: hidden;    
  }
  [contenteditable] {
    background: none;
    outline: 0;
  }

  selectiontools {
    display:none;
  }
}