.hr-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.table-p{
    flex: 0 0 calc(60% - 20px);
  padding: 20px;
  margin: 10px;
}
.table-payroll{
    outline:1px solid #900;
    outline-offset: 3px;
    border:3px solid #fff;
    max-width: 800px;
    margin: 0 auto;
    font-size:14px;
    border-collapse: collapse;
    table-layout: fixed;
	width:-webkit-fill-available;
	width:100%;
}
.table-payroll thead tr{
    cursor: pointer;
}
.table-payroll th{
    color:#900;
    background-color: #bbb;
}
.table-payroll td, .table-payroll thead th{
    display: table-cell;
    padding: .5em .7em;
    height: 60px;
    text-align: center;
    border-right: 1px solid #bbb;
}
.table-payroll td:nth-last-of-type(1), .table-payroll thead th:nth-last-of-type(1){
    border-right: none;
}
.table-payroll tr:nth-child(odd){
    background-color: #f0f0f0;;
}
.table-payroll tr:nth-child(even){
    background-color: #e3e3e3;
}

@media all and (max-width:480px){
	.hr-wrapper{
		flex-direction:row;
  justify-content: space-between;
	}
	.hr-wrapper section{
    flex: 0 0 100%;
}
	.table-payroll {
	width: 100%;
}
}
@media screen and (max-width: 600px) {
  .table-payroll {
    border: 0;
  }

  .table-payroll caption {
    font-size: 1.3em;
  }
  
  .table-payroll thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .table-payroll tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  .table-payroll td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  .table-payroll td::before {
    /*
    * aria-label has no advantage, it won't be read inside a .table-payroll
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .table-payroll td:last-child {
    border-bottom: 0;
  }
	
}