a-chart/dist/styles.css

A-Chart is a ReactJS Library/Package to address all posibilities of Reporting Functionality

.aChart .achart-gridHolder{margin: 0;  display: block}
.aChart table.achart-grid{ margin: 0; border-collapse: collapse; border-radius: .2rem; 
    table-layout: fixed;font-family:inherit; font-size: 85%;word-wrap:break-word;}

    

.aChart .achart-grid tr.onfocus:hover {
    background-color: #efeaea;
    
  }

  .aChart  .achart-grid td , .achart-gridHeader th ,
   .achart-gridFooter th{ border: 1px solid #ccc; padding: 0;margin: 0;position: relative;}

   .achart-gridFooter td {font-weight: bold}
   .aChart  .achart-grid td .c-holder, .achart-gridHeader th .c-holder,
   .achart-gridFooter td .c-holder{padding:0.3rem;padding-right: .88rem;}
   .aChart table.achart-grid input.achart-entry{width:100%}

  .aChart  .achart-gridHeader {
  background-color: #eee;
}
.aChart .achart-gridRow {
    background-color: #ffffff;
}
.aChart .achart-gridAltRow {
    background-color: #cccccc;
}


.aChart .achart-column-header-sort::after {
  position: absolute; content: '\21C5';right:.15rem;
  top: 22%;cursor: pointer}
  
 
 


  .aChart .GridToolBar{ 
     border: 1px solid #ccc;   
    border-top-left-radius:3px;    border-top-right-radius:3px; width: auto; border-bottom: none }

    
    .aChart .GridToolBar .aChart-SearchPanel,
    .aChart .GridToolBar .toolPanel{   display: inline-flex;
    margin: .15rem .05rem}
    .aChart .GridToolBar .aChart-SearchPanel{float: left;}
    .aChart  .aChart-Search{ position: relative; display: inline-flex; }
    .aChart .aChart-SearchPanel .achart-searchScope{ margin-left: .5rem; display: inline-flex;}
    
    .aChart .GridToolBar .toolPanel{ float: right; margin: .5rem .1rem 0 0}



   .aChart .GridToolBar .toXls{ cursor: pointer;
   background: url('../icons/xls.png') no-repeat;
   background-size: 1.1rem 1.1rem;
   display: inline-block; width: 1.1rem; height:1.1rem ; 
    }
 
   .aChart  .aChart-Search input{ 
      width: 100%;border-radius: 4px; border: 1px solid #ccc; padding: .4rem
    }
   .aChart  .aChart-Search .searchIcn ,.aChart  .aChart-Search .closeIcn
   { position: absolute;  right:.5rem; cursor: pointer; color: #ccc;
    top:.4rem;}

    .aChart .aChart-SearchPanel .achart-searchScope select{
      margin: 0px; 
      width: 100%;border-radius: 2px; border: 1px solid #ccc; padding: .3rem .4rem
    }

    

    .aChart  .aChart-Search .closeIcn{  right:1.8rem; font-weight: lighter; }
    
     
     .admin-homeIcon{ width: 50%;
       position: absolute;
      z-index: 9;
      background-color: #f1f1f1;
      border: 1px solid red;
      text-align: center; right: 0;}

 .admin-panel{ display: flex; width: 100%;  padding: .5rem;}
 .admin-left-panel,
 .admin-right-panel{
  width: 50%; 
 }

 .aChart .selectedRow{background-color: #acbad4}
     /* -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    transform: rotate(130deg); color: red} */

/*.achart-column-<columnName>{}   */