﻿.os-root {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

    .os-root .os-data-container {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .os-root .os-ordertypeandtime-container {
        width: 400px;
        flex-shrink: 0;
        padding: 1rem;
        box-sizing: border-box;
    }

    .os-root .os-ordertype-container {
        border-bottom: 1px solid #d0d0d0;
    }

    .os-root .os-ordertime-header {
        margin-top: 2rem;
        margin-bottom: 1rem;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 500;
        color: #183792;
    }

    .os-root .os-asaplater-container {
        border-bottom: 1px solid #d0d0d0;
        margin-bottom: 1rem;
    }

    .os-root .os-later-pickdate-container {
    }

    .os-root .os-later-pickdate-header {
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
        color: #183792;
        margin-bottom: 0.5rem;
    }

    .os-root .os-later-datelist-container {
        display: flex;
        flex-wrap: wrap;
    }

    .os-root .os-later-datelistitem-container {
        width: 25%;
        flex-shrink: 0;
        padding: 0.2rem;
        box-sizing: border-box;
    }

    .os-root .os-later-datelistitem-link {
        display: block;
        padding: 0.5rem;
        text-align: center;
        border: 1px solid #d0d0d0;
        border-radius: 0.25rem;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        background-color: white;
        color: #4a4a4a;
    }

        .os-root .os-later-datelistitem-link:hover {
            border: 1px solid #183792;
        }

        .os-root .os-later-datelistitem-link[data-disabled='true'] {
            background-color: #DEDEDE;
            color: #ae3b1d;
        }

            .os-root .os-later-datelistitem-link[data-disabled='true']:hover {
                border: 1px solid #d0d0d0;
            }

    .os-root .os-later-datelistitem-line1 {
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .os-root .os-later-datelistitem-line2 {
        font-size: 0.8rem;
    }

    .os-root .os-later-picktime-container {
    }

    .os-root .os-later-picktime-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    .os-root .os-later-picktime-header-text {
        font-size: 1rem;
        font-weight: 500;
        color: #183792;
        padding: 1rem;
        box-sizing: border-box;
    }

    .os-root .os-later-picktime-header:hover .os-later-picktime-header-text {
        text-decoration: underline;
    }

    .os-root .os-later-picktime-header-icon {
        font-size: 1.25rem;
        color: #183792;
    }

    .os-root .os-later-picktime-dropdowncontainer {
        width: 150px;
        margin: 0 auto;
    }

    .os-root .os-futureordersnotallowed-line1 {
        margin: 1rem 0 0.25rem 0;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 500;
        color: #357a00;
    }

    .os-root .os-futureordersnotallowed-line2 {
        margin-bottom: 1rem;
        text-align: center;
        font-size: 0.9rem;
        color: #737373;
    }

    .os-root .os-orderingnotavailable {
        margin: 1rem 0;
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
        color: #ae3b1d;
    }

    .os-root .os-address-container {
        width: 400px;
        flex-shrink: 0;
        padding: 1rem;
        box-sizing: border-box;
    }

    .os-root .os-takeoutdinein-container {
        margin-top: 1rem;
        text-align: center;
    }

    .os-root .os-takeoutdinein-header {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .os-root .os-takeoutdinein-businessname {
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .os-root .os-takeoutdinein-businessaddress {
        display: block;
        font-size: 1rem;
        color: #183792;
    }

        .os-root .os-takeoutdinein-businessaddress:hover {
            text-decoration: underline;
        }

    .os-root .os-addressdropdown-container {
        margin-bottom: 1rem;
    }

    .os-root .os-message-container {
        padding: 0 1rem;
    }

    .os-root .os-findrestaurants-link {
        display: block;
        font-size: 1.1rem;
        margin: 0.5rem 1rem;
        padding: 1rem;
        text-decoration: underline;
        color: #183792;
    }

    .os-root .os-button-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 1rem;
        box-sizing: border-box;
    }

    .os-root .os-button-cancel-container {
        padding-right: 0.5rem;
        box-sizing: border-box;
    }

    .os-root .os-button-cancel {
        width: auto;
    }

    .os-root .os-button-save-container {
        padding-left: 0.5rem;
        box-sizing: border-box;
    }

    .os-root .os-button-save {
        width: 8rem;
    }

@media (max-width: 992px) {

    .os-root {
        width: 500px !important;
    }

        .os-root .os-ordertypeandtime-container {
            width: 100%;
        }

        .os-root .os-address-container {
            width: 100%;
        }

        .os-root .os-button-cancel-container {
            flex-grow: 1;
        }

        .os-root .os-button-cancel {
            width: 100%;
        }

        .os-root .os-button-save-container {
            flex-grow: 2;
        }

        .os-root .os-button-save {
            width: 100%;
        }
}

@media (max-width: 768px) {
    .os-root {
        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;
    }

        .os-root .os-button-cancel {
            padding: 1rem;
        }

        .os-root .os-button-save {
            padding: 1rem;
        }
}