:root {
  --list-bg: gray;                    
  --list-color: white;
  --list-margin: 0vmin;
  --list-gap: 0.5vmin;
  --list-padding: 0.5vmin;
  --list-border-width: 1px;
  --list-border-style: none;
  --list-border-color: blue;
  --list-border-radius: 0;	/*old: 2vmin*/

  --list-element-bg: black;           
  --list-element-color: white;
  --list-element-margin: 0vmin;
  --list-element-padding: 0vmin;
  --list-element-padding-left: 0.5vmin;
  --list-element-padding-right: 0.5vmin;
  --list-element-padding-top: 0.5vmin;
  --list-element-padding-bottom: 0.5vmin;
  --list-element-border-width: 1px;
  --list-element-border-style: none;
  --list-element-border-color: yellowgreen;
  --list-element-border-radius: 0;	/*old: 2vmin*/

  --list-item-bg: black;           
  --list-item-font-size: 5vmin;
  --list-item-color: white;
  --list-item-margin-left: 0vmin;
  --list-item-margin-right: 0vmin;
  --list-item-margin-top: 0vmin;
  --list-item-margin-bottom: 0vmin;
  --list-item-padding-left: 0.5vmin;
  --list-item-padding-right: 0.5vmin;
  --list-item-padding-top: 0.5vmin;
  --list-item-padding-bottom: 0.5vmin;
  --list-item-border-style: none;
  --list-item-border-width: 1px;
  --list-item-border-color: pink;
  --list-item-border-radius: 0;	/*old: 1vmin*/

}

/* define the list section */
.grid-list-container {
  display: block;
  width: 100%;
  height: 100%;

  overflow-y: scroll;
  overflow-x: hidden;  
}  

/* define the list section */
.grid-cols-list-header {

}

/* define the list section */
.grid-cols-list-calc {

}

/* define the list section */
.grid-cols-list-body {

}

/* define the list section */
.grid-cols-list {
  display: grid;
  grid-template-columns: 1fr 2fr 5fr 2fr 2fr 2fr;
  background-color: var(--list-bg);
  color: var(--list-color);
  gap: var(--list-gap);
  margin: var(--list-margin);
  padding: var(--list-padding);
  border-width: var(--list-border-width);
  border-style: var(--list-border-style);
  border-color: var(--list-border-color);
  border-radius: var(--list-border-radius);
}

/* define 2 vertical items in the list section */
.grid-cols-list-2items-vert {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr;
  border-style: none;
  border-width: var(--list-border-width);
  border-color: var(--list-border-color);
  border-radius: var(--list-border-radius);
}

/* define 2 vertical items in the list section */
.grid-cols-list-2items-hor {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 1fr;
  border-style: none;
  border-width: var(--list-border-width);
  border-color: var(--list-border-color);
  border-radius: var(--list-border-radius);
}

/* define 2 vertical items in the list section */
.grid-cols-list-3items-hor {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  border-style: none;
  border-width: var(--list-border-width);
  border-color: var(--list-border-color);
  border-radius: var(--list-border-radius);
}


/* this is a container for a list item */ 
/* .grid-cols-list > div, .grid-cols-list-2items-vert > div, .grid-cols-list-3items-hor > div { */
.grid-cols-list > div {
  /*display: block;*/
  width: inherit;
  height: inherit;
  background: var(--list-element-bg);
  color: var(--list-element-color);
  margin: var(--list-element-margin);
  padding: var(--list-element-padding);
  padding-left: var(--list-element-padding-left);
  padding-right: var(--list-element-padding-right);
  padding-top: var(--list-element-padding-top);
  padding-bottom: var(--list-element-padding-bottom);
  border-width: var(--list-element-border-width);
  border-style: var(--list-element-border-style);
  border-color: var(--list-element-border-color);
  border-radius: var(--list-element-border-radius);
}

/* this is a list item */ 
.sb-list-item {
  /* width: 35vw; */
  background: var(--list-item-bg);
  padding-left: var(--list-item-padding-left);
  padding-right: var(--list-item-padding-right);
  padding-top: var(--list-item-padding-top);
  padding-bottom: var(--list-item-padding-bottom);
  border-style: var(--list-item-border-style);
  border-width: var(--list-item-border-width);
  border-radius: var(--list-item-border-radius);
  border-color: var(--list-item-border-color);
  font-size: var(--list-item-font-size);
  color: var(--list-item-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.sb_list_icons  {
  margin-right: 1vmin;
}

.sb-list-tablecell {
  justify-content: center;
  align-items: center;
  display: flex;
}