*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
body{
    font-family: "Microsoft JhengHei UI", Helvetica;
    -webkit-font-smoothing: antialiased;
}

/* Table Styles */

.table-wrapper{
    margin:0px;
}

.fl-table {
    table-layout: fixed;
    width: 100%;
    border-radius: 5px;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: white;
    border: 1px solid #2980B9;
    overflow: scroll;
}

.fl-table th {
    text-align: center;
    padding:10px 2px;
     position:sticky;
     top:100px;
     left:0px;
     z-index:2;

 }

.fl-table td {
    border-right: 1px solid #2980B9;
    font-size:1.25rem;
    font-weight:600;
    color:#000;
    font-family:"Microsoft JhengHei UI";
    z-index:1; 
}

.fl-table thead th {
   background:linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);    
   height:60px;  
    background-repeat:no-repeat;  
    color:white; 
    text-shadow: #012b4d 2px 2px 2px;  
    text-align: center;
    font-size:1.25rem;
    border-right: 1px solid #2980B9;
    font-family:"Microsoft JhengHei UI"; 
    opacity:1;
    z-index:2; 
}


.fl-table thead th:nth-child(odd) {
    color: #ffffff;
    background:linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);    
    }

.fl-table tr:nth-child(even) {
   background-image:linear-gradient(to bottom, #deefff 0%,#98bede 100%);
   }

.button {
  line-height: 1;
  display: inline-block;
  font-size:1rem;
  text-decoration: none;
  border-radius: 5px;
  color: #fff;
  padding:2px;
   background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);    
}

.button:hover {
  background-image: linear-gradient( 135deg, #FFE985 10%, #FA742B 100%);
  color: white;
}

.select {
  padding-bottom: 20px;
}
.select:before {
  display: none;
}

/* Responsive */

@media (max-width:767px) {
    .fl-table {
    table-layout:auto;
    width: 100%;
    display: block;
    overflow-wrap: break-word;
} 
    .fl-table td, .fl-table th {
    text-align:justify;
    vertical-align:top;
    position: relative;
    white-space: normal;
    }
    
.fl-table tr:nth-child(even) {
   background:#fff;
   }

}

/* Table2 Styles */

.table2-wrapper{
    margin:0px;
}

.fl-table2 {
    border-radius: 5px;
    border: none;
    border-collapse:collapse;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    background-color: white;
    border: 1px solid #2980B9;
}

.fl-table2 td, .fl-table2 th {
    text-align:justify;
    vertical-align:top;
    padding:3px;
    }

.fl-table2 td {
    border: 1px solid #2980B9;
    font-size:1.2rem;
    font-weight:500;
    color:#000;
    font-family:"Microsoft JhengHei UI";
}

.fl-table2 thead th {
   background:linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);    
   height:40px;  
    background-repeat:no-repeat;  
    color:white; 
    text-shadow: #012b4d 2px 2px 2px;  
    text-align: center;
    font-size:1.25rem;
    border-right: 1px solid #2980B9;
    font-family:"Microsoft JhengHei UI";
    word-break: keep-all;
}


.fl-table2 thead th:nth-child(odd) {
    color: #ffffff;
    background:linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);    

    }

.fl-table2 tr:nth-child(even) {
     background:#E8EEFF;
 }

.button {
  line-height: 1;
  display: inline-block;
  font-size:1rem;
  text-decoration: none;
  border-radius: 5px;
  color: #fff;
  padding:2px;
   background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);    
}

.button:hover {
  background-image: linear-gradient( 135deg, #FFE985 10%, #FA742B 100%);
  color: white;
}

.select {
  padding-bottom: 20px;
}
.select:before {
  display: none;
}

/* Responsive */

@media (max-width: 767px) {
    .fl-table2 {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}    
    }