body, html {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mdc-top-app-bar__title {
    font-size: 1.0rem;
}

.mdc-top-app-bar {
    background-color: #112D4E;
    flex-shrink: 0;  /* Prevents header from shrinking */
}

.content {
    display: flex;
    justify-content: space-between;
    flex: 1;  /* This will make the content expand to fill the space between header and footer */
    overflow: hidden;  /* To ensure the content doesn't overflow the available space */
    height: calc(100vh - 64px); /* Adjusting for the header's height */    
    padding-top: 64px;  /* This is assuming the header is 64px in height. Adjust if needed. */

}

.content .column {
    width: 48%;
    margin: 20px;
    display: flex;  
    flex-direction: column;
}

#json-input:last-child, 
#json-input-bottom:last-child {
    margin-bottom: 0;        /* Optional: Ensure that there's no margin-bottom for the last textarea */
}

#json-input, #json-tree-view {
    height: 100%;
    overflow: auto;
}

#json-input, #json-input-bottom {
    font-size: 0.8rem;

    flex: 1;                 /* Ensure that both text areas grow and shrink equally */
    margin-bottom: 10px;     /* Optional: Add some margin between the two textareas */
    resize: none;

    border: 1px solid #666; /* Material Design primary color */
    padding: 8px;
    border-radius: 4px; /* Optionally add rounded corners */
    width: 100%;
    box-sizing: border-box; /* To ensure padding and border are included in the width */
    transition: border-color 0.3s; /* Smooth transition for border color changes */

    max-height: calc(100vh - 128px); /* This takes into account header and footer heights */
    overflow-y: auto; /* Allow the textarea itself to scroll if the content is too long */
}

#json-input-bottom {
    background-color: #f6f6f6;
}

#json-input:focus {
    border: 2px solid #666;
    outline: none; /* Remove the default browser outline */
}

#resizer {
    flex: 0;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 100%;
}

#json-tree-view {
    border: 1px solid #666; /* Material Design primary color */
    border-radius: 4px; /* Optionally add rounded corners */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#json-display-header {
    padding: 10px;
    background-color: #3F72AF;
    color: #fff;
}

#json-display {
    font-size: 0.8rem;
    
    padding: 8px 20px; /* Providing some space between the border and the content inside */
    overflow-y: auto; /* To ensure content that overflows has a scrollbar */
    box-sizing: border-box; /* To include padding and border in the total width and height */
    width: 100%;
    height: calc(100% - 50px);
}

footer {
    flex-shrink: 0;  /* Prevents footer from shrinking */
    height: 32px;  /* Set based on your desired footer height */
    position: relative;
    bottom: 0;
    margin: 0 20px 0 20px;
    font-size: 0.8rem;
    display: flex; /* Convert the footer into a flex container to layout the columns */
    justify-content: space-between; /* Optional: To ensure there's space between the columns if they aren't full width */
}

footer .footer-right {
    color: #999;
}

footer .footer-left a {
    color: #999;
    text-decoration: none;
}