.colSpan-2-subgrid-left {grid-column: 1 / 3; } .colSpan-2-center-subgrid {grid-column: 6 / -6; }  .colSpan-2-right-subgrid {grid-column: 11 / -1; }
.colSpan-3-left-subgrid {grid-column: 1 / 4; } .colSpan-3-center-subgrid {grid-column: 5 / -6; }  .colSpan-3-right-subgrid {grid-column: 10 / -1; }
.colSpan-4-left-subgrid {grid-column: 1 / 5; } .colSpan-4-center-subgrid {grid-column: 5 / -5; }  .colSpan-4-right-subgrid {grid-column: 9 / -1; }
.colSpan-5-left-subgrid {grid-column: 1 / 6; } .colSpan-5-center-subgrid {grid-column: 4 / -5; }  .colSpan-5-right-subgrid {grid-column: 8 / -1; }
.colSpan-6-left-subgrid {grid-column: 1 / 7; } .colSpan-6-center-subgrid {grid-column: 4 / -4; }  .colSpan-6-right-subgrid {grid-column: 7 / -1; }
.colSpan-7-left-subgrid {grid-column: 1 / 8; } .colSpan-7-center-subgrid {grid-column: 3 / -4; }  .colSpan-7-right-subgrid {grid-column: 6 / -1; }
.colSpan-8-left-subgrid {grid-column: 1 / 9; } .colSpan-8-center-subgrid {grid-column: 3 / -3; }  .colSpan-8-right-subgrid {grid-column: 5 / -1; }
.colSpan-9-left-subgrid {grid-column: 1 / 10; } .colSpan-9-center-subgrid {grid-column: 2 / -3; }  .colSpan-9-right-subgrid {grid-column: 4 / -1; }
.colSpan-10-left-subgrid {grid-column: 1 / 11; } .colSpan-10-center-subgrid {grid-column: 2 / -2; }  .colSpan-10-right-subgrid {grid-column: 3 / -1; }
.colSpan-11-left-subgrid {grid-column: 1 / 12; } .colSpan-11-center-subgrid {grid-column: 2 / -1; }  .colSpan-11-right-subgrid {grid-column: 2 / -1; }
.colSpan-12-left-subgrid {grid-column: 1 / -1; } .colSpan-12-center-subgrid {grid-column: 1 / -1; }  .colSpan-12-right-subgrid {grid-column: 1 / -1; }

.colSpan-2-center-subgrid,
.colSpan-2-right-subgrid,
.colSpan-3-left-subgrid,
.colSpan-3-center-subgrid,
.colSpan-3-right-subgrid,
.colSpan-4-left-subgrid,
.colSpan-4-center-subgrid,
.colSpan-4-right-subgrid,
.colSpan-5-left-subgrid,
.colSpan-5-center-subgrid,
.colSpan-5-right-subgrid,
.colSpan-6-left-subgrid,
.colSpan-6-center-subgrid,
.colSpan-6-right-subgrid,
.colSpan-7-left-subgrid,
.colSpan-7-center-subgrid,
.colSpan-7-right-subgrid,
.colSpan-8-left-subgrid,
.colSpan-8-center-subgrid,
.colSpan-8-right-subgrid,
.colSpan-9-left-subgrid,
.colSpan-9-center-subgrid,
.colSpan-9-right-subgrid,
.colSpan-10-left-subgrid,
.colSpan-10-center-subgrid,
.colSpan-10-right-subgrid,
.colSpan-11-left-subgrid,
.colSpan-11-center-subgrid,
.colSpan-11-right-subgrid,
.colSpan-12-left-subgrid,
.colSpan-12-center-subgrid,
.colSpan-12-right-subgrid {
    display: grid;
    grid-template-columns: subgrid;
}

.colAll-item { grid-column: 1 / -1;}
.col1-item { grid-column: span 1; }
.col2-item { grid-column: span 2; }
.col3-item { grid-column: span 3; }
.col4-item { grid-column: span 4; }
.col5-item { grid-column: span 5; }
.col6-item { grid-column: span 6; }
.col7-item { grid-column: span 7; }
.col8-item { grid-column: span 8; }
.col9-item { grid-column: span 9; }
.col10-item { grid-column: span 10; }
.col11-item { grid-column: span 11; }

.colAll-item,
.col1-item,
.col2-item,
.col3-item,
.col4-item,
.col5-item,
.col6-item,
.col7-item,
.col8-item,
.col9-item,
.col10-item,
.col11-item {
    border: none;
    
}












.col-subgrid {display: grid; display: grid; grid-template-columns: subgrid; }
.col1-subgrid { grid-column: span 1; display: grid; grid-template-columns: subgrid; }
.col2-subgrid { grid-column: span 2; display: grid; grid-template-columns: subgrid; }
.col3-subgrid { grid-column: span 3; display: grid; grid-template-columns: subgrid; }
.col4-subgrid { grid-column: span 4; display: grid; grid-template-columns: subgrid; }
.col5-subgrid { grid-column: span 5; display: grid; grid-template-columns: subgrid; }
.col6-subgrid { grid-column: span 6; display: grid; grid-template-columns: subgrid; }
.col7-subgrid { grid-column: span 7; display: grid; grid-template-columns: subgrid; }
.col8-subgrid { grid-column: span 8; display: grid; grid-template-columns: subgrid; }
.col9-subgrid { grid-column: span 9; display: grid; grid-template-columns: subgrid; }
.col10-subgrid { grid-column: span 10; display: grid; grid-template-columns: subgrid; }
.col11-subgrid { grid-column: span 12; display: grid; grid-template-columns: subgrid; }


.subgrid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
}

/* || Backgrounds */

.background-light {background-color: var(--background-light);}
.background-medium {background-color: var(--background-medium);}
.background-medium-dark {background-color: var(--background-medium-dark);}
.background-dark {background-color: var(--background-dark);}
.background-darker {background-color: var(--background-darker);}


/* || Basics */
.block {
    display: block;
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

.text-center .buttons-wrapper {
    justify-content: center;
}

.text-center .card {
    text-align: left;
}
img {
    max-width: 100%;
}

.block {display: block !important;}
.grid {display: grid !important;}
.flex {display: flex;}

.flex-30 {
    display: flex;
    gap: 30px;
}

.flex-end-center {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-start-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-start-baseline {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}
.align-baseline {
    align-items: baseline;
}
.flex-d-col {
    flex-direction: column;
}

.gap-4 {
    gap: 4px;
}
.gap-10 {
    gap: 10px;
}
.gap-16 {
    gap: 16px;
}
.gap-15 {
    gap: 15px;
}
.gap-20 {
    gap: 20px;
}
.gap-25 {
    gap: 25px;
}
.gap-30 {
    gap: 30px;
}

.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}
.wrap {
    flex-wrap: wrap;
}


#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}


/* || Drag and Drop */

  #uploadForm {
    border: 2px dotted var(--border-gray);
    padding: 40px 0;
    text-align: center;
    cursor: pointer;
    position: relative;
  }
  
  #uploadForm.dragover {
    border-color: #333;
    background-color: #f9f9f9;
  }
  
  /* #excel_file {
    display: none;
  } */