/**
 20200419 (Kaiss Naimi): first version HTML Table Split
   Usage:
     kn_pivot_SetDynamic(document.getElementById("mytableid"), "300px", "200px", 1, 1);
   Required:
     table_ok.css
 
 TODO: don't use element tagname
 TODO: select a cell
 
 //20241029:
 box-sizing:border-box;
 
*/

/*table.kn_pivot_ {*/
/*table {*/
.kn_pivot_table {
  table-layout: fixed;/*good to have*/
  /*width: 100%;*/
  /*width: 500px;*/
  
  border-collapse: collapse; /*required*/
  
  
  
  /*empty-cells: show;*/
  
  width: 0px; /*this is needed else column cant be smaller*/
  /*width: 1000px;*/
  
  /*opacity: 1; *//*.kn_pivot_*/
  background-color: lightyellow; /*required & not inherit|initial, opacity nok*/
  
  /**
   width: 300px;
   border: 15px solid green;
   padding: 50px;
   margin: 20px;
   */
}

/*tr
 */
/*.kn_pivot_tr:nth-child(even) {background-color: lightyellow;}*/

/*
 td
 */
.kn_pivot_:hover(even) {background-color: lightblue;}

/*
 td
 */
 .kn_pivot_td {
/*td {*/

  border: 1px solid; /* red;*/
  
  white-space: nowrap;
  
  /* 1 of 2 below */
  overflow: hidden; /*hidden:scroll;*/
  text-overflow: ellipsis;
  
  /*object-fit: none;*/
  
  /*min-width: 0;*/
  /*max-height: 0;*/

  /*
   height: 50px;
  width: 50px;
   min-width: 50px;
   width: 50px;
   */
  /*
   width: 100px;
  height: 50px;
  */
  
  /*width: 10px;*/
  
  /*max-height: 1px;*/
  /*overflow: scroll;*/
  /*background-color: darkred;*/
  
  /*padding:5px;*/
  
}

/*td
 */
.kn_pivot_td_select
{
  /*border: 5px solid;*/ /* red;*/
  border: 1px solid red;
  /*color: red;*/
  background-color: lightblue;
}

/*tr
 */
.kn_pivot_tr {
/*tr {*/
  white-space: nowrap; /*needed for offsetHeigth?*/
  overflow: hidden;
}

/*
 div
 */
.tablemain
{
  position: relative; /*relative|absolute*/
  overflow: hidden; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  /*z-index: 7;*/

  top: 0px;
  left: 0px;
	
	/*
	 margin: 0;
	padding: 0;
	 ? is this to show last table row when can't be shown on mobile ?
  */
	margin_: 20; /* must be zero for width! */
	margin: 0; /* must be zero for width! */
  padding: 0;
	

  border: 0px solid red; /*darkgray;*/
  /*background-color: lightgray;*/
	/*width: 80%;*/
  
  /* 20241029 */
  box-sizing:border-box;
}

/*
 div
 */
.tablesubscrolloff
{
  position: relative; /*relative|absolute*/
  overflow: hidden; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  /*z-index: 7;*/

  top: 0px;
  left: 0px;


  width:auto;
  height:auto; /*170-60*/

  margin_: 2; /** must be 0 for width! */
  /* 20241110: unset 2 for size control */
  padding_: 2;
  border: 0px solid; /*darkred;*/
  /*background-color: orangered;*/
}

/*
 div
 */
.tablesubscrollon
{
  position: relative; /*relative|absolute*/
  overflow: scroll; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  /*z-index: 7;*/

  top: 0px; /*50px above + 4x20px*/
  left: 0px;

  width:auto;
  height:inherit; /*170-60*/

  margin_: 2; /** must be 0 for width! */
  /* 20241110: unset 2 for size control */
  padding_: 2;
  border: 0px solid; /*darkgreen;*/
  /*background-color: lightgreen;*/
}

/*
 div
 */
.tableh
{
  position: relative; /*relative|absolute*/
  /*scroll; scroll:hidden:visible*/
  overflow-x: scroll;
  overflow-y: hidden; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  z-index: 8;

  top: 0px;
  left: 0px;

  width: auto;
  height: 50px;
  
  /*black;*/
  border_: 0px solid;
  border-bottom_: 2px solid;
  
  margin: 0px;
  padding: 0px;
  
  /* 20241029 */
  box-sizing:border-box;
  border_: 0px solid;
  border-right_: 3px solid;
  border-bottom: 3px solid black;
  background-color_: lightgray;
  color: brown;
}

/*
 div
 */
.tablehfix
{
  position: absolute; /*relative|absolute*/
  overflow: hidden; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  z-index: 9;

  top: 0px;
  left: 0px;

  width: 50px;
  height: 50px; /*100%:30px:150px*/
  
  /*black;*/
  
  margin: 0px;
  padding: 0px;
  
  /* 20241029 */
  box-sizing:border-box;
  border_: 0px solid;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  background-color_: lightgray;
  color: green;
  
}

/*
 div
 */
.tablev
{
  position: absolute; /*relative|absolute*/
  overflow-x: hidden; /*scroll:hidden:visible*/
  overflow-y: scroll; /*scroll:hidden:visible*/
  
  visibility:visible; /*hidden:visible;*/
  z-index: 7;

  top: 0px;
  left: 0px;

  /*no height!*/
  width: 50px; /*100%:150px*/
  height: auto; /*100%:150px*/
  
  margin: 0px;
  padding: 0px;
  
  
  /* 20241029 */
  box-sizing:border-box;
  border_: 0px solid;
  border-right: 3px solid black;
  border-bottom_: 3px solid black;
  background-color_: lightgray;
  color: red;
}

/*
 div
 */
.tablescroll
{
  position: relative; /*relative|absolute*/
  overflow: scroll; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  z-index: 6;

  top: 0px;
  left: 0px;
  
  /*color: red;*/
  
  border: 0px solid; /*lightpink;*/
	box-sizing_:border-box;
	box-sizing_:content-box;
	
	padding-right_: 50px;
  
  margin: 0px;
  padding: 0px;
  
  
  /* 20241029 */
  box-sizing:border-box;
  
  color: magenta;
}


/*
 div
 */
.tablemenu
{
  position: absolute; /*relative|absolute*/
  overflow: hidden; /*scroll:hidden:visible*/
  visibility:visible; /*hidden:visible;*/
  z-index: 100;

  top: 15px;
  left: 15px;
  /*right:15px;*/
  margin_: 2; /** must be 0 for width! */
  padding: 2;
  
  /*width:100%;*/
  /*height:100%;*/

  border: 1px solid darkgray;
  background-color: lightgray;
  color:red;
}

/*
 div
 */
.sidenav {
  
  height: 80%;
  width: 0;
  position: relative; /*fixed;*//*relative|absolute|fixed*/
  z-index: 100;
  top: 0;
  left: 0;
  /*background-color: lightgray;*/ /*#111;*/
  overflow-x: hidden;
  overflow-y: scroll; /*scroll:hidden:visible*/
  transition: 0.5s;
  /*padding-top: 60px;*/
  text-align:center;
  
  background-color: yellow;
  position: absolute; /*relative|absolute*/
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  /*font-size: 25px;*/
  color: black; /*#818181;*/
  display: block;
  transition: 0.3s;
  background-color: yellowgreen;
}

.sidenav a:hover{
  /*color: #f1f1f1;*/
  background-color: greenyellow;
}

.sidenav .closebtn {
  position: absolute;
  top: 15px;
  /*right: 25px;*/
  left: 15px;
  /*font-size: 36px;*/
  /*font-size: 20px;*/
  /*margin-left: 50px;*/
  
  /*padding: 8px 8px 8px 32px;*/
}

@media screen and (max-height: 450px) {
  /*.sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}*/
}

#info4 {
  overflow: visible; /* scroll:hidden:visible */
  white-space: nowrap; 
}

.tableslidercol {
  /*align:center;*/
}






/**
record table
 */
 
.rec_table {
  table-layout: fixed;/*good to have*/
  /*width: 500px;*/
  
  border-collapse: collapse; /*required*/
  /*empty-cells: show;*/
  width: 100px; /*this is needed else column cant be smaller*/
  
  /*opacity: 1; *//*.kn_pivot_*/
  /*required & not inherit|initial, opacity nok*/
  /*background-color: lightyellow;*/
  
  /**
   width: 300px;
   border: 15px solid green;
   padding: 50px;
   margin: 20px;
   */
}

/*tr
 */
/*.kn_pivot_tr:nth-child(even) {background-color: lightyellow;}*/

/*
 td
 */
.rec_table:hover(even) {background-color: lightblue;}

/*
 td
 */
.rec_td {
/*td {*/

  border: 1px solid; /* red;*/
  
  white-space: nowrap;
  
  /* 1 of 2 below */
  overflow: hidden; /*hidden:scroll;*/
  text-overflow: ellipsis;
  
  /*object-fit: none;*/
  
  /*min-width: 0;*/
  /*max-height: 0;*/

  /*
   height: 50px;
  width: 50px;
   min-width: 50px;
   width: 50px;
   */
  /*
   width: 100px;
  height: 50px;
  */
  
  /*width: 10px;*/
  
  /*max-height: 1px;*/
  /*overflow: scroll;*/
  /*background-color: darkred;*/
  
  
}

.rec_td_nowrap {
/*td {*/

  border: 1px solid; /* red;*/
  
  /*white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;*/
  white-space: normal;
  
  /*text-align: left|right|center|justify|initial|inherit;*/
  text-align: left;
  
  /* 1 of 2 below */
  /*overflow: hidden;*/ /*hidden:scroll;*/
  /*text-overflow: ellipsis;*/
  
  /*object-fit: none;*/
  
  /*min-width: 0;*/
  /*max-height: 0;*/

  /*
   height: 50px;
  width: 50px;
   min-width: 50px;
   width: 50px;
   */
  /*
   width: 100px;
  height: 50px;
  */
  
  /*width: 10px;*/
  
  /*max-height: 1px;*/
  /*overflow: scroll;*/
  /*background-color: darkred;*/
}

/*td
 */
.rec_td_select {
  /*border: 5px solid;*/ /* red;*/
  border: 1px solid red;
  /*color: red;*/
  background-color: lightblue;
}

/*tr
 */
.rec_tr {
/*tr {*/
  white-space: nowrap; /*needed for offsetHeigth?*/
  overflow: hidden;
}

.description_small
{
  /*overflow-x: hidden;*/
  overflow:scroll; /*scroll:hidden:visible*/
  /*border: 3px solid red; *//*black;*/
  /*color:green;*/
  width:100%;
  /*height:40px;*/
  
  /* 1 of 2 below */
  overflow-y: hidden; /*hidden:scroll;*/
  overflow-x: scroll; /*hidden:scroll;*/
  /*text-overflow: ellipsis;*/
  white-space: nowrap;
}

.description_big
{
  /*overflow-x: hidden;*/
  overflow:scroll; /*scroll:hidden:visible*/
  /*border: 3px solid red;*/ /*black;*/
  /*color:green;*/
  width:350px;
  height:110px;

}