:root {
    --masons-wp-blue: #008FD3;
    --masons-wp-light-blue: #0073aa;
    --masons-wp-dark-blue: #005a8b;
    --masons-wp-orange: #f0ad4e;
    --masons-wp-light-orange: #f0ad4e;
    --masons-wp-dark-orange: #ec971f;
    --masons-wp-green: #5cb85c;
    --masons-wp-light-green: #5cb85c;
    --masons-wp-dark-green: #4cae4c;
    --masons-wp-red: #d9534f;
    --masons-wp-light-red: #d9534f;
    --masons-wp-dark-red: #c9302c;
    --masons-wp-yellow: #f0ad4e;
    --masons-wp-light-yellow: #f0ad4e;
    --masons-wp-dark-yellow: #ec971f;
    --masons-wp-gray: gray;
    --masons-wp-light-gray: lightgray;
    --masons-wp-dark-gray: darkgray;
    --masons-wp-white: #ffffff;
    --masons-wp-light-white: #ffffff;
    --masons-wp-dark-white: #ffffff;
    --masons-wp-black: #000000;
    --masons-wp-light-black: #000000;
    --masons-wp-dark-black: #000000;
}

.masons-button {
    background-color: var(--masons-wp-blue);
    color: var(--masons-wp-white);
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;

    &:hover {
        background-color: var(--masons-wp-dark-blue);
    }

    &:disabled {
        background-color: var(--masons-wp-light-gray);
        color: var(--masons-wp-dark-gray);
        cursor: not-allowed;
    }

    &:active {
        outline: 1px solid var(--masons-wp-dark-blue);
    }

    &.outline {
        background-color: var(--masons-wp-white);
        color: var(--masons-wp-blue);
        border: 1px solid var(--masons-wp-blue);

        &:hover {
            background-color: var(--masons-wp-blue);
            color: var(--masons-wp-white);
        }

        &:disabled {
            background-color: var(--masons-wp-light-gray);
            border-color: var(--masons-wp-light-gray);
            color: var(--masons-wp-dark-gray);
            cursor: not-allowed;
        }

        &:active {
            outline: 1px solid var(--masons-wp-dark-blue);
        }
    }
}

.masons-bottom-info {

    select, input {
        padding: 8px;
        border-radius: 4px;
        border: 1px solid var(--masons-wp-light-gray);

        &:focus {
            outline: 1px solid var(--masons-wp-blue);
        }

        &.error {
            border-color: var(--masons-wp-red);
        }
    }
}

.online-order-block-order-summary {
    border: 1px solid darkgray;
    border-radius: 4px;
    table {
        border-collapse: collapse;
        width: 100%;
        border-radius: 4px;

        thead {
            th {
                text-align: center;
            }
        }

        tbody {

            tr {
                border-bottom: 1px solid darkgray;

                &:last-of-type {
                    border-radius: none;
                }

                &.odd {
                    background-color: #eee;
                }
            }
        }
    }
}

.Tab {
    padding: 16px !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    margin: 0px !important;
}

table {
    border-collapse: collapse;
    width: 100%;

    thead {
        
        th {
            padding: 8px;
            text-align: center;
        }
    }

    tbody {
        tr {

            td {
                padding: 8px;
                text-align: center;
            }
        }
    }
}