/* Defaults */
body {
    background: #F4F4F4;
    margin: 0px;
    padding: 0px;
    color: black;
}

input[type="button"], input[type="text"],
input[type="password"], input[type="submit"],
textarea, button {
    -webkit-appearance: none;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}

a {
    cursor: pointer;
    text-decoration: none;
}

    a:hover {
        cursor: pointer;
        text-decoration: underline;
    }

    a:active {
        cursor: pointer;
    }

    a:link.linktext, a:visited.linktext {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    a:hover.linktext {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    a:active.linktext {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    a.linktext {
        color: black;
        text-decoration: none;
        width: 100%;
        cursor: pointer;
    }

    a.disabled {
        pointer-events: none;
        cursor: default;
    }

    a:link.selectedlinktext, a:visited.selectedlinktext, a:hover.selectedlinktext, a:active.selectedlinktext {
        color: black;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
    }

    a:link.commandlinktext, a:visited.commandlinktext, a:hover.commandlinktext, a:active.commandlinktext, .commandlinktext {
        color: black;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
    }

    a img, a:link img, a:visited img, a:hover img, a:active img {
        border: 0 !important;
    }

    a:-webkit-any-link {
        outline: none;
    }

.maindiv {
    margin: auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background-color: #FFFFFF;
}

.whitebackground {
    background-color: white !important;
}

.bold {
    font-weight: bold;
}

.boldtext {
    font-weight: bold;
}

.labeltext {
    font-size: 1em;
}

.labeltotal {
    margin-top: 10%;
    font-size: 1.2em;
}

.systemmode {
    background-color: #FECB00;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.errorheader {
    font-size: x-large;
    color: #FF0000;
    font-weight: bold;
}

.errorvalidator {
    color: #FF0000;
    font-weight: bold;
    font-size: 1.6em;
    padding: 4px;
}

.backgroundjobstatusareaerror {
    color: #a94442;
    background-color: #f2dede;
    padding: 10px 10px 10px 10px;
    border: 1px solid #dca7a7;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
    background-image: -moz-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
    background-image: -o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));
    background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
    background-repeat: repeat-x;
}

.backgroundjobstatusarea {
    color: black;
    background-color: #C2EFBF;
    padding: 10px 10px 10px 10px;
    border: 1px solid #C1DBBC;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    background-image: -webkit-linear-gradient(top,#C2EFBF 0,#9FD5AE 100%);
    background-image: -moz-linear-gradient(top,#C2EFBF 0,#9FD5AE 100%);
    background-image: -o-linear-gradient(top,#C2EFBF 0,#9FD5AE 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#C2EFBF),to(#9FD5AE));
    background-image: linear-gradient(to bottom,#C2EFBF 0,#9FD5AE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffC2EFBF', endColorstr='#ff9FD5AE', GradientType=0);
    background-repeat: repeat-x;
}

.errorvalidatorsummary {
    color: #a94442;
    background-color: #f2dede;
    padding: 15px 15px 5px 15px;
    margin-bottom: 10px;
    border: 1px solid #dca7a7;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
    background-image: -moz-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
    background-image: -o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));
    background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
    background-repeat: repeat-x;
}

.errortext {
    font-size: 1.2em;
}

.errorboxtext {
    font-size: 1.5em;
    font-weight: bold;
}

.errorbox {
    text-align: center;
    padding: 40px;
    margin-bottom: 20px;
    background-color: rgba(216,216,216,0.2);
    border: 1px solid rgba(151,151,151,0.28);
    margin-top: 5px;
}

.oucolumnwidth {
    text-align: right;
    width: 7%;
}

.helplabeltext {
    font-size: 0.90em;
    color: #707070;
}

.inputfield {
    color: black;
    background-color: #FFFFFF;
    padding: 10px 12px;
    font-family: Roboto, Arial;
    font-size: 1em;
    border: 1px solid #ccc;
    -moz-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

    .inputfield:disabled {
        background-color: lightgray;
    }

.watermarked {
    color: #CCCCCC;
    border: 1px solid #A4A4A4;
    font-family: Roboto, Arial;
    padding: 10px 12px;
    font-size: 1em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.checkboxfield {
}

    .checkboxfield input[type="checkbox"] {
        width: 19px;
        height: 19px;
    }

    .checkboxfield label, input[type="checkbox"] + label {
        padding-left: 2px;
        position: relative;
        top: -5px;
        line-height: 20px;
        word-break: break-word;
    }

.radiobuttonfield label {
    padding-left: 2px;
    position: relative;
    line-height: 20px;
    top: -5px;
    word-break: break-word;
}

.radiobuttonfield td label {
    top: 0px;
}

.checkboxfield td, .radiobuttonfield td {
    vertical-align: top;
}

    .checkboxfield td span {
        display: table-row;
    }

    .radiobuttonfield td input[type="radio"] {
        float: left;
    }

    .checkboxfield td span label {
        display: table-cell;
    }

    .radiobuttonfield td label {
        display: table-cell;
    }

.radiobuttonfield input[type="radio"] {
    width: 19px;
    height: 19px;
}

input[type="radio"] {
    width: 19px;
    height: 19px;
}

    .radiobuttonfield label, input[type="radio"] + label {
        padding-left: 2px;
        position: relative;
        top: -5px;
        line-height: 20px;
        word-break: break-word;
    }

/* Headings  */

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000000;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 2em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0px;
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.fieldtitle {
    font-weight: bold;
}

.fieldtitle2 {
    font-weight: normal;
}

.fieldtitle3 {
    font-size: 2em;
    font-weight: bold;
}

.fieldtitle4 {
    font-size: 1.5em;
    font-weight: bold;
}

.ordertitle {
    font-weight: 300;
    font-size: 3em;
}

.headertext {
    font-weight: 700;
    margin: 0px;
    padding: 0px;
    color: #000000;
    border: none;
    line-height: 2em;
    font-size: 1.7em;
}

.headertext2 {
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    color: #000000;
    border: none;
    text-transform: uppercase;
    line-height: 2em;
    font-size: 1.2em;
}

.areaheadertext {
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    color: #000000;
    border: none;
    line-height: 2em;
    font-size: 1.21em;
}

.headertexttheme {
    font-weight: 300;
    font-size: 2em;
}

.subheadertexttheme {
    font-size: 1.5em;
    font-weight: bold;
}

.customernametitle {
    font-weight: 300;
    font-size: 3em;
}

.confirmationdialog {
    text-align: center;
    background-color: green;
    color: white;
    font-size: medium;
}

.cellcontainer {
    width: 200px !important;
    vertical-align: top !important;
    padding-left: 10px;
    padding-right: 10px;
    word-wrap: break-word;
}

.container {
    position: relative;
    vertical-align: top !important;
}

.imagetextdiv {
    position: absolute;
    top: 160px;
    background: rgba(0, 0, 0, 0.5);
    width: 200px !important;
    height: 40px;
    vertical-align: middle;
    color: white;
    font-size: 22px;
    font-weight: lighter;
}

/* Buttons */

.buttonfield, a:link.buttonfield, a:visited.buttonfield {
    padding: 6px 12px;
    margin: 2px;
    border: 2px solid;
    font-size: 1em;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

    .buttonfield:disabled {
        cursor: not-allowed;
    }


.buttonfield2 {
    padding: 6px 12px;
    margin: 2px;
    border: 2px solid;
    font-size: 1em;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.buttonfield3 {
    text-decoration: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
    padding-left: 20px;
}

    .buttonfield3:hover {
        text-decoration: underline;
    }

    .buttonfield3:active {
        text-decoration: underline;
    }

.buttonfieldsmall1 {
    padding: 3px 4px 3px 4px;
    border: 1px solid;
    font-size: 0.79em;
    font-weight: bold;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.buttonfieldsmall2 {
    padding: 8px 18px 8px 18px;
    border: 1px solid;
    font-size: 0.93em;
    font-weight: bold;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.buttonfieldsmall3 {
    padding: 8px 18px 8px 18px;
    border: 1px solid;
    font-size: 0.93em;
    font-weight: bold;
    color: #ffffff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.buttonfieldbig1 {
    display: inline-block;
    padding: 8px 16px;
    margin: 2px;
    border: 1px solid;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

    .buttonfieldbig1:disabled {
        cursor: not-allowed;
    }


.buttonfieldbig2 {
    padding: 10px 18px 10px 18px;
    border: 1px solid;
    font-size: 1.21em;
    font-weight: bold;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.buttonfieldbig3 {
    padding: 10px 18px 10px 18px;
    border: 1px solid;
    font-size: 1.21em;
    font-weight: bold;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.fontsizeplusbuttonfield {
    border-width: 0px;
    border-style: hidden;
    font-size: 12px;
    width: 32px;
    height: 32px;
    font-weight: bold;
}

.fontsizeminusbuttonfield {
    border-width: 0px;
    border-style: hidden;
    font-size: 10px;
    width: 32px;
    height: 32px;
}

.loginbuttonfield {
    height: 54px;
    width: 100%;
    padding: 8px 18px;
    border: 1px solid;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.frontpagebutton {
    padding: 10px 18px 10px 18px;
    border: 1px solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.21em;
    font-weight: bold;
    margin: 0 2px 5px 0;
}

.smallbluelinkbutton.smallthemelinkbutton {
    font-size: 1.1em !important;
}

.smallbluelinkbutton {
    font-size: 1em !important;
    font-weight: bold;
}

    .smallbluelinkbutton:hover {
        text-decoration: none !important;
    }

.expandallbutton {
    display: inline-block;
    background-color: transparent;
    font-size: 1em;
    font-weight: bold;
    padding: 5px 5px 5px 30px;
    border: none;
    cursor: pointer;
}

.collapseallbutton {
    display: inline-block;
    background-color: transparent;
    font-size: 1em;
    font-weight: bold;
    padding: 5px 5px 5px 30px;
    border: none;
    cursor: pointer;
}

.addlinkbutton {
    display: inline-block;
    background-color: transparent;
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px 5px 5px 25px;
    margin: 5px;
    border: none;
    cursor: pointer;
}

    .addlinkbutton:hover {
        text-decoration: none;
    }

@media only screen and (max-width:850px) {
    .addlinkbutton {
        font-size: 1em !important;
    }
}

.addlinkbutton:disabled {
    cursor: not-allowed;
}

input.buttonfieldconfirmpopupbutton {
    padding: 8px 18px 8px 18px;
    margin: 2px 2px 2px 2px;
    border: 1px solid;
    font-family: Arial !important;
    font-size: 0.93em !important;
    font-weight: 400 !important;
    text-decoration: none;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

    input.buttonfieldconfirmpopupbutton:hover {
        padding: 8px 18px 8px 18px;
        margin: 2px 2px 2px 2px;
        border: 1px solid;
        font-family: Arial !important;
        font-size: 0.93em !important;
        font-weight: 400 !important;
        text-decoration: none;
        cursor: pointer;
    }

    input.buttonfieldconfirmpopupbutton:active {
        padding: 8px 18px 8px 18px;
        margin: 2px 2px 2px 2px;
        border: 1px solid;
        font-family: Arial !important;
        font-size: 0.93em !important;
        font-weight: 400 !important;
        text-decoration: none;
        cursor: pointer;
    }

.addbuttonfield {
    border: none !important;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left;
}

.editbuttonfield {
    border: none !important;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    margin-left: 5%;
}

.removelinkbutton {
    background-color: transparent;
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px 5px 5px 30px;
    margin: 5px;
    border: none;
    cursor: pointer;
}

.closebutton {
    display: inline-block;
    background-color: transparent;
    padding: 5px 5px 5px 30px;
    border: none;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.closebutton2 {
    display: inline-block;
    background-color: transparent;
    padding: 20px 20px 10px 25px;
    border: none;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.btnSelected .buttonfield {
    cursor: pointer;
    border-radius: 5px;
}

.selectionbutton .btnSelected .buttonfield {
    cursor: pointer;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    -khtml-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

.selectionbutton .buttonfield {
    padding: 6px 12px 6px 12px;
    margin: 2px 2px 2px 2px;
    border: 1px solid;
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    width: 100px;
    height: 50px;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    -khtml-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

    .selectionbutton .buttonfield:hover, .selectionbutton a:hover.buttonfield {
        padding: 6px 12px 6px 12px;
        margin: 2px 2px 2px 2px;
        border: 1px solid;
        font-size: 1.2em;
        font-weight: 400;
        text-decoration: none;
        cursor: pointer;
        width: 100px;
        height: 50px;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        -khtml-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }

    .selectionbutton .buttonfield:active {
        padding: 6px 12px 6px 12px;
        margin: 2px 2px 2px 2px;
        border: 1px solid;
        font-size: 1.2em;
        font-weight: 400;
        text-decoration: none;
        cursor: pointer;
        width: 100px;
        height: 50px;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        -khtml-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }

    .selectionbutton .buttonfield:disabled {
        padding: 6px 12px 6px 12px;
        margin: 2px 2px 2px 2px;
        border: 1px solid;
        font-size: 1.2em;
        font-weight: 400;
        text-decoration: none;
        cursor: not-allowed;
        width: 100px;
        height: 50px;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        -khtml-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }

.gridremovebutton {
    /*background: url('images/Remove.png') no-repeat center center;*/
    background-color: transparent;
    background-size: contain;
    width: 23px;
    height: 24px;
    border: 0px;
    cursor: pointer;
    outline: 0px;
    padding: 0px;
    margin: 0px;
}

.grideditbutton {
    display: inline-block;
    width: 23px;
    height: 24px;
    border: none;
    border: 0px;
    cursor: pointer;
    outline: 0px;
    padding: 0px;
    margin: 0px;
}

.copybutton {
    height: 25px;
    width: 25px;
}

.clearsearchbutton {
    display: inline-block;
    width: 29px;
    height: 28px;
    border: none;
    border: 0px;
    cursor: pointer;
    outline: 0px;
    padding: 0px;
    margin: 0px;
}

/* Primary layout elements */

.page {
    width: 960px;
    background-color: #F4F4F4;
    margin: 20px auto 0px auto;
}

.maincontent {
    min-height: calc(100vh - 195px);
}

.maincontentcenter {
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 35px;
    padding-top: 20px;
}

.header {
    padding: 5px 5px;
    margin: 12px 8px 8px 8px;
    background: #F2F2F2;
    width: 100%;
}

    .header h1 {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: #f9f9f9;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

.main {
    padding: 5px;
    margin: 5px;
    min-height: 50px;
    background-color: White;
    vertical-align: top;
}

.main2 {
    padding: 0px 5px 5px 5px;
    margin: 0px 8px 8px 8px;
    min-height: 50px;
    background-color: White;
    vertical-align: top;
}

.leftCol {
    background: #F4F4F4;
    padding: 6px 6px;
    margin: 8px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    border-top-style: solid;
    border-top-color: #E0E0E0;
    border-top-width: 1px;
    width: 100%;
    display: flex;
}

.footersection {
    float: left;
    width: 33%;
}

.footeritem {
    width: 33%;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.menuitemstyle {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mainheader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 0 0 2%;
}

.darkboldheader {
    font-weight: bold;
    font-size: 1.4em;
}

.mainheaderleft {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.mainheaderright {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}

.mainheaderpath {
    margin-left: 1em;
}

.mainheaderprogressbar {
    margin-top: 5%;
}

.mainheaderfontchanger {
    flex: none;
}

.mainheaderloginview {
    margin-top: 0px !important;
    margin-left: 50px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 318px;
    align-items: flex-start;
}

.mainheaderloginviewitem {
    padding-left: 20px;
}

.loggedinusertext {
    font-size: 1.2em;
    font-weight: bold;
}

.accountloggedinuser {
    padding: 15px;
    width: 280px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
}

.accountpopuparrow {
    width: 20px;
    height: 16px;
    margin-left: 20px;
}

.headeruserimage {
    width: 60px;
    height: 52px;
    margin-right: 15px;
}

.accountlabel {
    color: #F0DEE3;
    width: 170px;
    vertical-align: middle;
}

.accountsettingspopup {
    float: right;
    width: auto !important;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 10px;
    padding-top: 20px;
}

    .accountsettingspopup a {
        color: #FFFFFF !important;
    }

        .accountsettingspopup a:visited {
            color: #FFFFFF !important;
        }

.inputfielddropdown {
    color: white;
    padding: 10px 12px;
    font-size: 1em;
    border: 1px solid #ccc;
    width: 290px;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -moz-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .inputfielddropdown:disabled {
        color: #ACACAC;
        background-color: #EAEAEA;
    }

.dropdownbuttonfield {
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    outline: 0px;
    margin: 0px;
    font-size: 1em;
    padding-left: 25px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: 1px solid #CCCCCC;
    padding-right: 25px;
    border-radius: 4px;
    background-repeat: no-repeat;
}

a.dropdownbuttonfield {
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    outline: 0px;
    margin: 0px;
    font-size: 1em;
    padding-left: 25px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: 1px solid #CCCCCC;
    padding-right: 25px;
    border-radius: 4px;
    background-repeat: no-repeat;
}

.dropdownbuttonfield:hover {
    color: #333333;
    text-decoration: none;
}

.dropdownbuttonfield:active {
    color: #333333;
    text-decoration: underline;
}

.dropdownbuttonfield a {
    color: #333333 !important;
    text-decoration: none;
}

.searchresultslabel {
    color: rgba(0,0,0,0.54);
    font-size: 1em;
}

.panelborder {
    border-bottom: 1px solid #979797;
}

.flexcenter {
    display: flex;
    align-items: center;
}

.secondaryheader {
    padding: 20px 35px;
}

.secondaryheadertext {
    font-size: 3em;
    font-weight: 300;
}

.ajax__calendar_days table tr td {
    padding: 0px;
}

.ajax__calendar_month {
    width: auto !important;
    height: auto !important;
}

.ajax__calendar_year {
    width: auto !important;
    height: auto !important;
}

.calendarcontainer {
    width: 40%;
    min-width: 400px;
    display: flex;
    align-items: center;
}

.calendartextbox {
    flex-grow: 1;
    height: 50px;
    background-color: #FFFFFF;
    border: 1px solid #A4A4A4;
    display: flex;
    align-items: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .calendartextbox .inputfield {
        flex-grow: 1;
        font-size: 1.2em;
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCCCCC;
    }

.calendarbutton {
    width: 34px;
    height: 34px;
    padding: 5px;
    cursor: pointer;
}

.searchbarcontainer {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.searchbar {
    display: inline-block;
    width: 40%;
    min-width: 400px;
}

    .searchbar input {
        height: 50px;
    }

    .searchbar watermarked {
        height: 50px;
    }

.searchicons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
}

.searchicons25 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 25%;
}


.searchlinkbutton {
    display: inline-block;
    width: 29px;
    height: 28px;
    cursor: pointer;
}

.searchbutton {
    width: 29px;
    height: 28px;
    border: none;
    cursor: pointer;
}

.searchareabuttons {
    display: inline-block;
}

    .searchareabuttons input[type="image"] {
        vertical-align: middle;
        margin-bottom: .15em;
    }

    .searchareabuttons input[type="submit"] {
        vertical-align: middle;
        margin-bottom: .15em;
    }

    .searchareabuttons input[type="button"] {
        vertical-align: middle;
        margin-bottom: .15em;
    }

.searchareabuttonsseparator {
    width: 10px;
}

.subheadercollapsiblepanel {
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 8px;
}

.weekdaycontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.daycontainer {
    display: flex;
    align-items: center;
    padding: 10px 0px;
}

.weekdayselection {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 140px;
    height: 140px;
}

    .weekdayselection:hover {
        text-decoration: none;
    }

    .weekdayselection.aspNetDisabled {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        cursor: not-allowed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 140px;
        height: 140px;
    }

.weekdayselected .weekdayselection {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 140px;
    height: 150px;
}

.weekdaynametext {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

.weekdaydatetext {
    font-size: 1.7em;
}

@media only screen and (max-width: 1024px) {
    .weekdayselection {
        width: 80px;
        height: 80px;
    }

        .weekdayselection.aspNetDisabled {
            width: 80px;
            height: 80px;
        }

    .weekdayselected .weekdayselection {
        width: 80px;
        height: 90px;
    }

    .weekdaynametext {
        font-size: 0.8em;
    }

    .weekdaydatetext {
        font-size: 1em;
    }
}

.collapsepanelheader {
    background-color: #FFFFFF;
    cursor: pointer;
    vertical-align: middle;
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    outline: none;
}

    .collapsepanelheader td {
        padding: 0px !important;
    }

    .collapsepanelheader img:first-child {
        float: left;
    }

    .collapsepanelheader:hover, .nestedpanelheaderstyle:hover {
        background-color: #EAEAEA;
        cursor: pointer;
        vertical-align: middle;
    }

.collapsepanelborder {
    border-bottom: 1px solid #C0C0C0;
}

.collapsepanelborder2 {
    border-bottom: 1px solid #C0C0C0;
    margin-bottom: 10px;
}

.collapsepanelbody {
    padding: 5px 20px !important;
    background-color: #FFFFFF;
    box-sizing: content-box;
}

.collapsepanelbodypadding {
    padding: 7px;
    background-color: white;
}

.treeviewarea {
    border-color: #808080 #C0C0C0 #C0C0C0 #808080;
    border-style: inset;
    border-width: thin;
    background-color: #FFFFFF;
}

.treeviewarea2 {
    border-color: #808080 #C0C0C0 #C0C0C0 #808080;
    border-style: inset;
    border-width: thin;
    background-color: #FFFFFF;
    max-height: 280px;
    overflow: auto;
}

/* Login layout elements */

.logindiv {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.logintransparent {
    float: left;
    width: 20px;
    height: 100%;
    opacity: 0.5;
}

.mainlogo {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.logincontainer {
    position: relative;
    float: left;
    width: 460px;
    height: 100%;
    background-color: white;
}

.loginmain {
    padding: 10px 70px;
    min-height: 50px;
}

.loginitem {
    margin-top: 10px;
    margin-bottom: 10px;
}

    .loginitem input {
        width: 100%;
    }

.loginfooter {
    position: absolute;
    bottom: 15px;
}

.inputfieldbig {
    height: 68px;
    padding: 6px 12px;
    font-size: 1em;
    border: 1px solid #CCCCCC;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.loginlabel {
    display: flex;
    align-items: center;
    padding: 10px;
}

.loginlink {
    color: #FFFFFF;
}

    .loginlink:hover {
        color: #FFFFFF;
    }

    .loginlink:active {
        color: #FFFFFF;
    }

@media only screen and (max-width:850px) {
    .logincontainer {
        width: 100%;
        float: none;
        margin: auto;
    }

    .loginfields {
        width: 90%;
        min-width: 230px;
        max-width: 500px;
        margin: auto;
    }
}

/* Frontpage layout elements */

.frontpageheader {
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

.frontpageheadertext {
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: 2.3em;
}

.frontpagepanel {
    height: 375px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    margin-top: 5px;
}

.frontpageshowallmessages {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.mealorderpanelimage {
    background-repeat: no-repeat;
    background-position: center;
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    background-size: auto 100%;
}

.tailoredorderpanelimage {
    background-repeat: no-repeat;
    background-position: center;
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    background-size: auto 100%;
}

.mealorderpanelshadow {
    border-top: 6px solid #981F3D;
    padding: 20px !important;
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3) !important;
    min-height: 300px;
}

.mealorderpanellabel {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
}
.doworderpanellabel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.dow-order-panel-info {
    margin: 20px;
}
.dow-order-panel-buttons {
    margin: 20px;
}
.todorderpanellabel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.tod-order-panel-info {
    margin: 20px;
}

.tod-order-panel-buttons {
    margin: 20px;
}
.mealorderpanelinfo {
    margin: 20px;
}

.mealorderpanelbuttons {
    margin: 20px;
}


.roomspanelimage {
    background-repeat: no-repeat;
    background-position: center;
    min-width: 500px;
    max-width: 500px;
    height: 100%;
    background-size: auto 100%;
}

.roomspanellabel {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
}

.roomspanelinfo {
    margin: 20px;
}

.roomspanelbuttons {
    margin: 20px;
}

.productorderpanelimage {
    background-repeat: no-repeat;
    background-position: center;
    min-width: 500px;
    max-width: 500px;
    height: 100%;
    background-size: auto 100%;
}

.orderforuserpanelimage {
    background-repeat: no-repeat;
    background-position: center;
    min-width: 500px;
    max-width: 500px;
    height: 100%;
    background-size: auto 100%;
}

.productorderpanellabel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.product-order-panel-info {
    margin: 20px;
}

.product-order-panel-buttons {
    margin: 20px;
}

.orderforuserpanellabel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.ou-order-panel-info {
    margin: 20px;
}

.ou-order-panel-buttons {
    margin: 20px;
}

.rooms-panel-info {
    margin: 20px;
}

.rooms-panel-buttons {
    margin: 20px;
}

.messagespanel {
    padding: 10px;
}

    .oubuttonfield:disabled {
        cursor: not-allowed;
    }

.oushoppingcartpopupleftalign {
    position: absolute;
    right: 0px;
    width: -moz-max-content;
    width: -webkit-max-content;
    left: inherit !important;
    max-width: 700px;
    overflow: auto;
    line-height: 22px;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    z-index: 10000;
    color: black !important;
    word-break: keep-all;
    padding: 20px;
    border: none;
    background-color: #F3F3F3 !important;
    box-shadow: 0 3px 20px 0 #AFAFAF;
}

@media only screen and (max-width:1073px) {
    .gridvieweditrow .copybutton {
        top: -2px;
    }

    .mealorderpanel {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .mealorderpanelbuttons {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        min-height: 200px;
    }

    .roomspanelimage {
        height: 150px;
    }

    .roomspanel {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .roomspanelbuttons {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        min-height: 200px;
    }

    .rooms-panel-buttons table {
        width: 50%;
        margin: 0px auto;
        float: none;
    }

    .roomspanelimage {
        height: 150px;
    }


    .productorderpanel {
        display: flex;
        flex-direction: column-reverse;
        height: auto;
    }

    .roomspanel {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .product-order-panel-buttons {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        min-height: 200px;
    }

    .rooms-panel-buttons {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        min-height: 150px;
    }

    .productorderpanelimage {
        height: 150px;
    }

    .orderforuserpanelimage {
        height: 150px;
    }

    .frontpagebutton {
        width: 335px;
    }
}

.mealorderdeliverydate {
    position: relative;
    bottom: 15px;
    font-weight: bold;
    float: left;
}

.account-settings-dropdown {
    color: #FFFFFF;
}

/* MO layout elements */

.mealordersummaryheader {
    background-color: #E1E1E1;
    padding: 10px 35px;
}

.mealordertemplatebutton {
    display: inline-block;
    margin: 2px;
}

.mealordergreyborder {
    border: 1px solid #afafaf;
    padding: 15px;
}

.mealordersummaryinfobutton {
    position: relative;
    top: 5px;
}

.newmealordercell20 {
    text-align: left;
    vertical-align: middle;
    width: 20%;
}

.newmealordercell40 {
    text-align: left;
    vertical-align: middle;
    width: 40%;
}

.collapsepanelcontent {
    background: white;
    box-sizing: border-box;
    border: 4px solid #E1E1E1;
    border-top: none;
}

.collapsepanelheaderborder {
    background-color: #E1E1E1;
    box-sizing: border-box;
    border: 4px solid #E1E1E1;
}

.newordersummarybox {
    padding: 10px;
    border: 1px solid black;
}

.dinergroupdietinfo {
    display: flex;
    align-items: center;
}

.diettext {
    display: inline-block;
    max-width: 135px;
    word-wrap: break-word;
}

.dinergrouplistview .columnspace div {
    box-sizing: border-box;
}

.columnspace .tableColumn, .detailsrow .tableColumn {
    padding: 10px;
}

.tagelement {
    background-color: #F8F8F8;
    margin-right: 5px;
    display: inline-block;
    margin-top: 1px;
    margin-bottom: 1px;
    border: 1px solid #DDDDDD;
    padding: 2px 7px 2px 7px;
    line-height: 24px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
}

.tagelement1 {
    background-color: #F8F8F8;
    margin-right: 10px;
    display: inline-block;
    margin-top: 1px;
    margin-bottom: 10px;
    border: 1px solid #DDDDDD;
    padding: 2px 7px 2px 7px;
    line-height: 24px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
}

/* PO layout elements */

.formitem {
    margin-top: 10px;
    margin-bottom: 10px;
}

.templateinfocontainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 5px;
    padding-bottom: 10px;
}

.templateinfobuttons {
    width: 155px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.templateaddproductcontainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.addfromtemplatedropdown {
    display: table-cell;
    padding: 10px 0px;
    vertical-align: bottom;
}

.addproducttitlepanel {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shoppingcartproductname {
    max-width: 300px;
}

.shoppingcartunit {
    min-width: 130px;
}

.shoppingcartprice {
    min-width: 60px;
}

.totalpricesummary {
    display: flex;
    justify-content: flex-end;
    border: 1px solid rgba(151,151,151,0.28);
    background-color: #F7F7F7;
}

    .totalpricesummary table tr {
        text-align: left;
        vertical-align: top;
    }

    .totalpricesummary table td {
        padding: 4px;
    }

    .totalpricesummary table th {
        padding: 4px;
    }

    .totalpricesummary .totalpriceseparator td {
        padding: 0px;
        border-top: 1px solid #A4A4A4;
    }

.productcatalogpagingcontainer {
    text-align: center;
}

.productcatalogpagingarea {
    display: inline-block;
    width: auto;
    margin: auto;
}

.productcatalogpagerbuttonfirst {
    border: 1px solid #BABABA;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 26px;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.productcatalogpagerbuttonlast {
    border: 1px solid #BABABA;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 26px;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.productcatalogpagerbutton {
    border: 1px solid #BABABA;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 26px;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
}

.productcatalogshowpicturesmode {
    display: inline-block;
    width: 37px;
    height: 30px;
    border: none;
    border-width: 0px;
    cursor: inherit;
}

.productcatalogshowlistmode {
    display: inline-block;
    width: 37px;
    height: 30px;
    border: none;
    border-width: 0px;
    cursor: inherit;
}

.productcataloglistmoderow {
}

.productcataloglistmoderow2 {
}

.productcataloglistmoderowseparator {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #EAECE9;
    height: 3px;
}

.productcatalogaddtocartseparator {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #EAECE9;
    padding: 0px;
    height: 5px;
    margin-top: 5px;
}

.productcatalogreadmore {
    text-decoration: none;
    border: none;
    cursor: pointer;
    outline: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
}

    .productcatalogreadmore:hover {
        text-decoration: underline;
    }

    .productcatalogreadmore:active {
        text-decoration: underline;
    }

.productcatalogselmode {
    border-width: 2px;
    border-style: solid;
}

.productcatalogunselmode {
    border-width: 2px;
    border-style: solid;
    cursor: pointer;
}

    .productcatalogunselmode:hover {
        border-width: 2px;
        border-style: solid;
        cursor: pointer;
    }

.salesitemselectall {
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .salesitemselectall a {
        font-weight: bold;
    }

        .salesitemselectall a:hover {
            text-decoration: none;
        }

.salesitemcategorycontainer {
    min-width: 140px;
    width: 15%;
    padding-right: 20px !important;
}

.salesitemcategoryhierarchy {
    background-color: #FFFFFF;
    border: solid;
    border-width: 1px;
    border-color: #F3F4F6;
    line-height: 1.8em;
    font-weight: bold;
}

    .salesitemcategoryhierarchy table {
        width: 100%;
        border: solid;
        border-width: 0px;
        border-color: #F3F4F6;
    }

    .salesitemcategoryhierarchy td {
        border-bottom: solid;
        border-top: solid;
        border-width: 1px;
        border-color: #F3F4F6;
        text-align: left;
    }

.salesitemcategoryhierarchyitem {
    background-color: #F3F4F6;
    width: 100%;
    padding: 8px !important;
    text-indent: -8px !important;
}

.salesitemcategoryhierarchyselitem {
    color: black !important;
}

.salesitemcategoryhierarchyrootnode {
    border-color: #F3F4F6 !important;
}

.salesitemcategoryhierarchyparentnode {
    background-color: #FFFFFF;
    padding: 5px !important;
    text-indent: -5px !important;
}

.salesitemcategoryhierarchyleafnode {
    background-color: #FFFFFF;
    padding: 5px !important;
    text-indent: -5px !important;
}

/* Catering elements */

.panelarea1 {
    vertical-align: middle;
    display: inline-block;
    width: 269px;
    height: 37px;
    padding-bottom: 12px;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 10px;
}

.panelarea2 {
    vertical-align: middle;
    display: inline-block;
    width: 269px;
    height: 37px;
    padding-bottom: 12px;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 10px;
}

.panelarea3 {
    vertical-align: middle;
    display: inline-block;
    width: 269px;
    height: 37px;
    padding-bottom: 12px;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 10px;
}

.roomfreetimecell {
    padding: 0px;
    background-color: #FFFFFF;
    height: 100%;
    white-space: nowrap;
}

.roomfreetimecellexample {
    padding: 0px;
    background-color: #FFFFFF;
    height: auto;
    width: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #D5D5D5;
}

.roomreservedtimecell {
    padding: 0px;
    background-color: #B9B9B9;
    height: 100%;
    white-space: nowrap;
}

.roomreservedtimecellexample {
    padding: 0px;
    background-color: #B9B9B9;
    height: auto;
    width: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #D5D5D5;
}

.roomstartreservationtimecell {
    border-left-style: solid;
    border-left-width: 2px !important;
}

.roomendreservationtimecell {
    border-right-style: solid;
    border-right-width: 2px !important;
}

.roomreservationtimecellexample {
    border-right-style: solid;
    border-right-width: 2px !important;
    border-left-style: solid;
    border-left-width: 2px !important;
    border-top-width: 0px;
    border-bottom-width: 0px;
    height: auto;
    width: auto;
}

.roomowneservationtimecell {
    padding: 0px;
    height: 100%;
    white-space: nowrap;
}

.roomowneservationtimecellexample {
    padding: 0px;
    height: auto;
    width: auto;
    border-width: 1px;
    border-style: solid;
}

.roomtimecellhourborder {
    border-left-width: 2px !important;
}

.orderwizardprevstep {
    font-size: 1.1em;
    color: #A3153D;
    font-weight: bold;
}

.orderwizardactivestep {
    font-size: 1.1em;
    color: black;
    font-weight: bold;
}

.orderwizardnextstep {
    font-size: 1.1em;
    color: #9D9F9C;
    font-weight: bold;
}

.ordersummaryheaderrow {
    background-color: #DDDDDD;
}

    .ordersummaryheaderrow th {
        vertical-align: top;
        text-align: left;
        padding: 4px;
    }

.ordersummarydeliverytimeheaderrow {
    background-color: #E5E5E5;
}

    .ordersummarydeliverytimeheaderrow th {
        vertical-align: top;
        text-align: left;
        padding: 4px;
    }

    .ordersummarydeliverytimeheaderrow td {
        line-height: 1.5em;
    }

.ordersummaryproductcode {
    font-size: 0.9em;
    color: #999999;
}

.ordersummarybox {
    padding: 8px;
    background-color: #E5E5E5;
    border-color: #DDDDDD;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
}

.ordersummarytotal {
    font-weight: bold;
    font-size: 1.2em;
}

.orderpayertext {
    font-weight: bold;
    font-style: italic;
    font-size: 1.2em;
}

.orderwizardstepactiveseparator {
    display: block;
    width: 20px;
    padding: 5px;
    margin-left: 10px;
}

.orderwizardstepinactiveseparator {
    display: block;
    width: 20px;
    padding: 5px;
    margin-left: 10px;
}

/* Form elements */

fieldset {
    margin: 0em 4px 0em 0px;
    padding: 0em 0.7em 0.7em 0.7em;
    border: 1px solid #ccc;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label {
        display: block;
    }

    fieldset label.inline {
        display: inline;
    }

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 4px 4px;
}

/* Table styles */

.table {
    display: table;
    border-collapse: collapse;
}

.tablefixed100 {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.tablerow {
    display: table-row;
}

.tablerow100 {
    display: table-row;
    width: 100%;
}

.tableContainer > div:last-child {
    border-bottom: none;
}

.tablecell {
    display: table-cell;
}

.tablecellmiddle {
    display: table-cell;
    vertical-align: middle;
}

.tablecell100 {
    display: table-cell;
    width: 100%;
}

.tableContainer > div:last-child {
    border-bottom: none;
}

.greyborderbottom {
    border-bottom: 1px solid #AFAFAF !important;
}

.tablerow .columnspace {
    background-color: #E1E1E1;
}

.boxpanel tr {
    background-color: white;
}

.defaultpagerbutton {
    display: inline-block;
    color: black !important;
    background-color: #FFFFFF;
    border: solid 1px #AFAFAF;
    padding: 5px;
    text-align: center;
    font-weight: normal;
    width: 18px;
    height: 18px;
}

.defaultpagerbuttoncurrent {
    display: inline-block;
    color: white;
    padding: 5px;
    text-align: center;
    font-weight: normal;
    width: 18px;
    height: 18px;
}

.generictablerowstyle {
    vertical-align: top;
    text-align: left;
}

table.generictablestyle, .tableContainer.generictablestyle {
    width: 100%;
}

    table.generictablestyle tr, .tableContainer.generictablestyle .tableRow {
        text-align: left;
        vertical-align: top;
    }

    table.generictablestyle td, .tableContainer.generictablestyle .tableColumn {
        padding: 4px;
        vertical-align: top;
    }

    table.generictablestyle th {
        padding: 4px;
    }

table.tablepadding td, table.tablepadding th {
    padding: 4px !important;
}

table.tablenopadding td {
    padding: 0px;
}

table.roomtablestyle {
    width: 100%;
    border-collapse: collapse;
    border-style: none;
    empty-cells: hide;
}

    table.roomtablestyle tr {
        padding: 4px;
        text-align: left;
        vertical-align: top;
        border-collapse: collapse;
        border-style: none;
    }

    table.roomtablestyle td {
        padding: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #D5D5D5;
    }

    table.roomtablestyle th {
        padding: 4px;
        background-color: #F6F6F6;
        border-color: #D5D5D5;
        border-width: 1px;
        border-style: solid;
        border-bottom-width: 2px;
    }

.firstrow {
    width: 250px !important;
}

.firstrowcontent {
    width: 225px;
    line-height: 20px;
}

.showexception {
    background-color: Highlight;
    align-content: center;
}

.tableContainer {
    width: 100%;
    display: table;
}

.tableRow {
    display: table-row;
    width: 100%;
    box-sizing: content-box;
}

.tableColumn {
    display: table-cell;
    box-sizing: content-box;
    vertical-align: middle;
}

.tableVAlign {
    vertical-align: top;
}

.vAlignTableStyle, .vAlignTableStyle td {
    vertical-align: middle;
}

.tableContainer.alignleft .tableColumn100percent, .tableContainer.alignleft .tableColumn {
    text-align: left;
    padding-left: 3px;
}

.tableColumn100percent {
    display: table-cell;
    width: 100%;
    box-sizing: content-box;
}

.table20percent {
    text-align: left;
    vertical-align: middle;
    width: 20%;
}

.table80percent {
    text-align: right;
    vertical-align: middle;
    width: 80%;
}

.tableColumn.nopaddingleft {
    padding-left: 0px !important;
}

/* Gridview */

.resultsgrid {
    margin-top: 15px;
}

.gridviewdefault {
    border-collapse: collapse;
}

    .gridviewdefault td, .gridviewdefault th,
    .gridviewdefault .tableColumn, .gridviewdefault .tableColumn {
        padding: 6px;
    }

.gridviewdefaultrow {
    color: black;
    background-color: #FFFFFF;
    border-bottom: 1px solid #AFAFAF;
}

    .gridviewdefaultrow td, .gridviewdefaultrow th {
        vertical-align: middle !important;
        min-height: 36px;
    }

        .gridviewdefaultrow td > a {
            font-weight: bold;
        }

.gridviewdefaulteditrow {
    color: black;
    background-color: #FFFFFF;
    border-bottom: 1px solid #AFAFAF;
}

    .gridviewdefaulteditrow td, .gridviewdefaulteditrow th {
        vertical-align: middle !important;
    }

.gridviewdefaultheader {
    text-align: left;
    background-color: #FFFFFF;
    color: #666666;
    font-size: 1em;
}

    .gridviewdefaultheader th, .gridviewdefaultheader .tableColumn {
        text-align: left;
        font-weight: normal;
        padding: 6px;
        border-bottom: 3px solid #DDDDDD;
        vertical-align: middle !important;
    }

    .gridviewdefaultheader a {
        color: #666666 !important;
        padding-right: 28px;
        display: inline-block;
        margin-right: 4px;
    }

    .gridviewdefaultheader input[type="image"] {
        color: black !important;
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

.gridviewdefaultgreyrow {
    background-color: #E1E1E1;
    border-bottom: 5px solid #FFFFFF;
}

    .gridviewdefaultgreyrow td, .gridviewdefaultgreyrow th {
        vertical-align: middle;
    }

.gridviewdefaultgreyeditrow {
    background-color: #E1E1E1;
    border-bottom: 5px solid #FFFFFF;
}

    .gridviewdefaultgreyeditrow td, .gridviewdefaultgreyeditrow th {
        vertical-align: middle;
    }

.gridviewdefaultgreyheader {
    text-align: left;
    background-color: #FFFFFF;
    color: #666666;
    font-size: 1em;
}

    .gridviewdefaultgreyheader th {
        text-align: left;
        font-weight: normal;
        border-bottom: none;
        padding: 6px;
        vertical-align: middle;
    }

table.gridview td, table.gridview th {
    padding: 8px;
}

.gridviewheader {
    text-align: left;
    background-color: #FFFFFF;
    color: #666666;
    font-size: 1em;
    padding: 8px;
    vertical-align: middle;
}

    .gridviewheader th {
        padding: 2px;
        text-align: left;
        line-height: 1.7;
        border-bottom-color: #DDDDDD;
        border-bottom-style: solid;
        border-bottom-width: 3px;
    }

    .gridviewheader td {
        text-align: left;
        line-height: 1.7;
    }

    .gridviewheader a {
        color: black !important;
        color: #666666 !important;
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

    .gridviewheader input[type="image"] {
        color: black !important;
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

.gridviewsortasc-header {
    background-color: #FFFFFF;
}

    .gridviewsortasc-header A {
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

    .gridviewsortasc-header input[type="image"] {
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

.gridviewsortasc-cell {
    background-color: #FFFFFF;
}

.gridviewsortdesc-header {
    background-color: #FFFFFF;
}

    .gridviewsortdesc-header A {
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

    .gridviewsortdesc-header input[type="image"] {
        padding-right: 28px;
        display: block;
        margin-right: 4px;
    }

.gridviewsortdesc-cell {
    background-color: #FFFFFF;
}

.gridviewpager {
    text-align: center;
    background-color: transparent;
    color: black;
    font-size: 1em;
    line-height: 1.4285;
}

    .gridviewpager td table, .gridviewpager td, .tablepadding .gridviewpager td, .gridview .gridviewpager td {
        padding-left: 0px !important;
        margin-left: 0px;
    }

        .gridviewpager td a {
            background-color: #FFFFFF;
            padding: 5px;
            display: block;
            text-align: center;
            color: black;
            width: 18px !important;
            height: 18px !important;
            border: solid 1px #AFAFAF;
        }

        .gridviewpager td span {
            padding: 5px;
            display: block;
            text-align: center;
            color: white;
            width: 18px !important;
            height: 18px !important;
        }

.gridviewrow {
    color: black;
    background-color: #FFFFFF;
    vertical-align: top;
    line-height: 1.4285;
    border-bottom: 1px solid #AFAFAF;
}

.mealtemplategridviewrow {
    color: black;
    background-color: #FFFFFF;
    vertical-align: top;
    line-height: 1.4285;
}

.gridviewrow td > a {
    font-weight: bold;
}

.gridviewrow2 {
    color: black;
    background-color: #FFFFFF;
    vertical-align: top;
    line-height: 1.4285;
    border-bottom: 1px solid #AFAFAF;
}

    .gridviewrow2 td > a {
        font-weight: bold;
    }

.gridviewselrow {
    color: black;
    background-color: #FFFFFF;
}

.gridvieweditrow {
    background-color: #FFFFFF;
    border-bottom: 1px solid #afafaf;
}

    .gridvieweditrow > td {
        vertical-align: middle;
    }

.mealorderfordinerrow {
    background-color: #FFFFFF;
}

.gridviewfooter {
    color: black;
    background-color: transparent;
    vertical-align: top;
    line-height: 1.4285;
}

.gridviewrowtransparent {
    color: black;
    background-color: transparent;
    vertical-align: middle;
}

.gridvieweditrowtransparent {
    color: black;
    background-color: transparent;
    vertical-align: middle;
}

    .gridvieweditrowtransparent td {
        vertical-align: middle;
    }

a.gridshowpicture, a:link.gridshowpicture, a:visited.gridshowpicture, a:hover.gridshowpicture, a:active.gridshowpicture {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: none;
    border-width: 0px;
    cursor: pointer;
}

a.gridshowinfo, a:link.gridshowinfo, a:visited.gridshowinfo, a:hover.gridshowinfo, a:active.gridshowinfo {
    display: inline-block;
    width: 23px;
    height: 24px;
    border: none;
    border-width: 0px;
    cursor: pointer;
}

a.gridshowinfotext, a:link.gridshowinfotext, a:visited.gridshowinfotext, a:hover.gridshowinfotext, a:active.gridshowinfotext {
    display: inline-block;
    background-color: transparent;
    width: 23px;
    height: 24px;
    border: none;
    border-width: 0px;
    cursor: pointer;
}

a.gridshowattachment, a:link.gridshowattachment, a:visited.gridshowattachment, a:hover.gridshowattachment, a:active.gridshowattachment {
    display: inline-block;
    width: 23px;
    height: 24px;
    border: none;
    border-width: 0px;
    cursor: pointer;
}

.gridfieldtitle {
    font-weight: bold;
}

.gridheight30left {
    height: 30px !important;
    padding: 0px !important;
    text-align: left;
}

.grideditcolumn {
    width: 75px;
    float: left;
    text-align: right;
}

/* Popups */

.infopopupcontainer {
    display: flex;
    justify-content: space-between;
}

.infopopupcontent {
    padding: 5px;
}

.popupleftalign {
    position: relative;
}

    .popupleftalign > div.popupContent {
        position: absolute;
        right: 0px;
        width: -moz-max-content;
        width: -webkit-max-content;
        left: inherit !important;
        top: 5px !important;
        max-width: 700px;
        overflow: auto;
        line-height: 22px;
        text-align: left !important;
        vertical-align: top !important;
        white-space: normal !important;
        z-index: 10000;
        color: black !important;
        word-break: keep-all;
        padding: 20px;
        border: none;
        background-color: #F3F3F3 !important;
        box-shadow: 0 3px 20px 0 #AFAFAF;
    }

    .popupleftalign.deliverytimepopupelement {
        position: relative !important;
        width: -moz-max-content;
        padding: 0px;
        width: -webkit-max-content;
        left: inherit !important;
        border: none;
        top: inherit !important;
        margin-top: 30px;
    }

_:-ms-fullscreen, :root .deliverytimepopupelement.popupleftalign > div.popupContent > div {
    display: -ms-inline-grid;
    -ms-grid-columns: max-content;
}

.popupleftalign1 {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer;
}

    .popupleftalign1 .popupcontrolbackground div table:first-of-type {
        -ms-word-break: keep-all;
        max-width: 600px;
        word-break: keep-all;
        display: inline-flex !important;
    }

    .popupleftalign1 .popupcontrolbackground span div table td {
        word-break: keep-all;
    }

    .popupleftalign1 .popupcontrolbackground span div div {
        position: relative;
        border: none;
    }

    .popupleftalign1 .popupcontrolbackground > span:first-of-type > div:first-of-type {
        position: absolute;
        border: 1px solid grey;
        padding: 5px;
        min-width: 250px;
        border-collapse: initial !important;
        top: -2px;
        max-height: 400px;
        overflow: auto;
        right: 0px;
        max-width: 600px;
        line-height: 22px;
        background-color: #FFFFFF !important;
        text-align: left !important;
        vertical-align: top !important;
        white-space: normal !important;
        z-index: 10000;
        color: black !important;
        word-break: keep-all;
        width: -moz-max-content;
        width: -webkit-max-content;
    }

_:-ms-fullscreen, :root td > div > .popupleftalign1 .popupcontrolbackground {
    top: inherit !important;
    display: -ms-inline-grid;
    -ms-grid-columns: max-content;
}

_:-ms-fullscreen, :root td > .popupleftalign1 .popupcontrolbackground {
    top: 25px !important;
    display: -ms-inline-grid;
    -ms-grid-columns: max-content;
}

.popupleftalign1 .popupcontrolbackground /*, .popupleftalign1 .popupcontrolbackground*/ {
    visibility: hidden;
    cursor: default;
    min-width: 250px;
    word-break: break-all;
    text-align: center;
    font-size: 12px;
    position: relative !important;
    z-index: 1;
    bottom: 125%;
    top: inherit !important;
    left: inherit;
    box-sizing: border-box;
    right: 0% !important;
    margin-left: -240px;
    background-color: none !important;
    border: none;
    padding: 0px !important;
}

.popupleftalign2 {
    position: relative;
}

    .popupleftalign2 > div:first-of-type {
        position: absolute;
        right: 0px;
        max-height: 400px;
        /*overflow: auto;*/
    }

    .popupleftalign2 .popupcontrolbackground {
        position: relative !important;
        width: -moz-max-content;
        width: -webkit-max-content;
        left: inherit !important;
    }

_:-ms-fullscreen, :root .popupleftalign2 .popupcontrolbackground {
    display: -ms-inline-grid;
    -ms-grid-columns: max-content;
}

/* Modal popups */

.modalbackground {
    background-color: Gray;
    opacity: .70;
    filter: alpha(opacity=70);
}

.popupbackground {
    background-color: white;
    vertical-align: top;
    text-align: left;
    display: block;
    word-break: break-word;
    width: auto;
}

div.popupheader {
    padding: 20px !important;
}

div.popupheader, .ui-widget-header {
    border: 1px solid #aaaaaa !important;
    color: #FFFFFF !important;
    padding: 0.6em;
    border-radius: 0px !important;
    text-align: left;
    vertical-align: top;
    cursor: move;
    white-space: nowrap;
}

.popupheadertext {
    font-size: 1.3em;
}

.popupbody {
    padding: 6px;
    background-color: white;
}

.roundedcorners, .popupbackground {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

/* ------------Popup right Align Fix --------- */

.popupleftalign .popupcontrolbackground2 {
    position: absolute;
    border: 1px solid grey;
    padding: 5px;
    left: 50px;
    min-width: 400px !important;
    margin-top: -2px;
    background-color: #FFFFFF !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    z-index: 10000;
    position: absolute !important;
    color: black !important;
}

.popupleftalign .popupcontrolbackground .popupcontrolbackground2 table {
    position: relative !important;
    border: none !important;
}

.popupleftalign .popupcontrolbackground .popupcontrolbackground2 {
    position: relative !important;
    border: none !important;
    left: 0px;
}

.popupleftalign .popupcontrolbackground > span:first-of-type > div:first-of-type {
    position: absolute;
    top: -2px;
    right: 0px;
    border: 1px solid #E1E1E1;
    border-collapse: initial !important;
    background-color: #FFFFFF !important;
    color: black !important;
    padding: 10px;
    min-width: 250px;
    max-width: 600px;
    width: -moz-max-content;
    width: -webkit-max-content;
    overflow-x: auto;
    line-height: 22px;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    z-index: 10000;
    word-break: keep-all;
    box-shadow: 0 3px 20px 0 #AFAFAF;
}

.mealorderdesktop .popupleftalign .popupcontrolbackground > span:first-of-type > div:first-of-type {
    max-width: 730px;
}

.whitebgcontainer {
    background-color: #FFFFFF;
    margin-bottom: 10px;
    padding: 0px 0px 0px 5px;
    box-sizing: content-box;
}

.grid100percent {
    width: 100%;
}

.boxpanel {
    width: 100%;
}

.divSpacing.nobottommargin .searchresultslabel {
    margin-bottom: 0px;
}

.popupleftalign .popupcontrolbackground div table:first-of-type {
    -ms-word-break: keep-all;
    max-width: 600px;
    overflow-x: auto;
    word-break: keep-all;
}

.popupleftalign .popupcontrolbackground span div table td, .popuprightalign1 .popupcontrolbackground span div table td {
    word-break: keep-all;
}

.popupleftalign .popupcontrolbackground span div div {
    position: relative;
    border: none;
}

.popuprightalign1 .popupcontrolbackground {
    visibility: hidden;
    min-width: 250px;
    word-break: break-all;
    text-align: center;
    border-radius: 6px;
    font-size: 12px;
    position: relative !important;
    z-index: 1;
    bottom: 125%;
    top: inherit !important;
    left: inherit !important;
    box-sizing: border-box;
    right: inherit;
    cursor: default;
    background-color: none !important;
    border: none;
    padding: 0px !important;
}

    .popuprightalign1 .popupcontrolbackground > span:first-of-type > div:first-of-type {
        position: absolute;
        border: 1px solid grey;
        padding: 5px;
        min-width: 250px;
        border-collapse: initial !important;
        border-radius: 6px;
        top: -2px;
        max-width: 600px;
        overflow-x: auto;
        line-height: 22px;
        background-color: #FFFFFF !important;
        text-align: left !important;
        vertical-align: top !important;
        white-space: normal !important;
        z-index: 10000;
        color: black !important;
        word-break: keep-all;
        width: -moz-max-content;
        width: -webkit-max-content;
    }

    .popuprightalign1 .popupcontrolbackground span div table:first-child {
        -ms-word-break: keep-all;
        max-width: 600px;
        word-break: keep-all;
        display: inline-flex !important;
    }

    .popuprightalign1 .popupcontrolbackground span div div {
        position: relative;
        border: none;
    }

/* Tab styling */

.tabscontainer {
    width: 100%;
    overflow: hidden;
    background-color: #E6E6E6;
}

.tabs {
    margin-top: 12px;
}

.whitetabstyle {
    padding: 13px 12px 12px 12px;
    margin: 0px;
    background-color: white;
    border-style: solid;
    border-color: transparent;
    border-width: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}

.tabstyle {
    padding: 13px 12px 12px 12px;
    margin: 0px;
    background-color: #E6E6E6;
    border-style: solid;
    border-color: transparent;
    border-width: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}

.selectedtabstyle {
    padding: 13px 12px 12px 12px;
    margin: 0px;
    background-color: #FFFFFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}

.tabseparatorstyle {
    padding: 1px;
    width: 2px;
    background-color: transparent;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tabbody {
    background-color: #EAEAEA;
    margin-top: 0px;
    padding: 8px;
    min-width: 100%;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tabbodywhite {
    background-color: #FFFFFF;
    margin-top: 0px;
    min-width: 100%;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.selectedtabstyle a:link, .selectedtabstyle a:visited, .selectedtabstyle a:hover, .selectedtabstyle a:active {
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.tabstyle a:link, .tabstyle a:visited, .tabstyle a:hover, .tabstyle a:active {
    color: rgba(0,0,0,0.58);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.tabbackgroundstyle.productionlistcalendergridclass {
    margin-left: -3px;
}

.tabbordersearch {
    padding: 4px;
    background-color: #fff;
}

.tabbackgroundstylesearch {
    padding: 0px 0px 0px 0px;
    background-color: #fff;
    display: inline-block;
    border-color: White White #ccc White;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tabstylesearch {
    padding: 10px 15px 10px 15px;
    margin: 0px;
    background-color: transparent;
    border-style: solid;
    border-color: transparent;
    border-width: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}

.selectedtabstylesearch {
    padding: 10px 15px 10px 15px;
    margin: 0px;
    background-color: white;
    border-color: white;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}

.tabseparatorstylesearch {
    padding: 1px;
    width: 2px;
    background-color: transparent;
    border-color: black;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tabbodysearch {
    background-color: #fff;
    margin-top: 0px;
    padding: 8px;
    border-style: solid none none none;
    border-width: 1px 1px 1px 1px;
    border-color: white black black black;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.selectedtabstylesearch a:link, .selectedtabstylesearch a:visited, .selectedtabstylesearch a:hover, .selectedtabstylesearch a:active {
    color: #111111;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    cursor: pointer;
    font-size: 14px !important;
}

.tabstylesearch a:link, .tabstylesearch a:visited, .tabstylesearch a:hover, .tabstylesearch a:active {
    color: #111111;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: 300 !important;
    cursor: pointer;
    font-size: 14px !important;
}

.tabborderbottom {
    border-bottom: 2px solid;
}

.customerinfolink {
    font-weight: bold;
    font-size: 14px;
}

    .customerinfolink:hover {
        text-decoration: none;
    }

/* Helping classes */

.height100 {
    height: 100%;
}

.infolabel {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex {
    display: flex;
}

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.displayinline {
    display: inline;
}

.verticalaligntop {
    vertical-align: top;
}

    .verticalaligntop td, .verticalaligntop .tableColumn {
        vertical-align: top;
    }

.width100overflowhidden {
    width: 100%;
    overflow: hidden;
}

.width85percent {
	width: 85%;
}

.width50percent {
	width: 50%;
}

.width40percent {
	width: 40%;
}

.width33percent {
	width: 33%;
}

.width15percent {
	width: 15%;
}

.width40pixels {
    width: 40px;
}

.width25pixels {
    width: 25px;
}

.width2pixels {
    width: 2px;
}

.width50leftalignbottom {
    width: 50%;
    text-align: left;
    vertical-align: bottom;
}

.width50alignright {
    width: 50%;
    text-align: right;
}

.width100percent {
    width: 100%;
}

.width150pixels {
    width: 150px;
}

.width250pixels {
    width: 250px;
}

.width200pixels {
    width: 200px;
}

.width100pixels {
    width: 100px;
}

.width250pixels {
    width: 250px;
}

.maxwidth225 {
    max-width: 225px;
}

.minwidth70 {
    min-width: 70px;
}

.relativepositionbottom5px {
    position: relative;
    bottom: 5px;
}

.lightgrayboldtext {
    font-size: 1em;
    color: rgba(0,0,0,0.64);
}

.boxWrapper {
    box-sizing: border-box;
    padding: 5px 10px;
    margin-top: 3px;
    margin-bottom: 2px;
    background-color: #F8F8F8;
}

.border {
    border: 1px solid #ccc;
}

.nobottomborder {
    border: none;
}

    .nobottomborder th {
        border: none;
    }

.panelSpacing {
    margin: 5px 0px 5px 0px;
}

.clear {
    clear: both;
}

.marginbottom15 {
    margin-bottom: 15px;
}

.marginbottom10 {
    margin-bottom: 10px;
}

.margintop35px {
    margin-top: 35px;
}

.margintop15 {
    margin-top: 15px;
}

.marginleft10 {
    margin-left: 10px;
}

.margintopbottom5 {
    margin: 5px 0px;
}

.nopadding {
    padding: 0px !important;
}

.paddingbottom0 {
    padding-bottom: 0px !important;
}

.paddingleft10 {
    padding-left: 10px;
}

.paddingleft5 {
    padding-left: 5px;
}

.paddingbottom15px {
    padding-bottom: 15px;
}

.padding5pixelsleftright {
    padding: 0px 5px;
}

.paddingright20 {
    padding-right: 20px;
}

.paddingbottom10 {
    padding-bottom: 10px;
}

.paddingTop {
    padding-top: 10px;
}

.paddingbottom5 {
    padding-bottom: 5px;
}

.paddingtop5 {
    padding-top: 5px;
}

.paddingTop25 {
    padding-top: 25px;
}
.paddingTop10 {
    padding-top: 10px;
}

.paddingTop50 {
    padding-top: 50px;
}

.padding10 {
    padding: 10px;
}

.padding5 {
    padding: 5px;
}

.padding8 {
    padding: 8px;
}

.paddingtopbottom10 {
    padding: 10px 0px;
}

.paddingtopbottom20 {
    padding: 20px 0px;
}

.paddingtop5side0 {
    padding: 5px 0 !important;
}

.textaligncenter {
    text-align: center;
}

.textalignright {
    text-align: right !important;
}

.textalignleft {
    text-align: left;
}

.boxsizingzero {
    margin: 0px;
    padding: 0px;
}

.borderbox {
    box-sizing: border-box !important;
}

    .borderbox .tableRow {
        box-sizing: border-box !important;
    }

    .borderbox .tableColumn {
        box-sizing: border-box !important;
    }

/* Other */

.infolabelright {
    display: flex;
    flex-direction: column;
}

infolabelrightcolumn {
    display: flex;
    flex-direction: column;
}

.tablecolumnpadding .tableColumn {
    padding: 15px 0;
}

.tablecolumnpadding > td {
    padding: 10px 0;
}

.tablecolumnmargin td {
    margin: 10px 0;
}

.sitemappatharea-links a {
    color: white !important;
}

.graybackground {
    background-color: #E1E1E1;
}
.graybackground-padding {
    background-color: #E1E1E1;
    padding:5px;
}

.clear {
    clear: both;
}

.alertdivsuccess ul {
    list-style-type: none;
    padding: 10px;
}

@media print {
    .pagebreakstyle {
        page-break-after: always;
    }

    .avoidpagebreakstyle {
        page-break-after: avoid;
    }

    .hiddeninprintmode {
        display: none;
    }
}

@media screen {
    .contexthelphiddenscreen {
        display: none;
        float: left;
    }

    .hiddeninprintmode {
        display: inline;
    }
}

.alertdivsuccess {
    color: #000000;
    font-size: larger;
    font-weight: bold;
    background-color: #D8D8D8;
    border: 1px solid #D8D8D8;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
    text-align: center;
    /*height: 90px;*/
}

/*.alertdivsuccess ul li {
        margin-top: 30px;
    }*/

.contexthelpheader {
    font-weight: 700;
    margin: 0px;
    padding: 0px;
    color: #000000;
    border: none;
    font-size: 2em;
}

.contexthelptextbody {
    font-size: 1.2em;
    color: black !important;
}

.contexthelphiddentextbody {
    display: none;
    float: left;
    color: black !important;
}

.contexthelpsubheader {
    font-size: 1.5em !important;
    font-weight: bold !important;
}

div.contexthelppopup {
    padding: 5px;
    min-height: 50px;
    min-width: 300px;
    max-height: 600px;
    max-width: 550px;
    overflow: auto;
    border-color: Black;
    background-color: #FFFFFF !important;
    visibility: hidden;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    z-index: 10000;
    position: absolute !important;
    color: black !important;
    cursor: auto !important;
}

.popupcontrolbackground {
    border: 1px groove Black;
    padding: 5px;
    background-color: #FFFFFF !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    z-index: 10000;
    position: absolute !important;
    color: black !important;
    cursor: default;
}

.popupcontrolbackground2 {
    min-height: 50px;
    min-width: 300px;
    max-height: 400px;
    max-width: 590px;
    overflow: auto;
}

.checkboxlist tr {
    vertical-align: top;
}

.linelarge {
    height: 11px;
    width: auto;
}

.headerline {
    height: 10px;
    width: 100%;
}

.fontchangebackground {
    padding: 0px 5px 5px 5px;
    text-align: left;
    margin-top: 13px;
    vertical-align: top;
}

span.dietinfo {
    display: inline-block;
    background-color: #C3C7C8;
    margin-top: 4px;
    padding: 4px;
    min-width: 16px;
    min-height: 14px;
    font-size: 1em;
    line-height: 1.1em;
    text-align: center;
}

.dietinfoseparator {
    display: inline-block;
    width: 3px;
}

.standardpagerbuttonfirst {
    border: 1px solid #BABABA;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 26px;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.standardpagerbuttonlast {
    border: 1px solid #BABABA;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 26px;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.standardpagerbutton {
    border: 1px solid #BABABA;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 26px;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
}

.standardpagingcontainer {
    text-align: center;
}

.standardpagingarea {
    display: inline-block;
    width: auto;
    margin: auto;
}

.deliverytimerootelement {
    margin-bottom: 5px;
}

.deliverytimeelement {
    background-color: #EDEFEE;
    display: inline-block;
    border-color: #DFE1E0;
    border-width: 2px;
    border-style: solid;
    margin-right: 7px;
    margin-top: 5px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
}

    .deliverytimeelement:hover {
        background-color: #EDEFEE;
        display: inline-block;
        border-color: #B5B5B5;
        border-width: 2px;
        border-style: solid;
        margin-right: 7px;
        margin-top: 5px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        -khtml-border-radius: 6px;
        border-radius: 6px;
        cursor: pointer;
    }

.deliverytimeelementselected {
    display: inline-block;
    border: none;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.deliverytimeaddnewelement {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 4px;
}

.deliverytimeelementcountarea {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2px;
    margin-right: 5px;
    padding-bottom: 3px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    font-size: 1.1em;
    min-width: 15px;
    -moz-border-radius: 40%;
    -webkit-border-radius: 40%;
    -khtml-border-radius: 40%;
    border-radius: 40%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

.deliverytimeelementcountarea2 {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2px;
    margin-right: 5px;
    padding-bottom: 3px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    font-size: 1.1em;
    min-width: 15px;
    -moz-border-radius: 40%;
    -webkit-border-radius: 40%;
    -khtml-border-radius: 40%;
    border-radius: 40%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

td.deliverytimeelementcountareaposition {
    vertical-align: middle;
    padding-left: 1px !important;
}

.deliverytimeelementdetailarea {
    vertical-align: middle;
    padding-left: 12px !important;
    line-height: 1.4em;
}

.deliverytimeelementdetailarea2 {
    vertical-align: middle;
    padding-left: 12px !important;
    line-height: 1.4em;
}

.deliverytimelementdatetime {
    font-size: 1.2em;
    font-weight: bold;
}

.deliverytimeelementarrow {
    width: 30px;
}

.deliverytimeelementarrow2 {
    width: 30px;
}

.deliverytimeelementimage {
    width: 30px;
}

.deliverytimeelementimage2 {
    width: 30px;
}

.deliverytimeelementproductrow {
}

    .deliverytimeelementproductrow td {
        vertical-align: middle;
    }

.deliverytimeelementproductrow2 {
}

    .deliverytimeelementproductrow2 td {
        vertical-align: middle;
    }

.deliverytimepopupelement {
    background-color: #F6F6F6;
    display: inline-block;
    visibility: hidden;
    padding: 20px;
    border-color: #BEBEBE;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

.orderwizardsteproundedcorners {
    border: 1px solid #E1E3E0;
    background: #F0F2EF;
    padding: 10px;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

.mainmenustyle {
    /*font-family: Arial, Helvetica, Verdana, sans-serif;*/
    font-size: 1.14em;
    color: white;
}

a.mainmenustaticmenuitemstyle {
    display: block;
    border-width: 1px;
    padding: 15px 30px 15px 30px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 1px;
}

.mainmenustyle a.static.highlighted {
    color: white;
    background-color: #333333;
    background-image: none;
}

.mainmenustyle a.static.selected {
    color: white;
    background-color: #333333;
    font-weight: bold;
    background-image: none;
}

.mainmenustyle ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

    .mainmenustyle ul li ul {
        display: none;
    }

    .mainmenustyle ul li {
        position: relative;
        float: left;
        list-style: none;
    }

.reportarea {
    background-color: white;
    display: inline-block;
}

    .reportarea input[type="text"] {
        padding: 2px 2px 2px 2px;
        border: 1px;
        margin-top: 1px;
        border-color: black;
        border-style: solid;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        -khtml-border-radius: 0px;
        border-radius: 0px;
    }

.ui-timepicker-wrapper {
    overflow-y: auto;
    height: 150px;
    width: 6.5em;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    outline: none;
    z-index: 10001;
    margin: 0;
}

    .ui-timepicker-wrapper.ui-timepicker-with-duration {
        width: 13em;
    }

        .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
        .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
            width: 11em;
        }

.ui-timepicker-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-timepicker-duration {
    margin-left: 5px;
    color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
    color: #888;
}

.ui-timepicker-list li {
    padding: 3px 0 3px 5px;
    cursor: pointer;
    white-space: nowrap;
    color: #000;
    list-style: none;
    margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
    background: #fff;
    color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
    background: #1980EC;
    color: #fff;
}

    li.ui-timepicker-selected .ui-timepicker-duration,
    .ui-timepicker-list li:hover .ui-timepicker-duration {
        color: #ccc;
    }

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    color: #888;
    cursor: default;
}

    .ui-timepicker-list li.ui-timepicker-disabled:hover,
    .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
        background: #f2f2f2;
    }

.rooms-panel-buttons table, .participantspanel {
    float: left;
}

.separator {
    font-size: 18px;
    color: #CCCCCC;
    font-weight: 100;
}

/*.container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}*/

/*.justify-content-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}*/

.tabrow {
    display: block;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    vertical-align: top;
    box-sizing: border-box;
}

.row {
    display: block;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    /*margin: 0 -5px;
  margin: 0px;*/
    align-items: center;
    box-sizing: border-box;
    /*min-height: 50px;*/
    /*justify-content: space-between;*/
}

    .row.border {
        border-width: 0;
        border-top-width: 1px;
    }


    .row > .col > .inputfield,
    .row > [class*="col-"] > .inputfield {
        width: 100%; /* is this ok with col-auto? */
    }

    .row > .col > input[type="number"],
    .row > [class*="col-"] > input[type="number"] {
        text-align: right;
    }

.error-left-top-container {
    position: relative
}

    .error-left-top-container .errorvalidator,
    .row > .col > .errorvalidator,
    .row > [class*="col-"] > .errorvalidator {
        position: absolute;
        left: 2px;
        top: -2px;
        pointer-events: none;
    }


.col {
    display: inline-block;
    -webkit-box-flex: 0;
    margin: 0px;
}

.col {
    display: block;
    -ms-flex-preferred-size: 0;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 4px;
    box-sizing: border-box;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 4px;
    box-sizing: border-box;
    /*min-height: 50px;*/
    display: inline-block;
    position: relative;
    /*display: table-cell;
  vertical-align: middle;*/
    width: 100%;
}

.col-1 {
    -ms-flex: 0 0 8.333%;
    flex: 0 0 8.333%;
    max-width: 8.333%;
}

.col-2 {
    -ms-flex: 0 0 16.666%;
    flex: 0 0 16.666%;
    max-width: 16.666%;
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.col-5 {
    -ms-flex: 0 0 41.666%;
    flex: 0 0 41.666%;
    max-width: 41.666%;
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    -ms-flex: 0 0 58.333%;
    flex: 0 0 58.333%;
    max-width: 58.333%;
}

.col-8 {
    -ms-flex: 0 0 66.667%;
    flex: 0 0 66.666%;
    max-width: 66.666%;
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    -ms-flex: 0 0 83.333%;
    flex: 0 0 83.333%;
    max-width: 83.333%;
}

.col-11 {
    -ms-flex: 0 0 91.666%;
    flex: 0 0 91.666%;
    max-width: 91.666%;
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media only screen and (min-width:1074px) {
    .d-none {
        display: none !important
    }

    .d-block {
        display: block !important
    }

    .d-table-row {
        display: table-row !important
    }
    .autocomplete-product-info {
        
        width: 450px !important;
        
    }
}

.diet-content:first-of-type {
    padding: 10px 20px;
}

.diet-content {
    padding: 10px 20px;
}

    .diet-content .comment {
        font-style: italic;
        color: #888;
        width: 100%;
        word-wrap: break-word;
    }

.diet-button-list {
    max-width: 390px;
}

    .diet-button-list input.frontpagebutton {
        margin: 20px 0px 10px 0px;
        display: block;
        width: 100%;
    }

.product-info {
    position: absolute;
    left: 0;
    top: 40px;
    width: 380px;
    max-height: 40vh;
    box-sizing: border-box;
    padding: 10px;
    overflow: auto;
    background-color: white;
    box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    border: 1px solid #ccc;
    z-index: 1000;
    display: none;
}

.container.fooddiarylist {
    background-color: white;
    /*box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
  border: 1px solid #ccc;
  border-radius: 2px;*/
}

.diet-home {
    display: table;
    width: 100%;
}

.diet-main {
    display: table-cell;
    width: 80%;
}

.diet-side {
    display: table-cell;
    width: 20%;
    min-width: 200px;
}

.diet-dropdown {
    background-color: white;
    position: absolute;
    height: auto;
    min-width: 250px;
    max-width: 500px;
    max-height: 40vh;
    overflow: auto;
    -webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    border: none;
    background-color: white;
    border: 1px solid #ccc;
}

.diet-dropdown-item {
    padding: 10px 10px;
    border: none;
    cursor: pointer;
    display: block;
    text-decoration: none;
}


    .diet-dropdown-item:hover {
        background-color: #f0f0f0;
        text-decoration: none;
    }

hr {
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 10px 0;
}

.mo-calendar {
    display: inline-block;
    background-color: #f8f8f8;
    vertical-align: top
}

    .mo-calendar > div:first-child {
        background-color: #d0d0d0;
        line-height: 30px;
        text-align: center;
    }

/* TODO make better sizes for mobile, tablet and desktop, maybe even for retina... */
@media only screen and (max-width:1073px) and (min-width: 668px) {
    .d-md-none {
        display: none !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-table-row {
        display: table-row !important
    }
}

@media only screen and (max-width:1073px) {
    .maincontentcenter {
        padding: 20px;
    }

    #LoadingLabel {
        display: none;
    }

    .mainheaderloginview {
        margin-left: 10px !important;
    }
    /* Bootstrap kind style 12 column grid system, used to make responsive layouts without any special css - not in use yet... */
    /*.row { margin: 0; } */
    /*.row input, .row select { min-height: 40px; width: 100%;  }
  .col { width: 100%; }*/
    .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

    .col-md {
        -ms-flex-preferred-size: 0;
        -ms-flex-positive: 1;
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333%;
        flex: 0 0 8.333%;
        max-width: 8.333%;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666%;
        flex: 0 0 16.666%;
        max-width: 16.666%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666%;
        flex: 0 0 41.666%;
        max-width: 41.666%;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333%;
        flex: 0 0 58.333%;
        max-width: 58.333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.667%;
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333%;
        flex: 0 0 83.333%;
        max-width: 83.333%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666%;
        flex: 0 0 91.666%;
        max-width: 91.666%;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .frontpagepanel {
        height: auto;
    }

    .roomspanelimage {
        height: 150px;
    }

    .rooms-panel-button-links {
        margin-bottom: 30px;
    }
}

.accountsettingspopup {
    left: auto !important;
    right: 0;
}

.mealorderserviceinfopopup .popupleftalign .popupcontrolbackground > span:first-of-type > div:first-of-type {
    right: -540px;
    max-width: 560px;
}


/*
.AddDietsModalPopupFixTop > div > div {
  max-width: 800px;
  max-height: 600px;
}*/
/*.AddDietsModalPopupFixTop > div > div > div {
  max-width: 900px;
}*/

.inputfieldblock > input, .inputfieldblock > textarea {
    width: 100%;
}

@media only screen and (max-width: 667px) {
    .searchbar .calendarcontainer .roomspanelimage, .popupleftalign .popupcontrolbackground2, .mealorderpanelimage, .productorderpanelimage,.orderforuserpanelimage, .tailoredorderpanelimage {
        min-width: 280px !important;
    }
    .autocomplete-product-info {
        width: 330px !important;
    }

    .mo-calendar {
        width: 48%;
    }

    .ou-noborderbottom {
        border-bottom: none !important;
    }

    .oucolumnwidth {
        text-align: right;
        width: 30%;
    }

    .container.fooddiarylist {
        margin: 0 -10px;
    }

    .MobileInlineBlockTableContainer,
    .MobileInlineBlockTableContainer > table > tbody > tr,
    .MobileInlineBlockTableContainer > table > tbody > tr > td {
        display: inline-block;
    }

    .MobileInlineBlockTable,
    .MobileInlineBlockTable > tbody > tr,
    .MobileInlineBlockTable > tbody > tr > td {
        display: inline-block;
    }

    .MobileHideTableHeaderContainer table > tbody > tr > th {
        display: none;
    }

    .MobileHideTableHeaderContainer table > tbody > tr {
        display: block;
    }

        .MobileHideTableHeaderContainer table > tbody > tr > td {
            display: inline-block;
            min-height: auto;
        }

    /*.AddDietsModalPopupFixTop > div > div {
    top: 0px !important;
  }
  .AddDietsModalPopupFixTop > div > div > div {
    margin-top: 600px !important;
  }*/

    .MobileBlockTable,
    .MobileBlockTable > tbody > tr,
    .MobileBlockTable > tbody > tr > td {
        display: block;
    }

    .mealservicefoodlistpopup .popupcontrolbackground {
        left: 10px !important;
        margin: 10px;
    }

    .SmallDateBox input:first-child {
        width: 95px;
    }

    .mainheaderloginviewitem .inputfielddropdown {
        max-width: 220px;
    }

    .accountsettingspopup {
        /*left: auto !important;
    right: 0;*/
        max-width: 320px;
    }

        .accountsettingspopup select option {
            max-width: 300px;
        }

    /*.mealorderserviceinfopopup table.gridview td {
    padding: 0px !important;
  }*/

    .mealorderserviceinfopopup .popupleftalign .popupcontrolbackground > span:first-of-type > div:first-of-type {
        position: absolute;
        right: -237px;
        max-width: 320px;
    }

        .mealorderserviceinfopopup .popupleftalign .popupcontrolbackground > span:first-of-type > div:first-of-type .tableColumn {
            width: 48%;
        }

    .mealorderpage table.gridview th {
        padding: 4px;
    }

    .mealorderpage table.gridview td {
        word-break: break-all
    }

    .maincontentcenter {
        padding: 10px;
    }

    .diet-content {
        padding: 10px;
    }

    /* Bootstrap kind style 12 column grid system, used to make responsive layouts without any special css */
    .row {
        margin: 0;
    }
        /*.row input, .row select { width: 100%;  }*/
        .row > .col-sm > .inputfield,
        .row > [class*="col-sm-"] > .inputfield {
            width: 100%; /* is this ok with col-auto? TODO */
        }


    /*[class*="col-sm-*"]*/
    .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        padding: 3px;
        box-sizing: border-box;
        width: 100%;
    }

    .col-sm {
        -ms-flex-preferred-size: 0;
        -ms-flex-positive: 1;
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333%;
        flex: 0 0 8.333%;
        max-width: 8.333%;
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666%;
        flex: 0 0 16.666%;
        max-width: 16.666%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666%;
        flex: 0 0 41.666%;
        max-width: 41.666%;
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333%;
        flex: 0 0 58.333%;
        max-width: 58.333%;
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.667%;
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333%;
        flex: 0 0 83.333%;
        max-width: 83.333%;
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666%;
        flex: 0 0 91.666%;
        max-width: 91.666%;
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .d-sm-none {
        display: none !important
    }

    .d-sm-block {
        display: block !important
    }

    .d-sm-table-row {
        display: table-row !important
    }

    /*.offset-sm-1 { margin-left: 8.333% }
  .offset-sm-2 { margin-left: 16.666% } 
  .offset-sm-3 { margin-left: 25% }
  .offset-sm-4 { margin-left: 33.333% }
  .offset-sm-5 { margin-left: 41.666% }
  .offset-sm-6 { margin-left: 50%}
  .offset-sm-7 { margin-left: 58.333% }
  .offset-sm-8 { margin-left: 66.666% }
  .offset-sm-9 { margin-left: 75%}
  .offset-sm-10 { margin-left: 83.333% }
  .offset-sm-11 { margin-left: 91.666% }*/

    .weekdaynametext {
        font-size: 1em;
    }

    #LogoBottomImage {
        max-width: 150px;
    }

    #LoadingLabel {
        display: none;
    }

    /*.inputfielddropdown {
      width: auto;
    }*/

    .mainheader {
        flex-wrap: wrap;
    }

    .mainheaderloginviewitem {
        padding-left: 0;
    }

    .mainheaderloginview {
        width: 280px;
    }

    .productorderpanelimage,
    .mealorderpanelimage {
        /* min-width: initial;*/
        /*display: none;*/
    }

    .accountloggedinuser {
        padding-left: 0;
        padding-right: 0;
    }

    .loginlabel {
        padding: 0;
    }

    .footeritem {
        display: block;
        width: auto;
        padding: 0 10px;
    }

        .footeritem.margintop35px { /* afwul class name... use inline style instead of this if it needs to be only in specific place... */
            margin-top: 10px;
        }

    .mainheaderloginview {
        margin-left: 0px !important;
    }

    .diet-home {
        display: block;
    }

    .diet-main {
        display: block;
        width: auto;
    }

    .diet-side {
        display: block;
        min-height: initial;
        width: auto;
        max-width: initial;
    }

    .product-order-panel-buttons,
    .mealorderpanelbuttons {
        margin: 20px 0;
    }

    .frontpagebutton {
        width: 280px;
        box-sizing: border-box;
    }


    /*.tabstyle, .selectedtabstyle {
      padding: 13px 5px 12px 5px;
    }*/

    .maincontent {
        min-height: calc(100vh - 233px);
    }

    .buttonfieldbig1 {
        padding: 8px 18px 8px 18px;
        display: inline-block;
        margin: 2px;
        border: 1px solid;
        font-size: 0.93em;
        font-weight: bold;
        text-decoration: none !important;
        cursor: pointer;
        box-sizing: border-box;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }

    .oushoppingcartpopupleftalign {
        width: 260px;
        position: absolute;
        top: -1px;
        padding: 10px;
        line-height: 22px;
        word-break: keep-all;
        overflow-x: inherit;
    }
}

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {

    .iePopupFix320 .popupbackground {
        min-width: 320px;
    }

    .iePopupFix320, .iePopupFix900 {
        position: inherit !important;
    }

        .iePopupFix900 .popupbackground {
            /*min-width: 900px;*/
            width: 80vw;
        }
}
.mealservicecolumnstyle {
    background-color: #E1E1E1;
    border: solid 1px white;
}

.mealserviceborderstyles {
    border-bottom: solid 1px white;
    height: 44px;
}

.mealservicebottomnstyle {
    border-bottom: 0px;
}

.oupopupleftalign {
    width: 200px;
    position: absolute;
    top: -1px;
    background-color: #FFFFFF !important;
    padding: 10px;
    min-width: 250px;
    line-height: 22px;
    word-break: keep-all;
    overflow-x: inherit;
}

.oublock {
    display: block !important;
    text-align: center;
}


/*
table.tableContainer.card {
  display: block;
}
table.tableContainer.card>tbody>tr {
  background: #fff;
  border-radius: 2px;
  height: 300px;
  position: relative;
  width: 300px;
  display: inline-block;
  margin: 10px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

table.tableContainer.card>tbody>tr:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

table.tableContainer.card>tbody>tr>td {
  display: block;
}

table.tableContainer.card>tbody>tr.gridviewheader {
  display: none;
}
*/

.OUdisplayNone {
    display: none;
}

.OUdisplayStyle {
    padding-left:1px !important;
}

.paymentwallarea {
    padding: 15px;
}

.paymentproviderarea {
    display: table;
    float: left;
    padding: 10px;
    width: 370px;
    margin: 5px;
    cursor: pointer;
    box-sizing: border-box;
}

.paymentprovidername {
    width: 100%;
    display: table-cell;
    padding: 0 20px;
    text-align: left;
    vertical-align: middle;
}

.paymentwallimage {
    display: table-cell;
    max-height: 50px;
    max-width: 150px;
}

@media only screen and (max-width: 780px) {
    .paymentproviderarea {
        width: 100%;
    }
}
.ui-created-autocomplete {
    max-height: 200px !important;
    padding-right: 20px !important;
    font-family: Arial, sans-serif !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.ui-created-autocomplete-li {
    color: #E31937 !important;
    font-size: 14px !important;
    padding-bottom: 4px !important;
}



.confirmdialog .ui-dialog-titlebar-close {
    display: none;
}

.autocomplete-product-info {
    position: absolute;
    height: 200px !important;
    max-height: 40vh;
    box-sizing: border-box !important;
    padding: 5px !important;
    overflow-y: auto !important;
    background-color: white !important;
    box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5) !important;
    border: 1px solid #ccc !important;
    z-index: 14000 !important;
    display: none;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
}