body{background:#f5f5f5;margin:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}#app,input{color:#2c3e50}.grid-container{display:grid;grid-template-columns:1fr;grid-template-rows:70px auto;grid-template-areas:"." "." "."}.header{background:#42b983;width:100%;color:#fff;font-size:1.7em;font-weight:700;line-height:70px}.card{background:#fff;border-radius:8px;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2);box-shadow:0 4px 8px 0 rgba(0,0,0,.2);margin:10px 10px;padding:10px}.card .title{font-size:1.5em}.card .value{font-size:2.5em;font-weight:700}.card .tendency{font-size:1.5em;font-weight:700;color:#c3c3c3}.card img.delete{right:40px;position:absolute}.number-pad{display:grid;grid-template-rows:repeat(4,80px);grid-template-columns:repeat(3,1fr);-ms-flex-line-pack:justify;align-content:space-between;grid-row-gap:0;max-width:250px;margin-left:auto;margin-right:auto}.number-dial{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;font-size:.8em;color:#42b983;font-size:1.5em;border:2px solid #42b983;font-weight:700;border-radius:1000px;height:60px;width:60px}.number-dial.primary{background:#42b983;color:#fff}.number-key{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.card.edit .unit{font-size:1em;font-weight:700}.card.edit div.input{border:1px solid #eee;border-radius:5px;font-size:1em;margin-top:15px;outline:0;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px auto;color:#2c3e50}.button{display:inline-grid;--moz-display:inline-grid;--ms-display:inline-grid;padding:10px 15px;cursor:pointer;margin:10px;border-radius:5px;font-weight:700;background:#c7c7c7;color:#fff}.button.success{background:#42b983;color:#fff}.button.danger{background:tomato;color:#fff}.button.big{font-size:1.5em}.home h2.vertical-margins{margin:50px auto}.footer{height:50px;line-height:50px;position:absolute;width:100%;bottom:0;background:#ccc;color:#444}.card.error{background:tomato;color:#fff}.field{margin:10px auto}.field .title{font-weight:700}.field input{border:0;font-size:1.5em;text-align:center;padding:10px 25px;border-radius:8px;outline:0}