* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: lightgray;
}

#erd-app-container
{
    margin: 5px;
}

#erd-header {
    height: 20px;
}

#erd-toolbar {
    height: 30px;
}

#erd-main
{
    height: calc(100vh - 60px);
    
    display: flex;
    flex-wrap: nowrap;
}

#erd-canvas-container
{
    flex-grow: 10;
    background-color: gray;
    border: 1px solid black;
    overflow: auto;
}

#propertybox-container
{
    flex-basis: auto;
    width: 30em;
    padding: 0 0.5em;
}

#propertybox-container h1
{
    font-size: 1.4em;
}

#propertybox-container h2
{
    font-size: 1.2em;
}

#propertybox-container .button-container
{
    margin-top: 1em;
}

#erd-canvas
{
    background-color: white;
}

.role_table {
    width: 100%;
    table-layout: fixed; /* Ensures fixed column widths */
    border-collapse: collapse;
}

.role_table th:nth-child(1), .role_table td:nth-child(1) {
    width: 10em;
}

.role_table th:nth-child(2), .role_table td:nth-child(2) {
    width: 5em;
}

.role_table th:nth-child(3), .role_table td:nth-child(3) {
    width: 2em;
    text-align: center;
}
.role_table th:nth-child(4), .role_table td:nth-child(4) {
    width: 2em;
    text-align: center;
}

.basic_property_table {
    width: 100%;
    table-layout: fixed; /* Ensures fixed column widths */
    border-collapse: collapse;
}

.basic_property_table th:nth-child(1), .role_table td:nth-child(1) {
    width: 20%;
    text-align: left;
}

.basic_property_table th:nth-child(2), .role_table td:nth-child(2) {
    width: 80%;
}

.basic_property_table input {
    width: 100%;
}