.mid-root {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

    .mid-root .mid-close-button-container {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 2rem;
        height: 2rem;
        z-index: 1;
    }

    .mid-root .mid-close-button {
        position: fixed;
        display: block;
        width: 2rem;
        height: 2rem;
        font-size: 2rem;
        line-height: 2rem;
        text-align: center;
        background-color: white;
        color: #737373;
        border: 1px solid #737373;
        border-radius: 100%;
        text-decoration: none;
        cursor: pointer;
    }

        .mid-root .mid-close-button:hover {
            background-color: #EEEEEE;
        }

    .mid-root .mid-image-container-outer {
        width: auto;
        flex-shrink: 0;
        padding: 1rem;
        box-sizing: border-box;
    }

    .mid-root .mid-image-container-inner {
        width: 250px;
        height: 250px;
        overflow: hidden;
        position: relative;
    }

    .mid-root .mid-image {
        width: 100%;
        top: 50%;
        position: absolute;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .mid-root .mid-data-container {
        width: 500px;
    }

    .mid-root .mid-header {
        padding: 1rem 1rem 0 1rem;
    }

    .mid-root .mid-itemname {
        font-size: 1.25rem;
        font-weight: 500;
        color: #4a4a4a;
        padding-right: 2.5rem;
    }

    .mid-root .mid-spicy {
        display: inline-block;
        font-size: 1.25rem;
        color: #bf2e08;
        vertical-align: top;
    }

    .mid-root .mid-popular {
        display: inline-block;
        font-size: 1.25rem;
        color: #3a8700;
        vertical-align: top;
    }

    .mid-root .mid-itemnondiscountable {
        font-size: 0.8rem;
        color: #ae3b1d;
        margin-top: 0.5rem;
    }

    .mid-root .mid-itemdesc {
        font-size: 0.9rem;
        color: #767676;
        margin-top: 0.5rem;
    }

    .mid-root .mid-itemavailability {
        font-size: 0.9rem;
        font-weight: 500;
        color: #ae3b1d;
        margin-top: 0.5rem;
    }

    .mid-root .mid-sizelist-container {
        display: flex;
        flex-wrap: wrap;
        padding: 1rem;
    }

    .mid-root .mid-sizeradiobutton-wrapper {
        width: 50%;
        padding-right: 1rem;
        box-sizing: border-box
    }

    .mid-root .mid-modifiertype-container {
        padding: 1rem;
    }

        .mid-root .mid-modifiertype-container[data-invalid-selection='true'] {
            background: #FFF5F5;
        }

    .mid-root .mid-modifiertype-title {
        font-size: 1.1rem;
        font-weight: 500;
        color: #357A00;
        border-bottom: 1px solid #d0d0d0;
        margin-bottom: 0.25rem;
    }

    .mid-root .mid-modifiertype-desc {
        font-size: 1rem;
        color: #4a4a4a;
        margin-bottom: 0.5rem;
    }

    .mid-root .mid-modifiertype-container[data-invalid-selection='true'] .mid-modifiertype-desc {
        font-weight: 500;
        color: #ae3b1d;
    }

    .mid-root .mid-modifiercheckboxlist-container {
        display: flex;
        flex-wrap: wrap;
    }

    .mid-root .mid-modifiercheckbox-wrapper {
        width: 50%;
        padding-right: 1rem;
        box-sizing: border-box
    }

    .mid-root .mid-modifierradiobuttonlist-container {
        display: flex;
        flex-wrap: wrap;
    }

    .mid-root .mid-modifierradiobutton-wrapper {
        width: 50%;
        padding-right: 1rem;
        box-sizing: border-box
    }

    .mid-root .mid-specialinstructions-container {
        padding: 1rem;
    }

    .mid-root .mid-specialinstructions-header {
        font-size: 1.1rem;
        font-weight: 500;
        color: #357A00;
        margin-bottom: 0.25rem;
    }

    .mid-root .mid-specialinstructions-textbox {
        resize: none;
    }

    .mid-root .mid-quantity-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0 1rem 1rem 1rem;
        box-sizing: border-box;
    }

    .mid-root .mid-quantity-header {
        font-size: 1.1rem;
        font-weight: 500;
        color: #357A00;
        margin-right: 2rem;
    }

    .mid-root .mid-quantity-input-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .mid-root .mid-quantity-input-decrease {
        display: block;
        height: 2.5rem;
        font-size: 1rem;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem 0 0 0.25rem;
        background-color: #ae3b1d;
        text-decoration: none;
        outline: none;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .mid-root .mid-quantity-input-decrease:hover {
            background-color: #9D351B;
        }

        .mid-root .mid-quantity-input-decrease[data-disabled='true'] {
            background-color: #737373;
        }

            .mid-root .mid-quantity-input-decrease[data-disabled='true']:hover {
                background-color: #666666;
            }

    .mid-root .mid-quantity-input-increase {
        display: block;
        height: 2.5rem;
        font-size: 1rem;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0 0.25rem 0.25rem 0;
        background-color: #3a8700;
        text-decoration: none;
        outline: none;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .mid-root .mid-quantity-input-increase:hover {
            background-color: #317000;
        }

        .mid-root .mid-quantity-input-increase[data-disabled='true'] {
            background-color: #737373;
        }

            .mid-root .mid-quantity-input-increase[data-disabled='true']:hover {
                background-color: #666666;
            }

    .mid-root .mid-quantity-input-textbox {
        display: block;
        width: 3rem;
        height: 2.5rem;
        font-family: Roboto;
        font-size: 1rem;
        text-align: center;
        color: #4a4a4a;
        padding: 0.5rem;
        border: none;
        border-radius: 0;
        border-top: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        outline: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .mid-root .mid-message-container {
        padding: 0 1rem;
    }

    .mid-root .mid-button-container {
        display: flex;
        flex-wrap: nowrap;
        padding: 1rem;
        box-sizing: border-box;
        justify-content: flex-end;
    }

    .mid-root .mid-button-cancel-container {
        padding-right: 1rem;
    }

@media (max-width: 768px) {
    .mid-root {
        flex-wrap: wrap !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

        .mid-root .mid-image-container-outer {
            padding: 0;
            width: 100%;
        }

        .mid-root .mid-image-container-inner {
            width: 100%;
            height: 300px;
        }

        .mid-root .mid-data-container {
            width: 100%;
        }

        .mid-root .mid-sizeradiobutton-wrapper {
            width: 100%;
            padding-right: 0;
        }

        .mid-root .mid-modifiercheckbox-wrapper {
            width: 100%;
            padding-right: 0;
        }

        .mid-root .mid-modifierradiobutton-wrapper {
            width: 100%;
            padding-right: 0;
        }

        .mid-root .mid-quantity-header {
            flex-grow: 1;
        }

        .mid-root .mid-button-cancel-container {
            flex-grow: 1;
        }

        .mid-root .mid-button-cancel {
            width: 100%;
            padding: 1rem;
        }

        .mid-root .mid-button-save-container {
            flex-grow: 2;
        }

        .mid-root .mid-button-save {
            width: 100%;
            padding: 1rem;
        }

        .mid-root .mid-button-disabled {
            width: 100%;
            padding: 1rem;
        }
}


/* ROUND IMAGE */

.mid-root .mid-image-round {
    border-radius: 100%;
}