:root {
  --table-dark-color:#1A4D70;               /*var(--table-dark-color);*/
  --table-light-color:#AED6F1;              /*var(--table-light-color);*/
  --table-row-alternate-odd-color:#F9F9F9;  /*var(--table-light-color);*/
  --table-row-alternate-even-color:white;   /*var(--table-light-color);*/
  --table-row-hover-color:#E2E5E7;          /*var(--table-light-color);*/
  --table-column-selected-color:#AED6F1;    /*var(--table-light-color);*/
  --column-font-header-color:black;         /*var(--table-light-color);*/
  --column-font-content-color:black;        /*var(--table-light-color);*/
  --column-hover-font-color:black;          /*var(--table-light-color);*/
  --column-title-color:#c01f24; 
  --sticky-title-color:#e5e5e5; 
}

/*Table*/
.tableStyle{
    display:inline-table;
	table-layout:fixed;
	width:100%;
	overflow:auto !important;
	margin-bottom:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	
	border-color:var(--table-dark-color);
	border-style:solid;
	border-width:3px;
	border-spacing:0px;
	border-collapse:separate;
	
	background-color:var(--table-dark-color);
}


/*Font and Colour*/
.tableStyle th,
.tableStyle td:first-child
{
    font-size:12px;
    color:var(--column-font-header-color);
} 
.tableStyle td{
    font-size:12px;
    color:var(--column-font-content-color);
    vertical-align:top;
}

.technicalData td {
    text-align:center;
}
.technicalData > thead > tr > th:first-child{
    width:auto !important;
}




/*Header*/
.tableStyle > thead > tr > th{
	background-color:var(--table-light-color);
	padding:3px;
	text-align:center;
	
	border-bottom-color:var(--table-dark-color);
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:var(--table-dark-color);
	border-right-style:solid;
	border-right-width:1px;
	
	/*Sticky setting*/
    position:sticky;
    position:-webkit-sticky;
    top:50px;
    z-index:9 !important;
}
.tableStyle > thead > tr > th:first-child{
    width:300px;
    
    /*Sticky setting*/
    position:sticky;
    position:-webkit-sticky;
    top:50px;
    left:0px;
    z-index:10 !important;
}
.tableStyle > thead > tr > th:last-child{
	border-right-color:transparent !important;
	border-right-width:0px !important;
}

/*Body*/
/*.tableStyle > tbody > tr:nth-child(even) > td{
	background-color:var(--table-row-alternate-even-color);
	padding:3px;
	
	border-bottom-color:var(--table-dark-color);
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:var(--table-dark-color);
	border-right-style:solid;
	border-right-width:1px;
}
.tableStyle > tbody > tr:nth-child(odd) > td{
	background-color:var(--table-row-alternate-odd-color);
	padding:3px;
	
	border-bottom-color:var(--table-dark-color);
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:var(--table-dark-color);
	border-right-style:solid;
	border-right-width:1px;
}*/
.tableStyle > tbody > tr > td{
	background-color:var(--table-row-alternate-even-color);
    padding:3px;
	
	border-bottom-color:var(--table-dark-color);
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:var(--table-dark-color);
	border-right-style:solid;
	border-right-width:1px;
}




.tableStyle > tbody > tr:last-child > td{
	border-bottom-color:transparent !important;
	border-bottom-width:0px !important;
}
.tableStyle > tbody > tr > td:first-child{
	background-color:var(--table-light-color) !important;
	
	/*Sticky setting*/
	position:sticky;
    position:-webkit-sticky;
    left:0px;
    z-index:8;
}
.tableStyle > tbody > tr > td:last-child{
	border-right-color:transparent !important;
	border-right-width:0px !important;
}
.tableStyle .noBottomBorder td, 
.tableStyle .noBottomBorder th
{
	border-bottom-color:transparent !important;
}

/*no background*/
.tableStyle .noBackground {
    background-color:var(--table-light-color) !important;
}

/*special selection*/
.tableStyle .selectedColumn{
    background-color:var(--table-column-selected-color) !important;
}

/*hover*/
.tableStyle > tbody > tr:hover > td{
    background-color:var(--table-row-hover-color) !important;
	color:var(--column-hover-font-color) !important;
}

/*title*/
.tableStyle > tbody > tr.StickyTitle > td{
    background-color:var(--sticky-title-color) !important;
    color:var(--column-title-color) !important;
    
    /*Sticky setting*/
    position:sticky;
    position:-webkit-sticky;
    /*top:70px; this property will specified via jquery*/
    z-index:9 !important;
    
    font-size:15px !important;
}
.tableStyle > tbody > tr.StickyTitle > td:first-child{
    z-index:10 !important;
}





/*Sticky in DIV*/
.divSticky, 
.divStickySelfbonding,
.divStickyLitzwire
{
    border:3px solid var(--table-dark-color);
    
    width:100%;
    overflow-x:auto;
    
    max-height:70vh;
    overflow-y:auto;
}
.divSticky table.tableStyle, 
.divStickySelfbonding table.tableStyle,
.divStickyLitzwire table.tableStyle
{
    border-color:transparent !important;
    border-width:0px !important;
}



.divSticky table.tableStyle{
    table-layout:auto;
}
.divSticky > table.tableStyle > thead > tr > th{
    position:sticky;
    position:-webkit-sticky;
    top:0px;
    z-index:9 !important;
}
.divSticky > table.tableStyle > thead > tr > th:first-child{
    /*width:300px !important;*/
    position:sticky;
    position:-webkit-sticky;
    top:0px;
    left:0px;
    z-index:10 !important;
}



/*Selfbonding:*/
.divStickySelfbonding > table.tableStyle > thead > tr > th{
    width:200px;
    position:sticky;
    position:-webkit-sticky;
    top:0px;
    z-index:9 !important;
}
.divStickySelfbonding > table.tableStyle > thead > tr > th:first-child{
    width:300px !important;
    position:sticky;
    position:-webkit-sticky;
    top:0px;
    left:0px;
    z-index:10 !important;
}



/*Litzwire:*/
.tableHeader thead > tr > th:first-child{
    width:200px !important;
}
.divStickyLitzwire{
    border-top-width:0px;/*special request to combine with top table*/
}
.divStickyLitzwire > table.tableBody > tbody > tr:first-child > td{
    position:sticky;
    position:-webkit-sticky;
    top:0px;
    z-index:16;
}
.divStickyLitzwire > table.tableBody > tbody > tr:first-child > td:first-child{
    z-index:17;
}
.divStickyLitzwire > table.tableBody > tbody > tr > td{
    white-space:nowrap;
    overflow:hidden;
}
.divStickyLitzwire > table.tableBody > tbody > tr > td:first-child{
    width:200px !important;
    white-space:nowrap;
    overflow:hidden;
    z-index:15;
}



/*
Requested on meeting 02-07-2020
To indent 'Elektrisola Typical Value' in all related table
*/
.indentType1{
    position:absolute;
    left:100px;
    top:3px;/*this value follow TD specification specify in table style*/
}
.indentType2{
    position:absolute;
    top:3px;/*for 2 lines row. this to position on the top*/
}
.indentType3{
    position:absolute;
    left:200px;
    top:3px;/*for 2 lines row. this to position on the top*/
}
/*FIW techincal data*/
.indentType4{
    position:absolute;
    left:50px;
    top:3px;/*this value follow TD specification specify in table style*/
}
.indentParentDegree{
    position:relative;
    left:0;
    vertical-align:center;
}
.indentDegree{
    position:relative;
    left:15px;
}
.indentDegree2{
    position:relative;
    left:6px;
}