.id-keypad{display:flex;flex-direction:row;justify-content:center;align-items:center;height:80vh;padding:4.7rem 0 2rem}.keypad{display:flex;flex-direction:column;align-items:center;width:auto}.keypad .dots{display:inline-flex;margin:1.5rem 0}.circle{width:1rem;height:1rem;background:0 0;margin:.7rem 1rem;border-radius:50%;border:1px solid #000;user-select:none}.no-circle{margin:.7rem 1rem;font-size:1.4rem;color:#474747;font-family:sans-serif}.key-content{background:#fff;border-radius:20px;font-family:sans-serif;height:auto;padding:.6rem;width:516px;width:544px;display:flex;flex-flow:row;flex-wrap:wrap;box-shadow:-10px -10px 30px 4px rgba(154,203,255,.15),10px 10px 30px 4px rgba(154,203,255,.15)}@media(max-width:992px){.key-content{width:344px;width:370px}}@media(max-width:572px){.key-content{width:258px;width:278px;min-width:258px}}.key-content div{width:70px;height:70px;background:#f5f9fc;border-radius:14px;cursor:pointer;margin:.5rem;font-size:1.4rem;color:#474747;display:flex;justify-content:center;align-items:center;transition:all 250ms ease}.key-content div:hover{background:#e2e9f2}.key-content div:active{background:#c7d7e6}.key-content .b6{order:1}@media(max-width:992px){.key-content .b6{order:0}}.key-content .b7{order:1}@media(max-width:992px){.key-content .b7{order:0}}@media(max-width:572px){.key-content .b7{order:0}}.key-content .b8{order:1}@media(max-width:572px){.key-content .b8{order:0}}.key-content .b9{order:1}.key-content .b0{order:1}.key-content .enter{background:#266eff;color:#fff;font-size:1rem;order:4;order:1;user-select:none}.key-content .enter:hover{background:#0957f4}.key-content .enter:active{background:#004be4}.key-content .clear{background:#fff3cb;color:#474747;font-size:1rem;order:3;user-select:none}.key-content .clear:hover{background:#ffecae}.key-content .clear:active{background:#fee38b}.key-content .key{user-select:none}