/** view **/
a.btn-category {
    display: inline-block;
    color: #FFFFFF;
    background: #5A200D;
    border-radius: 10px;
    /* filter: drop-shadow(0px 6px 6px #868686); */
    min-width: 140px;
    margin: 4px;
    padding: 10px 5px 10px 5px;
    font-size: 30px;
    text-align: center;
    border: solid #5A200D;
}
span.k-dropdown {
    width: 10em;
}

/** Dish ITEM  */

/** Line1: dish name and caption */
span.new-mark {
    border: solid 2px #5A200D;
    color: white;
    background-color: red;
}
/** Line2 : dish image and price information */
div.dish-image-price-wrapper {
}
div.price-justify {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
} 
span.size1 {
    display: inline-block;
    margin: 20px 0px 0px 10px;
    font-size: 20px;
}
span.size2 {
    margin: 4px 4px 4px 4px;
    display: inline-block;
    font-size: 20px;
}
/** Line 3: allergie information */
div.allergie-label {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    width: 62px;
}
div.al-lv1 {
    display: inline-block;
    border: solid 1px #5A200D;
    border-radius: 10px;
    background: #FFB2B2;
    padding: 0px 2px 0px 2px;
    margin: 0px 2px 0px 0px;
    text-align: center;
    font-size: 16px;
    min-width: 40px;
}
div.al-lv2 {
    display: inline-block;
    border: solid 1px #5A200D;
    border-radius: 10px;
    background: #FCFFAB;
    padding: 0px 2px 0px 2px;
    margin: 0px 2px 0px 0px;
    text-align: center;
    font-size: 16px;
    min-width: 40px;
}
/** control */
canvas#control-prev {
    display: inline-block;
    position: fixed;
    top: 140px;
    right: 10px;
}
canvas#control-next {
    display: inline-block;
    position: fixed;
    bottom: 20px;
    right: 10px;
}

/** detail popup dialog */
div#detail-dilalog {
    background-color: #FFF8EF;
}
div.dish-item-detail {
    display: block;
    margin: 0px 0px 0px 0px;
    width: 100%;
    position: relative; /** for absolute */
}
div.dialog-control {
    margin: 20px 0px 0px 0px;
    text-align:center;
}
/* popup container window */
div.k-window, div.k-window.k-state-focused {
    border: solid 2px #5A200D;
    border-radius: 8px;
}

/************ for PC/Tablet devices ***************/
@media screen and (min-width: 900px), print {
    /** header */
    div#category-header {
        background-color: #FFEFD8;
        top: 0px;
        left: 0px;
        position: fixed;
        height: 56px;
        width: 90%;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: hidden;
        z-index: 500;
    }
    div#back-header {
        background-color: #FFEFD8;
        top: 0px;
        right: 0px;
        position: fixed;
        height: 56px;
        width: 420px;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: hidden;
        z-index: 500;
    }
    a.btn-back {
        display: inline-block;
        color: #5A200D;
        background: #FFFFFF;
        border-radius: 10px;
        /* filter: drop-shadow(0px 6px 6px #868686); */
        min-width: 140px;
        margin: 4px;
        padding: 10px 5px 10px 5px;
        font-size: 30px;
        text-align: center;
        border: solid #5A200D;
    }    
    div#mobile-header {
        display: none;
    }
    div#mobile-category-header {
        display: none;
    }
    div#dish-list {
        display: inline-block;
        margin: 56px 0px 0px 0px;
        width: 95%;
    }
    div#control {
        display: inline-block;
    }
    /** DISH ITEM */
    div.dish-item {
        display: inline-block;
        margin: 2px 0px 0px 0px;
        border: solid 2px #5A200D;
        border-radius: 10px;
        background-color: #FFF8EF;
        width: 540px;
        min-height: 336px;
        position: relative; /** for absolute */
    }
    hr.title-border {
        width: 520px;
        margin: auto;
        border: 0;
        border-top: 2px solid #5A200D;
    }
    div.prohibited-overlay {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 540px;
        height: 370px;
        border-radius: 10px;
        background: black;
        opacity: 0.65;
        z-index: 410;
    }
    div.prohibited-mark {
        display:block;
        position:absolute;
        /** center of item */
        top: 150px;
        left:calc(50% - 32px*12/2);
        width:auto;
        height:auto;
        color:red;
        background: white;
        border-radius:8px;
        padding: 10px;
        font-size:32px;
        font-weight:700;
        text-align:center;
        z-index: 420;
    }
    div.warning-mark {
        display:block;
        position:absolute;
        top: 150px;
        left: 20px;
        width:auto;
        height:auto;
        color:#F39200;
        background: white;
        border-radius:8px;
        padding: 10px;
        font-size:32px;
        font-weight:700;
        text-align:center;
        z-index: 420;
    }
    /** Line1: dish name and caption */
    div.dish-name-wrapper {
        border-radius: 10px;
        padding: 10px 10px 0px 10px;
        height: 40px;
    }
    span.dish-name {
        font-size: 36px;
    }
    span.dish-name-s {
        display: inline-block;
        font-size: 28px;
    }
    span.dish-caption {
        margin: 0px 0px 0px 20px;
        font-size: 20px;
    }
    /** Line2 : dish image and price information */
    div.dish-image-wrapper {
        display: inline-block;
        width: 320px;
        padding: 5px 5px 0px 10px;
        border-radius: 10px;
    }
    img.dish-image {
        border-radius: 10px;
    }    
    div.price-wrapper {
        display: inline-block;
        padding: 5px 0px 0px 0px;
        width: 190px;
        height: 240px;
        vertical-align: top;
    }
    div.price {
        margin: 0px 0px 2px 0px;
        display: inline-block;
        width: 180px;
        min-height: 64px;
        border-radius: 10px;
        color:white;
        background-color: #5A200D;
    } 
    span.way {
        margin: 8px 0px 0px 4px;
        font-size: 12px;
        line-height: 12px;
    }
    div.price1 {
        display: inline-block;
        margin: 20px 0px 0px 0px;
        font-size: 32px;
        text-align: right;
    }
    div.price2 {
        margin: 8px 0px 0px 0px;
        display: inline-block;
        font-size: 32px;
    }
    div.price3 {
        display: inline-block;
        font-size: 20px;
    }
    span.tax1 {
        margin: 0px 2px 0px 4px;
        font-size: 14px;
    }
    span.tax2 {
        margin: 0px 2px 0px 4px;
        font-size: 14px;
    }
    span.tax3 {
        margin: 0px 2px 0px 4px;
        font-size: 10px;
    }
    div.dish-detail {
        font-size: 14px;
        line-height: 14px;
    }    
    /** Line 3: allergie information */
    div.dish-allergie-wrapper {
        margin: 0px 0px 0px 10px;
        height: 64px;
        overflow: hidden;
    }
    /** detail popup dialog */
    div.set-wrapper,
    div.topping-wrapper {
        margin: auto;
        width: 100%;
    }
    div.topping {
        display: inline-block;
        border: solid 1px #5A200D;
        border-radius: 10px;
        background: #FFEFD8;
        padding: 10px 5px 10px 5px;
        text-align: center;
        margin: 2px;
        font-size: 24px;
    }
    div.top-prohibited-mark {
        text-decoration: line-through;
        text-decoration-color: #ff0000;
    }
    div#detail-feedstocks-in {
        display: inline-block;
        font-size: 18px;
    }    
    a.btn-close {
        display: inline-block;
        color: #5A200D;
        background: #FFFFFF;
        border-radius: 10px;
        min-width: 540px;
        margin: 4px;
        padding: 10px 5px 10px 5px;
        font-size: 30px;
        text-align: center;
        border: solid #5A200D;
    }
    /** kendoDialog: reduce external padding */
    .k-dialog.k-dialog-titleless .k-content {
        padding: 10px;
    }
}

/************ for SmartPhone ***************/
@media screen and (max-width: 899px) {
    /** header */
    div#category-header {
        display: none
    }
    div#back-header {
        display: none;
    }
    a.btn-back {
        display: inline-block;
        color: #5A200D;
        background: #FFFFFF;
        /* border-radius: 10px; */
        margin: 1em;
        /* padding: 10px 5px 10px 5px; */
        font-size: 12px;
        text-align: center;
        border: solid #5A200D;
    }
    div#mobile-header {
        display: block;
        top: 0px;
        left: 0px;
        position: fixed;
        height: 50px;
        width: 100%;
        z-index: 500;
        color: white;
        background: #3B3B3B;
        text-align: center;
    }
    a.title-back {
        text-decoration: none;
        color: white;
    }
    div#mobile-category-header {
        display: block;
        top: 50px;
        left: 0px;
        position: fixed;
        height: 50px;
        width: 100%;
        z-index: 500;
        color: white;
        background: #3B3B3B;
        height: 50px;
    }
    div#dish-list {
        display: block;
        margin: 110px 0px 0px 0px;
        width: 100%;
    }
    div#control {
        display: none;
    }
    /** DISH ITEM */
    div.dish-item {
        display: block;
        margin: 2px auto 20px auto;
        border: solid 2px #5A200D;
        border-radius: 10px;
        background-color: #FFF8EF;
        max-width: 420px;
        position: relative; /** for absolute */
    }
    hr.title-border {
        display: none;
    }
    div.prohibited-overlay {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background: black;
        opacity: 0.65;
        z-index: 410;
    }
    div.prohibited-mark {
        display:block;
        position:absolute;
        /** center of item */
        top:calc(50% - 20px/2);
        left:calc(50% - 20px*14/2);
        width:auto;
        height:auto;
        color:red;
        background: white;
        border-radius:8px;
        padding: 10px;
        font-size:20px;
        font-weight:700;
        text-align:center;
        z-index: 420;
    }
    div.warning-mark {
        display:block;
        position:absolute;
        top:calc(50% - 20px/2);
        left:calc(50% - 20px*10/2);
        width:auto;
        height:auto;
        color:#F39200;
        background: white;
        border-radius:8px;
        padding: 10px;
        font-size:20px;
        font-weight:700;
        text-align:center;
        z-index: 420;
    }
    /** Line1: dish name and caption */
    div.dish-name-wrapper {
        border-radius: 10px;
        padding: 10px 10px 0px 10px;
    }
    span.dish-name {
        display: inline-block;
        font-size: 28px;
    }
    span.dish-name-s {
        display: inline-block;
        font-size: 24px;
    }
    span.dish-caption {
        display: block;
        font-size: 14px;
    }
    /** Line2 : dish image and price information */
    div.dish-image-wrapper {
        display: block;
        width: 300px;
        border-radius: 10px;
        margin:auto;
    }
    img.dish-image {
        border-radius: 10px;
        width: 300px;
    }    
    div.price-wrapper {
        display: block;
        padding: 5px 0px 0px 0px;
        margin: auto;
    }
    div.price {
        margin: auto;
        display: block;
        width: 300px;
        min-height: 64px;
        border-radius: 10px;
        color:white;
        background-color: #5A200D;
        border: 2px solid white;
    }
    div.dish-detail {
        width: 320px;
        margin: auto;
        font-size: 20px;
        line-height: 20px;
    }    
    span.way {
        margin: 15px 0px 0px 40px;
        font-size: 16px;
        line-height: 16px;
    }
    div.price1 {
        display: inline-block;
        margin: 15px 0px 0px 0px;
        font-size: 32px;
        text-align: right;
    }
    div.price2,
    div.price3 {
        margin: 8px 0px 8px 0px;
        display: inline-block;
        font-size: 32px;
    }
    span.tax1 {
        margin: 0px 10px 0px 20px;
        font-size: 14px;
    }
    span.tax2,
    span.tax3 {
        margin: 0px 10px 0px 20px;
        font-size: 14px;
    }    
    /** Line 3: allergie information */
    div.dish-allergie-wrapper {
        width: 320px;
        margin: auto;
        padding: 4px 0px 4px 0px;
    }
    /** detail popup dialog */
    div.set-wrapper,
    div.topping-wrapper {
        margin: auto;
        width: 320px;
    }
    div.topping {
        display: block;
        border: solid 1px #5A200D;
        border-radius: 10px;
        background: #FFEFD8;
        padding: 10px 0px 10px 0px;
        text-align: center;
        margin: 2px;
        font-size: 24px;
        width: 320px;
    }
    div.top-prohibited-mark {
        text-decoration: line-through;
        text-decoration-color: #ff0000;
    }
    div#detail-feedstocks-in {
        display: inline-block;
        font-size: 12px;
    }    
    a.btn-close {
        display: inline-block;
        color: #5A200D;
        background: #FFFFFF;
        border-radius: 10px;
        width: 90%;
        margin: 10px 0px 20px 0px;
        padding: 10px 5px 10px 5px;
        font-size: 30px;
        text-align: center;
        border: solid #5A200D;
    }
    /** kendoDialog: reduce external padding */
    .k-dialog.k-dialog-titleless .k-content {
        padding: 2px;
    }
}