/* CSS Document */
/* =========================================
   GLOBAL RESET
   ========================================= */
:root {
  --gHeadHeight: calc( 16 / 16 * 4em );
  --gFootHeight: calc( 16 / 16 * 3.5em );
  
  --resizerHeight: calc( 16 / 16 * 8em );
  
  --resizerWidth: calc( 8 / 16 * 1em );
  --resizerWidthHover: calc( 12 / 16 * 1em );
  
  --toggleWrapperBackground: #DDDDDD48; /* 48 = 30%*/
  --toggleWrapperBackgroundHover: #DDDDDDB3;  /* B3 = 70%*/
  
  --resizerBackground: #CCCCCC48;  /* 48 = 30%*/
  --resizerBackgroundHover: #CCCCCCB3;  /* B3 = 70%*/
  
  --toggleBackground: var( --themeDarker30 , #FF990048 );
  --toggleBackgroundHover: var( --themeDarker70 , #FF9900B3 );
  
  --gridBorder: 0.125em solid var( --themeDark , #538199 ); /* #538199 var( --themeDark )*/
  
  --gBodyBackground: var( --white , #FFFFFF );
  --gHeadBackground: var( --lightColour , #F3F3F3 );
  --gFootBackground: var( --white , $F9F9F9 );
  --gLeftBackground: var( --lightColour , #EEF4FF);
  --gRightBackground: var( --lightColour , #EEF4FF );
  }

html, body {
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* =========================================
   annimactions , class added via javaScript on Toggle Closed.
   ========================================= */
.isAnimating {
  transition:
    width 1000ms ease ,
    height 1000ms ease ,
    opacity 1000ms ease;
}
/* =========================================
   BASE GRID
   ========================================= */
.grid {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  /*overflow: hidden;    grid NEVER scrolls */
}

/* Needed so children don't overflow when nested */
.grid > .gBody {
  min-width: 0;
  min-height: 0;
}

/* =========================================
   ORIENTATION MODES
   ========================================= */

/* ---------- COLUMN MODE ---------- */
.grid.gCols {
  grid-auto-flow: column;
  grid-template-columns:
    repeat( var( --gLefts , 0 ) , max-content )
    repeat( var( --gBodies , 0 ) , 1fr  )
    repeat( var( --gRights , 0 ) , max-content );
/*  transition: grid-template-columns 1000ms ease;*/ /* this effect does not work*/
}

/* ---------- ROW MODE ---------- */
.grid.gRows {
  grid-auto-flow: row;
  grid-template-rows:
    repeat( var( --gHeads , 0) , max-content )
    repeat( var( --gBodies , 0) , 1fr )
    repeat( var( --gFoots , 0) , max-content );
/*  transition: grid-template-rows 1000ms ease; *//* this effect does not work*/
}

/* =========================================
   ROLE ORDERING (THE MAGIC)
   ========================================= */

/* ----- ROW MODE ----- */
/* gHead & gLeft → HEADER */
.grid.gRows > .gHead,
.grid.gRows > .gLeft {
  order: 0;
  min-height: max( 1em, var( --resizerWidthHover ) );
  max-height: 20em;
  height: var(--height, var( --gHeadHeight ) );
  /*transition: height 1000ms ease;*/
}

/* gBody stays middle */
.grid.gRows > .gBody {
  order: 1;
  /*height: var(--height, auto );*/
}

/* gFoot & gRight → FOOTER */
.grid.gRows > .gFoot,
.grid.gRows > .gRight {
  order: 2;
  min-height: max( 1em, var( --resizerWidthHover ) );
  max-height: 20em;
  height: var(--gFootHeight, 5em);
  /*transition: height 1000ms ease;*/
}

/* ----- COLUMN MODE ----- */
/* gLeft & gHead → LEFT */
.grid.gCols > .gLeft,
.grid.gCols > .gHead {
  order: 0;
  min-width: max( 1em, var( --resizerWidthHover ) );
  max-width: max( 30em, 30vw );; /* 30em */
  width: var(--width, 20em);   /* default if --width not set */
  /*transition: width 1000ms ease;*/
}

/* gBody stays center */
.grid.gCols > .gBody {
  order: 1;
  width: var(--width, auto);   /* default if --width not set */
  /*transition: width 1000ms ease;*/
}

/* gRight & gFoot → RIGHT */
.grid.gCols > .gRight,
.grid.gCols > .gFoot {
  order: 2;
  min-width: max( 1em, var( --resizerWidthHover ) );
  max-width: 70vw; /* 30em */
  width: var(--width, 20em);
  /*transition: width 1000ms ease;*/
}

/* =========================================
   VISUAL HELPERS (OPTIONAL)
   ========================================= */
.gHead,
.gFoot,
.gLeft,
.gRight,
.gBody {
  padding: 0.625em;
  border: var( --gridBorder );
}
.noPadding {
  padding: 0em;
}

/* Optional: distinguish roles visually */
.gBody   { background: var( --gBodyBackground ); }
.gHead { background: var( --gHeadBackground ); }
.gFoot { background: var( --gFootBackground ); }
.gLeft   { background: var( --gLeftBackground ); }
.gRight  { background: var( --gRightBackground ); }

/* =========================================
   SCROLL SAFETY (IMPORTANT)
   ========================================= */
.gHead,
.gFoot,
.gLeft,
.gRight {
  white-space: nowrap;
}

/* Main content scrolls */

.gBody {
  overflow: auto;
}

/* Side panels scroll vertically */
.gLeft,
.gRight {
  overflow-y: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
p {
  overflow-x: clip;
  text-overflow: ellipsis;
}
/* Headers & gFoots usually don't scroll */
.gHead,
.gFoot {
  overflow: hidden;
}

/* =========================================
   SCROLL UTILITIES
   ========================================= */

/* No scroll */
.no-scroll {
  overflow: hidden !important;
}

/* Vertical only */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Horizontal only */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Both */
.scroll {
  overflow: auto;
}

/* Always show scrollbar (useful for stable layouts) */
.scroll-always {
  overflow: scroll;
}

/* =========================================
   panelClosed
   ========================================= */
.grid.gRows > .gBody.panelClosed,
.grid.gRows > .gHead.panelClosed,
.grid.gRows > .gFoot.panelClosed,
.grid.gRows > .gLeft.panelClosed,
.grid.gRows > .gRight.panelClosed {
  height: var( --resizerWidthHover );
  min-height: var( --resizerWidthHover );
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden  !important;
  line-height: 0 !important;
  color: transparent !important;  /* hides raw text nodes */
}
.grid.gCols > .gBody.panelClosed,
.grid.gCols > .gLeft.panelClosed,
.grid.gCols > .gRight.panelClosed,
.grid.gCols > .gHead.panelClosed,
.grid.gCols > .gFoot.panelClosed {
  width: var( --resizerWidthHover );
  min-width: var( --resizerWidthHover );
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden  !important;
  line-height: 0 !important;
  color: transparent !important;  /* hides raw text nodes */
}
/* Hide panel content but keep resizer/toggle */
.panelClosed > :not(.resizer):not(.toggleWrapper):not(.alwaysVisible) {
  display: none !important;
}
/* =========================================
   panelHidden
   ========================================= */
.grid.gRows > .gBody.panelHidden,
.grid.gRows > .gHead.panelHidden,
.grid.gRows > .gFoot.panelHidden,
.grid.gRows > .gLeft.panelHidden,
.grid.gRows > .gRight.panelHidden {
  height: 0;
  min-height: 0;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden  !important;
  line-height: 0 !important;
  color: transparent !important;  /* hides raw text nodes */
}
.grid.gCols > .gBody.panelHidden,
.grid.gCols > .gLeft.panelHidden,
.grid.gCols > .gRight.panelHidden,
.grid.gCols > .gHead.panelHidden,
.grid.gCols > .gFoot.panelHidden {
  width: 0;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden  !important;
  line-height: 0 !important;
  color: transparent !important;  /* hides raw text nodes */
}
/* =========================================
   RESIZE UTILITIES
   ========================================= */
.gBody,
.gHead,
.gFoot,
.gLeft,
.gRight {
  position: relative; /* IMPORTANT for absolute resizers */
}

/*|| Stick to bottom for 'gRows > .gHead or .gLeft' ||*/
.grid.gRows > .gBody > .resizer,
.grid.gRows > .gBody > .toggleWrapper,
.grid.gRows > .gHead > .resizer,
.grid.gRows > .gHead > .toggleWrapper,
.grid.gRows > .gLeft > .resizer,
.grid.gRows > .gLeft > .toggleWrapper { 
  bottom: 0; 
}
/*|| Stick to top for 'gRows > .gFoot or .gRight' ||*/
.grid.gRows > .gFoot > .resizer,
.grid.gRows > .gFoot > .toggleWrapper,
.grid.gRows > .gFoot > .resizer,
.grid.gRows > .gFoot > .toggleWrapper,
.grid.gRows > .gRight > .resizer ,
.grid.gRows > .gRight > .toggleWrapper{ 
  top: 0; 
}
/*|| Stick to gRight for 'gCols > .gLeft or .gHead' ||*/
.grid.gCols > .gBody > .resizer,
.grid.gCols > .gBody > .toggleWrapper,
.grid.gCols > .gLeft > .resizer,
.grid.gCols > .gLeft > .toggleWrapper,
.grid.gCols > .gHead > .resizer,
.grid.gCols > .gHead > .toggleWrapper { 
  right: 0; 
}
/*|| Stick to gLeft for 'gCols > .gRight or .gFoot' ||*/
.grid.gCols > .gRight > .resizer,
.grid.gCols > .gRight > .toggleWrapper,
.grid.gCols > .gFoot > .resizer,
.grid.gCols > .gFoot > .toggleWrapper { 
  left: 0; 
}

/*|| Base .resizer , .toggleWrapper and .toggle style ||*/
.resizer,
.toggleWrapper {
  position: absolute;
  z-index: 110;
  touch-action: none;   /* 🔥 REQUIRED */
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resizer {
  background: var( --resizerBackground );
}
.resizer:hover {
  background: var( --resizerBackgroundHover );
}
.toggleWrapper {
  background: var( --toggleWrapperBackground );
}
.toggleWrapper:hover {
  background: var( --toggleWrapperBackgroundHover );
}
.toggle {
  background: var( --toggleBackground );
  pointer-events: auto; /* allow the toggle to receive pointer events */
  cursor: pointer;
  z-index: 120;
}
.toggle:hover {
  background: var( --toggleBackgroundHover );
}

/*|| resizer and toggleWrapper ||*/
/*|| GRID ROW (vertical resize) : '.gHeads , .gFoots , .gLeft and .gRight ||*/
.grid.gRows > .gBody > .resizer,
.grid.gRows > .gBody > .toggleWrapper,
.grid.gRows > .gHead > .resizer,
.grid.gRows > .gHead > .toggleWrapper,
.grid.gRows > .gFoot > .resizer,
.grid.gRows > .gFoot > .toggleWrapper,
.grid.gRows > .gLeft > .resizer,
.grid.gRows > .gLeft > .toggleWrapper,
.grid.gRows > .gRight > .resizer,
.grid.gRows > .gRight > .toggleWrapper  {
  left: 0;
  right: 0;
  height: var( --resizerWidth );
  cursor: ns-resize; /* north south */
}
/*|| GRID COLUMN (horizontal resize) : '.gLeft , .gRight , .gHeads and .gFoots ||*/
.grid.gCols > .gBody > .resizer,
.grid.gCols > .gBody > .toggleWrapper,
.grid.gCols > .gLeft > .resizer,
.grid.gCols > .gLeft > .toggleWrapper,
.grid.gCols > .gRight > .resizer,
.grid.gCols > .gRight > .toggleWrapper,
.grid.gCols > .gHead > .resizer,
.grid.gCols > .gHead > .toggleWrapper,
.grid.gCols > .gFoot > .resizer,
.grid.gCols > .gFoot > .toggleWrapper {
  top: 0;
  bottom: 0;
  width: var( --resizerWidth );
  cursor: ew-resize; /* east west */
}
/*|| GRID ROW (hover) : size for resizer and toggleWrapper ||*/
.grid.gRows > .gBody > .resizer:hover,
.grid.gRows > .gBody > .toggleWrapper:hover,
.grid.gRows > .gHead > .resizer:hover,
.grid.gRows > .gHead > .toggleWrapper:hover,
.grid.gRows > .gFoot > .resizer:hover,
.grid.gRows > .gFoot > .toggleWrapper:hover,
.grid.gRows > .gLeft > .resizer:hover,
.grid.gRows > .gLeft > .toggleWrapper:hover,
.grid.gRows > .gRight > .resizer:hover 
.grid.gRows > .gRight > .toggleWrapper:hover {
  height: var( --resizerWidthHover );
}
/*|| GRID COLUMN (hover) : size for resizer and toggleWrapper ||*/
.grid.gCols > .gBody > .resizer:hover,
.grid.gCols > .gBody > .toggleWrapper:hover,
.grid.gCols > .gLeft > .resizer:hover,
.grid.gCols > .gLeft > .toggleWrapper:hover,
.grid.gCols > .gRight > .resizer:hover,
.grid.gCols > .gRight > .toggleWrapper:hover,
.grid.gCols > .gHead > .resizer:hover,
.grid.gCols > .gHead > .toggleWrapper:hover,
.grid.gCols > .gFoot > .resizer:hover,
.grid.gCols > .gFoot > .toggleWrapper:hover {
  width: var( --resizerWidthHover );
}

/*|| resizer and toggleWrapper size panelClosed ||*/
/*|| GRID ROW : closed ||*/
.grid.gRows > .gBody.panelClosed > .resizer,
.grid.gRows > .gBody.panelClosed > .toggleWrapper,
.grid.gRows > .gHead.panelClosed > .resizer,
.grid.gRows > .gHead.panelClosed > .toggleWrapper,
.grid.gRows > .gFoot.panelClosed > .resizer,
.grid.gRows > .gFoot.panelClosed > .toggleWrapper,
.grid.gRows > .gLeft.panelClosed > .resizer,
.grid.gRows > .gLeft.panelClosed > .toggleWrapper,
.grid.gRows > .gRight.panelClosed > .resizer,
.grid.gRows > .gRight.panelClosed > .toggleWrapper {
  height: var( --resizerWidthHover );
}
/*|| GRID ROW : closed ||*/
.grid.gCols > .gBody.panelClosed > .resizer,
.grid.gCols > .gBody.panelClosed > .toggleWrapper,
.grid.gCols > .gLeft.panelClosed > .resizer,
.grid.gCols > .gLeft.panelClosed > .toggleWrapper,
.grid.gCols > .gRight.panelClosed > .resizer,
.grid.gCols > .gRight.panelClosed > .toggleWrapper,
.grid.gCols > .gHead.panelClosed > .resizer,
.grid.gCols > .gHead.panelClosed > .toggleWrapper,
.grid.gCols > .gFoot.panelClosed > .resizer,
.grid.gCols > .gFoot.panelClosed > .toggleWrapper {
 width: var( --resizerWidthHover );
}

/*|| toggle ||*/
/*|| GRID ROW : adjust the .toggle size ||*/
.grid.gRows > .gBody > .resizer > .toggle,
.grid.gRows > .gBody > .toggleWrapper > .toggle,
.grid.gRows > .gHead > .resizer > .toggle,
.grid.gRows > .gHead > .toggleWrapper > .toggle,
.grid.gRows > .gFoot > .resizer > .toggle,
.grid.gRows > .gFoot > .toggleWrapper > .toggle,
.grid.gRows > .gLeft > .resizer > .toggle,
.grid.gRows > .gLeft > .toggleWrapper > .toggle,
.grid.gRows > .gRight > .resizer > .toggle,
.grid.gRows > .gRight > .toggleWrapper > .toggle  {
  content: " ";
  width: min( 50% , var( --resizerHeight ) );
  height: 100%;
  display: block;
  margin: auto;
  cursor: pointer;
}
/*|| GRID COLUMN : adjust the .toggle size ||*/
.grid.gCols > .gBody > .resizer > .toggle,
.grid.gCols > .gBody > .toggleWrapper > .toggle,
.grid.gCols > .gLeft > .resizer > .toggle,
.grid.gCols > .gLeft > .toggleWrapper > .toggle,
.grid.gCols > .gRight > .resizer > .toggle,
.grid.gCols > .gRight > .toggleWrapper > .toggle,
.grid.gCols > .gHead > .resizer > .toggle,
.grid.gCols > .gHead > .toggleWrapper > .toggle,
.grid.gCols > .gFoot > .resizer > .toggle,
.grid.gCols > .gFoot > .toggleWrapper > .toggle {
  content: " ";
  height: min( 50% , var( --resizerHeight ) );
  width: 100%;
  display: block;
  margin: auto;
  cursor: pointer;
}


/*|| GRID ROW and COLUMN: fix the coursor for toggleWrapper ||*/
.grid.gRows > .gBody > .toggleWrapper,
.grid.gRows > .gHead > .toggleWrapper,
.grid.gRows > .gFoot > .toggleWrapper,
.grid.gRows > .gLeft > .toggleWrapper,
.grid.gRows > .gRight > .toggleWrapper,
.grid.gCols > .gBody > .toggleWrapper,
.grid.gCols > .gLeft > .toggleWrapper,
.grid.gCols > .gRight > .toggleWrapper,
.grid.gCols > .gHead > .toggleWrapper,
.grid.gCols > .gFoot > .toggleWrapper {
  cursor: auto;
}

/* =========================================
   GENERAL PLACEMENTS
   ========================================= */
.topLeft {
  position: absolute;
  top: 0.625em;
  left: 0.625em;
}
.topCenter {
  position: absolute;
  top: 0.625em;
  left: 50%;
  transform: translateX(-50%);
}
.topRight {
  position: absolute;
  top: 0.625em;
  right: 0.625em;
}

.middleCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottomLeft {
  position: absolute;
  bottom: 0.625em;
  left: 0.625em;
}
.bottomCenter {
  position: absolute;
  bottom: 0.625em;
  left: 50%;
  transform: translateX(-50%);
}
.bottomRight {
  position: absolute;
  bottom: 0.625em;
  right: 0.625em;
}
.bottomRightSticky {
  position: sticky;
  bottom: 0.625em; /* calc( 100% - 2 * 0.625em ) sticks to top, if 0 sticks to bottom */
  right: 0.625em;
  left: calc( 100% - 2 * 0.625em );
}



/* =========================================
   OPEN CLOSE BUTTOM
   ========================================= */
/* Base button */
.allClosedOpened {
  width: 1.5em;
  height: 1.5em;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.3;
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  font-size: 1.5em;
  transition: opacity 0.8s, transform 1s;
  z-index: 130;
}

/* Hover effects */
.allClosedOpened:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Icons using FontAwesome */
.allOpened::before {
  content: "\f065"; /* fullscreen icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.allClosed::before {
  content: "\f066"; /* compress icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Tooltip pseudo-element */
.allClosedOpened::after {
  content: attr(data-tooltip); /* text from data-tooltip attribute */
  position: absolute;
  top: 50%;               /* vertically center relative to button */
  right: 100%;            /* position to the left of the button */
  transform: translateY(-50%); /* vertically center the tooltip */
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  font-size: 0.75em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  margin-right: 0.5em; /* optional spacing between button and tooltip */
}
.bottomLeft.allClosedOpened::after {
  top: 50%;               /* vertically center relative to button */
  left: 100%;            /* position to the left of the button */
  right: unset;
  margin-left: 0.5em; /* optional spacing between button and tooltip */
}

.allClosedOpened.allClosed::after {
  content: attr( data-tooltip-allClosed ); /* text from data-tooltip attribute */
}
.allClosedOpened.allOpened::after {
  content: attr( data-tooltip-allOpened ); /* text from data-tooltip attribute */
}

/* Show tooltip on hover */
.allClosedOpened:hover::after {
  opacity: 0.8;
}

/* ================================
   OVERLAY
   ================================ */
/* Button */
.overlay-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 140;
  padding: 0.5em 0.75em;
  background: #222;
  color: #fff;
  border-radius: 0.25em;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
}

/* Overlay base */
.overlay {
  position: absolute;
  inset: 0;
  background-color: var( --themeColour080 , #00000080 );
  opacity: 0;
  pointer-events: none; /* block clicks when hidden */
  transition: opacity 0.5s ease-in-out;
  z-index: 250;
}
.overlayOn {
  pointer-events: auto;
  opacity: 1;
  display: block;
  transition: opacity 0.5s ease-in;
}

/* ===============================
   Mobile (default)
   =============================== */
/* Large phones */
@media (min-width: 480px) {}

/* Tablets */
@media (min-width: 768px) {}

/* Small laptops */
@media (min-width: 1024px) {}

/* Desktop */
@media (min-width: 1280px) {}

/* ===============================
   Desktop (default)
   =============================== */
/* Mobile-first */
@media (max-width: 480px) {}

/* Larger phones */
@media (max-width: 600px) {}

/* Tablets */
@media (max-width: 768px) {}

@media (max-width: 480px) {

  /* =========================================
     1. SWITCH COLUMN GRID to ROW BEHAVIOR
     ========================================= */
  .grid.gCols {
    grid-auto-flow: row;
    grid-template-columns: none;
    grid-template-rows:
      repeat(var(--gLefts, 0), max-content)
      repeat(var(--gBodies, 0), 1fr)
      repeat(var(--gRights, 0), max-content);
  }

  /* =========================================
     2. ROTATE PANEL SIZING (WIDTH to HEIGHT)
     ========================================= */

  .grid.gCols > .gLeft,
  .grid.gCols > .gRight,
  .grid.gCols > .gHead,
  .grid.gCols > .gFoot {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: var(--height, 5em);
    min-height: max(1em, var(--resizerWidthHover));
    max-height: 20em;
  }

  .grid.gCols > .gBody {
    width: auto !important;
    height: auto;
  }

  .grid.gCols > .gBody.panelClosed,
  .grid.gCols > .gLeft.panelClosed,
  .grid.gCols > .gRight.panelClosed,
  .grid.gCols > .gHead.panelClosed,
  .grid.gCols > .gFoot.panelClosed {
	height: var( --resizerWidthHover );
	min-height: var( --resizerWidthHover );
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	overflow: hidden  !important;
	line-height: 0 !important;
	color: transparent !important;  /* hides raw text nodes */
  }

  /* =========================================
     3. ROTATE RESIZERS (EW to NS)
     ========================================= */

  /*|| Stick to gRight for 'gCols > .gLeft or .gHead' ||*/
  .grid.gCols > .gBody > .resizer,
  .grid.gCols > .gBody > .toggleWrapper,
  .grid.gCols > .gLeft > .resizer,
  .grid.gCols > .gLeft > .toggleWrapper,
  .grid.gCols > .gHead > .resizer,
  .grid.gCols > .gHead > .toggleWrapper { 
	bottom: 0; 
	top: unset;
  }
  /*|| Stick to gLeft for 'gCols > .gRight or .gFoot' ||*/
  .grid.gCols > .gRight > .resizer,
  .grid.gCols > .gRight > .toggleWrapper,
  .grid.gCols > .gFoot > .resizer,
  .grid.gCols > .gFoot > .toggleWrapper { 
	top: 0; 
	bottom: unset; 
  }

  /*|| GRID COLUMN (horizontal resize) : '.gLeft , .gRight , .gHeads and .gFoots ||*/
  .grid.gCols > .gBody > .resizer,
  .grid.gCols > .gBody > .toggleWrapper,
  .grid.gCols > .gLeft > .resizer,
  .grid.gCols > .gLeft > .toggleWrapper,
  .grid.gCols > .gRight > .resizer,
  .grid.gCols > .gRight > .toggleWrapper,
  .grid.gCols > .gHead > .resizer,
  .grid.gCols > .gHead > .toggleWrapper,
  .grid.gCols > .gFoot > .resizer,
  .grid.gCols > .gFoot > .toggleWrapper {
	left: 0;
	right: 0;
	height: var( --resizerWidth );
	cursor: ns-resize; /* north south */
	width: auto;
  }
  /*|| GRID COLUMN (hover) : size for resizer and toggleWrapper ||*/
  .grid.gCols > .gBody > .resizer:hover,
  .grid.gCols > .gBody > .toggleWrapper:hover,
  .grid.gCols > .gLeft > .resizer:hover,
  .grid.gCols > .gLeft > .toggleWrapper:hover,
  .grid.gCols > .gRight > .resizer:hover,
  .grid.gCols > .gRight > .toggleWrapper:hover,
  .grid.gCols > .gHead > .resizer:hover,
  .grid.gCols > .gHead > .toggleWrapper:hover,
  .grid.gCols > .gFoot > .resizer:hover,
  .grid.gCols > .gFoot > .toggleWrapper:hover {
	height: var( --resizerWidthHover );
	width: auto;
  }
  /*|| GRID ROW : closed ||*/
  .grid.gCols > .gBody.panelClosed > .resizer,
  .grid.gCols > .gBody.panelClosed > .toggleWrapper,
  .grid.gCols > .gLeft.panelClosed > .resizer,
  .grid.gCols > .gLeft.panelClosed > .toggleWrapper,
  .grid.gCols > .gRight.panelClosed > .resizer,
  .grid.gCols > .gRight.panelClosed > .toggleWrapper,
  .grid.gCols > .gHead.panelClosed > .resizer,
  .grid.gCols > .gHead.panelClosed > .toggleWrapper,
  .grid.gCols > .gFoot.panelClosed > .resizer,
  .grid.gCols > .gFoot.panelClosed > .toggleWrapper {
   height: var( --resizerWidthHover );
   width: auto;
  }
  /*|| GRID COLUMN : adjust the .toggle size ||*/
  .grid.gCols > .gBody > .resizer > .toggle,
  .grid.gCols > .gBody > .toggleWrapper > .toggle,
  .grid.gCols > .gLeft > .resizer > .toggle,
  .grid.gCols > .gLeft > .toggleWrapper > .toggle,
  .grid.gCols > .gRight > .resizer > .toggle,
  .grid.gCols > .gRight > .toggleWrapper > .toggle,
  .grid.gCols > .gHead > .resizer > .toggle,
  .grid.gCols > .gHead > .toggleWrapper > .toggle,
  .grid.gCols > .gFoot > .resizer > .toggle,
  .grid.gCols > .gFoot > .toggleWrapper > .toggle {
	content: " ";
	width: min( 50% , var( --resizerHeight ) );
	height: 100%;
	display: block;
	margin: auto;
	cursor: pointer;
  }

/* =========================================
   panelHidden
   ========================================= */
.grid.gRows > .gBody.panelHidden,
.grid.gRows > .gHead.panelHidden,
.grid.gRows > .gFoot.panelHidden,
.grid.gRows > .gLeft.panelHidden,
.grid.gRows > .gRight.panelHidden,
.grid.gCols > .gBody.panelHidden,
.grid.gCols > .gLeft.panelHidden,
.grid.gCols > .gRight.panelHidden,
.grid.gCols > .gHead.panelHidden,
.grid.gCols > .gFoot.panelHidden {
  height: 0;
  width: 0;
  min-height: 0;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden  !important;
  line-height: 0 !important;
  color: transparent !important;  /* hides raw text nodes */
}
  /* =========================================
     4. ROTATE TOGGLE SIZE
     ========================================= */

  .grid.gCols > * > .resizer > .toggle,
  .grid.gCols > * > .toggleWrapper > .toggle {
    width: min(50%, var(--resizerHeight));
    height: 100%;
  }

  /* =========================================
     5. MOBILE SCROLL BEHAVIOR
     ========================================= */

  .grid.gCols > .gLeft,
  .grid.gCols > .gRight {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .grid.gCols > .gBody {
    overflow: auto;
  }
}