/************ for PC/Tablet devices ***************/
@media screen and (min-width: 900px), print {
    div.caption {
        font-size: 50px;
        line-height: 58px;
    }
    div.other {
        display: inline-block;
        font-size: 40px;
        line-height: 58px;
    }
    textarea.free-text {
        font-size: 40px;
        line-height: 40px;
        width: 800px;
    }

    /* -------------------- Enlarge Kendo Checkboxes ----------------------*/
    .k-checkbox-label::before {
        font: 36px WebComponentsIcons,monospace;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-width: 1px;
        border-style: solid;
        width: 36px;
        height: 36px;
        font-size: 36px;
        line-height: 36px;
        text-align: center;
        border-color: #5A200D;
        background: #ffffff;
        border-radius: 1px;
    }
    .k-checkbox-label, .k-radio-label {
        display: inline-block;
        position: relative;
        padding-left: 45px;
        vertical-align: top;
        line-height: 40px;
        cursor: pointer;
        border-style: solid;
        border-width: 0;
    }
    /* -------------------- allergen marks ----------------------*/
    div.aller-ch-lv1 {
        display: inline-block;
        border: solid 1px #5A200D;
        border-radius: 10px;
        background: #FFB2B2;
        padding: 8px 8px 4px 8px;
        text-align: center;
        margin: 10px;
        min-width: 2em;
        font-size: 40px;
    }
    div.aller-ch-lv2 {
        display: inline-block;
        border: solid 1px #5A200D;
        border-radius: 10px;
        background: #FCFFAB;
        padding: 8px 8px 4px 8px;
        text-align: center;
        margin: 10px;
        min-width: 2em;
        font-size: 40px;
    }
}

/************ for SmartPhone ***************/
@media screen and (max-width: 899px) {
    div.caption {
        font-size: 24x;
        line-height: 30px;
    }
    div.other {
        display: inline-block;
        font-size: 24px;
        line-height: 30px;
        width:90%;
    }
    textarea.free-text {
        font-size: 16px;
        line-height: 16px;
        width: 90%;
    }

    /* -------------------- Enlarge Kendo Checkboxes ----------------------*/
    .k-checkbox-label::before {
        font: 36px WebComponentsIcons,monospace;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-width: 1px;
        border-style: solid;
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        border-color: #5A200D;
        background: #ffffff;
        border-radius: 1px;
    }
    .k-checkbox-label, .k-radio-label {
        display: inline-block;
        position: relative;
        padding-left: 20px;
        vertical-align: top;
        line-height: 16px;
        cursor: pointer;
        border-style: solid;
        border-width: 0;
    }
    /* -------------------- allergen marks ----------------------*/
    div.aller-ch-lv1 {
        display: inline-block;
        border: solid 1px #5A200D;
        border-radius: 10px;
        background: #FFB2B2;
        padding: 8px 8px 4px 8px;
        text-align: center;
        margin: 2px;
        min-width: 2em;
        font-size: 16px;
    }
    div.aller-ch-lv2 {
        display: inline-block;
        border: solid 1px #5A200D;
        border-radius: 10px;
        background: #FCFFAB;
        padding: 8px 8px 4px 8px;
        text-align: center;
        margin: 2px;
        min-width: 2em;
        font-size: 16px;
    }
}