ul {
    display: flex;
    flex-direction: column-reverse;
}

li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    list-style-type: none;

    background-color: whitesmoke;
    border-radius: 13px;
    padding: 20px 10px 20px 10px;

    height: 30px;
    font-size: 20px;

    margin-left: -20px;

    margin-right: 20px;
    margin-bottom: 10px;

    text-align: left;
    align-items: center;
    /*justify-content: left;*/

    min-width: 400px;
}

.check-section {
    /*flex-grow: 2;*/
    margin-left: 10px;
    margin-right: 10px;

    order: 1;
}

.text-section {
    font-family: 'Sunflower', sans-serif;

    margin-left: 5px;
    text-decoration-line: none;
    flex-grow: 2;

    overflow-x: hidden;
    overflow-y: hidden;

    order: 2;
}

.text-input-section {
    font-family: 'Sunflower', sans-serif;

    margin-left: 5px;
    flex-grow: 2;
    font-size: 20px;

    order: 2;
}

.button-section {

    min-width: 100px;
    margin-right: 5px;
    margin-left: 10px;

    justify-content: normal;

    order: 3;
}

.edit-complete-button {
    margin-right: 10px;
}
.edit-button {
    margin-right: 20px;

    border: none;

    background: transparent url('../assets/icons/edit.png') no-repeat;
    background-size: contain;

    height: 25px;
    width: 25px;

    cursor: pointer;

    vertical-align: middle;
}

.remove-button {
    border: none;

    background: transparent url('../assets/icons/remove.png') no-repeat;
    background-size: contain;

    height: 25px;
    width: 25px;

    cursor: pointer;

    vertical-align: middle;
}

.edit-complete-button {
    margin-right: 20px;

    border: none;

    background: transparent url('../assets/icons/complete.png') no-repeat;
    background-size: contain;

    height: 25px;
    width: 25px;

    cursor: pointer;

    vertical-align: middle;
}