:root {
    --columnMargin: 40px;
    --menuMargin: 30px;
}

.platterEditorModalContent {
    padding: 20px;
}

.platterEditorModal .mealSelectionWrapper {
    padding-top: 20px;
}

.platterEditorModal .mealSelectionWrapper h2 {
    width: calc(49% - 20px *2);
    display: inline-block;
}

.platterEditorModal .MealOptionsWrapper {
    margin: 20px 40px 0px 40px;
}

.platterEditorModal .saveButtonWrapper {
    margin: 0px 22px 20px 40px;
    text-align: right;
}

.platterEditorModal .mealSelectionWrapper .twoColumnBlock {
    margin: 0px 0px 0px var(--columnMargin);
    width: calc(49% - var(--columnMargin) * 1.5);
    border: 1px solid black;
    border-radius: 5px;
    max-height: calc(100vh - 275px);
    min-height: 100px;
    overflow-y: auto;
}
.platterEditorModal .mealSelectionWrapper .twoColumnBlock:last-child {
    margin: 0px var(--columnMargin) 0px var(--columnMargin);
}
.platterEditorModal .menuSection {
    margin-left: var(--menuMargin);
    margin-right: var(--menuMargin);
}

.platterEditorModal .menuSection h3 {
    padding-top: 20px;
}

.platterEditorModal .mealItem, .platterEditorModal .platteredItem {
    border-bottom: 1px solid lightgray;
    padding: 5px;
}

.platterEditorModal .mealItem, .platterEditorModal .platteredItem {
    cursor: pointer;
}

.platterEditorModal .mealItem:hover, .platterEditorModal .platteredItem:hover {
    background: var(--lightBackgroundHover);
}

.platterEditorModal .mealItem .name {
    display: inline-block;
    width: calc(100% - 110px);
}

.platterEditorModal .platteredItem .name {
    display: inline-block;
    width: calc(100% - 135px);
    margin-left: 10px;
}

.platterEditorModal .mealItem .itemAttributes {
    display: inline-block;
    width: 50px;
}

.platterEditorModal .selected, .platterEditorModal .selected:hover {
    background: var(--brownSelected);
    color: var(--lightFont);
}

.platterEditorModal .mealItem .price, .platterEditorModal .platteredItem .price {
    display: inline-block;
    width: 40px;
    text-align: right;
}

.platterEditorModal .platterFull {
    color: var(--greenTextColor)
}

.platterEditorModal .platterOverFull {
    color: var(--redTextColor)
}

.removeProduct {
    display: inline-block;
    margin-left: 3px;
}