html, body {
    width: 100%;
    height: 100%;
}
  
body {
    margin: 0;
    display: grid;
    background-color: #cccccc;
    text-align: center;

    /* This centers our sketch horizontally. */
    justify-content: center;

    /* This centers our sketch vertically. */
    align-items: center;
}

/* Flex styling for these elements*/
.container {
    display: flex;
}

#app {
    margin: auto;
    padding-right: 20px;
}

/* Initial Values Table */
#initial-values-table {
    margin: auto;
    border-collapse: collapse;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

#initial-values-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: center;
}

#initial-values-table td,
#initial-values-table th {
    padding: 12px 15px;
}

#initial-values-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

#initial-values-table tfoot {
    border-bottom: thin solid #009879;
    background-color: #009879;
}

#initial-values-table .input-cell {
    display: flex;
    justify-content: center;
}

#initial-values-table input {
    width: 30px;
    margin-left: 1px;
    margin-right: 1px;
}

#initial-values-table .table-title {
    text-align: center;
}

/* Disable the arrows on number input*/ 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}