@font-face {
    font-family: 'FontAwesome';
    src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
  }

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    background-color: #d9e2f7;
    font-family: sans-serif;
    outline: none;
}

.container{
    height:100vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin: 3rem;

}

header{
    margin: 2rem;
    font-size: 1.5rem;
}

table{
    width: 100%;
    border: 1px solid #000000;
}
table,th,td{
    text-align: left;
    margin:2px;
    padding: 2px;
    border: 1px solid #000000;
}

th{
    background-color: #2879f2;
}
tr:nth-child(even){
    background-color: #a587ff;
}
th,td{
    padding: 3px;
}

button{
    cursor: pointer;
}

.tableManager th.sorterHeader1{
    cursor: pointer;
}

.tableManager th.sorterHeader1::after{
    content: "\f176";
    font-family: "Font Awesome 5 Free"; 
    
}

.tableManager th.sorterHeader2{
    cursor: pointer;
}

.tableManager th.sorterHeader2::after{
 
    content: "\f175";
    font-family: "Font Awesome 5 Free";  
    
}

.tableManager th.sortingDesc::after{
    content: "\f176";
    font-family: "Font Awesome 5 Free";
}
.tableManager th.sortingAsc::after{
    content: "\f175";
    font-family: "Font Awesome 5 Free";
}

#for_numrows{
    padding: 10px;
    float: left;
}

#for_filter_by{
    padding: 10px;
    float: right;
}

#pageControllers{
    display: block;
    text-align: center;

}
.pagecontroller{
    font-size: larger;
    margin-inline: 3px;
    padding: 2px;
}