body  { font-family: 'open sans',arial,verdana; margin:1.5vw; font-size:1em; }
  *,*::before,*::after { box-sizing: border-box; }
  .button { font-size:1.1em; padding:0.2em; border-radius:0.5em; width:9em; height:2em; }
  .button:hover { background:red; color:#FFF; }
  
  #grid { display:grid; grid: 1fr / 25px repeat(7,1fr); border:1px solid #EEE; padding:2vw; border-radius: 1.5em; max-width:1280px; margin:0 auto; }
  .winput { width:14em; font-size:1em; color:blue; border:0; border-bottom: 1px solid #333; margin-right:3px; }
  .sinput { width:8.5em; font-size:1em; color:blue; border:0; border-bottom: 1px solid #333; margin-right:3px; }
  
  .g11  { grid-column: 1 / 2; }
  .g12  { grid-column: 1 / 3; }
  .g13  { grid-column: 1 / 4; }
  .g14  { grid-column: 1 / 5; }
  .g15  { grid-column: 1 / 6; }
  .g16  { grid-column: 1 / 7; }
  .g17  { grid-column: 1 / 8; }
  .g18 { grid-column: 1 / 9; }
  
  .g23 { grid-column: 2 / 4; }
  .g24 { grid-column: 2 / 5; }
  .g25 { grid-column: 2 / 6; }
  .g26 { grid-column: 2 / 7; }
  .g27 { grid-column: 2 / 8; }
  .g28 { grid-column: 2 / 9; }
  
  .g34 { grid-column: 3 / 5; }
  .g35 { grid-column: 3 / 6; }
  .g36 { grid-column: 3 / 7; }
  .g37 { grid-column: 3 / 8; }
  .g38 { grid-column: 3 / 9; }
  
  .g48 { grid-column: 4 / 9; }
  .g58 { grid-column: 5 / 9; }
  .g68 { grid-column: 6 / 9; }
  .g78 { grid-column: 7 / 9; }