body {
 font-family: 'Comic';
}

.numpad-frame {
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 z-index: 999999;
 display: flex;
 display: -webkit-flex;
 align-items: center;
 -webkit-align-items: center;
 justify-content: center;
 -webkit-justify-content: center;
 background-color: rgba(236,240,241,0.8);
}
.numpad-container {
 position: relative;
 width: 100%;
 max-width: 400px;
 -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
 box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
 padding: 10px;
}

.numpad-output-container {
 position: relative;
 width: 100%;
}
.numpad-output {
 width: 100%;
 border: 1px solid #666;
 background-color: rgba(255,255,255,0.8);
 box-sizing: border-box;
 margin: 0px;
 font-size: 40px;
 text-align: center;
 min-height: 60px;
 display: flex;
 display: -webkit-flex;
 align-items: center;
 -webkit-align-items: center;
 justify-content: center;
 -webkit-justify-content: center;
}
.numpad-number-container > table {
 width: calc(100% + 6px);
 position: relative;
 left: -3px;
 margin-top: 10px;
}

.numpad-number-container .cancel {
 background-color: #ef5350;
}
.numpad-number-container .done {
 background-color: #388E3C;
}

.numpad-key {
 cursor: pointer;
 padding: 8px 8px;
 background-color: #424242;
 color: #fff;
 text-align: center;
 font-size: 30px;
}
.numpad-key:hover {
 background-color: #616161;
}

// End