#bottomAnalTabs{ display:flex; justify-content: center; margin-top: 5px; width: 100%; } #bottomAnalTabs .analTabButton{ width: 100px; } .analTabButton{ background: rgb(0, 27, 45); border: none; color: white; cursor: pointer; padding: 5px; width: 125px; } .analTabButton.active{ background: rgb(179, 191, 209); color: black; } #analIngredientsTab, #analIndividualTab{ border-right: 2px solid rgb(255, 99, 107); } .analContent{ display: flex; justify-content: space-around; align-items:center; padding: 15px; box-sizing: border-box; height: 90%; } .itemsList{ display: flex; flex-direction: column; list-style-type: none; width: 15%; max-height: 95%; overflow-y: auto; margin-bottom: auto; } .itemsList > *{ width: 100%; box-sizing: border-box; margin: 2px 0; } .analData{ display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 100%; } #itemUseGraph{ padding: 10px; height: 60%; flex-basis: 100px; flex-grow: 5; } .dataRow{ display: flex; justify-content: space-between; flex-basis: 150px; flex-grow: 0; } .dataRow .analCard{ display: flex; flex-direction: column; justify-content: space-around; margin: 5px; height: inherit; } .dataRow .analCard > *{ margin: 0; } .analCard h1{ text-align: center; } #analCategoriesGraph, #analCatRecipeGraph{ margin-left: 25px; flex-grow: 2; height: 90%; width: 90%; } #analIndividualRecipe{ display: flex; justify-content: space-around; align-items: center; padding: 15px; box-sizing: border-box; height: 90%; }