#myinputcode.isdone,#secretcode{cursor:default;-webkit-touch-callout:none;-khtml-user-select:none;font-weight:700}#secretcode{position:relative;font-family:courier,courier new,serif;font-size:120%;margin:20px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#secretcode span{display:inline-block;background:#DDD;padding:2px;color:#000;margin:0}#secretcode span.isok{background:green;color:#FFF}#secretcode span.isnotok{background:red;color:#FFF}#myinputcode{border:1px solid #000;padding:2px 4px;width:80px;-webkit-appearance:none;-moz-appearance:none}#myinputcode.isdone{border:1px solid transparent;padding:6px;background:green;color:#FFF;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#checkmarker{display:none}#checkmarker:before{content:'\2713';display:inline-block;color:green;font-weight:700;font-size:140%;padding:0 6px 0 0}.codetopper{position:absolute;top:0;left:0;width:100%;height:100%;display:block}