.btn:focus {
    outline: none;
}

.nopadding {
    padding: 0;
}

.navbar-toggle-left {
  float: left;
  margin-left: 15px;
}

.item-switch{
    width: 100%;
    position: relative;
    text-align: center;
    height: 3em;
}

.item-switch-previous,
.item-switch-next{
    text-decoration: none;
    color: #909090;
    font-size: 2em;
    height: 100%;
    line-height: 1.5em;
}

.item-switch-previous:hover,
.item-switch-next:hover{
    text-decoration: none;
}

.item-switch-previous{
    position: absolute;
    left: 0px;
}

.item-switch-next{
    position: absolute;
    right: 0px;
}

.item-switch-item{
    font-size: 1.5em;
    line-height: 2em;
}

.day{
    width: 100%;
    text-align: center;
    height: 3em;
}

.day .name{
    float: left;
    height: 100%;
    color: #fff;
    background-color: #8c8c8c;
    border-radius: 30px;
    width: 2.7em;
    height: 2.7em;
    line-height: 2.7em;
    text-align: center;
    margin: 0px 1em 0px 0px;
}

.day .breakfast{
    float: left;
    width: 10%;
    line-height: 2.7em;
}

.day .short-description{
    float: left;
    width: 50%;
    line-height: 2.7em;
}

.day .snack{
    float: left;
    width: 10%;
    line-height: 2.7em;
}

.client-blue{
    background-color: blue;
    color: #fff;
}

.client-blue a.navbar-brand{
    color: #fff;
}

.header,
.content{
    max-width: 1000px;
    margin: 0px auto;
}

.content{
    padding: 10px 25px 50px 25px;
}

.container-fluid {
    padding: 0;
}


.index-site-mealplan { margin-top: 1em; }


/***** Food order table ******/

.table .order-button-cell{
    vertical-align: middle;
    border-top: 0px;
    border-right: 1px solid #ddd;
}
.table .order-button-cell p {
    margin-bottom: 1px;
}
.table .order-button-cell:last-child{
    border-right: 0px;
}

.food-order th,
.menu-cell{
    border-right: 1px solid #ddd;
}
.food-order th:last-child,
.menu-cell:last-child{
    border-right: 0px;
}
.food-order .last-row > td {
    height: 0;
    padding: 0;
}
.panel-mealplan .panel-body {
    padding: 0 0 15px 0;
}
.panel-mealplan .mealplan-bottom {
    padding: 10px 15px 0;
}
.food-order .menu-meal {
    border-right: 1px solid #ddd;
    vertical-align: middle;
    font-size: 0.9em;
    font-weight: bold;
    background-color: #eee;
    padding-left: 15px;
}
.food-order th.menu-meal {
    background-color: inherit;
}

.table.food-order{
    margin-bottom: 0px;
    font-size: 13px;
    border-bottom: 1px solid #ccc;
    table-layout: fixed;
    overflow-wrap: break-word;
}

.menu-allergens-panel {font-size: 80%;}

.menu-actions {
    width: 60%;
    margin: 0 auto;
}
.menu-actions .btn,
.menu-actions input[name=quantity] {
    height: 28px;
}
.menu-actions .btn {
    padding: 4px 8px;
}
.menu-actions input[name=quantity] {
    background-color: #fff;
    min-width: 43px;
    padding-left:8px;
    padding-right:8px;
}
.menu-actions .btn.disabled {
  color: #aaa;
}
.menu-attribute-logos {
    text-align: right;
}
.menu-attribute-logos img {
    height: 22px;
}

.dependent-msg .glyphicon:before {
  line-height: 21px;
}
.dependent-msg {
  display: none;
  text-align: center;
}
.not-available {
  background-color: #eee;
}
.small_view .not-available {
  background-color: transparent;
}
.not-available > form,
.not-available > .menu-order-status {
  display: none;
}
.not-available .dependent-msg {
  display: block;
}

.food-order .allergy-meal > span {
  color: #aaa;
  font-style: italic;
}

.small_view .menu-actions .quantity-step span {
    margin: 2px;
}
.small_view .menu-actions{width:auto;}

td.menu-ordered {
    background-color: #deffdd;
}
.menu-ordered .order-confirmed {
    display: block;
    color: gray;
    font-size: 0.8em;
    padding-top: 5px;
    text-align: center;
}
.order-confirmed {
    display: none;
}

.small_view .menu-ordered .order-quantity {
  background-color: #fff;
}
.small_view .menu-actions > button {
  width: 50px !important;
  padding: 0;
  margin: 0;
  height: 35px;
}
.small_view .menu-actions > button:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.small_view .menu-actions > button:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.small_view .menu-actions > input {
  width: 50px !important;
  margin-top: -1px;
  margin-bottom: -1px;
  padding: 2px 0;
  height: 30px;
  border: 1px solid #ccc;
}

table.food-order td.menu-ordered {
  vertical-align: middle;
}

/* center text in food order table where food is ordered and can't be canceled. Past order table cell */
.menu-order-status {
  text-align: center;
}

/***** End Food order table ******/

/**** START Toggle style ****/
.toggle{
    display: none;
    position: absolute;
    width: 48px;    /* 44px / 16px */
    height: 48px;
    text-decoration: none;
    padding: 0;
    font-size: 30px;
    line-height: 1.8em;
}

.toggle.for-navigation{
    left: 0px;
    top: 0px;

}

.toggle.for-auth{
    right: 0px;
    top: 0px;
}

/**** END Toggle style ****/


/**** START Switch style ****/
.switch{
    height: 2.75em;
    position: relative;
    padding: 0px 2.75em;
    margin: 0 0 0.2em;
}

.switch .left,
.switch .right{
    font-size: 2.75em;
    color: #337AB7;
    /*width: 2.75em;
    height: 2.75em;*/
    position: absolute;
    top: 0px;
    text-decoration: none;
    outline: none;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 10;
}

.switch .left{
    left: 0px;
}

.switch .right{
    right: -0.85em;
}

.switch span.right,
.switch span.left,
.switch .right.disabled,
.switch .left.disabled
{
    color: #909090;
}

.week-switch{
    margin-bottom: 1em;
}

.switch .item{
    text-align: center;
    line-height: 2.2em;
    font-size: 1.3em;
    color: #464646;
    overflow: hidden;
    height: 100%;
}

.table.small-menu td{
    border-top: solid 1px #f3f3f3;
}

.table.small-menu {
    width: 100%;
}
.table.small-menu td.text-left {
    overflow: hidden;
    text-overflow: ellipsis;
}
.table.small-menu td.vert-align {
    width: calc(100% - 108px);
}
.table.small-menu td.vert-buttons {
    width: 60px;
}

.day-meal {
    height: 4.2em;
    margin: 0 0 0.2em;
    position: relative;
    display: block;
    padding: 5px 0px 0px 0px;
    border-top: solid 1px #ddd;
    color: #333;
}
.day-meal,
.day-meal:link,
.day-meal:hover {
    text-decoration: none;
}
.day-meal .menu-expand {
    position: absolute;
    right: 15px;
    top: 15px;
    color: gray;
}
.day-meal .brief-order-status {
    padding: 0px 4em 0px 10px;
    font-size: 1em;
    height: 2em;
    overflow: hidden;
    display: flex;
}
.brief-order-status .ordered-mealtime {
    text-align: center;
    display: inline-block;
    border: 1px solid gray;
    height: 26px;
    width: 26px;
    line-height: 26px;
    border-radius: 5px;
    font-size: 0.8em;
    margin-right: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #eee;
    flex: 0 0 auto;
    align-self: center;
}
.brief-order-status:empty {
    text-align: center;
}
.brief-order-status:empty:before {
    content: 'Keine Bestellung';
    text-decoration: none;
    color: gray;
    flex: 1;

}
.brief-order-status .lunch-desc {
    padding-left: 5px;
    font-size: 0.8em;
    flex: 1 1 auto;
}

.day-meal .day-wrapper {
    float: left;
    height: 3em;
}
.day-meal .short-date {
    margin-top: 2px;
    margin-left: 15px;
    font-size: 0.8em;
    color: gray;
}
.day-meal.collapsed .glyphicon-chevron-down,
.day-meal:not(.collapsed) .glyphicon-chevron-up {
    display: block;
}
.day-meal.collapsed .glyphicon-chevron-up,
.day-meal:not(.collapsed) .glyphicon-chevron-down {
    display: none;
}

.day-meal .day{
    background-color: #585858;
    color: #FFF;
    text-align: center;
    border-radius: 5px;
    margin: 0px 0.5em 0px 0.7em;
    width: 2.75em;
    display: block;
    height: 2.75em;
    font-size: 1em;
    line-height: 2.8em;
    font-weight: bold;
}

.day-meal .breakfast{
    width: 2.75em;
    height: 2.75em;
    float: left;
    background: url(../images/breakfast.png) no-repeat center center;
    position: relative;
}

.day-meal .breakfast .red-cross,
.day-meal .snack .red-cross
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(../images/red_cross.png) no-repeat center center;
    display: block;
}

.day-meal .breakfast.ordered .red-cross,
.day-meal .snack.ordered .red-cross{
    display: none;
}

.day-meal .spacer{
    float: left;
    margin: 0.375em 0.4em 0;
    height: 2em;
    width: 1px;
    overflow: hidden;
    background-color: #a6a6a6;
}

.day-meal .spacer.right{
    position: absolute;
    right: 3.45em;
    top: 0px;
}

.day-meal .snack{
    top: 0px;
    position: absolute;
    right: 0.7em;
    width: 2.75em;
    height: 2.75em;
    background: url(../images/lunch.png) no-repeat center center;
}

/**** END Switch style ****/


/**** START Header style ****/
.header{
    position: relative;
    min-height: 50px;
}

.header-account-balance {
    margin-top: 1em;
}

/**** END Header style ****/


/**** START User box style ****/
.header .user-box{
    position: absolute;
    top: 0px;
    right: 0px;
}
/**** END User box style ****/


/**** START Auth box style ****/
.header .auth-box{
    position: absolute;
    top: 0px;
    right: 0px;
}

.auth-box ul li{
    float: left;
    margin: 0 0 0 0.5em;
    line-height: 1.8em;
    list-style: none;
}

.auth-box label{
    display: block;
    font-size: 0.8125em;    /* 13px / 16px */
    color: #136f60;
    padding: 0 0 0.2em;
}

.auth-box input{
    width: 12.5em;    /* 200px / 16px */
    border: solid #d6d6d6 1px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8125em;    /* 13px / 16px */
    padding: 0.4em;
    color: #a5a5a5;
}

.auth-box button{
    /*font-size: 0.8125em;    /* 13px / 16px */
    /*padding: 0.4em;
    border: medium none;
    background-color: #337AB7;
    color: #fff;
    font-weight: bold;*/
}

.auth-box .forgot-password{
    display: block;
    color: #afafaf;
    padding: 0.2em 0 0;
    text-decoration: none;
    font-size: 0.75em;    /* 12px / 16px */
    text-decoration: underline;
    position: absolute;
    top: 27px;
    right: 93px;
}

.auth-box .modal_close{
    display: none;
    font-weight: bold;
    font-size: 1em;
    color: #000;
    text-decoration: none;

}

.auth-form{
    position: relative;
}

.auth-box .user-info{
    position: relative;
    top: 10px;
    right: 7px;
    text-align: right;
}
/**** END Auth box style ****/

.right-panel {
  margin-top: 20px;
}

/**** START Navigation style ****/
.navigation{
    margin: 1.5em 0 0 0;
    background-color: #fff;
}
/**** END Navigation style ****/



.table.days th .small-day{
    display: none;
}

table.receipt-details {
    width: 70%;
    margin-left: 50px;
    margin-bottom: 10px;
    font-size: 0.85em;
    color: #777;
}
table.receipt-details th,
table.receipt-details td {
    width: 30%;
}


/**** START Footer style ****/
.footer{
    color: #000;
    font-size: 0.8em;    /* 12px / 16px */
    background-color: #ececec;
    padding: 2em 3em;
    line-height: 1.5em;
    margin: 1em auto 0;
    max-width: 1000px;
}

.footer a{
    color: #337AB7;
}

.footer .block{
    float: left;
    height: 5.5em;    /* 120px / 16px */
    margin: 0 0 0.5em 0;
}

.footer .block .title{
    display: block;
    font-weight: bold;
    border-bottom: solid #3587c6 2px;
    padding: 0 0 0.3em;
    margin: 0 0 0.7em;
    font-size: 1.2em;
}

.footer .block .highlighted{
    font-weight: bold;
    color: #337AB7;
}

.footer .block.contacts{
    width: 50%;
    margin: 0 10% 0 0;
}

.footer .block.system{
    width: 40%;
}

.footer .left-block{
    margin: 0 3em 0 0;
    float: left;
    height: 5.5em;
    width: 10.3125em; /* 165px / 16px */
}
/**** END Footer style ****/


/*** Hide small view **/
.small_view{
    display: none;
}

/** Food order small view Loading **/
.loading{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-color: white;
    z-index: 100;
    background-image: url(../images/ajax-loader.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

/*Bootstrap form-inline*/
.form-inline input{margin-bottom: 0}
.form-inline{margin-bottom:5px}

/**** START Middle view style ****/
@media screen and (max-width: 750px){
    .header .navigation{
        text-align: center;
    }

    .header .auth-box{
        position: absolute;

        display: none;
        background-color: #fff;

        width: 100%;
        top: 10em;
        left: 0px;
        z-index: 110;

    }

    .auth-form{
        height: 8em;
        padding: 0;
    }

    .header .auth-box .inner-box{
        position: relative;
        margin: 4em;
        height: 9.2em;
    }

    .header .auth-box .user-info{
        padding-top: 1em;
        padding-right: 1em;
    }

    .header .auth-box .modal_close{
        display: block;
        position: absolute;
        top: -2em;
        right: -2em;
    }

    .header .auth-box .username-box,
    .header .auth-box .password-box{
        width: 100%;
        margin: 0 0 1em;
    }

    .header .auth-box .forgot-password-box,
    .header .auth-box .login-button-box{
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
        left: 0px;
    }

    .header .auth-box .forgot-password-box{
        font-size: 1.2em;
        bottom: -2em;
    }

    .header .auth-box .username-box .input-group-sm,
    .header .auth-box .password-box .input-group-sm{
        width: 80%;
        margin: 0px auto;
    }

    .header .auth-box .forgot-password-box a{
        display: inline;
        padding: 0;
        position: relative;
        top: 0px;
        right: 0px;
    }

    .header .auth-box.show{
        display: block;
    }

    #overlay.show{
        display: block;
        opacity: 0.7;
    }

    .auth-box ul li{
        text-align: left;
    }

    .header .toggle.for-auth{
        display: block;
        top: 0.2em;
        right: 0.2em;
    }

    .footer .block.contacts,
    .footer .block.system{
        float: none;
        margin: 0px auto;
        width: 31.25em; /* 450px / 16px */
    }

    .footer .left-block{
        margin: 0 2em 0 0;
    }

    table.receipt-details {
        width: 90%;
        margin-left: 20px;
    }
}
/**** END Middle view style ****/

/**** START Almost small view style ****/
@media screen and (max-width: 580px){
    /*** Show small view **/
    .content {
        padding-bottom: 15px;
    }

    .small_view{
        display: block;
        position: relative;
    }

    /*** Hide big view **/
    .big_view{
        display: none;
    }

    .table.days th .small-day{
        display: inline;

    }

    .table.days th .big-day{
        display: none;

    }

    .menu-attribute-logos {
        text-align: right;
    }
    .menu-attribute-logos img {
        height: 22px;
    }
}

/**** START Small view style ****/
@media screen and (max-width: 450px){

    .header{
        min-height: 3.95em;
    }

    .header .actions{
        z-index: 51;
        position: relative;
    }

    .header .logo{
        display: block;
        width: 65%;
        margin: 0 auto;
    }

    .header .logo img{

        width: 100%;
    }

    .header .auth-box{
        position: absolute;

        display: none;
        background-color: #fff;

        width: 100%;
        top: 5em;
        left: 0px;
        z-index: 110;
    }

    .header .auth-box .inner-box{
        position: relative;
        margin: 4em;
        height: 10.2em;
    }

    .header .auth-box .modal_close{
        display: block;
        position: absolute;
        top: -2em;
        right: -2em;
    }

    .header .auth-box.show{
        display: block;
    }

    .header .auth-box .username-box,
    .header .auth-box .password-box{
        width: 100%;
        margin: 0 0 1em;
    }

    .header .auth-box .username-box .input-group-sm,
    .header .auth-box .password-box .input-group-sm{
        width: 100%;

    }

    .header .auth-box input{
        width: 90%;
        font-size: 1em;
    }

    .header .auth-box .forgot-password-box,
    .header .auth-box .login-button-box{
        position: absolute;
        width: 96%;
        text-align: center;
        left: -4%;
    }

    .header .auth-box .forgot-password-box{
        bottom: -2em;
        font-size: 1em;
    }

    .header .auth-box .login-button-box{
        bottom: 0;
    }

    .header .auth-box .login-button-box button{
        font-size: 0.9em;
    }

    .header .toggle{
        display: block;
        top: 0.2em;
    }

    .header .toggle.for-navigation{
        left: 0.2em;
    }

    .header .toggle.for-auth{
        right: 0.2em;
    }



    .header .navigation{
        display: none;
        position: absolute;
        width: 100%;
        top: 3em;
        z-index: 50;
    }

    .header .navigation li{
        float: none;
    }

    .header .navigation.show{
        display: block;
    }

    table.invoices a{
        display: block;
        width: 130px;
        overflow: hidden;
    }

    .footer{
        padding: 1em;
    }

    .footer .block.contacts,
    .footer .block.system{
        float: none;
        margin: 0px auto;
        width: 21em;
        height: auto;
    }

    .footer .block.contacts{
        margin-bottom: 1em;
    }

    .footer .block .left-block,
    .footer .block .block{
        width: 100%;
    }

    .footer .block.system .left-block{
        margin-bottom: 1.2em;
    }

    .small_view_compact .headerTopContainer,
    .small_view_compact .footer,
    .small_view_compact .plain-hidden {
        display: none;
    }


}
/**** END Small view style ****/


/**** START Super Small view style ****/
@media screen and (max-width: 320px){

    .header .logo{
        width: 60%;
    }
}
/**** END Super Small view style ****/


/**** START Lean modal style ****/
#overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
    opacity: 0;
}
/**** END Lean modal style ****/


/**** START Misc style ****/

.clear{
    clear: both;
}

.hidden{
    display: none;
}

.show-block{
    display: block;
}

.table tr>td.vert-align{
    vertical-align: middle;
}
.menu-mobile{
    display: block;
    width: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
}

/** Used in client registration to set AGB text as red if don't accept rules because default bootstrap set border color
    and checkbox don't show border color **/
.has-error .agb{
    color: #a94442;
}

/** Used in kunde_guthaben_include as ban account number part. Need this to add space between 4 chars **/
.number-part {
    margin-right: 0.4em;
}

.table.invoices{
    width: auto;
}

.table .menu-price,
.table .menu-allergens{
    border-top: 0px solid #ddd;
    border-right: solid 1px #ddd;
    padding: 1px 8px;
}

.table .menu-allergens{
    font-size: 80%;
}

.menu-price:last-child,
.menu-allergens:last-child{
    border-right: 0px;
}


table.absence-records {
  margin: 5px 0;
  border: 1px solid #ddd;
  border-top: none;
}

.absence-records .actions > button,
.absence-records .actions > button {
  margin-left: 10px;
}

.pagination {
  margin: 10px 0;
  font-size: 0.9em;
}

.step-links > .current {
  border: 1px solid #ccc;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 4px 5px;
  line-height: 1.5;
}

.field-errors .errorlist  {
    font-size: 0.9em;
    color: #a94442;
}

.small-text {
    font-size: 12px;
}

.facility-record {
    font-size: 0.9em;
    margin-bottom: 10px;
    color: #888;
    position: relative;
}

.facility-record.active {
    font-size: 1em;
    color: #2283ff;
}

.facility-record .glyphicon {
    font-size: 0.8em;
    margin-right: 5px;
}

.facility-record .action {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 30px;
    width: 30px;
    background-color: #eee;
    padding: 6px 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    color: gray;
}

.facility-record.active .action {
    top: 12px;
}

.day-holiday {
    background-color: #daedf6;
}

.day-closed {
    background-color: #fcf8e5;
}

/**** End Misc style ****/

.alert-notice {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.notice-title {
  font-size: 120%;
  font-weight: bold;
}


.errorlist li{list-style: none;}

.notice .hide-alert {
    right: 5px; position: absolute; top: 5px;
}


.nobr{white-space: nowrap;  hyphens: none;  }

@media screen and (max-width: 767px) {
    table.food-order th,
    table.food-order .menu-cell {
        white-space: normal !important;
    }
}