.sgrid {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    gap: 10px;
    justify-items: last baseline;
}

.sgrid h1 {
    align-self: center;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-column: 2;
}

.sgrid input {
    width: 50px;
    grid-column: 3;
}

.sgrid span {
    grid-column: 2;
}

.sgrid #sbtn {
    width: auto;
    grid-column-start: 2;
    grid-column-end: 4;
    justify-self: stretch;
}

#list {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: grid;
    grid-gap: 5px;
    grid-template-rows: repeat(5, 100px);
    grid-template-columns: repeat(3, 1fr);
  /*   grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    grid-template-rows: repeat(5, 200px); */
    grid-auto-flow: row dense;
    min-height: 100vh;
  }
  
  .inside {
    background-color: #fff;
  }
  
  .divRec {
      cursor: move;
      padding: 35px 20px;
      font-size: 20px;
      background-color: #0ff0f0;
      
      grid-area: span 1/span 1;
  }
  
  .divQuad {
      cursor: move;
      padding: 35px 20px;
      font-size: 20px;
      background-color: #fff333;
     
      grid-area: span 1/span 1;
  }
  
  .divCard {
      cursor: move;
      padding: 35px 20px;
      font-size: 20px;
      background-color: #00ff00;
    
      grid-area: span 2/span 1;
  }
  
  .ghost {
    border: 1px dashed #000;
    background-color: #fff;
  }
  
  .custom-drag-ghost {
    /* The original cloned element must not take place up in the page and must not be visible */
    position: absolute;
    top: -99999px;
    left: -99999px;
    /* Just for appearance */
    background-color: #edb458;
    border: 1px solid #e8871e;
  }
  
  .hidden-drag-ghost {
    opacity: 0;
  }
  
  .transition {
    transition: all 2s ease-out .5s; 
    top: 0;
  }

  #ngrid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(5, 1fr);
    /* grid-auto-rows: auto; */
    gap: 0px;
    justify-items: stretch;
    align-items: stretch;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    user-select: none;
}

/* #keypad button, #keyboard button, #ngrid button { */
button, .btn {
    -webkit-appearance: none;
    /* -webkit-transition-duration: 0.4s; */ /* Safari */
    /* transition-duration: 0.4s; */
    /* height: 50px; */
    /* border-radius: 2px; */
    /* padding: 10px; */
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
    background-color: #ffffff;
    border: 1px solid #a8a8a8;
}

/* button * katex {
    overflow-x: visible !important;
    overflow-y: visible !important;
} */

button:active {
    background-color: #a8a8a8;
    transition-duration: 250ms;
}
  
.mathbtn * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events:none;
}