*                                   { margin:0px;padding:0px;outline:none;box-sizing:border-box;user-select:none; }

body                                { background:url("../images/backgrounds/concrete.jpg") center center repeat lightgray;cursor:url("../images/cursors/hand.png"),auto;min-height:100vh;display:flex;justify-content:center;align-items:center;font-size:18px;font-family:arial; }
body:active                         { cursor:url("../images/cursors/hand.active.png"),auto; }

#codebox                            { position:relative;width:250px;border:2px solid #888;background-color:#666;border-radius:20px;box-shadow:0px 10px 13px -7px #000000,5px 5px 15px 5px rgba(0,0,0,0);overflow:hidden; }

#codebox .schaduw                   { position:absolute;width:200px;height:300px;left:-70px;top:-40px;transform:rotate(12deg);pointer-events:none;background:rgb(255,255,255);
background:linear-gradient(0deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.6334908963585435) 46%, rgba(255,255,255,0.85) 100%);opacity:0.12;z-index:2; }

#codebox .smudges                   { position:absolute;left:2px;right:2px;top:2px;bottom:2px;pointer-events:none;background:url("../images/overlays/smudges.jpg") center center repeat;opacity:0.1;z-index:1; }

#codebox .paneel                    { border-radius:20px;padding:25px 30px;background-color:#222; }

#codebox .display                   { background-color:rgb(93,99,93);font-size:35px;text-align:center;height:50px;line-height:50px;margin-bottom:25px;border-radius:5px; }
#codebox .display span              { padding:0px 5px; }

#codebox .keypad                    { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; }
#codebox .keypad div                { text-align:center;font-family:"Inconsolata";height:50px;line-height:50px;color:#fff;font-size:1.25em;opacity:0.5; }
#codebox .keypad div:hover          { opacity:1; }

#codebox .lampjesbalk               { position:relative;height:60px;background:url("../images/logos/fontys.png") center center no-repeat;opacity:0.8; }
#codebox .lampjes                   { position:absolute;right:12px;bottom:2px;text-align:right;overflow:visible; }
#codebox .lampjes div               { display:inline-block;width:8px;height:8px;border-radius:50%;border-radius:1px solid #777;background-color:#fff;overflow:hidden;overflow:visible; }
#codebox .lampjes .succes           { background-color:#07682d; }
#codebox .lampjes .succes.actief    { background-color:#23e11a; }
#codebox .lampjes .error            { background-color:#751111; }
#codebox .lampjes .error.actief     { background-color:#e41212; }