/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color: #222;
    font-family: sans-serif;
}

button:not(.btn,.btn-large) {
    background-color: #666666 !important;
    color: white !important;
    box-shadow: none !important;
    border-radius: 7px !important;
}

html {
    width: 1200px;
    height: 100%;
    margin-left: 600px;
    margin: auto;
    left: 50%;
    font-size: 14px;
    line-height: 1.4;
    background-color: #DDD;
}

body {
	background: white;
    width: 100%;
    min-height: 95%;
    padding-top: 28px;
    padding-left: 7px;
    padding-right: 7px;
    margin-left: -7px;
    box-shadow: 1px 0px 6px 4px grey;
    -moz-box-shadow: 1px 0px 6px 4px grey;
    -webkit-box-shadow: 1px 0px 6px 4px grey;
    z-index: 1;
}

.header {
    float: left;
    overflow: hidden;
    width: 90%;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/
textarea {
   resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

/* Custom Class */
.clearer {
    display: block;
    font-size: 0;
    line-height: 0;
    clear: both;
    page-break-after: always;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.center {
    text-align: center !important;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

/* Validate JQUERY */
#field { margin-left: .5em; float: left;}
#field, label { float: left; font-family: sans-serif; font-size: small; }
br { clear: both; }

.formTable input, select, textarea {
	width: 100%;
}

.formTable .formField input, select, textarea {
	width: 100%;
}

input {
    outline: 0;
    background-color: #eee;
    border-radius: 4px;
    border-width: 0 0 0;
    margin-bottom: .5em;
    padding: 4px;
}

input[disabled] {
    cursor: default;
    color: #616161;
    border: 0;
    box-shadow: 0 0 2px grey;
    -webkit-box-shadow: 0 0 2px grey;
    -moz-box-shadow: 0 0 2px grey;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
    box-sizing: border-box;
    height: 25px;
}

input[type="checkbox"][disabled] {
    box-shadow: none !important;
}

input[type="radio"] {
	width: 25px !important;
}

input[type="checkbox"] {
    margin: 0px;
	width: 25px !important;
    vertical-align: middle;
}

input[type="file"] {
    border: 0;
    width: 120px;
}

input.error { border: 1px solid red; }
label.error {
	background: url('../img/clear-icons-20px/red/400.Close.png') no-repeat;
    background-position: 0px 47%;
    padding: 4px;
	padding-left: 23px;
    float: left;
	color: red;
    font-size: 14px;
    font-style: normal;
}

input[type="checkbox"], input[type="radio"] {
    filter: invert(0%) hue-rotate(180deg) brightness(1.6);
}

select {
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-padding-start: calc(10px - 3px);
    width: 100%;
    height: 25px;
    -moz-padding-start: calc(10px - 3px);
    padding-left: 10px;
    padding-bottom: 1px;
    font-size: 14px;
    background-color: #eee;
    border-radius: 7px 7px 0 0;
    border-color: black;
    border-width: 0;
    border-bottom-width: 1px !important;
}

select:hover {
    border-bottom-width: 2px !important;
    cursor: pointer;
    padding-bottom: 0;
}

select:focus-visible {
    outline: none;
}

.ui-autocomplete-input {
    width: 97%;
}

#bankingManageTable input.error {
    border: 1px solid black;
}

#bankingManageTable .error {
    color: black;
}

#bankingManageTable input.errorNotFound {
    border: 1px solid red;
}

#bankingManageTable .errorNotFound {
    color: red;
}

#fieldsTable input.errorNotFound {
    border: 1px solid red;
}

#fieldsTable .errorNotFound {
    color: red;
}

label.valid {
	background: url('../img/clear-icons-20px/green/399.Check.png') no-repeat;
	display: block;
	padding-left: 20px;
}

.validationError {
    display: none;
    width: 100%;
    cursor:  pointer;
}

.imageUpload {
    width: 110px !important;
}

.file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: #222;
    border: 1px solid grey;
    background: #EEE;
    line-height: 23px;
    height: 24px;
    margin: 3px 3px 3px 0px;
    padding: 0px 10px 1px;
    font-size: 12px;
    cursor: pointer;

    border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 1px 1px grey;
    -webkit-box-shadow: 1px 1px grey;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.file-upload:active {
    border-color: black;
}

.file-upload input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 70px;
    opacity: 0;
    filter: alpha(opacity=0);
}

/* ------------ */

.print-button-area {
    overflow: hidden;
    height: 60px;
}

.print-button {
    position: relative;
    top: 7px;
    right: -52px;
}

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: none;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links for images, or javascript/internal links
     */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    img {
        page-break-inside: avoid;
		max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* Main Styles */
#content, #navbarPlaceholder
{
    width: 100% !important;
}

#content {
    height: auto;
    padding-top: 0px;
    padding-left: 0px;
    display: block;
}

.loadingIconArea {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
}

.loadingIconArea img {
    position: absolute;
    left: 50%;
    margin: auto;
    margin-left: -25px;
    margin-top: 30%;
}

#loginArea .loadingIconArea {
	width: 35%;
    height: 35%;
    min-height: 100%;
    position: relative;
}

#loginArea .loadingIconArea img {
	position: absolute;
    left: 50%;
    margin: auto;
    margin-left: -25px;
    margin-top: 30%;
}


a, a:visited {
    color: #0f4d9e !important;
    text-decoration: none;
}

a:hover {
    color: #034eaf;
    text-decoration: underline;
}

.fontBold {
    font-weight: bold;
}

h1 {
    margin: 0.3em 0;
}

h2 {
    font-size: 1.3em;
}

.centerText {
    text-align: center !important;
}

/* Custom Styles Datatable */

.priceText {
    float: right;
}

.vatText {
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
}

.vatText div:first-child {
    margin-left: 5px;
}

@media (max-width: 1250px) {
    .vatText {
        flex-direction: column;
    }
}

/* Custom Styles Fieldsets */

fieldset {
    border: 1px solid #DDD;
    padding: 3px;
    width: 100%;
    /*height: 100%;*/
}

fieldset legend {
    padding: 6px;
    font-weight: bold;
}

/* Custom Styles Form */
.formTable {
    border-collapse: separate !important;
    border-spacing: 8px;
    margin-bottom: 0px;
}

.formTableCell {
    min-width: 180px;
}

.formTableFormat td {
    vertical-align: top;
}

.formLabel {
    font-size: 11px;
    padding: 0px;
    margin: 0px;
}

.bolt {
    font-weight: 700;
	font-size: 105%;
}

.infoText {
    font-size: 80%;
    padding: 4px 5px;
}

.formField {
    border: 1px solid #DDD;
}

.loginlogoCell {
    width:150px;
    height:100px;
    text-align: center;
    vertical-align:middle;
    padding-top:0;
    padding-bottom:0;
}

.loginLogo {
    max-height:100%;
    max-width:250px;
}

.solidFormField {
    table-layout: fixed;

}

.formField.fieldRequired {
    background-color: #3459a1;
    color: #fff;
}

.formField .password {
    display: flex;
    flex-direction: row;
    align-items: center
}

.formField .password img {
    margin-bottom: 0.5em;
    margin-left: -25px;
}

.formFieldWidth {
    width: 100%;
}

.formFieldHalfWidth {
    width: 50%;
}

.formTextareaHeight {
    height: 65px;
}

.formAddLetterTextareaHeight {
    height: 200px;
}

.formLetterTextareaHeight {
    height: 350px;
}

.formInfoTextareaHeight {
    height: 120px;
}

.formInline {
    display: inline;
}

.tableOverflow {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.priceInput {
    background: url('../img/clear-icons-20px/black/249.Euro.png') white 98% 50%;
    background-size: 11px;
    background-repeat: no-repeat;
}

.mandatorynote{
    font-size: 11px;
    padding: 0px;
    margin: 0px;
}

.mandatorynote.requiredText {
    color: #3459a1;
}

/* ------------------------ */
/* ------------------------ */
/* Food Distribution Styles */
/* ------------------------ */
/* ------------------------ */
#foodDistribution {
    width: 100%;
}

#foodDistribution .smallFieldset {
    height: 640px;
}

#foodDistribution .bigFieldset {
    min-height: 650px;
}

#selectField {
    width: 100%;
    height: auto;
    display: inline-block;
}

#selectField .registerButtonBig {
    height: 50px;
    width: 45%;
    float: left;
    text-align: center;
    font-size: 100%;
    margin: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.registerNoSelection {
    height: 50px;
    width: 100%;
    text-align: center;
}

/* --- Beginning the order section --- */
/* distribute list */
#foodDistribution #distributeList, #distributeListBig {
    float: left;
}

#foodDistribution #distributeList fieldset {
    width: 522px;
    margin-right: 5px;
    padding: 0;
}

#foodDistribution #distributeListBig fieldset {
    width: 780px;
    margin-right: 5px;
    padding: 0;
}

/* Order List */
#foodDistribution #orderList {
    height: 350px;
    text-align: left;
    margin-left: 8px;
    margin-top: 28px;
    margin-bottom: 5px;
    padding: 5px;
    background-color: #EEE;
    border: 0px solid #DDD;
    overflow: scroll;
    overflow-x: hidden;
}

#foodDistribution .orderListNormal {
	width: 495px;
}

#foodDistribution .orderListNoArticle {
	width: 770px;
}

#foodDistribution #orderList span {
    font-size: 110%;
}

#foodDistribution #orderList .minusImg {
    margin-right: 8px;
    cursor: pointer;
    width: 11px;
}

#foodDistribution #orderList .userOrderBox {
    width: 98%;
    padding: 5px;
    margin: 0;
    float: left;
    font-size: 2em;
}

#foodDistribution #orderList .userDispendedBox {
    width: 98%;
    padding: 5px;
    margin: 0;
    float: left;
    text-align: center;
    font-size: 2em;
}

#foodDistribution .subMenuBox {
    width: 448px !important;
    padding-left: 25px !important;
}

#foodDistribution .redBox {
    border: 1px solid red;
    color: black;
    background-color: #ff8888 !important;
}

#foodDistribution .greenBox {
    border: 1px solid #5fd227;
    color: black;
    background-color: #c6ffaa;
}

.box1 {
    border: 1px solid;
    background-color: #FFF6BF !important;
    color: #514721;
    border-color: #FFD324;
}

.box2 {
    border: 1px solid;
    background-color: #ABC8E2 !important;
    color: #183152;
    border-color: #183152;
}

.box3 {
    border: 1px solid;
    background-color: #B787C8 !important;
    color: #341E65;
    border-color: #341E65;
}

.box4 {
    border: 1px solid;
    background-color: #FF8A00 !important;
    color: #000;
    border-color: #B23600;
}

.box5 {
    border: 1px solid;
    background-color: #BDDFB3 !important;
    color: #0F2925;
    border-color: #0F2925;
}

.box6 {
    border: 1px solid;
    background-color: #F577D9 !important;
    color: #000;
    border-color: #C6D880;
}

.box7 {
    border: 1px solid;
    background-color: #248730 !important;
    color: #264409;
    border-color: #C6D880;
}

.box8 {
    border: 1px solid;
    background-color: #00fffc !important;
    color: #264409;
    border-color: #C6D880;
}

.box9 {
    border: 1px solid;
    background-color: #916f1e !important;
    color: #264409;
    border-color: #C6D880;
}

.box10 {
    border: 1px solid #7f7c7c;
    color: black;
    background-color: #f0f0f0 !important;
}

/* The Style of the FoodDistribution Buttons */
/* In the bottom of the orderlist */
#foodDistribution #buttonView {
    width: 100%;
    height: 95px;
    margin-left: 8px;
    margin-bottom: 15px;
}

#foodDistribution #buttonView div {
    float: left;
    margin: 0;
}

#foodDistribution #buttonView .buttonSmall {
    height: 30px;
    min-width: 118.2px;
    font-size: 100%;
}

#foodDistribution #buttonView .buttonBig {
    height: 90px;
    min-width: 118.2px;
    font-size: 110%;
}

#foodDistribution #buttonView .buttonIfNoArticle {
    min-width: 225px;
}

#foodDistribution #buttonView button {
    padding: 0;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Data Views Amount / User */
/* In the Top of the Orderlist */
#foodDistribution .views {
    width: 100%;
}

#foodDistribution .views * {
    line-height: 1.2em;
    font-size: 110%;
    float: left;
}

#foodDistribution .views #userView {
    margin-top: 4px;
    margin-left: 10px;
    min-width: 150px;
    height: 60px;
}

#foodDistribution .views #userAmountView {
    margin-left: 20px;
    margin-top: 4px;
    min-width: 150px;
    height: 60px;
}

#foodDistribution .views #userIdentityCardView {
    margin-left: 20px;
    margin-top: 4px;
    min-width: 150px;
    height: 60px;
}

#foodDistribution .views #userIdentityCardView #userIdentityCardField {
    letter-spacing: 1px;
}

#foodDistribution #amountView {
    margin-left: 8px;
    width: 100%;
    height: 20px;
    font-size: 110%;
    float: left;
}

#foodDistribution #amountView #amountViewField {
    border-bottom: 3px double black;
}

#foodDistribution #amountView #barUserLink {
    float: right;
    margin-right: 20px;
}

/* Keydown Inputfield */
#foodDistribution #inputField {
    height: 30px;
    text-align: center;
    margin-left: 8px;
    font-size: 150%;
    letter-spacing: 4px;
    background-color: #EEE;
    border: 1px solid #DDD;
    color: #000;
}

#foodDistribution #inputFieldSort {
    height: 30px;
    text-align: center;
    margin-left: 8px;
    font-size: 150%;
    letter-spacing: 4px;
    background-color: #EEE;
    border: 1px solid #DDD;
    color: #000;
}

#foodDistribution .inputFieldNormal {
	width: 504px;
}

#foodDistribution .inputFieldNoArticle {
	width: 766px;
}

#foodDistribution .inputFieldError {
    border: 2px solid red !important;
    box-shadow: 0px 0px 3px 3px #ffa4a4;
    -moz-box-shadow: 0px 0px 3px 3px #ffa4a4;
    -webkit-box-shadow: 0px 0px 3px 3px #ffa4a4;
}
/* --- end of the order section --- */

/* List of all Daymeals and Daymenus */
#foodDistribution #menuMealListDiv {
    float: left;
}

#foodDistribution #menuMealListDiv fieldset {
    width: 938px;
    min-height: 285px;
}

#foodDistribution .specialMargin {
    margin-left: 5px;
}

#foodDistribution #menuMealListDiv .dispendedCount {
    color: red;
    float: right;
}

#foodDistribution #menuMealListDiv .menuMealDiv {
    float: left;
    color: #555;
    text-align: left;
    padding: 7px !important;
    margin: 3px;
    width: 210px;
    min-height: 100px;
}

#foodDistribution #menuMealListDiv .menuMealDiv .headline {
    height: 32px;
    margin: -4px;
    padding: 7px;
    padding-top: 2px;
    padding-bottom: 5px;
    text-align: right;
}

#foodDistribution #menuMealListDiv .menuMealDiv .topDiv {
    margin-top: -35px;
}

#foodDistribution #menuMealListDiv .menuMealDiv .title {
    margin: 0em;
    font-weight: bold;
    color: #268809;
}

#foodDistribution #menuMealListDiv .menuMealDiv .name {
    float: left;
    margin-bottom: 3px;
}

#foodDistribution #menuMealListDiv .menuMealDiv .menuMealName {
}

#foodDistribution #menuMealListDiv .menuMealDiv .mealName {
}

#foodDistribution #menuMealListDiv .menuMealDiv .weekPlanFoodDistribution {
    width: 100%;
    height: 100%;
}

#foodDistribution #menuMealListDiv .menuMealDiv .weekPlanFoodDistribution td {
    width: 100%;
    padding: 7px;
    overflow: hidden;
    margin-left: 15px;
    border: 1px solid #9a9999;
    border-left: 6px solid #9a9999;
}

/* The history of all orders */
#foodDistribution #distributeHistoryList {
    float: left;
}

#foodDistribution #distributeHistoryList fieldset {
    width: 243px;
    padding: 0;
    margin-left: 8px;
}

#foodDistribution #distributeHistoryList .specialMargin {
    margin-left: 0 !important;
}

#foodDistribution .kiosk fieldset {
    width: 521px !important;
    padding: 0 !important;
    margin-left: 0px !important;
}

#foodDistribution #distributeHistoryList #historyContent {
    overflow: scroll;
    overflow-x: hidden;
    width: 242px;
}

#foodDistribution #distributeHistoryList #historyContentKiosk {
    overflow: scroll;
    overflow-x: hidden;
    width: 520px;
}

#foodDistribution #distributeHistoryList .historyContentSmall {
    height: 550px;
}

#foodDistribution #distributeHistoryList .historyContentBig {
    height: 620px;
}

#foodDistribution #distributeHistoryList .entry {
    float: left;
    background-color: #EEE;
    margin: 2px;
    padding: 5px;
}

#foodDistribution #distributeHistoryList .entryWidth {
    width: 207px;
}

#foodDistribution #distributeHistoryList .entryWidthKiosk {
    width: 98%;
}

#foodDistribution #distributeHistoryList .head {
    float: left;
    width: 100%;
}

#foodDistribution #distributeHistoryList .head .timestamp {
    width: 13px;
    margin-bottom: -1px;
    margin-right: 4px;
}

#foodDistribution #distributeHistoryList .head .timestampKiosk {
    width: 13px;
    margin-bottom: -1px;
    margin-right: 4px;
}

#foodDistribution #distributeHistoryList .head .username {
    width: 13px;
    margin-right: 4px;
}

#foodDistribution #distributeHistoryList .head .usernameKiosk {
    width: 13px;
    margin-left: 5px;
    margin-right: 4px;
}

#foodDistribution #distributeHistoryList .head .amount .currency {
    width: 12px;
    margin-bottom: -1px;
    margin-right: 4px;
}

#foodDistribution #distributeHistoryList .head .amount .currencyKiosk {
    width: 12px;
    margin-bottom: -1px;
    margin-left: 5px;
    margin-right: 4px;
}

#foodDistribution #distributeHistoryList .time {
    width: 100%;
}

#foodDistribution #distributeHistoryList .time * {
    float: left;
    width: 90%;
}

#foodDistribution #distributeHistoryList .timeKiosk * {
    float: left;
}

#foodDistribution #distributeHistoryList .user {
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
}

#foodDistribution #distributeHistoryList .user * {
    float: left;
    width: 90%;
}

#foodDistribution #distributeHistoryList .userKiosk * {
    float: left;
}

#foodDistribution #distributeHistoryList .amount {
    width: 100%;
    margin-bottom: 4px;
}

#foodDistribution #distributeHistoryList .line {
    width: 100%;
    height: 3px;
    color: #808080;
    padding: 0;
    margin: 0;
}

#foodDistribution #distributeHistoryList .article {
    float: left;
    width: 100%;
    line-height: 1.8em;
}

#foodDistribution #distributeHistoryList .order {
    float: left;
    width: 100%;
    line-height: 1.8em;
}

/* Foodlist in FoodDistribution */
/* In the Top right */
#foodDistribution #articleList, #articleListKiosk {
    float: left;
}

#foodDistribution #articleList fieldset {
    width: 410px;
    padding: 0;
    margin-left: 5px;
    overflow: scroll;
}

#foodDistribution #articleListKiosk fieldset {
    width: 669px;
    padding: 0;
    margin-left: 0px;
    overflow: scroll;
}

#foodDistribution #articleList #articles, #articleListKiosk #articles {
    width: 100%;
    margin-left: 8px;
}

#foodDistribution #articleList #smallInfoText, #articleListKiosk #smallInfoText {
    width: 100%;
    margin-left: 8px;
}

#foodDistribution .articleListItemsSmall {
    background-color: #EEE;
    border: 1px solid #DDD;
    width: 119px;
    min-height: 50px;
    float: left;
    margin: 2px;
    padding: 3px;
    text-align: center;
    font-size: 110%;
    cursor: pointer;
}

#foodDistribution .articleListItemsBig {
    background-color: #EEE;
    border: 1px solid #DDD;
    width: 119px;
    min-height: 100px;
    float: left;
    margin: 2px;
    padding: 3px;
    text-align: center;
    font-size: 120%;
    cursor: pointer;
}

/* Custom Settings in FoodDistribution */
/* In the bottom right */
#foodDistribution #customSettings {
    float: left;
}

#foodDistribution #customSettings fieldset {
    width: 237px;
    min-height: 285px;
    margin-left: 8px;
}

#foodDistribution .formTable {
    border-collapse: separate !important;
    border-spacing: 5px;
}

/* receiptButtons Settings in FoodDistribution */
/* In the bottom right */
#foodDistribution #buttonReceiptView {
    position: relative;
    right: 0;
    float: left;
    width: auto;
    margin-left: 8px;
    margin-bottom: 15px;
}


#foodDistribution #buttonReceiptView > .smallFieldset {
    width: auto;
    height: 152px;
}

#foodDistribution #buttonReceiptView > .bigFieldset {
    width: auto;
    min-height: unset;
    height: 140px;
}

#foodDistribution #buttonReceiptView div {
    float: left;
    margin: 0;
}

#foodDistribution #buttonReceiptView .smallDiv {
    align-content: center;
    float: left;
    width: 220px;
}

#foodDistribution #buttonReceiptView .bigDiv {
    width: auto;
    margin-right: 4px;
}

#foodDistribution #buttonReceiptView .buttonSmall {
    height: 30px;
    min-width: 207px;
    font-size: 100%;
    margin: 5px;
}

#foodDistribution #buttonReceiptView .buttonBig {
    height: 90px;
    min-width: 118.2px;
    font-size: 110%;
}

#foodDistribution #buttonReceiptView button {
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* ------------------------ */
/* ------------------------ */
/*  FoodDsitribution END    */
/* ------------------------ */
/* ------------------------ */

/* Allgemein */
label {
    font-size: 14px;
    font-family: sans-serif;
}

.iconWeek {
    height: 15px;
    vertical-align: text-top;
}


.clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(204, 204, 204, 0.5);
}

#globalBackButton {
    float: right;
    width: 72px;
    letter-spacing: 1px;
    cursor: pointer;
}

/* Styles für Nummernfeld */
.numField .inputNumField {
    width: 370px;
    height: 30px;
    text-align: center;
    margin: 8px 0;
    font-size: 150%;
    letter-spacing: 4px;
    background-color: #EEE;
    border: 1px solid #DDD;
    color: #000;
}

.numField .inputFieldError {
    border: 2px solid red !important;
    box-shadow: 0px 0px 3px 3px #ffa4a4;
    -moz-box-shadow: 0px 0px 3px 3px #ffa4a4;
    -webkit-box-shadow: 0px 0px 3px 3px #ffa4a4;
}

.numField .cashFloatCheckboxDiv {
    height: 25px;
    width: 100%;
}

.numField .numFieldRow {
    width: 100%;
    height: auto;
    margin: 5px 0;
}

.numField .numFieldRow .buttonBig {
    height: 90px;
    min-width: 118.2px;
    font-size: 250%;
}

.numField .numFieldRow .twoColsButton{
    height: 90px;
    min-width: 243.4px;
    font-size: 250%;
}

.numField #exitTakeCashPopup {
    margin-top: 8px;
    width: 50%;
    height: 45px;
}

.numField .submitButton {
    text-align: center;
}

.numField .btn-large {
    font-size: 22px !important;
}

/* ENDE Styles für Nummernfeld */


.referenceDialog input[type = text] {
    width: 370px;
    height: 30px;
    margin: 8px 0;
    border: 1px solid #000;
    font-size: 150%;
}

.referenceDialog .inputFieldError {
    border: 2px solid red !important;
    box-shadow: 0px 0px 3px 3px #ffa4a4;
    -moz-box-shadow: 0px 0px 3px 3px #ffa4a4;
    -webkit-box-shadow: 0px 0px 3px 3px #ffa4a4;
}

.referenceDialog button {
    height: 90px;
    font-size: 200%;
    display: inline-block;
}

.referenceDialog .buttonRow {
    text-align: center;
}

.input-icon {
    position: relative;
}

.input-icon > i {
    position: absolute;
    display: block;
    transform: translate(0, -50%);
    top: 50%;
    pointer-events: none;
    width: 25px;
    text-align: center;
    font-style: normal;
    font-size: 150%;
}

.input-icon > input {
    padding-right: 0;
}

.input-icon-right > i {
    right: 10px;
}

.input-icon-right > input {
    padding-left: 0;
    text-align: right;
}

/* width */

.width20 {
    width: 20%;
}

.width40 {
    width: 40%;
}
.width60 {
    width: 60%;
}

.width80 {
    width: 80%;
}

.width100 {
    width: 100%;
}

/* right */

.right10 {
    right: 10%;
}

.right15 {
    right: 15%;
}

/* Custom Styles weekPlan */

#weekPlanTable {
    height: 100%;
    table-layout: fixed;
}

.weekPlan .dayMenuMealData {
    padding: 0px 15px 8px 0px !important;
}

.weekPlan .dayMealData {
    padding: 0px 15px 8px 0px !important;
}

.weekPlan .dayMenuData {
    padding: 0px 15px 8px 0px !important;
}

.weekPlan td {
    color: #555;
    text-align: left;
    padding: 0px 15px 0px 0px !important;
    background: #fff;
}

.weekPlan th {
    color: #555;
    text-align: left;
    padding: 0px 15px 0px 0px !important;
    background: #fff;
}

.weekPlan .date {
    background: #EEE !important;
    text-align: center;
}

.weekPlan .mainMenu {
    border: 1px solid #DDD;
    vertical-align: top;
    height: 100%;
    padding: 5px;
    overflow: hidden;
    position: relative;
}

#cateringWeekplanTable .dayMealData .mainMenu {
    background-color: #C6CDE1;
}

.catering .mainMenu {
    padding-top: 0px;
}

.weekPlan .paddingBottom {
    padding-bottom: 8px !important;
}

.weekPlan .tableContent {
    background: #fff;
    border: 1px solid #DDD;
    height: 100%;
    padding: 5px;
}

.weekPlan .inOrder .chooseBox {
    border: 1px solid #FFD324 !important;
    position: absolute;
}

.weekPlan .chooseBox {
    height: 25px;
    width: 30px;
    float: left;
    border: 1px solid #DDD;
    background: #EEE;
    margin: -5px;
}

.weekPlan .inOrder .numBox {
    border: 1px solid #FFD324 !important;
}

.weekPlan .numBox {
    /*height: 29px;
    width: 40px;
    float: left;
    border: 1px solid #DDD; */
    height: 25px;
    width: 38px;
    float: left;
    border: 1px solid #DDD;
    background: #EEE;
    margin: -5px;
}

.weekPlan .numfield {
    width: 50px;
    margin: 2px;
    border: 1px solid #DDD;
}

.timeLimit {
    text-align: center !important;
}

.timeLimitDropdown {
    width: auto;
}

#order_menuFormButton {
    float: right;
}

.weekPlan .headline {
    height: 32px;
    margin: -6px;
    padding: 5px;
    padding-top: 2px;
    padding-bottom: 5px;
}

.weekPlan .menuChoosebox {
    margin: 6px;
}

.weekPlan .subMenu {
    border: 1px solid #DDD;
    border-left: 15px solid #DDD !important;
    vertical-align: top;
    height: 100%;
    padding: 5px;
    overflow: hidden;
    position: relative;
}

.weekPlan .bottomDock {
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    width: 95%;
}

.weekPlan .noFoodBox {
    margin-bottom: -21px;
    padding-bottom: 5px;
}

.weekPlan .noFood {
    margin-left: 25px;
}

.weekPlan .noFoodSmallMargin {
    margin-left: 10px;
}

.weekPlan .subMenuChoosebox {
    margin: 6px;
}

.weekPlan .mealChoosebox {
    margin: 6px;
}

.weekPlan li {
    border: 1px solid black;
}

.weekPlan .discounted {
    color: #900;
}

.weekPlan .inOrder {
    background-color: #FFF6BF !important;
    border-color: #FFD324 !important;
}

.weekPlan .menuTitle {
    margin: 0em;
    font-weight: bold;
    color: #268809;
}

.weekPlan .menuName {
    margin: 0em;
    float: left;
}

.weekPlan .menuPrice {
    float: right;
    position: relative;
}

.weekPlan .menuDiscountPrice {
    float: right;
    position: relative;
}

.weekPlan .menuVat {
    float: right;
    position: relative;
}

.weekPlan .mealTitle {
    margin: 0em;
    font-weight: bold;
    color: #268809;
}

.weekPlan .mealName {
    margin: 0em;
    float: left;
}

.weekPlan .mealPrice {
    float: right;
    position: relative;
}

.weekPlan .mealDiscountPrice {
    float: right;
    position: relative;
}

.weekPlan .mealVat {
    float: right;
    position: relative;
}

.weekPlan .menuMealTitle {
    margin: 0em;
    font-weight: bold;
    color: #268809;
}

.weekPlan .menuMealName {
    margin: 0em;
    float: left;
}

.weekPlan .menuMealPrice {
    float: right;
    position: relative;
}

.weekPlan .menuMealDiscountPrice {
    float: right;
    position: relative;
}

.weekPlan .menuMealVat {
    float: right;
    position: relative;
}

.weekPlan .weekPlanIcon {
    float: right;
    margin-bottom: 0.5em;
}

.weekPlan#scrollcontainer {
    height: calc(100vh - 145px);
    overflow-y: scroll;
}
.weekPlan#scrollcontainer #weekPlanTable {
    margin-bottom: 0px;
    height: unset;
}

#feedbackDialog {
    display: none;
    text-align: center;
}

#feedbackTable {
    width: 100%;
    table-layout: fixed;
}

#feedbackTable td {
    text-align: center;
    background-color: white;
}

.weekNavigation {
    padding: 5px 10px 5px 10px;
}

.weekNavigation#staticLink {
    padding-left: 0px;
}

.buttonInLineTopic {
    vertical-align: text-top;
    margin-right: 5px;
}

.weekPlanAddButton {
    width: 100%;
}

.weekPlan .buttonDiv {
    padding-bottom: 2px;
}

.weekPlanSmallHead {
    font-size: 12px;
    text-align: center !important;
}

.weekPlan input[type="radio"] {
	width: auto !important;
}

.weekPlan input[type="checkbox"] {
	width: auto !important;
}

.weekPlanImage {
    width: calc(100% + 10px);
    height: auto;
    margin-left: -5px;
    margin-top: -9px;
}

.weekPlanImageCatering {
    width: calc(100% + 10px);
    height: auto;
    margin-left: -5px;
}

.weekPlanSoldOut {
    background-color: #ff8888 !important;
    border-color: red !important;
}

.weekPlan .userCommentContainer {
    width: 100%;
    float: left;
}

.weekPlan .userCommentTextfield {
    max-width: 96%;
    resize: none;
}

.weekPlan .userCommentLabel {
    padding-top: 5px;
    font-weight: bold;
}

/*weekplan additives*/
.additiveContainer {
    float: right;
    padding: 2px 2px 5px 2px;
    border:  1px solid transparent;
    color: #3459a1;
}

.additiveContainer:hover {
    border:  1px solid #3459a1;
}

/* weekplan special time-limits */
.specialLimitsIconContainer {
    float: left;
    padding: 2px 2px 5px 2px;
    border:  1px solid transparent;

}

.specialLimitsIconContainer:hover {
    border:  1px solid black;
}

/* feedback */
.fillFeedback {
    padding: 0 2px 5px 2px;
}

.mobileLayout .fillFeedback {
    float: left;
    padding: 0 2px 5px 2px;
}

/*weekplan Rating Bar*/
.rating_bar {
  width: 75px;
  background: url(../img/clear-icons-20px/black/150.Favorite.png) 0 0 repeat-x;
  float: right;
  background-size: 15px 14px;
  padding-bottom: 5px;
  margin-top: 3px;
}

.rating_bar div {
  height: 14px;
  background: url(../img/clear-icons-20px/black/506.FavoriteFilled.png) 0 0 repeat-x;
  background-size: 15px 14px;
}

.rating_bar_grey {
  width: 75px;
  height: 14px;
  background: url(../img/clear-icons-20px/grey/150.Favorite.png) 0 0 repeat-x;
  float: right;
  background-size: 15px 14px;
  padding-bottom: 5px;
  margin-top: 3px;
}

.rating_bar_grey div {
  height: 14px;
  background: url(../img/clear-icons-20px/grey/506.FavoriteFilled.png) 0 0 repeat-x;
  background-size: 15px 14px;
}

.menuIcon {
    height: 15px;
    width: 15px;
}

.menuOrderNmb {
    position: relative;
    top: 5px;
    left: 8px;
    font-weight: bold;
    color: #0EBA01;
}

.menuOrderNmbDispended {
    position: relative;
    top: 5px;
    left: 8px;
    font-weight: bold;
    color: #FFD324;
}

.feedbackIcon {
    height: 16px;
    width:  auto;
    cursor: pointer;
}

/* Custom Styles Catering Feedbackview */
.showFeedback .feedbackContainer {
    padding: 0px;
    border: 1px solid #DDD;
    margin-bottom: 20px;
}

.showFeedback .feedbackHeader
{
    margin: 0px;
    background: #EEE;
    border-bottom: 1px solid #DDD;
    padding: 5px;
}

.showFeedback .commentArea
{
    padding: 5px;
}


/* Custom Styles Catering */
#cateringWeekplanTable {
    height: 100%;
    table-layout: fixed;
}

.catering .leftBar {
    float: left;
    font-weight: bold;
    padding-top: 2px;
}

.catering .boxCenter {
    padding-left: 35px;
}

.catering .footBar {
    margin-top: 5px;
    padding-left: 35px;
}

.catering .limit {
    font-style: oblique;
}

.catering .headline {
    height: 20px;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
    padding-right: 0px;
}

.catering .discounted {
    font-style: oblique;
}

.catering .menuName {
    float: none;
    margin-bottom: 4px;
}

.catering .mealName {
    float:  none;
    margin-bottom: 4px;
}

.catering .innerShadow {
    box-shadow: inset 35px 0px 0px #EEE;
}

.catering .menuMealName {
    float: none;
    margin-bottom: 4px;
}

.catering .releaseText {
    font-weight: bold;
    color: #900;
    font-size: 14px;
}

#dayMenuFormContainer {
    width: 650px;
    margin-top: 60px;
}

#menuListContainer {
    width: 500px;
    float: right;
}
#yearInput {
    width: 40px;
}

#cwInput {
    width: 25px;
}

.releaseDayButton {
    width: 100%;
}

/* Catering Add Menu and Meal Dialog */

#editMenuSubmit {
    float: right;
}

#submitDayMenuMeal {
    float: right;
}

#editMealSubmit {
    float: right;
}

#submitAddMenu {
    float: right;
}

#submitDayMenuMeal {
    float: right;
}

#submitDayMeal {
    float: right;
}

#submitEditMenu {
    float: right;
}

.limitsContainer {
    min-width: 300px;
    float: left;
    margin-top: 5px;
}

.limitsContainerMargin {
    margin-left: 10px;
}

.limitsLabel {
    color: #555;
}

/* Custom Styles for collective Order Edit */

.collectiveOrderFoodDiv {
    width: 150px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
}

/* Custom Styles for JQuery Multiselect */

.ui-multiselect {
	max-width: 280px !important;
}

.ui-multiselect-close {
    display: none;
}

/* Protocols Userarea */

#dateFormTable {
    border: 1px solid #DDD;
    background-color: #F6F6F6;
}

/* My Pass Userarea */

.actualFieldLabel {
    margin-bottom: 7px;
    margin-top: 0px;
}

/* My Account Userarea */
.repaymentContainer {
    margin-left: 10px;
}

.repaymentInput {
    width: 220px;
}

/* Edit Rights Popup ( Employee Styles ) */
.rightChangeIconPopup {
    float: right;
    /*padding-right: 15px;*/
    cursor: pointer;
    width: 14px;
    height:  14px;
}

#editRightsPopup fieldset{
    float: left;
    min-width: 200px;
    width: 200px;
    height: 100%;
}

#editRightsPopup div #top {
    padding: 20px;
    width: 600px;
    height: 200px;
}

#editRightsPopup div #top, #bottom, #middle div{
    padding: 20px;
}

#editRightsPopup div #bottom, #middle {
    padding: 20px;
    width: 600px;
    height: 100px;
}

/* General ( Employee Styles ) */
.rightChangeIcon {
    cursor: pointer;
    height: 14px;
    width: 14px;
    vertical-align: middle;
}

#nonClickable {
    cursor: default !important;
}

.headerIconWidth{
    width:  0.1%;
}

.normalHeaderCol {
    vertical-align: bottom;
    padding: 0px 0px;
    color: #555;
    background-color: #EEE !important;
    border: 1px solid #DDD;
}

.rotateHeaderFormat {
    vertical-align: middle;
    padding: 0px 0px;
    color: #555;
    background-color: #EEE !important;
    border: 1px solid #DDD;
}

.rotateHeaderCol
{
    margin: 60px auto 5px;
    color: #555;
    max-width: 20px; /*30px*/
    vertical-align: middle;
    padding: 0px 0px;
    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#employeeCounterText {
}

/* Custom Styles User Create */
#user_createForm .inputMenuNmb {
    width: 100%;
}

/* Custom Styles User Edit */
#user_editForm .inputMenuNumb {
    width: 100%;
}

#userPermanentDiscountArea {
    width: 520px;
    height: auto;
}

#userPermanentDiscountArea .dataTables_wrapper {
    margin: 0px;
    margin-top: 10px;
}

#userPermanentDiscountArea #permanentDiscountTable {
    width: 101% !important;
}

#permanentUserArea {
    width: 630px;
    height: auto;
}

#permanentUserArea .dataTables_wrapper {
    margin-top: 10px;
}

#permanentUserArea #permanentUserTable {
    width: 101% !important;
}

/* Admin Home */
.ulAdminHome {
    color: black;
    font-weight: normal;
}

.ulAdminHome li {
    color: black;
    font-weight: normal;
    list-style-type: disc;
    margin-left: 25px;
}

/* Messages */
.messageBox {
    margin-top: 13px;
    border: 3px solid #ffd324;
    height: auto;
    padding: 5px;
    padding-left: 15px;
    padding-bottom: 15px;
}

.messageBox #subject {
    text-decoration: underline;
    font-size: 16px;
}

.messageBox #dateTime {
    font-size: 14px;
}

.messageBox .clockIcon {
    width: 14px;
}

/* system template */

.systemTemplatesHeaderContainer {
    padding: 0 8px;
}

.systemTemplatesDropdownContainer {
    display: flex;
}

.systemTemplatesAddDropdownContainer {
    padding: 0 8px;
    margin: 20px 0;
}

.systemTemplatesAddWelcomeLetterButton {
    margin: 0 0 0 20px;
}

.systemTemplatesNoticeMessage, .welcomeLetterSelection {
    margin-bottom: 20px !important;
}

.systemTemplatesInfoIcon {
    float: left;
    margin-right: 10px
}

.systemTemplatesTextMargin {
    margin: 0 8px;
}

/* Message Area - Area for iInfomessages, errormessages and successmessages */
.messageTable {
    margin-bottom: 0px;
}

.noticeMessage {
    background-color: #FFF6BF;
    color: #514721;
    width: auto;
    padding: 5px;
    border: 1px solid #FFD324;
    margin-bottom: 3px;
}

.noticeMessage img {
    vertical-align: middle;
}

.errorMessage {
    background: #FBE3E4;
    color: #8A1F11;
    width: auto;
    padding: 5px;
    border: 1px solid #FBC2C4;
    margin-bottom: 3px;
}

.errorMessage img {
    vertical-align: middle;
}

.successMessage {
    background-color: #E6EFC2;
    color: #264409;
    width: auto;
    padding: 5px;
    border: 1px solid #C6D880;
    margin-bottom: 3px;
}

.successMessage img {
    vertical-align: middle;
}

.instructionMessage {
    background-color: #EEE;
    color: #555;
    width: auto;
    padding: 5px;
    border: 1px solid #DDD;
    margin-bottom: 3px;
}

.infoIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -33px -87px;
    width: 22px;
    height: 22px;
}

.checkIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -4px -87px;
    width: 22px;
    height: 22px;
}

.warningIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -64px -87px;
    width: 22px;
    height: 22px;
}

.closeIcon {
    float: right;
    cursor: pointer;
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -347px -33px;
    width: 15px;
    height: auto;
}

.trashIcon {
    float: left;
    cursor: pointer;
    background: url('../img/clear-icons-20px/red/064.Trash.png') no-repeat 50% 48%;
    background-size: 15px;
    width: 15px;
    height: auto;
    margin-left: 6px;
}

.editIcon {
    float: left;
    cursor: pointer;
    background: url('../img/clear-icons-20px/black/033.Edit.png') no-repeat 50% 48%;
    background-size: 15px;
    width: 15px;
    height: auto;
    margin-left: 6px;
}


/* Custom Messagestyles by Tim */

.error {
	/*padding-left: 30px;*/
	color: red;
	font-style: italic;
}

.success {
	padding-left: 30px;
	color: green;
	font-style: italic;
}

/*Message PopUp*/
.jalert {
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 2px #FFD324;
    color: #514721;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.jalert #popup_title {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #514721;
	background: #FFF6BF;
	border: solid 0px #FFD324;
	border-bottom: solid 1px #FFD324;
	cursor: default;
	padding: 0em;
	margin: 0em;
}

.jerror {
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 2px #FBC2C4;
    color: #8A1F11;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.jerror #popup_title{
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #8A1F11;
	background: #FBE3E4;
	border: solid 0px #FBC2C4;
	border-bottom: solid 1px #FBC2C4;
	cursor: default;
	padding: 0em;
	margin: 0em;
}

.jconfirm {
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 2px #FFD324;
    color: #514721;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.jconfirm #popup_title {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #514721;
	background: #FFF6BF;
	border: solid 0px #FFD324;
	border-bottom: solid 1px #FFD324;
	cursor: default;
	padding: 0em;
	margin: 0em;
}

.jsuccess {
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 2px #C6D880;
    color: #264409;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.jsuccess #popup_title {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #264409;
	background: #E6EFC2;
	border: solid 0px #FFD324;
	border-bottom: solid 1px #C6D880;
	cursor: default;
	padding: 0em;
	margin: 0em;
}


#popup_content {
	background: 16px 16px no-repeat url(images/info.gif);
	padding: 1em 1.75em;
	margin: 0em;
}

.jalert #popup_content {
	background-image: url(../img/clear-icons-20px/black/102.Info.png);
}

.jsuccess #popup_content {
	background-image: url(../img/clear-icons-20px/black/399.Check.png);
}

.jconfirm #popup_content {
	background-image: url(../img/clear-icons-20px/black/102.Info.png);
}

.jerror #popup_content {
	background-image: url(../img/clear-icons-20px/black/103.Warning.png);
     color: #8A1F11;
}

.jprompt #popup_content {
	background-image: url(images/help.gif);
}

#popup_message {
	padding-left: 20px;
}

#popup_panel {
	text-align: center;
	margin: 1em 0em 0em 1em;
}

#popup_prompt {
	margin: .5em 0em;
}

h1 #popup_title {
    margin-top:0em;
}

/* -- -- --- -- -- -- -- --- -- -- -- -- -- -- */

/* Login Sites */
.loginFieldset {
    width: 400px;
}

/* Buttonstyles */
button {
    display: inline-block;
    text-decoration: none;
    font-size: 12px;
    line-height: 23px;
    height: 24px;
    margin: 3px 3px 3px 0px;
    padding: 0 10px 1px;
    cursor: pointer;
    background-color: #EEE;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-shadow: 1px 1px grey;
    -webkit-box-shadow: 1px 1px grey;
    -moz-box-shadow: 1px 1px grey;
}

button.highlighted {
    background-color: #f3989b;
}

button[disabled] {
    cursor: default;
    color: #868686;
    box-shadow: 0;
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
}

.iconFix {
    display: inline-block;
    padding: 0 10px 1px 3px;
    height: 13px;
    vertical-align: middle;
    margin-bottom: 4px;
}

.iconHelp {
    height: 15px;
    width:  15px;
    vertical-align: text-top;
}

.iconSpace {
    margin-right: 5px;
}

.iconAlignRight {
    float: right;
}

.iconButton {
    height: 13px;
    vertical-align: text-top;
}

/* Icon Styles */

.icon {
    width: 20px;
}

.iconDelete  {
    width: 18px !important;
}

.iconRefresh {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-filter: "FlipH";
    transform: scaleX(-1);
}

.ui-icon {
    vertical-align: text-top;
}

.ui-icon-trash {
    background: url('../img/clear-icons-20px/red/064.Trash.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-plus {
    background: url('../img/clear-icons-20px/green/397.Add.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-add {
    background: url('../img/clear-icons-20px/green/397.Add.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-edit {
    background: url('../img/clear-icons-20px/black/033.Edit.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-delete {
    background: url('../img/clear-icons-20px/red/064.Trash.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-deleteArticle {
    background: url('../img/clear-icons-20px/red/404.Close.png') no-repeat 50% 50%;
    background-size: 10px;
}

.ui-icon-search {
    background: url('../img/clear-icons-20px/black/394.Search.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-closethick {
    background: url('../img/clear-icons-20px/black/400.Close.png') no-repeat 50% 50%;
    background-size: 15px;
}

.ui-icon-barcode {
    background: url('../img/clear-icons-20px/black/241.Barcode.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-unlock {
    background: url('../img/clear-icons-20px/green/505.UnlockUser.png') no-repeat 50% 50%;
    background-size: 13px;
}

.ui-icon-empty {
    background-size: 0px;
    margin-right: -13px;
}

.ui-button-text {
    margin-left:  15px;
}

#btnAddNewRowOk .ui-button-text{
    margin-left:  0px !important;
}

#btnAddNewRowCancel .ui-button-text{
    margin-left:  0px !important;
}

.systemOptionsIcon {
    height: 19px;
    width: 19px;
}

/* CustomStyles ui-Dialog */
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0px;
	outline: 0;
    background-color: white;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
    font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 21px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;

    background-color: transparent;
    border-width: 0px;
    border-style: solid;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0px 0px transparent;
    -webkit-box-shadow: 0px 0px transparent;
    -moz-box-shadow: 0px 0px transparent;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
    background-color: white;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
    border-top: 0px;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
    background-color: white
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
    background-color: #EEE;
    border-bottom: 1px solid #DDD;
    text-align: center;
}

.ui-widget-content {
	border: 4px solid #DDD;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}


/* Custom Styles Calendar */


.ui-datepicker {
	width: 17em;
	padding: 0 0 0 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
    border-bottom: 1px solid #DDD;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	/*top: 1px;*/
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
    background: url('../img/clear-icons-20px/black/493.Back.png') no-repeat 50% 50%;
    background-size: 15px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
    background: url('../img/clear-icons-20px/black/494.Forward.png') no-repeat 50% 50%;
    background-size: 15px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
    font-weight: bold;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
    border-bottom: 1px solid #DDD;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
    background-color: #EEE;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* Custom Styles Dropdown */

.ui-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.ui-dropdown ul {
    position: absolute;
    top: 100%;
    right: -10px;
    background-color: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    list-style-type: none;
    display: none;
    z-index: 999;
    margin: 0;
    padding: 0;
}

.ui-dropdown .show {
    display: block;
}

.ui-dropdown ul li {
    text-align: left;
    padding: 4px 10px;
    color: #0D47A1;
    cursor: pointer;
}

.ui-dropdown ul li:hover {
    background-color: #0D47A1;
    color: white;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

.ui-widget-content {
	border: 4px solid #DDD;
	background: #FFF;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	/*border: 1px solid #d3d3d3;*/
	background: #EEE;
	font-weight: normal;
	/*color: #555555;*/
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	/*border: 1px solid #999999;*/
	/*background: #EEE;*/
	font-weight: normal;
	/*color: #212121;*/
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	/*color: #212121;*/
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa;
	background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
	font-weight: normal;
	color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121;
	text-decoration: none;
}

          /* ui-Diolog Table */
.iconCellwidth{
    width: 14px;
}

/* SystemTable Style */

.systemTable{
    margin-top: 5px;
    border: 1px solid #EEE;
    width: 100%;
    float: left;
}

.systemTable th {
    background: #EEE;
    border: 1px solid #E6E6E6;
    color: #555;
    text-align: left;
}

.systemTable tr:nth-child(1n+1) {
    background-color: #F6F6F6;
    border: 1px solid #E6E6E6;
}
.systemTable tr:nth-child(2n+2) {
    background-color: #FCFCFC;
    border: 1px solid #E6E6E6;
}

.systemTable td {
    border: 1px solid #E6E6E6;
    position: relative;
}

systemTable thead{
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border: 1px solid #E6E6E6;
}

.systemTable input{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px;
}

.systemTable textarea{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px;
}

.systemTable select{
	width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.systemTable .icons {
    height: 14px;
    width: 14px;
    vertical-align: middle;
    left: 50%;
    margin-left: -7px;
    top: 6px;
    position: absolute;
}

.systemTable .descriptionCell {
    width: 63.5%;
}

/* System Discountgroup Styles */

.systemDiscountGroup {
    border: 1px solid #DDD;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 15px;
}

.systemDiscountGroupHead {
    border-bottom:  1px solid #DDD;
    background-color: #EEE;
    margin: -5px;
    padding: 5px;
}

.systemDiscountGroupName {
    font-weight: bold;
}

.systemDiscountGroup .discountFoodName {
    width: 100px;
}

.systemDiscountGroup .discountType {
    width: 600px;
}

.systemDiscountGroup .editColumn {
    width: 70px;
}

.systemDiscountedIcon {
    float: right;
}

/* User FAQ Styles*/

.userFaq {
    border: 1px solid #DDD;
}

.userQuestion {
    border-bottom: 1px solid #DDD;
    padding: 5px;
    background-color: #EEE;
}

.userAnswer {
    padding: 5px;
}

    /* System FAQ Styles */
.systemFaq table{
    width: 100%;
}

.systemFaq textarea{
    width: 100%;
    padding-left: 24px;
}

.systemFaq input{
    width:  100%;
    padding: 2px
}
.systemFaq textarea{
    width: 100%;
    padding: 2px;
}

.systemFaq .locked {
   color: red;
   font-style: italic;
}

.systemFaq .systemFaqContainer {
    border: 1px solid #DDD;
    margin-bottom: 10px;
}

.systemFaq .systemQuestion {
    border-bottom: 1px solid #DDD;
    padding: 5px;
    background-color: #EEE;
    overflow: hidden;
}

.systemFaq .systemAnswer {
    padding: 5px;
}

.systemFaq .systemFaqIcon {
    float: right;
}

/* system styles */

.templateFileUpload {
    width: 100% !important;
}

/* Tables TEST altes system */
table {margin-bottom: 8px;}
thead td, th {font-weight: bold;}
thead th {background: #C3D9FF;}
th,td,caption {padding: 4px 10px 4px 5px;}
tr.odd td {background: #F2F6FA;}
tfoot {font-style: italic;}
caption { background: #EEE; }

thead.userHead th {
    background: #EEE;
}

/* Datatable Styles */
.dataTables_wrapper {
    height: 20px;
    margin-top: 25px;
}

.dataTables_info {
    margin-bottom: 30px;
}

table.dataTable {
	border: 1px solid #EEE;
	width: 100%;
    float: left;
}

table.dataTable th {
    background:  #EEE;
    border: 1px solid #DDD;
    color: #555;
    text-align: left;
}

/* rightsTable */

.thCenter {
    text-align: center !important;
    white-space: nowrap;
}

.action-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

table.dataTable tr {border-bottom: 1px solid #EEE;}
table.dataTable td, table th {padding: 6px 10px;}
table.dataTable td {
    background: #F6F6F6;
    border: 1px solid #E6E6E6;
}

table.dataTable tr.odd td, td.sorting_1, td.read_only {background: #FCFCFC;}

table.dataTable tr.selected td { background: #f9fedf !important; }

table.dataTable a { text-decoration:underline; }
table.dataTable a:hover { text-decoration:none; }

.dataTables_length label select {
	width: auto !important;
}

table.dataTable .sorting {
    cursor: pointer;
}

table.dataTable .sorting_desc {
    cursor: pointer;
    background: url('../img/clear-icons-20px/grey/486.Down.png') no-repeat;
    background-size: 10px;
    background-position: 95% 3px;
    -moz-box-shadow: 0px -4px 3px -2px grey;
    -webkit-box-shadow: 0px -4px 3px -2px grey;
    box-shadow: 0px -4px 3px -2px grey;
}

table.dataTable .sorting_asc {
    cursor: pointer;
    background: url('../img/clear-icons-20px/grey/485.Up.png') no-repeat;
    background-size: 10px;
    background-position: 95% 3px;
    -moz-box-shadow: 0px -4px 3px -2px grey;
    -webkit-box-shadow: 0px -4px 3px -2px grey;
    box-shadow: 0px -4px 3px -2px grey;
}

table.checkliste {
	margin-bottom: 0;
}

p.checklistefuss {
	padding-left: 10px;
	margin-top:0;
}

table.klein-table td {
	padding: 4px 4px;
}


/* Custom Styles dataTable*/

.dataTables_filter {
	float: right;
	text-align: right;
}

.dataTables_info {
	float: left;
    display: inline !important;
}

.dataTables_paginate {
	float: right;
	text-align: right;
    display: inline !important
}

/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous,
.paginate_disabled_next, .paginate_enabled_next {
	/*height: 19px;*/
	float: left;
	cursor: pointer;
	color: #111 !important;
}
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
.paginate_disabled_next:hover, .paginate_enabled_next:hover {
	text-decoration: none !important;
}
.paginate_disabled_previous:active, .paginate_enabled_previous:active,
.paginate_disabled_next:active, .paginate_enabled_next:active {
	outline: none;
}

.paginate_disabled_previous,
.paginate_disabled_next {
	color: #CCC !important;
}
.paginate_disabled_previous, .paginate_enabled_previous {
	padding-left: 18px;
}
.paginate_disabled_next, .paginate_enabled_next {
	padding-right: 18px;
	margin-left: 8px;
}

.paginate_disabled_previous {
	background: url('../../../../../img/clear-icons-20px/grey/493.Back.png') no-repeat center left;
    background-size: 13px;
}

.paginate_enabled_previous {
	background: url('../../../../../img/clear-icons-20px/black/493.Back.png') no-repeat center left;
    background-size: 13px;
}
.paginate_enabled_previous:hover {
	background: url('../../../../../img/clear-icons-20px/black/493.Back.png') no-repeat center left;
    background-size: 13px;
}

.paginate_disabled_next {
	background: url('../../../../../img//clear-icons-20px/grey/494.Forward.png') no-repeat center right;
    background-size: 13px;
}

.paginate_enabled_next {
	background: url('../../../../../img/clear-icons-20px/black/494.Forward.png') no-repeat center right;
    background-size: 13px;
}
.paginate_enabled_next:hover {
	background: url('../../../../../img/clear-icons-20px/black/494.Forward.png') no-repeat center right;
    background-size: 13px;
}

/* Navbar */
@media (max-device-width: 800px)  /* Breite beträgt höchstens 800px */
{
	#navbar {
		direction:ltr;
		color:#ccc;
		font:normal 13px/28px sans-serif;
		height:28px;
		top:0;
		left:0;
		position:absolute;
		width: 770px;
		z-index:99999;
		background: #464646;
		background-image:-webkit-gradient(linear,left bosttom,left top,color-stop(0,#373737),color-stop(18%,#464646));
		background-image:-webkit-linear-gradient(bottom,#373737 0,#464646 5px);
		background-image:-moz-linear-gradient(bottom,#373737 0,#464646 5px);
		background-image:-o-linear-gradient(bottom,#373737 0,#464646 5px);
		background-image:linear-gradient(to top,#373737 0,#464646 5px);
	}
}
@media (min-device-width: 801px)  /* Breite beträgt mindestens 801px */
{
	#navbar {
		direction:ltr;
		color:#ccc;
		font:normal 13px/28px sans-serif;
		height:28px;
		position:fixed;
		top:0;
		left: 50%;
		margin-left: -607px;
		width: 1214px;
		z-index:99999;
		background: #464646;
		background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#373737),color-stop(18%,#464646));
		background-image:-webkit-linear-gradient(bottom,#373737 0,#464646 5px);
		background-image:-moz-linear-gradient(bottom,#373737 0,#464646 5px);
		background-image:-o-linear-gradient(bottom,#373737 0,#464646 5px);
		background-image:linear-gradient(to top,#373737 0,#464646 5px)
	}
}

#navbar * {
	margin:0;
	padding:0;
	position:static;
	text-transform:none;
	letter-spacing:normal;
	line-height:1;
	font:normal 13px/28px sans-serif;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none
}

#navbar #title {
	font-weight: bold;
}

/* Spaceline Menu - Trennlinie fürs Menü */
#navbar .spaceLine {
    border-right: 1px solid #666666;
    float: left;
    width: 3px;
    height: 27px;
    margin-left: -3px;
}

#navbar .spaceLine div {
    border-right: 1px solid #464646;
    float: left;
    height: 100%;
}

#navbar .menupop:hover .spaceLine {
    border: 0;
}

#navbar .actualSite .spaceLine {
    border: 0;
}

#navbar .menupop:hover .spaceLine div {
    border: 0;
}

#navbar .actualSite .spaceLine div {
    border: 0;
}

/* -- -- -- -- -- -- -- -- */

#navbar ul li:before, #navbar ul li:after {
    content:normal
}

#navbar .menupop {
    float: left;
    cursor: pointer;
    z-index: 5;
}
@media (max-device-width: 800px)  /* Breite beträgt höchstens 800px */
{
	#navbar .menupop ul {
		display: table-cell;
		min-width: 65px;
		white-space: nowrap;
		background-color: #e8e8e8;
	}
}
@media (min-device-width: 801px)  /* Breite beträgt mindestens 801px */
{
	#navbar .menupop ul {
		display: table-cell;
		min-width: 120px;
		white-space: nowrap;
		background-color: #e8e8e8;
	}
}
#navbar .menupop ul li {
    display: none;
    cursor: pointer;
}

#navbar .menupop .homeItem, .menupop .user-info-item {
    color: #ccc;
    font-weight: bold;
}

#navbar .menupop:hover .homeItem, .menupop:hover .user-info-item {
    background-color: white !important;
    color: black;
}

#navbar .menupop:hover ul {
    box-shadow: 2px 6px 10px -2px #e1e1e1;
    -moz-box-shadow: 2px 6px 10px -2px #e1e1e1;
    -webkit-box-shadow: 2px 6px 10px -2px #e1e1e1;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
}

#navbar .menupop:hover ul li {
    display: block;
    width: auto;
    text-align: left;
}

#navbar .menupop ul li:hover {
    background-color: #3459a1;
}

#navbar .menupop ul li:hover * {
    color: white !important;
}

#navbar .menupop ul li * {
    color: #3459a1;
}

#navbar .menupop .ab-submenu {
    position: relative;
    left: -1px;
}

#navbar .menupop .ab-submenu li {
    margin: 0px;
    padding-left: 4px;
    padding-right: 4px;
}

#navbar ul li {
    background: 0;
    clear: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-indent: 0;
    z-index: 99999;
}

#navbar .ab-item {
    border: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#navbar .ab-submenu .first-item {
    background-color: white !important;
}

#navbar .ab-submenu .first-item:hover {
    background-color: #464646 !important;
}

#navbar .ab-submenu .first-item * {
    font-weight: bold;
}

/* Space Items - Platzhalter über und unter den listitems */
#navbar .ab-submenu .space-item div {
    line-height: 5px;
    cursor: default;
}

#navbar .ab-submenu .space-item:hover {
    background-color: #e8e8e8;
}

#navbar .ab-submenu .first-space-item {
    background-color: white !important;
    cursor: default;
}

#navbar .ab-submenu .first-space-item div {
    line-height: 5px;
}

#navbar .ab-submenu .first-space-item:hover {
    background-color: white !important;
}

#navbar .ab-submenu .last-item {
    border-bottom: 1px solid lightgrey;
}

#navbar .ab-submenu .second-space-item {
    background-color: white !important;
    cursor: default;
}

#navbar .ab-submenu .second-space-item div {
    line-height: 5px;
}

#navbar .ab-submenu .second-space-item:hover {
    background-color: white !important;
}
/* -- -- -- -- -- -- -- -- -- -- -- -- */

#navbar .iconmenu {
    width: 50px;
    text-align: center;
}

#navbar .iconmenu:hover {
    background-color: white !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    z-index: 6;
}

#navbar .actualSite {
    background-color: white !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    z-index: 6;
}

#navbar #systemInfo {
    margin-left: 5px;
    height: 28px;
    font-weight: bold;
}

#navbar #systemInfo .homeItem {
    padding-left: 3px;
    padding-right: 7px;
    /*padding-right: 75px;
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: 333px -53px;*/
}

#navbar #systemInfo #placeHolder {
    padding-left: 3px;
}

#navbar #creditAmount {
    font-weight: bold;
}

/* User Info Menu */
#navbar .user-info-menu {
    width: auto;
    height: 28px;
}

#navbar .user-info-item {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 700;
}

#navbar .changeLanguage {
    padding-left: 5px;
}

#navbar .changeLanguageMenu {
    width: 120px;
}

#navbar .myPassItem p {
    margin-bottom: -10px;
}
/* -- -- -- -- -- -- */

#navbar .rightalign {
    float: right;
    z-index: 9;
}

#navbar .rightalign .spaceLine div {
    float: right;
}

#navbar .rightalign:hover {
    z-index: 10;
}

/* Clear Icon Pack */
/* Adminnavbar Icons */

.userIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: 9px -27px;
}

#navbar .menupop:hover .userIcon {
    background-position: 9px 1px;
}

#navbar .actualSite .userIcon {
    background-position: 9px 1px;
}

.moneyIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -31px -26px;
}

#navbar .menupop:hover .moneyIcon {
    background-position: -31px 1px;
}

#navbar .actualSite .moneyIcon {
    background-position: -31px 1px;
}

.cateringIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -69px -26px;
}

#navbar .menupop:hover .cateringIcon {
    background-position: -69px 1px;
}

#navbar .actualSite .cateringIcon {
    background-position: -69px 1px;
}

.foodDistributionIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -106px -26px;
}

#navbar .menupop:hover .foodDistributionIcon {
    background-position: -106px 1px;
}

#navbar .actualSite .foodDistributionIcon {
    background-position: -106px 1px;
}

.articleIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -145px -26px;
}

#navbar .menupop:hover .articleIcon {
    background-position: -145px 1px;
}

#navbar .actualSite .articleIcon {
    background-position: -145px 1px;
}

.kioskIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -181px -26px;
}

#navbar .menupop:hover .kioskIcon {
    background-position: -181px 1px;
}

#navbar .actualSite .kioskIcon {
    background-position: -181px 1px;
}

.databaseIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -219px -26px;
}

#navbar .menupop:hover .databaseIcon {
    background-position: -219px 1px;
}

#navbar .actualSite .databaseIcon {
    background-position: -219px 1px;
}

.employeeIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -257px -26px;
}

#navbar .menupop:hover .employeeIcon {
    background-position: -257px 1px;
}

#navbar .actualSite .employeeIcon {
    background-position: -257px 1px;
}

.systemIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -293px -26px
}

#navbar .menupop:hover .systemIcon {
    background-position: -293px 1px;
}

#navbar .actualSite .systemIcon {
    background-position: -293px 1px;
}

/* Usernavbar Icons */

.myWeekPlanIcon  {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -483px -26px;
}

#navbar .menupop:hover .myWeekPlanIcon {
    background-position: -483px 1px;
}

#navbar .actualSite .myWeekPlanIcon {
    background-position: -483px 1px;
}

.myAccountIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -31px -26px;
}

#navbar .menupop:hover .myAccountIcon {
    background-position: -31px 1px;
}

#navbar .actualSite .myAccountIcon {
    background-position: -31px 1px;
}

.myPassIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -524px -26px;
}

#navbar .menupop:hover .myPassIcon {
    background-position: -524px 1px;
}

#navbar .actualSite .myPassIcon {
    background-position: -524px 1px;
}

.myQuestionsIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -447px -26px;
}

#navbar .menupop:hover .myQuestionsIcon {
    background-position: -447px 1px;
}

#navbar .actualSite .myQuestionsIcon {
    background-position: -447px 1px;
}

#logoutTimeContainerParent {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -607px;
    width: 1214px;
}

#logoutTimeContainer {
    position: absolute;
    right: 5px;
    top: 33px;
    border: 1px solid #FBC2C4;
    background-color: #FBE3E4;
    padding: 3px 10px;
    color: #8A1F11;
    cursor: pointer;
    display: none;
}

#logoutTime {
    font-weight: 700;
}

#logoutTimeContainer.visibleTimeout {
    display: block;
}

/* Global Icons Navbar */
.logoutIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -337px -53px;
    width: 35px;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
}

#navbar .logoutIcon:hover {
    background-position: -338px -53px;
    background-color: white !important;
}

#navbar .backIcon {
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#navbar .backIcon:hover {
    background-color: white !important;
}

#navbar #backIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat;
    background-position: -368px -26px;
    padding-left: 35px;
    padding-right: 12px;
    font-weight: bold;
}

#navbar #backIcon:hover {
    background-position: -368px 1px;
    color: black;
}

/* Database Styling */
.contentCol table {
	min-width: 100%;
}

.contentCol input {
	width: 120px;
	border: 1px solid lightgrey;
}

.contentCol #tinyInputfield {
	width: 25px;
}

.contentCol #smallInputfield {
	width: 40px;
}

.contentCol .date-picker-normal {
	width: 80px;
}

.acceptButtonField {
    text-align: center;
    margin-top: 8px;
}

#acceptDialog button {
    width: 50px;
    text-align: center;
}

/* registration form */
.inputfield-green-icon {
    background: url('../img/clear-icons-20px/green/403.Check.png') no-repeat;
    background-size: 18px;
    background-position-x: 245px;
    background-position-y: center;
    background-color: white;
    border-color: #4DB359;
}

.inputfield-red-icon {
    background: url('../img/clear-icons-20px/red/404.close.png') no-repeat;
    background-size: 14px;
    background-position-x: 245px;
    background-position-y: center;
    border-color: #ce0c0c;
}

.onlyPrint {
    display: none;
}

@media print {
    .noprint, #navbarPlaceholder, #reset_menuFormButton, #order_menuFormButton, .dataTables_length, .dataTables_filter, .dataTables_paginate {
      display: none !important;
    }

    .onlyPrint {
        display: inline;
    }
}

/* sendEmail */
#sendEmail{
    margin: 7px
}

#sendEmail input {
    width: 100%
}

#sendEmailForm .formField {
    margin-bottom: 20px;
    padding: 6px
}

#detailEmailForm {
    height: 100%;
    width: inherit;
}

#detailEmailForm input {
    width: 100%;
}

#detailEmailForm .formField {
    margin-bottom: 10px;
    padding: 6px;
}

#detailEmailForm #attachment {
    height: 30px;
}

#detailEmailForm #attachedFile {
    float: left;
    margin-right: 10px;
    font-size: 14px;
}

/* mobile layout */
html.mobileLayout {
    width: 100%;
    font-size: 18px;
}

html.mobileLayout body {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 0px;
}

html.mobileLayout body #content {
    padding-right: 7px;
    padding-left: 7px;
    box-sizing: border-box;
}

#navbarMobile {
    background: #464646;
    color: #ccc;
    height: 40px;
    font-size: 1.4em;
    padding: 5px;
    position: relative;
}

.mobileLayout #navbarMobile #samsonLogo {
    height: auto;
    width: 100px;
    position: absolute;
    right: 7px;
    top: 15px;
}

.mobileLayout #navbarMobile #menuIcon {
    height: 24px;
    width: auto;
    position: absolute;
    left: 7px;
    top: 13px;
    cursor: pointer;
}

.mobileLayout #mobileSystemTitle {
    padding-left: 50px;
    padding-right: 115px;
    height: 40px;
    line-height: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.6em;
    font-weight: bold;
}

.mobileLayout #mobileMenu {
    list-style-type: none;
    padding-left: 0px;
    margin: 0px;
    background-color: #ddd;
    max-height: 0px;
    transition: max-height 0.5s ease;
    overflow: hidden;
}

.mobileLayout .logoutLink {
    color: #8A1F11;
}

.mobileLayout .position-relative {
    position: relative;
}

.mobileLayout .fixedNavbarMenu {
    list-style-type: none;
    padding-left: 0px;
    margin: 0px;
    background-color: #ddd;
}

.mobileLayout .fixedNavbarMenu li {
    height: 40px;
    line-height: 40px;
    padding-left: 7px;
}

.mobileLayout #navbarUserName {
    height: 40px;
    white-space: nowrap;
    margin-right: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobileLayout .mobileNavbarCredit {
    position: absolute;
    top: 0px;
    right: 7px;
}

.mobileLayout #mobileMenu.active {
    max-height: 560px;
}

.mobileLayout #mobileMenu li {
    border-bottom: 2px solid #fff;
    height: 40px;
    padding: 0px 7px 0px 7px;
    line-height: 40px;
    font-weight: 500;
    color: #3459a1;
    box-sizing: border-box;
}

.mobileLayout #mobileMenu li .menuLink {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.mobileLayout #mobileMenu li.mainMenu {
    display: -webkit-box;
    display: flex;
    box-sizing: border-box;
    width: 100%;
}

.mobileLayout #mobileMenu li.mainMenu .menuLink {
    -webkit-box-flex: 20;
    flex-grow: 20;
    width: auto;
}

.mobileLayout #mobileMenu li.mainMenu .subMenuIcon {
    -webkit-box-flex: 1;
    flex-grow: 1;
    text-align: end;
    border-left: 2px solid #fff;
    cursor: pointer;
}

.mobileLayout #mobileMenu li.mainMenu .subMenuIcon img {
    vertical-align: middle;
    height: 0.9em;
    margin-right: 3px;
}

.mobileLayout #mobileMenu li.subMenu {
    padding-left: 20px;
}

.mobileLayout #mobileMenu .subMenuContainer {
    max-height: 0px;
    transition: max-height ease 0.5s;
    overflow: hidden;
}

.mobileLayout #mobileMenu .subMenuContainer.visible {
    max-height: 250px;
}

.mobileStretchWidth {
    width: 100%;
}

.mobileNoMaxWidth {
    max-width: none !important;
}

.mobileLayout .formTable {
    border-spacing: 3px 8px;
}

.mobileLayout .formTable.userLoginFormTable {
    border-spacing: 0px 8px;
}

.mobileLayout #popup_panel {
    margin: 0px;
}

.mobileLayout button {
    width: 100%;
    font-size: 1em;
    line-height: 50px;
    height: 50px;
    margin-top: 15px;
}

.mobileLayout .secondButton {
    margin-top: 0px;
}

.mobileLayout #loginArea {
    min-height: 280px;
    height: auto;
}

.mobileLayout td {
    padding: 4px 0px 4px 0px;
}

.mobileLayout .formField {
    padding: 4px 10px 4px 5px;
}

.mobileLayout .warningIcon {
    margin-right: 10px;
}

.mobileLayout .closeIcon {
    background: url('../img/clear-icons-20px/navbarIcons.png') no-repeat 0 0;
    background-position: 63% -3.72%;
    width: 35px;
    height: 35px;
    background-size: auto;
}

.mobileLayout .jconfirm #popup_title {
    font-size: 1.2em;
}

.mobileLayout .checkIcon {
    display: none;
}

.mobileLayout .infoIcon {
    display: none;
}

.mobileLayout .warningIcon {
    display: none;
}

.mobileLayout .formLabel {
    font-size: 0.8em;
}

.mobileLayout td.formButton {
    padding: 0px;
}

.mobileLayout td.formButton button {
    margin: 0px;
}

.mobileLayout #userFaq.ui-accordion .ui-accordion-content, .mobileLayout #userFaq.ui-accordion .ui-accordion-header {
    padding: 10px;
}

/* mobile weekplan */
.mobileLayout .iconWeek {
    height: 40px;
    vertical-align: bottom;
    margin-left: 20px;
    margin-right: 20px;
}

.mobileLayout .chooseWeek {
    text-align: center;
    margin: 0 auto;
}

.mobileLayout #dayMenuPlan {
    width: 100%;
    text-align: center;
}

.mobileCenter {
    margin: 0 auto;
}

.mobileLayout .ui-accordion-header {
    border: 2px solid #ccc;
}

.mobileLayout .ui-accordion-header.ui-state-active {
    background: #EEE;
}

.mobileLayout .ui-widget-content {
    border: 2px solid #ccc;
    border-top-width: 0px;
}

.mobileLayout #subjectToChanges {
    text-align: left;
    margin-bottom: 5px;
    position: relative;
    top: -12px;
}

.mobileLayout .ui-widget input {
    font-size: inherit;
}

.mobileLayout .ui-widget select {
    font-size: inherit;
}

.mobileLayout .ui-widget textarea {
    font: inherit;
}

.mobileLayout .weekPlan .tableContent {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    border-right-width: 0px;
    border-left-width: 0px;
}

.mobileLayout .weekPlan .dayMenuData {
    margin: 0 auto;
    padding: 0px 0px 8px 0px !important;
}

.mobileLayout .weekPlan .dayMenuMealData {
    margin: 0 auto;
    padding: 0px 0px 8px 0px !important;
}

.mobileLayout .weekPlan .dayMealData {
    margin: 0 auto;
    padding: 0px 0px 8px 0px !important;
}

.mobileLayout .weekPlan .mainMenu {
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    border-left-width: 0px;
    border-right-width: 0px;
}

.mobileLayout .weekPlan .mainMenu img, .mobileLayout .weekPlan .subMenu img {
    max-width: 400px;
}

.mobileLayout .noFoodMargin {
    margin-bottom: 23px;
}

.mobileLayout #order_menuFormButton {
    float: none;
}

.mobileLayout .weekPlan input[type="checkbox"] {
    width: 16px !important;
    height: 16px;
}

.mobileLayout .weekPlan input[type="radio"] {
    width: 16px !important;
    height: 16px;
}

.mobileLayout .weekPlan input[type="number"] {
    width: 50px;
    height: 26px;
    font-size: 20px;
}

.mobileLayout .weekPlan .weekPlanSmallHead {
    font-size: 15px;
}

.mobileLayout .weekPlan .headline.headlineNumber {
    height: 42px;
    line-height: 35px;
}

.mobileLayout .weekPlan .headline.headlineNumber .numBox {
    height: 35px;
    width: 60px;
}

.mobileLayout .weekPlan .menuOrderNmb {
    left: 0px;
}

.mobileLayout .weekPlan select {
    font-size: 18px;
    height: 40px;
}

.mobileLayout .ui-accordion .ui-accordion-content {
    padding: 0px;
}

.mobileLayout .weekPlan .ui-accordion .ui-accordion-content {
    padding: 0px;
    padding-top: 8px;
}

.mobileLayout .mobileDataTable {
    overflow: hidden;
    overflow-x: auto;
}

.mobileLayout .mobileDataTable label {
    font-size: inherit;
    float: none;
}

.mobileLayout .mobileDataTable .dataTables_filter {
    float: none;
    text-align: left;
    margin: 5px 0px 5px 0px;
}

.mobileLayout .mobileDataTable .dataTables_info {
    float: none;
    display: block !important;
}

.mobileLayout .mobileDataTable .dataTables_paginate {
    float: none;
    text-align: left;
    display: block !important;
}

.mobileLayout .mobileDataTable .dataTables_paginate a {
    margin-bottom: 10px;
}

.mobileLayout .noWeekplan td {
    padding: 0px !important;
}

.mobileLayout .weekPlan .bottomDock {
    position: relative;
    margin-bottom: -5px;
}

.weekPlan form {
    margin-bottom: 15px;
}

.mobileLayout .instructionMessage {
    margin-bottom: 15px;
}

/* mobile datepicker */
.mobileLayout .ui-datepicker .ui-datepicker-prev {
    left: 5px;
    background: url('../img/clear-icons-40px/black/493.Back.png');
    background-size: 40px;
}

.mobileLayout .ui-datepicker .ui-datepicker-next {
    right: 5px;
    background: url('../img/clear-icons-40px/black/494.Forward.png');
    background-size: 40px;
}

.mobileLayout .ui-datepicker .ui-datepicker-prev, .mobileLayout .ui-datepicker .ui-datepicker-next  {
    top: 10px;
    width: 40px;
    height: 40px;
}

.mobileLayout .ui-datepicker-title  {
    font-size: 1.4em;
    line-height: 2em;
}

.mobileLayout .ui-datepicker-header  {
    border-bottom: 0px;
}

.mobileLayout .ui-datepicker-calendar  {
    table-layout: fixed;
    font-size: 1.2em;
}

.mobileLayout .ui-datepicker-calendar th, .mobileLayout .ui-datepicker-calendar td {
    border: 2px solid #fff;
}


/* mobile layout logout time */
.mobileLayout #logoutTimeContainerParent {
    position: fixed;
    top: 5px;
    left: 5px;
    right: 5px;
    margin-left: 0px;
    width: auto;
    z-index: 100;
}

.mobileLayout #logoutTimeContainer {
    position: initial;
    border: 1px solid #FBC2C4;
    background-color: #FBE3E4;
    padding: 3px 10px;
    color: #8A1F11;
    cursor: pointer;
}

/* language list */
ul.languageList {
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-top: 0.5em;
}

ul.languageList li {
    color: #3459a1;
    padding: 5px 0px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

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

.mandatesList {
    height: 190px;
    overflow-y: scroll;
    list-style: none;
    margin: 0;
    padding: 0;
}