.flex-container {
    display: flex;
    flex-direction: column;
    align-items: start;  /* Align items to the start of the flex direction (vertical in this case) */
    gap: 1rem;  /* Spacing between each form-group */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  overflow: auto; /* or overflow: hidden; */
}

.item {
  padding: 0px;
  text-align: center;
}

.a {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.c {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.d {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}

.e {
  grid-row: 5 / 6;
  grid-column: 1 / 2;
}

.f {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.g {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.h {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.i {
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}

.j {
  grid-row: 5 / 6;
  grid-column: 2 / 3;
}

.k {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.l {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.m {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.n {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
}

.o {
  grid-row: 5 / 6;
  grid-column: 3 / 4;
}

.grid-container-2 {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  overflow: auto; /* or overflow: hidden; */
}

.item-2 {
  padding: 0px;
  text-align: center;
}

.aa {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.bb {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.cc {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.dd {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}

.ee {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.ff {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.gg {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.hh {
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}

.ii {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.jj {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.kk {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.ll {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
}

.grid-container-3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 10px;
  max-height: 300px; /* Set the maximum height as desired */
  overflow: auto; /* or overflow: hidden; */
}

.item-3 {
  padding: 0px;
  text-align: center;
}

.aaa {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.bbb {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.ccc {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.ddd {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}
.eee {
  grid-row: 2 / 3;
  grid-column: 1 / 5;
}

.fff {
  grid-row: 3 / 4;
  grid-column: 1 / 5;
}

.ggg {
  grid-row: 4 / 6;
  grid-column: 1 / 3;
}

.hhh {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
}

.iii {
  grid-row: 5 / 6;
  grid-column: 3 / 4;
}

.jjj {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

.kkk {
  grid-row: 5 / 6;
  grid-column: 4 / 5;
}

.grid-container-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  max-height: 300px; /* Set the maximum height as desired */
  overflow: auto; /* or overflow: hidden; */
}

.item-4 {
  padding: 0px;
  text-align: center;
}

.a4 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b4 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.c4 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.d4 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.e4 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.f4 {
  grid-row: 3 / 5;
  grid-column: 1 / 3;
}

.g4 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.h4 {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
}

/* the following are used for the dialog modal */

.a4-modal {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b4-modal {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.c4-modal {
  grid-row: 2 / 3;
  grid-column: 1 / 4;
}

.d4-modal {
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}

.e4-modal {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}


.grid-container-modal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  max-height: 350px; /* Set the maximum height as desired */
  overflow: auto; /* or overflow: hidden; */
}

.item-4-simple {
  padding: 0px;
  text-align: left;
}

.a4-simplemodal {
  grid-row: 1 / 2;
  grid-column: 1 / 5;
}

.b4-simplemodal {
  grid-row: 2 / 3;
  grid-column: 1 /2;
}

.c4-simplemodal {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.d4-simplemodal {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}

.e4-simplemodal {
  grid-row: 5 / 6;
  grid-column: 1 / 2;
}

.f4-simplemodal {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.g4-simplemodal {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.h4-simplemodal {
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}

.i4-simplemodal {
  grid-row: 5 / 6;
  grid-column: 2 / 3;
}

.j4-simplemodal {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.k4-simplemodal {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

/* used for the scene actions modal */
.grid-container-modal-tall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 10px;
  max-height: 500px; /* Set the maximum height as desired */
  overflow: auto; /* or overflow: hidden; */
}

.a4-simplemodal-tall {
  grid-row: 1 / 2;
  grid-column: 1 / 5;
}
.b4-simplemodal-tall-wide {
  grid-row: 2 / 3;
  grid-column: 1 /5;
}

.b4-simplemodal-tall {
  grid-row: 2 / 3;
  grid-column: 1 /2;
}

.c4-simplemodal-tall {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.d4-simplemodal-tall {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}

.e4-simplemodal-tall {
  grid-row: 5 / 6;
  grid-column: 1 / 2;
}

.f4-simplemodal-tall {
  grid-row: 6 / 7;
  grid-column: 1 / 2;
}

.g4-simplemodal-tall {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.h4-simplemodal-tall {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.i4-simplemodal-tall {
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}

.j4-simplemodal-tall {
  grid-row: 5 / 6;
  grid-column: 2 / 3;
}

.k4-simplemodal-tall {
  grid-row: 6 / 7;
  grid-column: 2 / 3;
}

.l4-simplemodal-tall {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.m4-simplemodal-tall {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.n4-simplemodal-tall {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
}

.o4-simplemodal-tall {
  grid-row: 5 / 6;
  grid-column: 3 / 4;
}

.p4-simplemodal-tall {
  grid-row: 6 / 7;
  grid-column: 3 / 4;
}

/* the following are used for the overlay modal */

.a4-overlay {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b4-overlay {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.c4-overlay {
  grid-row: 1 / 2;
  grid-column: 3 / 5;
}

.d4-overlay {
  grid-row: 2 / 3;
  grid-column: 1 / 4;
}

.e4-overlay {
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}

.f4-overlay {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
}


.grid-container-5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 40px);
  gap: 10px;
  max-height: 300px; /* Set the maximum height as desired */
  overflow: auto; /* or overflow: hidden; */
}

.item-5 {
  padding: 0px;
  text-align: center;
}

.span-row1 {
  grid-column: 1 / 4; /* Spans all three columns */
  grid-row: 1; /* Occupies row 1 */
}

.a5 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b5 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.c5 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.d5 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.e5 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.f5 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.g5 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.h5 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.i5 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.small-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 5px;
}

.item-6 {
  padding: 10px;
  text-align: center;
}

.a6 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b6 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.c6 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.d6 {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}

.small-grid-container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}

.item-7 {
  padding: 10px;
  text-align: center;
}

.a7 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b7 {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}


.d7 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.e7 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.f7 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.g7 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.h7 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.i7 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}