:root{
    --paddingDefault: 10px;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-width: 200px;
    max-width: 500px;
    margin: 5px auto;
    padding: var(--paddingDefault);
    color: gold;
    background-color: black;
}

.title{
    font-size: 2em;
    margin: var(--paddingDefault);
}

.subtitle{
    font-size: 1.1em;
}

.main{
    background-color: gold;
    color: black;
    border-radius: 20px;
    padding: 15px;
}

.result{
    border: 2px solid black;
    border-radius: 5px;
    padding: 5px;
    margin-top: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.btn-container{
    text-align: center;
    margin: auto;
    padding: 10px;
}

button{
    background-color:black;
    color: white;
}

.material-icons{
    float: right;
    margin: 10px;
}

footer{
    text-align: right;
}

span{
    text-align: right;
}

.results{
    margin-right: 50px;
    width: 100%;
    text-align: left;
    table-layout:fixed;
}

td {
    overflow: auto;
    border: 1px solid;
    border-radius: 5px;
    padding: 5px;
    background-color: black;
    color: gold;
}

td a{
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    margin: 0px;
    width: 65% !important;
    color: gold;
}
    
.lblnaam { grid-area: 1 / 1 / 2 / 2; }
.inpnaam { grid-area: 1 / 2 / 2 / 3; }
.lblvoornaam { grid-area: 2 / 1 / 3 / 2; }
.inpvoornaam { grid-area: 2 / 2 / 3 / 3; }
.lbldate { grid-area: 3 / 1 / 4 / 2; }
.inpdate { grid-area: 3 / 2 / 4 / 3; }

#qr-video{
    width: 100%    !important;
    max-width: 470px;
    min-width: 170px;
    position: relative;
}

select{
    width: 100%;
    margin-top:5px;
    background-color: black !important;
    color: white !important;
}

#video-container {
    line-height: 0;
}

#video-container.example-style-1 .scan-region-highlight-svg,
#video-container.example-style-1 .code-outline-highlight {
    stroke: #64a2f3 !important;
}