.app-grid {
    display: grid;
    grid-gap: 1px;
    grid-template-rows: 100px 150px 120px 380px;
    grid-template-columns: 750px 300px;
    
    background-color: #e4e4e4;
  }
  .app-grid-panel-draw {
    grid-row: 1 / 5;
    grid-column: 1;
  }

  .app-grid-panel-source {
    grid-row: 1;
    grid-column: 2;
    padding: 10px;
  }
  .app-grid-panel-approx {
    grid-row: 2;
    grid-column: 2;
    padding: 10px;
  }
  .app-grid-panel-show {
    grid-row: 3;
    grid-column: 2;
    padding: 10px;
  }

  .app-grid-panel-info {
    grid-row: 4;
    grid-column: 2;
    padding: 10px;
  }

  [class^='app-grid-panel'] {
    outline: 1px solid rgb(0, 0, 0);
    font-size: 14px;
    
    color: #333;
  }

  #canvas-placeholder { 
    background-color:#acd3ce; 
    width:750px; 
    height:750px; 
    
    cursor:crosshair; 
  }

  #drawing-canvas { 
    position:absolute;
    border:  3px solid rgb(0, 0, 0); 
    color:rgb(218, 13, 13); 
    overflow:hidden; 
    background-color:transparent; 
    } 
   #tempCanvas { position: absolute; width:897px; height:532px; overflow:hidden; }

   .source-grid {
    display: grid;
    grid-gap: 1px;
    grid-template-rows: 30px 30px;
    grid-template-columns: 250px;
    background-color: #e4e4e4;
  }

  .source-grid-panel-source {
    grid-row: 1;
    grid-column: 1;
  }
  .source-grid-panel-sam {
    grid-row: 2;
    grid-column: 1;
  }

  [class^='source-grid-panel'] {
    outline: 0px solid rgb(0, 0, 0);
    font-size: 16px;
    color: #333;
  }

  .approx-grid {
    display: grid;
    grid-gap: 1px;
    grid-template-rows: 40px 30px 30px 100px;
    grid-template-columns: 150px 150px;
    background-color: #e4e4e4;
  }

  .approx-grid-panel-resam {
    grid-row: 1;
    grid-column: 1;
  }
  .approx-grid-panel-ord {
    grid-row: 1;
    grid-column: 2;
  }

  .approx-grid-panel-step {
    grid-row: 2;
    grid-column: 1;
  }

  .approx-grid-panel-reset {
    grid-row: 2;
    grid-column: 2;
  }

  .approx-grid-panel-rms-err {
    grid-row: 3;
    grid-column: 1;
  }
  .approx-grid-panel-max-err {
    grid-row: 3;
    grid-column: 2;
  }

  [class^='approx-grid-panel'] {
    outline: 0px solid rgb(0, 0, 0);
    font-size: 16px;
    color: #333;
  }

  .show-grid {
    display: grid;
    grid-gap: 1px;
    grid-template-rows: 33px 33px 33px;
    grid-template-columns: 150px 150px;
    background-color: #e4e4e4;
  }

  .show-grid-panel-head1 {
    grid-row: 1;
    grid-column: 1;
  }
  .show-grid-panel-head2 {
    grid-row: 1;
    grid-column: 2;
  }
  .show-grid-panel-src {
    grid-row: 2;
    grid-column: 1;
  }
  .show-grid-panel-app {
    grid-row: 2;
    grid-column: 2;
  }

  .show-grid-panel-rsm {
    grid-row: 3;
    grid-column: 1;
  }

  .show-grid-panel-bez {
    grid-row: 3;
    grid-column: 2;
  }

  [class^='show-grid-panel'] {
    outline: 0px solid rgb(0, 0, 0);
    font-size: 16px;
    color: #333;
  }