@font-face { font-family: 'Calibri'; src: url('/fonts/calibri.ttf'); }
* {color:wheat;box-sizing: border-box;font-size: 12pt;font-family: Damascus,Calibri;padding: 0;margin: 0;}

html, body {padding: 0;margin: 0;height: 100%;width: 100%;font-weight: normal;overflow: hidden;background-color: #342211;}

div {-webkit-overflow-scrolling: touch;}

.main {max-width: 414px;height: 100vh;position: relative; margin-left: auto;margin-right: auto;}

.header {position: absolute;top: 0px;left: 0px;width: 100%;height: 50px;border-bottom: 1px solid wheat;}
.header img {width: 32px;height: 32px;cursor: pointer;}
.header table {height:100%;width: 100%;color: wheat}
.header table td {vertical-align: bottom;}
.header table td:first-child {width:50px; text-align: center;}
.header table td:first-child img {height:35px;width:35px;cursor:pointer}
.header table td:nth-child(2) {font-size: 22pt; text-align: center; vertical-align:middle; width: calc(100vw - 100px);cursor:pointer}
.header table td:last-child {width:50px; text-align: center;}
.header table td:last-child img {height:35px;width:35px;cursor:pointer}


.help p {font-size: 12pt;margin-bottom:10pt;}
.help strong {color:cyan}
.help li {list-style-type: disc;list-style-position: inside;text-indent: -1.5em;padding-left: 1.5em;}
.help ul{margin-bottom: 5pt;}

.stats {bottom:0px;position: absolute;text-align: center;width:100%;border-top: 1px solid wheat;font-size: 10pt;color:wheat; height:15px;line-height: 10pt;}

.woordenlijst {-webkit-overflow-scrolling: touch;position: absolute;top: 50px;height: calc(100vh - 65px);width: 98%;overflow-y: auto;overflow-x:auto;left:0;right:0}
.woordenlijst span {display:inline-flex;white-space: nowrap;}

.searchbox {background-color: #342211;border:1px solid wheat;width:300px;height:520px; position: relative;top:100px;z-index: 99;border-radius:20px; margin-left: auto;margin-right:auto;}
.searchbox table {width:100%;margin-left: auto;margin-right: auto;}
.searchbox table td {font-size:20pt;text-align: center;}
.searchbox table td input {font-size:20pt;width:180px;text-align: center;vertical-align: middle;color:#342211;height: 40px;background-color: wheat;}
.searchbox table td input::placeholder {color:#342211;font-size:14pt}
.searchbox table td select {font-size:20pt;color:#342211;width:60px;height: 40px;}
.searchbox table td select option {font-size:14pt;color:#342211}
.searchbox table td button{font-size:20pt;width:240px;height:40px;border-radius:10px;margin-top: 10px;border:1px solid red;color:#342211;background-color: wheat; cursor: pointer;}
.searchbox table td label {display:flex; font-size: 18pt;width:240px;}
.searchbox table td label input {width:25px;height: 25px; margin-right: 10px;}

.bargoens {border-collapse: collapse;}
.bargoens td { font-size:10pt; vertical-align: top;}
.bargoens tr:first-child td {position: sticky; top:0; background-color: wheat; color:#342211; cursor: pointer;}
input[type="text"] {
    text-transform: lowercase;
}

@media only screen and (max-width: 600px) {
* {font-size: 12pt;}

button {font-size: 12pt;}

}