body,html{height:100%;margin:0;padding:0}#app{height:-webkit-fill-available;min-height:100%;margin-top:0!important;padding-top:50px;padding-bottom:50px}*{box-sizing:border-box;font-family:Tahoma,Verdana,sans-serif}a{color:#333}.keys{display:none}.stopwatch{font-size:24px;margin-top:10px;font-weight:700;color:#888}.sudoku-container{height:100%;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;font-family:Tahoma,Verdana,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);min-height:-moz-max-content;min-height:max-content}.sudoku-container button{width:-moz-max-content;width:max-content;text-align:center;padding:10px 20px;border:2px solid #ccc;background:#eee;border-radius:.25rem;font-size:25px;outline:none;cursor:pointer}.sudoku-container button:focus,.sudoku-container button:hover{background-color:#e8e8e8}.sudoku-container button.primary{background-color:#007bff;border-color:#007bff;color:#fff}.sudoku-container button.primary:focus,.sudoku-container button.primary:hover{background-color:#0069d9;border-color:#0062cc}.sudoku-container button.secondary{background-color:#28a745;border-color:#28a745;color:#fff}.sudoku-container button.secondary:focus,.sudoku-container button.secondary:hover{background-color:#218838;border-color:#1e7e34}.sudoku-container .controls{padding-top:20px;padding-bottom:20px}.sudoku-container .sudoku{position:relative;display:flex;flex-direction:column;align-items:stretch;touch-action:none;font-family:Tahoma,Verdana,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0)}.sudoku-container .sudoku .loading{position:absolute;top:0;left:0;right:0;bottom:0;background:hsla(0,0%,100%,.5);z-index:999;background-image:url(../img/loading.ee58c3f8.gif);background-repeat:no-repeat;background-position:50%}.sudoku-container .sudoku .rows{margin:0 auto;display:flex;align-items:stretch;cursor:pointer}.sudoku-container .sudoku .rows .cols{flex:0 0 auto;position:relative;box-sizing:border-box;font-family:Tahoma,Verdana,sans-serif;border:0 solid #333;border-left-width:1px;border-bottom-width:1px;width:60px;height:60px;display:inline-block;-moz-user-select:-moz-none;-webkit-user-select:none;user-select:none}.sudoku-container .sudoku .rows .cols.corner-top{border-top-width:4px}.sudoku-container .sudoku .rows .cols.corner-left{border-left-width:4px}.sudoku-container .sudoku .rows .cols.corner-right{border-right-width:4px}.sudoku-container .sudoku .rows .cols.corner-bottom{border-bottom-width:4px}.sudoku-container .sudoku .rows .cols.highlight{background:rgba(0,9,158,.2)}.sudoku-container .sudoku .rows .cols.highlight-number{background:rgba(0,9,158,.4)}.sudoku-container .sudoku .rows .cols.highlight-number>div{color:#fff}.sudoku-container .sudoku .rows .cols .highlight{position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,9,158,.4)}.sudoku-container .sudoku .rows .cols .error{position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(255,0,0,.5)}.sudoku-container .sudoku .rows .cols .candidate,.sudoku-container .sudoku .rows .cols .pm,.sudoku-container .sudoku .rows .cols .static,.sudoku-container .sudoku .rows .cols .value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#1d6ae5}.sudoku-container .sudoku .rows .cols .candidate{z-index:1;font-size:15px}.sudoku-container .sudoku .rows .cols .value{z-index:10;font-size:36px}.sudoku-container .sudoku .rows .cols .static{z-index:10;font-size:36px;color:#000}.sudoku-container .sudoku .rows .cols .pencilmarks{color:#1d6ae5;position:absolute;font-size:14px}.sudoku-container .sudoku .rows .cols .pencilmarks.ul{left:10%;top:5%}.sudoku-container .sudoku .rows .cols .pencilmarks.ur{right:10%;top:5%}.sudoku-container .sudoku .rows .cols .pencilmarks.dl{left:10%;bottom:5%}.sudoku-container .sudoku .rows .cols .pencilmarks.dr{right:10%;bottom:5%}.sudoku-container .sudoku .rows .cols .pencilmarks.uu{left:50%;top:5%;transform:translateX(-50%)}.sudoku-container .sudoku .rows .cols .pencilmarks.dd{left:50%;bottom:5%;transform:translateX(-50%)}.sudoku-container .sudoku .rows .cols .pencilmarks.ll{left:10%;top:50%;transform:translateY(-50%)}.sudoku-container .sudoku .rows .cols .pencilmarks.rr{right:10%;top:50%;transform:translateY(-50%)}.sudoku-container .sudoku .rows .cols .pencilmarks.mm{right:50%;top:50%;transform:translate(50%,-50%)}.sudoku-container .sudoku .rows .cols.highlight .candidate,.sudoku-container .sudoku .rows .cols.highlight .pencilmarks{color:#fff}@media screen and (max-width:900px){#app{margin-top:0!important;padding:5px!important}.sudoku-container .sudoku .rows{margin:0}.sudoku-container .sudoku .rows .cols{width:11.1111111111%;height:50px}.keys{display:flex;justify-content:center;margin-bottom:20px;flex-grow:1;flex-wrap:wrap}.keys .key{text-align:center;width:11%;flex-basis:11%;padding:10px 0;border:1px solid #ccc;background:#eee;border-radius:.25rem;font-size:25px;outline:none;cursor:pointer;-moz-user-select:-moz-none;-webkit-user-select:none;user-select:none;font-weight:700;position:relative}.keys .key.middle:before,.keys .key.regular:before,.keys .key.side:before{content:"";position:absolute;top:5px;right:5px;left:5px;bottom:5px;border:1px solid #333}.keys .key.side{font-size:12px;text-align:left;padding-left:10px;margin-left:10px}.keys .key.middle{font-size:16px;text-align:center;padding-top:15px;margin-left:10px;margin-right:10px}.keys .key.inactive{opacity:.5;pointer-events:none}.keys .key:focus,.keys .key:hover{background-color:#e8e8e8}.keys .key.active{background-color:#333;border-color:#333;color:#fff}.keys .key.active:before{border-color:#fff}}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}