ui.html

<style>
    .section {
        margin-bottom: 20px;
    }

    .sectionTitle img {
        width: 12px;
        height: 12px;
        margin-right: 5px;
        opacity: 0.6;
    }

    .presetOption a{
        padding: 10px 5px;
        cursor: default;
    }

    .presetOption:hover{
        background-color: #dfdfdf;
    }

    .presetDimensions{
        font-size: 10px;
        color: #8e8e8e;
    }

    .flexContainer{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content:space-between;
    }

    .placeholder {
        font-style: italic;
        color: #8e8e8e;    
    }

    #addCustomButton {
        padding-right: 10px;
        opacity: 0.6;
    }

    #nameInput label {
        flex: min-content;
        margin-right: 5px;
    }

    #nameInput input {
        flex: auto;
    }

    #dimensionInput {
        justify-content: start;
    }

    #dimensionInput input{
        width: 100px;
    }

    form {
        padding: 0px 5px;
    }
    form footer > button {
        position: relative;
        left: 8px;
    }

    .error {
        color: #D7373F;
    }

    .hideMe {
        display:none;
    }

    input:invalid {
      border: 2px dashed red;
    }

    input:valid {
      border: 2px solid black;
    }
</style>

<div>
    <div id="presetContainer">
        <!--Container for dynamically generated HTML list of presets from json file-->
    </div>
</div>