#widgetsContainer {
    display: grid;
    grid-gap: 1rem;              /* sets both row-gap & column-gap */
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    grid-auto-rows: 120px;
    grid-auto-flow: row;
    position: relative;          /* needed for absolute placeholder */
  }
  
  
  #dropPlaceholder {
    pointer-events: none;
    position: absolute;
    border: 2px dashed #007bff;
    background: rgba(0,123,255,0.1);
    transition: top 0.05s,left 0.05s,width 0.05s,height 0.05s;
    display: none;
    z-index: 500;
  }
  
  .widget-item {
    display: flex;
    flex-direction: column;
  }
  
  .widget-item .info-box,
  .widget-item .card-body,
  .widget-item canvas {
    flex: 1;
    width:100% !important;
    height:100% !important;
    object-fit:contain;
  }
  
  .sortable-swap-highlight {
    outline:3px dashed #28a745;
  }