div.data{
    height: 50%;
    position: absolute;
    top: 3%;
    left: 1%;
    right: 1%;
    border: 5px solid black;
    overflow: auto;
    text-align: center;
}

table{
    border: 3px solid black;
    margin: auto
}

th{
    background-color: blue;
    color: White;
}

th.id, td.id{
    width: 50px;
    text-align: center;
}

input[type="text"]{
    width: 90%;
    text-align: center;
    border: none;
    background-color: transparent;
    color: black;
}

th.name, td.name {
    width: 300px;
}

th.dias, td.dias{
    width: 100px;
    text-align: center;
}

input[type="number"]{
    width: 90%;
    text-align: center;
}

th.sueldo, td.sueldo{
    width: 100px;
    text-align: center;
}

th.total, td.total{
    width: 100px;
    text-align: center;
}

th.iva, td.iva{
    width: 100px;
    text-align: center;
}

th.options, td.options{
    width: 200px;
    text-align: center;
}

th.calcular, td.calcular{
    width: 100px;
    text-align: center;
}

button.options{
    width: 40%;
    text-align: center;
}

button.calc{
    width: 90%;
    text-align: center;
}

div.new{
    position: absolute;
    top: calc(50% + 3% + 10px + 20px);
    left: 1%;
}

input.new{
    border: 1px solid gray;
}