subline/views/dashboardPage/css/sidebars/newRecipe.css

#addRecipe{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

    #addRecipe .choosable{
        display: flex;
        justify-content: left;
        background: rgb(240, 252, 255);
        color: black;
        margin: 2px 0;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #newRecipeContent{
        display: flex;
        flex-grow: 10;
        width: 100%;
        max-height: 85%;
        padding: 10px;
    }

        #newRecipeLeft{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 40%;
            height: 100%;
            border-right: 1px solid rgb(255, 99, 107);
            padding-right: 10px;
        }

            #newRecipeLeft input{
                width: 100%;
                margin-bottom: 15px;
                box-sizing: border-box;
            }

            #recipeChoices{
                width: 100%;
                overflow-y: auto;
                flex-grow: 2;
            }

        #newRecipeData{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            width: 60%;
            padding: 10px;
            box-sizing: border-box;
        }

            #newRecipeDataInputs{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            #newRecipeDataInputs > *{
                margin: 5px 0;
            }

            #newRecipeChosenList{
                height: 75%;
                box-sizing: border-box;
                overflow-y: auto;
            }

                .newRecipeChosenIngredient{
                    width: 95%;
                    margin: 15px auto;
                }

                    .newRecipeChosenIngredient div{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .newRecipeChosenIngredient button{
                        padding: 0;
                        margin: 0 5px;
                        max-height: none;
                        min-width: none;
                    }

                    .newRecipeChosenIngredient input{
                        width: 100%;
                    }