#container_demo {
    text-align: left;
    margin: 0;
    padding: 0;
    margin: 0 auto;
    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
}


p.button {
    text-align: right;
    margin: 5px 0;
}


#inner-wrapper {
    width: 100%;
    right: 0px;
    /*min-height: 800px;*/
    margin: 0px auto;
    position: relative;
}


    #inner-wrapper h1 {
        /*color: rgb(6, 106, 117);*/
        padding: 2px 0 0 0;
        font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
        font-weight: bold;
        text-align: center;
        padding-bottom: 0px;
    }

    #inner-wrapper h2 {
        /*color: rgb(6, 106, 117);*/
        padding: 2px 0 10px 0;
        font-weight: bold;
        padding-bottom: 5px;
    }

    #inner-wrapper h1:after {
        content: ' ';
        display: block;
        width: 100%;
        height: 2px;
        margin-top: 10px;
        background: -moz-linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,184,189,0)), color-stop(20%,rgba(147,184,189,0.8)), color-stop(53%,rgba(147,184,189,1)), color-stop(79%,rgba(147,184,189,0.8)), color-stop(100%,rgba(147,184,189,0)));
        background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
        background: -o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
        background: -ms-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
        background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
    }

    #inner-wrapper h3 {
        color: rgb(6, 106, 117);
        padding: 2px 0 10px 0;
        font-weight: bold;
        margin-top: 10px;
    }






/** Styling both forms **/
#form {
    position: relative;
    top: 0px;
    padding: 18px 3% 60px 3%;
    margin: 0 0 35px 0;
    /*background: rgb(247, 247, 247);*/
    border: 1px solid rgba(147, 184, 189,0.8);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#form {
    z-index: 21;
    width: 100%;
    padding-top: 1em;
}




.table {
    /* margin-bottom: 20px;*/
    margin-bottom: 0px;
    width: 90%;
}

    .table th {
        background: #8BD7F7;
        color: #000;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        border-top: 1px solid #e5e5e5;
        line-height: 1.42857;
        padding: 8px 4px 8px 4px;
        vertical-align: middle;
    }

    .table > thead > tr > th, .table > tfoot > tr > th {
        border-bottom: 1px solid #e5e5e5;
        vertical-align: bottom;
    }

    .table > thead > tr:first-child > th {
        text-align: center;
        vertical-align: middle;
        border-left: 1px solid #e5e5e5;
    }

    .table tr:last-child {
        border-bottom: 1px solid #e5e5e5;
    }

    .table tr > th:first-child, .table tr > td:first-child, .table tr > th:nth-child(5), .table tr > td:nth-child(2), .table tr > td:nth-child(6) {
        border-left: 1px solid #e5e5e5;
    }


    .table tr > th:last-child, .table tr > td:last-child {
        border-right: 1px solid #e5e5e5;
    }

    .table tr > td + td {
        padding-left: 15px;
    }

.div-legend-parent {
    display: table;
    width: 99%;
    vertical-align: middle;
    padding-top: 0em;
    padding-bottom: 5px;
}

    .div-legend-parent > div:first-child {
        display: table-cell;
        float: left;
        border-width: 1px;
        width: 30px;
        display: block;
        height: 20px;
        padding: 0;
        padding-bottom: 10px;
        margin: 0;
        vertical-align: top;
    }

    .div-legend-parent > div:last-child {
        display: table-cell;
        float: left;
        padding: 0;
        padding-left: 5px;
        margin: 0;
        vertical-align: top;
    }

.div-ingre-parent {
    display: table;
    width: 99%;
    vertical-align: middle;
    padding-top: 1em;
    padding-bottom: 1em;
}

    .div-ingre-parent > div:first-child {
        display: table-cell;
        float: left;
        width: 33%;
        padding: 0;
        padding-bottom: 10px;
        margin: 0;
        vertical-align: top;
    }

    .div-ingre-parent > div:last-child {
        display: table-cell;
        float: left;
        width: 66%;
        padding: 0;
        padding-bottom: 10px;
        margin: 0;
        vertical-align: top;
    }

.div-3col-parent {
    display: table;
    width: 99%;
    vertical-align: middle;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.div-3col {
    display: table-cell;
    float: left;
    width: 33%;
    padding: 0;
    padding-bottom: 0px;
    margin: 0;
    vertical-align: top;
}

.div-remain-3col {
    display: table-cell;
    float: left;
    width: 66%;
    padding: 0;
    padding-bottom: 0px;
    margin: 0;
    vertical-align: top;
}

.div-remain-col {
    display: table-cell;
    overflow: hidden;
    float: left;
    padding: 0;
    padding-bottom: 0px;
    margin: 0;
    vertical-align: top;
}

.div-2col {
    display: table-cell;
    float: left;
    width: 49%;
    padding: 0;
    padding-bottom: 0px;
    margin: 0;
    vertical-align: top;
}

.div-3col input[type="text"],
.div-3col select {
    width: 70%;
}

.div-3col textarea {
    width: 85%;
}

.div-3col label, .div-remain-col label, .div-2col label, .div-remain-3col label {
    display: table;
}


.last-div-3col {
}

wide90-input {
    width: 90%;
}

wide80-input {
    width: 80%;
}

wide75-input {
    width: 75%;
}

.wide-input {
    width: 70%;
}

.narrow-input {
    width: 60%;
}

.popup {
    font-size: 0.85em;
}

.dl-2col {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    word-spacing: -0.43em;
}

    .dl-2col dt, .dl-2col dd {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        padding: 0;
        margin: 0;
    }

    .dl-2col dt {
        font-weight: 600;
        width: 48%;
        padding: 0 2% 0.5em 0;
    }

    .dl-2col dd {
        margin-right: -1px;
        width: 50%;
        padding: 0 0 0.5em 0;
    }

.only-uppercase {
    text-transform: uppercase!important;
}

/**Overwritten styles of kendo feedback reponse panel bar*/
.k-panelbar > .k-item > .k-link {
    font-size: 16px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-weight: bold;
    padding-bottom: 5px;
}

.k-panelbar > .k-item > .k-state-selected {
    color: rgb(255, 255, 255);
}

.k-button .k-image {
    height: 16px;
}

/** Notification */
.k-notification {
    /*border: 0;*/
}

.notify-success {
    border: 1px solid #009100;
    background: #A6FFA6;
}

    .notify-success div {
        background: #009100;
        color: #fff;
    }

.notify-info {
    border: 1px solid #1919FF;
    background: #E5E5FF;
}

    .notify-info div {
        background: #1919FF;
        color: #fff;
    }

.notify-error {
    border: 1px solid #FF1919;
    background: #FFE5E5;
}

    .notify-error div {
        background: #FF1919;
        color: #fff;
    }

.notify-content {
    width: 400px;
    height: 100px;
    padding: 0;
    color: #000;
}

    .notify-content div {
        height: 30px;
        width: 100%;
        float: left;
    }

    .notify-content span {
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        font-size: 1em;
        font-weight: normal;
        display: inline-block;
        vertical-align: middle;
    }

    .notify-content div > img {
        display: inline-block;
        vertical-align: middle;
        margin: 5px;
    }

.desc {
    display: table;
    width: 99%;
    vertical-align: middle;
    padding-top: 1em;
    padding-bottom: 1em;
    font-weight: bold;
}

.table-radio-type {
    border: 1px solid #e5e5e5;
    width: 70%;
}

    .table-radio-type input[type="radio"] {
        width: auto;
    }

    .table-radio-type label {
        display: inline;
    }

    .table-radio-type td {
        padding: 5px;
    }

    .table-radio-type label {
        padding-left: 5px;
    }

.errorCell {
    background-color: #FFC200;
}

.alignSetting {
    width: 100%;
}
    /*.alignSetting td:nth-child(odd) {
    width:30%;
    padding:10px;
}
.alignSetting td:nth-child(even) {
    width:20%;
    padding:10px;
}*/

    .alignSetting td:first-child {
        width: 30%;
        padding: 10px;
    }

    .alignSetting td:not(:first-child) {
        width: 20%;
        padding: 10px;
    }

/*.internSetting {
    width:100%;
}

.internSetting td {
    padding:0px;
    padding-right:10px;
}*/
.table-recipe-type {
    border: 1px solid #e5e5e5;
    width: 70%;
}

    .table-recipe-type input[type="radio"] {
        width: auto;
    }

    .table-recipe-type label {
        display: inline;
    }

    .table-recipe-type td {
        padding: 5px;
    }

    .table-recipe-type label {
        padding-left: 5px;
    }


.abutton {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    text-indent: -444px;
    min-width: 0;
    border: 0;
}

.table-multi {
    padding-top: 5px;
    border: 1px solid #e5e5e5;
    width: 90%;
}

    .table-multi td {
        border: 1px solid #e5e5e5;
        padding: 5px;
    }

    .table-multi input {
        width: 50%;
    }

.k-calendar .k-content .k-link {
    white-space: nowrap;
}

.italic {
    font-style: italic;
}


@media (min-width:767px) {
    #inner-wrapper {
        font-size: 0.85em;
    }

        #inner-wrapper h1 {
            font-size: 30px;
        }

        #inner-wrapper h2 {
            font-size: 16px;
        }

        #inner-wrapper h3 {
            font-size: 14px;
        }
}

@media (max-width:767px) {
    #inner-wrapper {
        font-size: 0.85em;
    }

        #inner-wrapper h1 {
            font-size: 26px;
        }

        #inner-wrapper h2 {
            font-size: 14px;
        }

        #inner-wrapper h3 {
            font-size: 12px;
        }
}

div.clarity-dialog {
    padding: 1em !important;
}

    div.clarity-dialog + div {
        padding: 0.5em !important;
    }

        div.clarity-dialog + div .k-button:first-child, .k-button-group .k-group-start {
            border-radius: 4px;
        }

        div.clarity-dialog + div .k-button:last-child, .k-button-group .k-group-end {
            border-radius: 4px;
        }

div.clarity-color {
    background-color:orangered;
    color:white
}