@font-face { font-family:'DIN';
	src:url('../fonts/d-din-webfont.woff2') format('woff2'),
	    url('../fonts/d-din-webfont.woff') format('woff');
	font-weight:normal; font-style:normal;
	}

@font-face { font-family:'DIN';
	src:url('../fonts/d-din-bold-webfont.woff2') format('woff2'),
	    url('../fonts/d-din-bold-webfont.woff') format('woff');
	font-weight:bold; font-style:normal;
	}

@font-face { font-family:'DIN';
	src:url('../fonts/d-din-italic-webfont.woff2') format('woff2'),
	    url('../fonts/d-din-italic-webfont.woff') format('woff');
	font-weight:normal; font-style:italic;
	}

@font-face { font-family:'DINCondensed';
	src:url('../fonts/d-dincondensed-webfont.woff2') format('woff2'),
	    url('../fonts/d-dincondensed-webfont.woff') format('woff');
	font-weight:normal; font-style:normal;
	}

@font-face { font-family:'DINCondensed';
	src:url('../fonts/d-dincondensed-bold-webfont.woff2') format('woff2'),
	    url('../fonts/d-dincondensed-bold-webfont.woff') format('woff');
	font-weight:bold; font-style:normal;
	}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, 
	strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
	{ margin:0; padding:0; box-sizing:border-box; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
input, select { box-sizing:border-box; font-family:inherit; }
button { font-family:DINCondensed; }

body  { font-family:DIN,Arial,Helvetica,sans-serif; font-size:16px; background-color:#E0E0E0; }

.wrapper { width:100%; max-width:700px; padding:10px; margin:10px auto; background-color:#F0F0F0; border-radius:7px; }
.header { display:flex; justify-content:space-between; align-items:end; flex-wrap:nowrap; height:90px; font-size:18px; font-weight:bold; position:relative; border-bottom:1px solid #d8d8d8; margin-bottom:10px; padding-bottom:5px; min-height:32px; }
.profile { background-repeat:no-repeat; background-size:contain; background-position:right top; width:50%; height:60px; min-width:250px; align-self:start; }

.container { width:100%; display:grid; grid-template-columns:150px 100px 1fr 1fr 80px; column-gap:10px; row-gap:1px; margin:0 auto; align-items:center; }
.caption { grid-column: 1/2; }
.caption, .data { padding:2px; }
.f23 { grid-column: 2/3; }
.f24 { grid-column: 2/4; }
.f25 { grid-column: 2/5; }
.f26 { grid-column: 2/6; }
.f46 { grid-column: 4/6; }
.f56 { grid-column: 5/6; }
.f35 { grid-column: 3/5; }
.f36 { grid-column: 3/6; }
.f16 .divider  { grid-column: 1/6; height:20px; }

.fullwidth { grid-column: 1/6; text-align:center; padding:10px 3px; border-top:1px solid #d8d8d8; margin-top:10px; }
.fws { font-size:11px; color:#555555; text-align:center; padding-top:3px; margin-top:8px; border-top:1px solid #d8d8d8; }

.info { font-size:13px; line-height:110%; }
.data { position:relative; }
.data > input { width:100%; border:1px solid #E0E0E0; padding:5px; font-family:DIN,sans-serif; font-size:19px; }
.data > input.country { width:40px; }
.data > input.refno { width:190px; text-align:right; margin-left:2px; margin-right:2px; }
.data > input.amount { text-align: right; }
.data > select.currency { border:1px solid #E0E0E0; padding:5px; font-size:18px; width:75px; background-color:#FFFFFF; }


.savebutton { background-color:#006600; color:#FFFFFF; padding:5px 10px; font-size:18px; font-weight:bold; border-radius:7px; border:0; }
.savebutton:hover { background-color:#008800; }