:root {
  --red: #ff585e;
  --blue: #0273da;
}

body { background: whitesmoke; font-family: Lato, Arial; display: flex; flex-direction: column; box-sizing: border-box; }
HR { border: solid 0.75px rgb(225, 225, 225); }
H1 { text-align: center; font-size: 18px; color: #717171; margin-bottom: 20px; }
H2 { text-align: center; font-size: 22px; color: darkgrey; }
H3 { text-align: center; font-size: 16px; color: #717171; }
H6 { margin: 0 0 10px 0; text-align: center; font-size: 14px; color: #717171; }

p { line-height: 1.6em; }
table { background: #fefefe; border: solid 1px #e9e9e9; }
html, body { height: 100%; margin: 0; padding: 0; }
.content { flex: 1 0 auto; padding: 20px; }
.footer-block { display: block; background: #dbdbdb; width: 100%; margin-top: 10px; }
.footer { flex-shrink: 0; width: 100%; text-align: right; font-size: 0.8em; }
.header { flex-shrink: 0; width: 100%; background: #dbdbdb; text-align: center; height: 40px; }
A { text-decoration: none; color: var(--blue); }
.header A { border-bottom: solid 1px transparent; }
.header .active A { font-weight: 700; border-bottom: dotted 1px var(--blue); }
.logo { display:block; margin: 10px 0 10px 0px; width:400px; }
.header LI { display: inline; list-style: none; float: right; }
.header UL { margin: 0; padding: 0; }

.bluemoji { display:block; width:40px; text-align: center; vertical-align: top; }
.dropzone, #screen_shot { display:block; margin: 0px auto; width: 80%; height: auto; border-radius: 10px; min-width: 700px; max-width: 800px; padding: 20px 20px 15px 20px; border-width: 1px; }
.bg-white { background: #f0f0f0; border-radius: 5px; border: solid 1px white; padding: 4px 8px; width: fit-content; }

.fileTypeIcon { display:inline-block; width:20px; margin: 0 5px; }
#icon_bar { margin: 10px 0; font-size: 0.9em; color: #666; }
#screen_shot { background: #fefefe; padding: 20px; }
#screen_shot IMG { width: auto; height: auto; max-height: 60vh; }
.dz-message { margin: 0 !important; }
.dz-preview { text-align: center; }
.dropzone .dz-preview .dz-image { border-radius: 0 !important; width: 240px !important; height: auto !important; }
.dz-image img { width: 200px !important; height: auto !important; }

.fs-11 { font-size: 11px; }
.db 	{ display:block; }
.dilb { display:inline-block; }
.dn	{ display: none; }

.mr10 { margin-right: 10px; }
.ml10 { margin-left: 10px; }
.mt10 { margin-top: 10px; }
.mb10 { margin-bottom: 10px; }
.mt20 { margin-top: 20px; }

.pr10 { padding-right: 10px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }

.vat { vertical-align: top }

.red { color: var(--red); }
.grey { color: #666; }
.darkgrey { color: #333; }

.button { color: white; background-color:var(--blue); padding: 9px 15px; border-radius: 5px; border: none; cursor: pointer; }

.dz-button:after { content: "\00000a"; display:block; width: 50px; height: 50px; text-align: center; margin: 10px auto; background: url("../img/export-image-photo-icon.svg") 0 0 no-repeat; }
.dz-progress { display: none !important; }
.dz-remove { text-decoration: none; margin-top: 5px; font-size: 10px; }

.progress { max-width: 200px; border-radius: 5px; } 
.progress-bar { color:white; background-color: var(--blue); height:22px; vertical-align: middle; width:0; border-radius: 5px; }