body {
    margin: 0;
    overflow-y: scroll;
}
.mail {
    width: 100%;
    min-height: 100%;
    background-color: #dfdfdf;
    font-family: verdana;
    padding: 8px;
    box-sizing: border-box;
}
.mail .header {
    width: 100%;
    display: block;
    padding: 0 8px 0 8px;
    border: dotted 1px #7f7f9f;
    box-sizing: border-box;
}
.mail .header p {
    color: #00003f;
    margin: 4px;
    position: relative;
    padding-left: 6em;
}
.mail .header p::before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    font-weight: 700;
}
.mail .header p.from::before {
    content: "From:";
}
.mail .header p.date::before {
    content: "Date:";
}
.mail .header p.subject::before {
    content: "Subject:";
}
.mail .header .display_as {
    display: inline-block;
}
.mail .header .display_as::before {
    content: "Display As:";
}
.mail .header .ctl {
    text-align: right;
    margin: 4px;
}
.mail .header .source {
    font-size: 9pt;
}
.mail .body {
    background-color: #ffffff;
    padding: 8px;
    contain: content;
    position: relative;
}
.mail .text {
    white-space: pre-wrap;
    position: ab
}

.show-text .html, .show-html .text {
    display: none;
}
.attachment {
    margin: 8pt;
}
.attachment a {
    text-decoration: none;
    font-size: 14pt;
}
.attachment a:hover {
    text-decoration: underline;
}
.attachment .size {
    font-style: italic;
    font-size: 10pt;
}
.attachment .size::before {
    content: " (";
}
.attachment .size::after {
    content: " b)";
}
.mail .error {
    color: #9f0000;
    font-weight: 900;
    font-size: 10pt;
}
.mail .banner {
    font-size: 11pt;
    font-style: italic;
}