body
{
    font-family: Lato, Helvetica, Arial, sans-serif;

    color: #fff;
    background-color: #fff;
}

table
{
    font-family: Calibri, 'Segoe UI', Thonburi, Arial, Verdana, sans-serif;
    font-size: 14px;

    border-spacing: 0;

    color: #000;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #cacaca;
    table-layout:fixed;
}

table:focus {
    outline: none;
}

td,
th
{
    position: relative;

    display: inline-block;

    box-sizing: border-box;
    width: 80px;
    height: 25px;
    margin: 0;
    padding: 0;

    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #cacaca;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th
{
    background-color: #f0f0f0;
}

td div,
th div
{
    height: 100%;
}

td span, th span
{
    line-height: 15px;

    display: inline-block;

    width: calc(100% - 8px);
    height: calc(100% - 8px);
    padding: 4px;
}

td input
{
    font-family: Calibri, 'Segoe UI', Thonburi, Arial, Verdana, sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 100;

    display: inline-block;

    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 0;
    padding: 4px;

    color: #000;
    border: none;
    background-color: #fff;
}

td.selected
{
    border: 2px solid #1e6337;
}

td.selected span
{
    padding: 3px 3px 3px 2px;
}

input:focus,
select:focus,
textarea:focus,
button:focus
{
    outline: none;
}