* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1d2327; background: #f4f4f2; -webkit-text-size-adjust: 100%; }
main { max-width: 34em; margin: 0 auto; padding: 1.2em 1em 3em; }
h1 { font-size: 1.4em; margin: 0 0 .6em; letter-spacing: .02em; }
label { display: block; margin: 1em 0 .3em; font-weight: 600; }
input[type=text] { width: 100%; padding: .7em; font-size: 1em; border: 1px solid #b8bcc0; border-radius: 6px; background: #fff; }
input[type=file] { position: absolute; left: -9999px; }
.button, button { display: block; width: 100%; margin: 1.2em 0 .4em; padding: .9em; font-size: 1.05em; font-weight: 600; text-align: center; color: #fff; background: #1f5f8b; border: 0; border-radius: 8px; cursor: pointer; }
.hidden { display: none !important; }
.small { font-size: .85em; color: #5b6168; }
.box { padding: .9em 1em; border-radius: 6px; background: #fff; border-left: 4px solid #1f5f8b; }
.box.error { border-color: #b32d2e; }
.box.ok { border-color: #11703a; }
.bar { height: 10px; background: #dfe1e3; border-radius: 5px; overflow: hidden; }
#bar { height: 100%; width: 0; background: #11703a; -webkit-transition: width .3s; transition: width .3s; }
#list { list-style: none; margin: 1em 0 0; padding: 0; }
#list li { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: .45em 0; border-bottom: 1px solid #e2e4e6; font-size: .9em; }
#list span { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; -webkit-box-flex: 1; flex: 1; }
#list em { font-style: normal; margin-left: 1em; white-space: nowrap; color: #5b6168; }
#list li.ok em { color: #11703a; }
#list li.error em { color: #b32d2e; white-space: normal; text-align: right; max-width: 60%; }