#frame_main {
  display: flex;
  width: 100%;
  position:relative;
}

#frame_main #frame_side_panel {
  position: sticky;
  flex: 0;
  flex-basis: var(--frame_side_panel_width);
  background-color: var(--frame_bgcolor_sidebar);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 101;
}

#frame_main #frame_body {
  display: flex;
  flex-direction: column;

  flex:1;
  flex-basis: calc(100vh - var(--frame_side_panel_width));
}

#frame_main #frame_body #frame_top {
  position: sticky;
  top:0;
  left:0;
  width: 100%;
  height: var(--frame_top_height);
  background-color: var(--frame_bgcolor_top);
  z-index: 101;
}

#frame_main #frame_body #frame_contents {
  flex: 1;
  flex-basis: calc(100vh - var(--frame_top_height));
  width: 100%;
  background-color: var(--frame_bgcolor_contents);
}

/*flex*/
.flexcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.flexrow {
  display: flex;
  flex-direction: row;
}

.flexstart {
  justify-content: flex-start;
}
.flexend {
  justify-content: flex-end;
}
.flexcenter {
  justify-content: center;
}
.flexbetween {
  justify-content: space-between;
}
.flexaround {
  justify-content: space-around;
}
.flexevenly {
  justify-content: space-evenly;
}

.flexfillstart {
  align-items: flex-start;
}
.flexfillend {
  align-items: flex-end;
}
.flexfillcenter {
  align-items: center;
}
.flexfillstrech {
  align-items: stretch;
}
.flexfillbaseline {
  align-items: baseline;
}

.flex-auto { flex: auto ;}
.flex-1  { flex: 1;  }
.flex-2  { flex: 2;  }
.flex-3  { flex: 3;  }
.flex-4  { flex: 4;  }
.flex-5  { flex: 5;  }
.flex-6  { flex: 6;  }
.flex-7  { flex: 7;  }
.flex-8  { flex: 8;  }
.flex-9  { flex: 9;  }
.flex-10 { flex: 10; }
.flex-11 { flex: 11; }
.flex-12 { flex: 12; }

.grow-0 { flex-grow: 0; }
.grow-1 { flex-grow: 1; }
.grow-2 { flex-grow: 2; }
.grow-3 { flex-grow: 3; }
.grow-4 { flex-grow: 4; }
.grow-5 { flex-grow: 5; }
.grow-6 { flex-grow: 6; }
.grow-7 { flex-grow: 7; }
.grow-8 { flex-grow: 8; }
.grow-9 { flex-grow: 9; }
.grow-10 { flex-grow: 10; }
.grow-11 { flex-grow: 11; }
.grow-12 { flex-grow: 12; }

.shrink-0 { flex-shrink: 0; }
.shrink-1 { flex-shrink: 1; }
.shrink-2 { flex-shrink: 2; }
.shrink-3 { flex-shrink: 3; }
.shrink-4 { flex-shrink: 4; }
.shrink-5 { flex-shrink: 5; }
.shrink-6 { flex-shrink: 6; }
.shrink-7 { flex-shrink: 7; }
.shrink-8 { flex-shrink: 8; }
.shrink-9 { flex-shrink: 9; }
.shrink-10 { flex-shrink: 10; }
.shrink-11 { flex-shrink: 11; }
.shrink-12 { flex-shrink: 12; }

.gap10  { gap: 10px;  }
.gap20  { gap: 20px;  }
.gap30  { gap: 30px;  }
.gap40  { gap: 40px;  }
.gap50  { gap: 50px;  }
.gap60  { gap: 60px;  }
.gap70  { gap: 70px;  }
.gap80  { gap: 80px;  }
.gap90  { gap: 90px;  }
.gap100 { gap: 100px; }
.gap120 { gap: 120px; }
.gap150 { gap: 150px; }
.gap200 { gap: 200px; }
.gap250 { gap: 250px; }
.gap300 { gap: 300px; }

.posrel {
  position: relative;
}
.posabs {
  position: absolute;
}