*{box-sizing:border-box;padding:0;margin:0}body{background-color:#fff;font:normal 16px "Verdana, Arial, Helvetica, sans-serif";display:grid;grid-template-rows:auto 1fr;grid-gap:0;height:100vh}header{display:grid;justify-items:center;border-top:1em solid #024c8b;border-bottom:2rem solid #96211a}header h1{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#024c8b;margin:1rem}@media(max-width: 500px){header h1{width:100%;text-align:center;padding:0 1rem}header h1 span{display:none}}.section-container{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr;grid-gap:.5rem}#orderListArea{background-color:#024c8b;list-style-type:none;grid-row:span 2;overflow-y:auto;max-height:calc(100vh - 120px)}#orderListArea li{display:grid;grid-template-columns:1fr 1fr;grid-gap:.5rem;margin:.5rem;padding:.75rem;background-color:rgba(0,0,0,.5);color:#fff;cursor:pointer;transition:all .2s ease-in-out}#orderListArea li:hover{background-color:rgba(255,255,255,.6);color:#333}#orderListArea li.selected{background-color:#fff;color:#000}#orderListArea li h2{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;grid-column:span 2}#orderListArea li .code{justify-self:start}#orderListArea li .amount{justify-self:end;font-weight:bold}#canvasArea{display:grid;justify-items:center;align-items:center;margin:.5rem .5rem 0 0}#canvasContainer{border:3px solid #024c8b;visibility:hidden}#canvasContainer.connected{border-color:#5cb85c}#canvasContainer.disconnected{border-color:#d9534f}#canvasContainer .sigpad-canvas{height:2in;width:4in}@media(max-height: 375px){#canvasContainer .sigpad-canvas{height:1.5in}}#currentOrderArea{margin:0 .5rem .5rem 0;display:grid;grid-template-columns:1fr 1fr;grid-gap:.5rem;padding:.5rem;justify-items:center;align-content:start}@media(max-height: 455px){#currentOrderArea{display:none}}#currentOrderArea h2{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;grid-column:span 2}button{background-color:#fcfcfc;border:1px solid #ccc;border-radius:4px;color:#292b2c;font-weight:normal;font-size:1em;line-height:1.25;padding:.5em 1em;cursor:pointer;transition:all .2s ease-in-out}button.danger-text{color:#96211a}#clearButton{width:4in}