@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

* { margin: 0;  padding: 0; font-family: 'Inter', sans-serif; box-sizing: border-box; }

body { font-size: 17px; line-height: 1.2; background-color: #fafafa; min-height: 100vh; position: absolute; width: 100%; }
html { overflow-x: hidden; }

.center { text-align: center; }

img.logo { width: 200px; margin-top: 40px; }

div.blue-bg { background: #014a97 url('/src/img/bg-green.svg') no-repeat top center; background-size: cover; position: absolute; left: 0; top: 0; bottom: 0; right: 0; color: #fff; padding: 40px; }
section#content { min-height: 100vh; padding-bottom: 70px; box-sizing: border-box; position: relative; }

.next { opacity: 0; left: -10px; transition: all .2s; }
.next-loaded { animation: next-loaded .2s ease-in-out; }
@keyframes next-loaded { 0% { opacity: 0; left: 10px; } 100% { opacity: 1; left: 0 } }

.back { opacity: 0; left: 10px; transition: all .2s; }
.back-loaded { animation: back-loaded .2s ease-in-out; }
@keyframes back-loaded { 0% { opacity: 0; left: -10px; } 100% { opacity: 1; left: 0 } }

h1 { position: absolute; width: calc(100% - 80px);  text-align: center; }
h2 { padding: 20px 10px 50px 10px; color: #fff; text-align: center; font-size: 22px; margin-top: -1px; background: linear-gradient(to right, #014a97, #2261a8);  }
h3 { padding: 20px; font-size: 17px; }

div.buttons { position: absolute; display: flex; justify-content: space-between; bottom: 20px; left: 20px; right: 20px; text-align: center; }
a.button { transition: all .2s; display: block; text-align: center; width: calc(100% - 70px); text-decoration: none; font-weight: 700; font-size: 19px; background: linear-gradient(to right, #014a97, #2261a8); padding: 16px 0; border-radius: 10px; box-shadow: rgba(0,0,0,.05) 0 0 20px; color: #fff; }
a.button:hover { box-shadow: rgba(0,0,0,.15) 0 0 30px; }
a.button.wide { width: 100%; }
a.button-back { display: block; color: #ccc; text-decoration: none; background: #bbb url('//icon.ontbrand.com/light/fff/arrow-left.svg') no-repeat center; background-size: 20px; padding: 16px; border-radius: 10px; font-size: 0; width: 60px; }
a.button-back:hover { color: #000; }
a.button.inactive { opacity: .1; cursor: not-allowed; }
p.center { position: absolute; top: 45vh; width: calc(100% - 80px); text-align: center; }

div.blue-bg a.button { background: #fff; color: #014a97; }

span.step { padding: 30px 0; background: linear-gradient(to right, #014a97, #2261a8); display: block; text-align: center; color: #fff; }

ul { margin: 20px; list-style: none; }
ul li { margin-top: 20px; }
ul li a { text-align: center; background: #fff; display: block; padding: 24px 0; color: #000; text-decoration: none; border-radius: 10px; border: 2px solid #fff; box-shadow: rgba(0,0,0,.05) 0 0 20px; }
ul li a:hover { border-color: #ccc; }
ul li a.active { border-color: #014a97; background: #F0FFFA url('//icon.ontbrand.com/solid/014a97/circle-check.svg') no-repeat center left 16px; background-size: 20px; }
ul.small li a.active { background-image: none; }
ul li a b { display: block; margin: 6px; }

ul.small { margin: 0 20px; }
ul.small li { display: inline-block; margin-top: 5px; }
ul.small li a { padding: 4px 12px; }
ul.small li a b { font-weight: 400; font-size: 14px; }

ul.flex { display: flex; }
ul.flex li { width: calc(50% - 10px); }
ul.flex li a { padding: 8px 0; }
ul.flex li:first-child { margin-right: 20px; }

input, textarea, select { font-size: 17px; }

textarea { box-shadow: rgba(0,0,0,.05) 0 0 20px; padding: 16px; width: calc(100% - 40px); height: calc(100vh - 500px); margin: 20px 20px 0 20px; border: 0; border-radius: 10px; }
select { box-shadow: rgba(0,0,0,.05) 0 0 20px; padding: 16px; width: calc(100% - 40px); margin: 0 20px; border: 0; border-radius: 10px; background: #fff; }
input[type="text"] { box-shadow: rgba(0,0,0,.05) 0 0 20px; padding: 16px; width: calc(100% - 40px); margin: 0 20px; border: 0; border-radius: 10px; background: #fff; margin-bottom: 6px; }
input[type="email"] { box-shadow: rgba(0,0,0,.05) 0 0 20px; padding: 16px; width: calc(100% - 40px); margin: 0 20px; border: 0; border-radius: 10px; background: #fff; margin-bottom: 6px; }
input[type="date"] { box-shadow: rgba(0,0,0,.05) 0 0 20px; padding: 16px; width: calc(100% - 40px); margin: 0 20px; border: 0; border-radius: 10px; background: #fff; margin-bottom: 6px; }
input.meldcode { box-shadow: rgba(0,0,0,.05) 0 0 20px; padding: 16px; width: calc(100% - 40px); margin: 0 20px; border: 0; border-radius: 10px; background: #fff; margin-bottom: 6px; }

ul li input { margin: 0 !important; width: 100% !important; }
ul li select { margin: 0 !important; width: 100% !important; }

div.photos { background: #fff; border-radius: 15px; margin: 20px; font-size: 15px; }
div.placeholder { padding: 20px; border-bottom: 1px solid #eee; position: relative; border-radius: 15px 15px 0 0; overflow: hidden; }
div.placeholder p { text-align: center; color: rgba(0,0,0,.3); font-weight: 700; padding: 30px 0; }
div.placeholder.loading:before { content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #fff url('/src/img/loading.svg?6') no-repeat center; background-size: 30px; position: absolute; }
div.placeholder div.image { width: 100px; box-shadow: rgba(0,0,0,.2) 0 0 10px; height: 100px; position: relative; display: inline-block; margin-right: 20px; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #eee; border-radius: 5px; }
div.placeholder div.image span.delete { cursor: pointer; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background: #f00 url('//icon.ontbrand.com/light/fff/times.svg') no-repeat center; background-size: 8px; display: block; border-radius: 10px; }
div.photos h3 { font-size: 14px; }
div.photos h3 span { font-weight: 400; font-size: 11px; color: rgba(0,0,0,.3); margin-left: 5px; }
div.photos input[type="file"] { display: none; }
div.photos a.add { float: right; font-size: 12px; background: linear-gradient(to right, #014a97, #2261a8); color: #fff; text-decoration: none; padding: 6px; border-radius: 5px; display: inline-block; margin: -4px -4px 0 0; }
div.photos a.add:hover { background-color: #2261a8; box-shadow: rgba(0,0,0,.05) 0 0 10px; }

label.kenteken { display: flex; width: calc(100% - 40px); margin: 20px; border: 2px solid #000; border-radius: 6px; box-sizing: border-box; box-shadow: #f3b806 0 0 0 2px; background-color: #f3b806;  }
label.kenteken div.nl-sign { width: 40px; background: #1f4397 url('/src/img/eu-stars.svg') no-repeat top 10px center; background-size: 24px; color: #fff; padding-top: 40px; text-align: center; border-radius: 3px 0 0 3px; }
label.kenteken input { border: 0; background: transparent; color: #000; padding: 20px 0; text-align: center; width: calc(100% - 40px); font-weight: 900; font-size: 23px; }
label.kenteken input:focus {  outline: none; }

div.block { position: relative; margin: 20px; background: #f1f1f1; border-radius: 16px; padding: 10px 10px 20px 10px; }
div.block.loading:before { border-radius: 16px; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #fff url('/src/img/loading.svg') no-repeat center; background-size: 50px; position: absolute; }
div.block h3 { color: #9a9a9a; padding-bottom: 10px; }
div.block span { color: #000; font-weight: 700; margin: 0 20px; margin-bottom: 10px; display: block; }

table.overview { font-size: 16px; margin: 50px; border-collapse: collapse; }
table.overview th,
table.overview td { padding: 10px; border: 1px solid #eee; white-space: nowrap; width: 1%; vertical-align: top; }
table.overview th:nth-child(9),
table.overview td:nth-child(9) { width: 100%; white-space: normal; }