﻿/*****************************************************************/
/* Order Page Styles */
/*****************************************************************/
.order-section-header-ui {
    /*background-color: #F2F4F7;*/
    background-color: #f7f5f4;
    color: #666666;
    font-family: Roboto;
    font-size: 16px;
    border-radius: 5px 5px;
    padding: 5px;
    /*margin-left: 10px;*/ /*Add in media tags*/
    margin-bottom: 5px;
    line-height: 2em;
}

.order-section-header {
    /*background-color: #F2F4F7;*/
    background-color: #f7f5f4;
    color: #666666;
    font-family: Roboto;
    font-size: 16px;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
}

.product-breadcrumb {
    font-family: Roboto-Light;
    font-size: 16px;
    margin-left: 10px;
    padding-bottom: 10px;
}

.bc-active {
    color:#666666;
}

.prod-bc {
    font-family: Roboto-Light;
    font-size: 16px;
    color: #666666;
}

.shortcut-img {
    height:25px;
    width:25px;
}

.shortcut-link {
    font-family: Roboto-Light;
    font-size: 13px;
    border-radius: 999px;
    border:1px solid #999;
    background-color: #B1B1B1;
    padding: 3px 4px 2px 4px;
    color: white;
    text-decoration: none;
}
    .shortcut-link:hover {
        background-color: #9B9B9B;
        border: 1px solid #666666;
        color: white;
    }
    .shortcut-link:active {
        color: white;
    }
    

.stack-400 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
}

    .stack-400 .shortcuts {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem !important;
    }

.order-img-card {
    max-width: 480px;
    max-height: 480px;
    padding: 10px;
    /*margin-top: 5px;*/
    border-radius: 5px 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    /*transition: .2s;*/
}

.order-instructions {
    font-size: 18px;
}

.order-categories-ui {
    padding: 5px;
    border-radius: 5px 5px;
    border: 1px solid silver;
    /*width: 380px;*/
    margin-left: 10px;
    /*background-color: #464646;*/
    background-color: #747474;
}

.order-categories {
    padding: 5px;
    border-radius: 5px 5px;
    border: 1px solid silver;
    width: 380px;
    margin-left: 10px;
    /*background-color: #464646;*/
    background-color: #747474;
}

.order-categories-label {
    font-size: 16px;
    line-height: 1.3;
    /*background-color:#333;*/
    color: white;
    padding: 5px;
}

.order-categories-ddl {
    /*display: block;*/
    /*background-color: #A6AEB7;*/
    background-color: #F1F3F5;
    color: black;
    /*width: 150px;*/
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.3;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.product-details-img {
    max-width: 430px;
    max-height: 430px;
}

.product-title-container {
    /*background-color: #f7f7f7;*/
    /*background-color: #f2f2f2;*/
    /*background-color: #FFF3CD;*/
    /*background-color: #FFF8DF;*/
    /*border: 1px solid #FFECB5;*/
    border-radius: 5px 5px;
    padding: 6px;
    /*margin-top: 5px;*/
    border-radius: 5px 5px;
}

.product-details-title {
    font-family: Roboto-Thin;
    font-size: 40px;
    margin-bottom: 0px;
    color: #333 !important;
}

.product-details-info-label {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.3;
    /*background-color:#333;*/
    color: #333;
    padding: 5px;
}

.product-details-quantity-label {
    font-family: Roboto;
    font-size: 14px;
    line-height: 1.3;
    /*background-color:#333;*/
    color: #333;
    padding: 5px;
}

.product-details-quantity {
    /*display: block;*/
    background-color: white;
    /*color: white;*/
    width: 75px;
    margin-right: 10px;
    padding: 6px 12px;
    font-size: 14px;
    font-family: Roboto;
    color: #333;
    line-height: 1.3;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.product-details-filling {
    background-color: white;
    /*color: white;*/
    margin-right: 10px;
    padding: 6px 12px;
    font-size: 14px;
    font-family: Roboto;
    color: #333;
    line-height: 1.3;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.meal-details-alert {
    padding: 5px;
    border-radius: 5px 5px;
    color: white;
    background-color: #541d1e;
    font-size: 12px;
    font-weight: bold;
    width: 150px;
    display: block;
}

/*.dish-title {
    font-size: 20px;
    background-color: #F7F7F7;
    color: #333;
    border-radius: 5px 5px;
    padding: 6px;
}*/
.product-desc {
    font-size: 16px;
    color: #666666;
}

.vegan-gluten-badge {
    font-size: 14px;
}

.add-to-cart {
}

.details-header {
    /*background-color: #F7F7F7;*/
    /*background-color: #F5E7D8;*/
    background-color: #FBF4EE;
    font-size: 16px;
    color: #666666;
    padding: 4px;
    margin-top: 5px;
    border-radius: 5px 5px;
    border: 1px solid lightgray;
    /*text-decoration:underline;*/
}

.ingredients {
    font-size: 16px;
    color: #666666;
}

.suggestions {
    font-size: 16px;
    color: #666666;
}

/* Product details Component */
.product-details-modal-dialog {
    margin-top: 10px;
    max-width: 1000px; /*Needs to be larger than product-details-page-width*/
    z-index: 2000 !important;
}

.product-details-page-width {
    width: 950px;
}
