subline/views/dashboardPage/css/strands/home.css

#homeStrand{
    display: flex;
}

    .card{
        margin: 0 15px;
        flex-grow: 1;
        height: 100%;
        background: white;
    }

    .card > *{
        margin: 10px;
    }

    .card > p:first-of-type{
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

    .flexRow{
        display: flex;
        justify-content: space-around;
        width: 100%;
        flex-basis: 100px;
        flex-grow: 1;
        margin: 15px 0;
        max-height: 43%;
    }

.mostUsed{
    display: flex;
    flex-direction: column;
    justify-content: start;
}

    .scrollTable{
        max-height: 75%;
        overflow: auto;
    }

    .mostUsed table{
        border-spacing: 0 5px;
        width: 100%;
    }

    .mostUsed th {
        position: sticky;
        top: 0;
        background: white;
    }

    .mostUsed .choosable{
        display: table-row;
    }

    .mostUsed .choosable td{
        padding: 5px 0;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mostUsedBody, #mostUsedRecipeBody{
        max-height: 75%;
        overflow-y: auto;
    }

#mostUsedRecipesList{
    height: 75%;
    overflow-y: auto;
}

#mostUsedRecipesList .choosable{
    padding: 10px;
}

#inventoryCheckCard{
    display: flex;
    flex-direction: column;;
    justify-content: space-between;
    flex-basis: 100px;
    flex-grow: 1;
}

    #inventoryCheckCard ul{
        list-style: none;
    }

    #inventoryCheckCard button{
        margin-left: auto;
    }

    .ingredientCheck{
        display: flex;
        align-items: center;
        margin: 5px 0;
        max-height: 50px;
    }

        .inventoryCheckIngredient{
            width: 40%;
            font-weight: 300;
            font-size: 15px;
            margin-right: 25px;
            text-overflow: ellipsis;
            white-space: wrap;
            overflow: hidden;
            text-align: left;
        }

        .inventoryCheckUnit{
            width: 20%
        }

        .numberInput{
            display: flex;
            justify-content: center;
            width: 40%;
            margin-right: 25px;
        }

            .numberInput button{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30%;
                font-size: 23px;
                background: rgb(0, 27, 45);
                border: none;
                color: white;
                font-weight: bold;
                cursor: pointer;
            }

            .numberInput input{
                width: 55%;
                font-size: 15px;
                text-align: center;
                border: 1px solid black;
            }

            .numberInput input::-webkit-outer-spin-button,
            .numberInput input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            .numberInput input[type=number] {
                -moz-appearance: textfield;
            }

    #popularIngredientsCard{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-basis: 100px;
        flex-grow: 2.5;
        padding: 5px;
        box-sizing: border-box;

    }
        #popularCanvas{
            margin: 0 35px;
        }

        .notice{
            color: red;
            font-size: 35px;
            font-weight: bold;
        }