@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
html {
  box-sizing: border-box;
	
}
body { font-family: 'Roboto', sans-serif; font-size: 14px;
    font-weight: 400;} 
a { color: #4f5b76; text-decoration: none;}
*,
*:before,
*:after {
  box-sizing: inherit;
}
h1 { color: #0a2540; font-size: 20px; }
.intro {
 max-width: 1280px;
    margin: 0px 20px 0px 0px;
    float: left;
}
.table-scroll {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 600px;
	   -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
    border: 1px solid #e7ecf1;
}
.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 10px 10px;
     border-right: 1px solid #e7ecf1;
    border-bottom: 1px solid #e7ecf1;
    font-size: 14px;
    font-weight: 400;
  vertical-align: top; color: #4f5b76; text-align: center;
}
.table-scroll thead th {
  border-bottom: 1px solid #e7ecf1;
	font-size: 14px;
    font-weight: 500;
    background: #f6f9fc;
      position: -webkit-sticky;
  position: sticky;
  top: 0px;
	color: #4f5b76;
	height: 40px;
    vertical-align: middle;
}

.table-scroll .lasthead  th {
 border-top: 1px solid #e7ecf1;
	
    background: #f6f9fc;
    
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
	    height: 40px;
    vertical-align: middle;
}

.table-scroll .fststicky  th {
 border-top: 1px solid #e7ecf1;
	
    background: #f6f9fc;
    
  position: -webkit-sticky;
  position: sticky;
  
    vertical-align: middle;
}



/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
     border-right: 1px solid #e7ecf1;
    border-bottom: 1px solid #e7ecf1;
	border-top: 1px solid #e7ecf1;
    background: #f6f9fc; text-align: center;
  z-index:4;
	padding: 10px 10px; font-weight: 500;
}

a:focus {
  background: red;
} /* testing links*/

th:first-child, th:nth-of-type(2){
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
}

th:last-child, th:last-child:first-child{
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 2;
  background: #FFFFFF;
}

th:nth-last-child(2){
  position: -webkit-sticky;
  position: sticky;
  right: 110px;
  
  z-index: 2; 
        box-shadow: -8px 0px 14px 0px rgb(0 0 0 / 10%);
-webkit-box-shadow: -8px 0px 14px 0px rgb(0 0 0 / 10%);
   -moz-box-shadow: -8px 0px 14px 0px rgb(0 0 0 / 10%);
  background: #FFFFFF;
}

thead th:last-child,
tfoot th:last-child,
thead th:nth-last-child(2),
tfoot th:nth-last-child(2){
  z-index: 5;
}

th:nth-of-type(2) { left: 110px;
	box-shadow: 5px 0px 14px -3px rgb(0 0 0 / 24%);
-webkit-box-shadow: 5px 0px 14px -3px rgb(0 0 0 / 24%);
-moz-box-shadow: 5px 0px 14px -3px rgb(0 0 0 / 24%); }
th:last-child:nth-of-type(2) { right: 120px;  }
th:last-child:first-child { right: 0px; }

thead th:first-child,
tfoot th:first-child,
thead th:nth-of-type(2),
tfoot th:nth-of-type(2){
  z-index: 5;
}


.mainwraptablehead { margin-bottom: 2px;
    display: inline-block;
    width: 100%; }
.mainwraptablehead input { text-overflow: ellipsis;
    white-space: nowrap; border: none; box-shadow: 1px 0px 9px -1px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 0px 4px -1px rgba(0,0,0,0.75);     border-radius: 4px;
    padding: 8px 8px;
    width: 82px;
    font-size: 11px;
    margin: 0px 10px 0px 10px;}

.textlabel { position: relative; top: 7px; font-size: 12px; color: #4f5b76;     text-overflow: ellipsis;
    white-space: nowrap; }

input::-webkit-input-placeholder {
    
   color:dodgerblue;
}
.mainwraptablehead .download  { float: right; text-overflow: ellipsis;
    white-space: nowrap; border: none; box-shadow: 1px 0px 9px -1px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 0px 4px -1px rgba(0,0,0,0.75);     border-radius: 4px;
    padding: 8px 8px;
    width: 82px;
    font-size: 11px;
    margin: 0px 10px 0px 10px; text-align: center}
.mainwraptablehead .download label { overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  font-size: 12px;  color:dodgerblue; cursor: pointer;}

.mainwraptablehead ul { margin: 0px; padding: 0px; }
.mainwraptablehead ul li { text-decoration: none; float: left; list-style: none;}

.fixhead { border-top: 1px solid #e7ecf1;
	border-left: 1px solid #e7ecf1;
	border-right: 1px solid #e7ecf1;
    font-size: 14px;
    font-weight: 500;
    background: #f6f9fc; -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
.fixhead .leftfixtop { width: 25%; float: left; text-align: center;     color: #4f5b76; padding: 10px;}
.fixhead .middlefixtop { width: 50%; float: left; text-align: center;     color: #4f5b76; padding: 10px;}
.fixhead .lastfixtop { width: 25%; float: left; text-align: center;     color: #4f5b76; padding: 10px;}