html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    padding: 0;
    background-color: #f5f5f7;
}

a { color: #336699; text-decoration: none; }
a:hover { color: #003366; text-decoration: underline; }

.ContentWrapper {
    background-color: white;
}

main { margin: auto; max-width: 1024px; padding: 20px; padding-top: 30px; padding-bottom: 50px; padding-left: 30px; padding-right: 30px; }

main h1 {
    font-size: 16pt;
    margin-bottom: 20pt;
    font-weight: 400;
    color: #555;
}

/* SEARCH */

main .LACSearch {
    background-color: aliceblue;
    border-radius: 4px;
    color: #555;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    margin-bottom: 20pt;
}

main .LACSearch .Prompt {
    color: #555;
    font-variant: all-small-caps;
    padding-right: 6px;
    font-size: 10pt;
}

main .LACSearch .Input {
    flex: 1;
    display: flex;
}

main .LACSearch .Input input {
    flex: 1;
    font-size: 10pt;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    padding: 3px; /* firefox, chrome have taller buttons */
    padding-left: 6px;
    padding-right: 6px;
}

main .LACSearch .Controls {
    padding-left: 6px;
}

/* INVALID */

main .Invalid {
    margin-bottom: 10pt;
    font-size: 10pt;
    color: darkred;
    background-color: #ffcccc;
    padding: 6px 10px;
    border-radius: 4px;
}

/* TITLE */

main .Title { font-size: 20pt; margin-bottom: 20pt; font-weight: 400; }
main .Title .Product { color: #555555; border-right: 1px solid #d8d8d8; padding-right: 0.5em; margin-right: 0.25em; }
main .Title .Version { color: #5fbc9a; }

main .ActionBar { padding: 6px 8px; display: flex; align-items: center; background: aliceblue; border-radius: 4px; }
main .ActionBar .Lac { flex: 1; font-size: 10pt; color: #888; }
main .ActionBar .Notice { flex: 1; font-size: 10pt; font-weight: bold; color: firebrick; text-align: center; }
main .ActionBar .Switcher { flex: 1; font-size: 10pt; text-align: right; padding-right: 10px; }
main .ActionBar .Switcher select { font-size: 10pt; }
main .ActionBar .Prompt { color: #666; font-variant: small-caps; }
main .ActionBar.Warning { background-color: #ffecef; }

main .NavBar { margin-top: 20px; text-align: center; font-size: 10pt; }
main .NavBar a { margin: 10px 4px; padding-right: 10px; border-right: 1px solid #d8d8d8; }
main .NavBar a:last-child { border-right: none; }

main .Categories h3 { padding: 4px 10px; background: #f5f5f7; border-radius: 4px; color: #555555; margin-top: 25px; font-size: 11pt; font-weight: 400; }
main .Categories td { font-size: 11pt; padding: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main .Categories table { margin-top: 15px; width: 100%; border-collapse: collapse; }
main .Categories table tr { border-bottom: 1px dotted #d8d8d8; }
main .Categories table tr:hover { background: aliceblue; }
main .Categories table td { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100px; vertical-align: center; }
main .Categories table td span.COPIED { padding: 4px 2px; color: #036; cursor: default; font-size: 9pt; background-color: yellow; border-radius: 4px; }
main .Categories table td span.SHA256 { padding: 4px 2px; color: #369; cursor: pointer; font-size: 9pt; }
main .Categories table td span.SHA256 .fa-clipboard { opacity: 0.6; }
main .Categories table td span.SHA256:hover { color: #036; text-decoration: none; cursor: pointer; }
main .Categories table tbody tr:last-child { border-bottom: none; }