/*@import url(https://fonts.googleapis.com/css?family=Asap:400,400italic,700,700italic);*/
/*
@font-face {
    font-family: 'Asap';
    src: url(../../fonts/Asap-Bold.ttf);
    src: url(../../fonts/Asap-BoldItalic.ttf);
    src: url(../../fonts/Asap-Italic.ttf);
    src: url(../../fonts/Asap-Medium.ttf);
    src: url(../../fonts/Asap-MediumItalic.ttf);
    src: url(../../fonts/Asap-Regular.ttf);
    src: url(../../fonts/Asap-SemiBold.ttf);
    src: url(../../fonts/Asap-SemiBoldItalic.ttf);
}*/


@font-face {
    font-family: 'Asap';
    src: url(../../fonts/Asap-Regular.ttf);
}

@font-face {
    font-family: 'Asap';
    src: url(../../fonts/Asap-Italic.ttf);
    font-style: italic;
}
@font-face {
    font-family: 'Asap';
    src: url(../../fonts/Asap-Bold.ttf);
    font-weight: bold;
}

* {
}
html{
    height: 100%;
}
#header {
    border-bottom: 1px solid #333;
}
.tooltip {
    z-index: 1010;
}
.side-nav .tertiary {
    background: #CBCBCB !important;
}
.has-tip .text-white {
    color: #fff;
}
html {
    height: 100%;

}
body {
    height: auto;
    min-height: 100%;
    padding-bottom: 70px;
}
.f-topbar-fixed {
}
.button {
    font-weight: bold;
}
.panel h4 {
    margin: 25px 0px;
}
h5 {
    font-weight: bold;
}
.anchor {
}
.start_joy {
}
.footer-row {
    background: #333;
    position: absolute;
    bottom:0;
    left:0;
    color: #bbb;
    padding-top: 25px;
    padding-bottom: 35px;
}
#header_logo {
    outline: none;
    border: none;
    /* temp */
    background: url(../images/kitafino_logo.jpg) no-repeat 0px 10px;
    display: block;
    width: 300px;
    height: 100px;
}

.td_align_top {
    vertical-align: top;
}
.pikto_list li {
    line-height:120%;
}
@media only screen and (max-width: 40.0625em) {
    #header_logo {
        width: 200px;
        background: url(../images/kitafino_logo.jpg) no-repeat 0px 0px;
        background-size: contain;

    }

.top-bar-section li.has-dropdown a.active_user {
    padding: 3px 5px;
    font-size: 14px;
}

} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
.font_bold {
    font-weight: bold;
}
.full-width {
    width: 100%;
}
.log_gutschrift {
    font-weight: bold;
    color: #BBCE02;
}
.log_table i {
    color: #ccc;
}
.site_body * {
    font-family: 'Asap', sans-serif ;
}
.site_body {

    min-height: 100%;
    padding-bottom: 40px;
    position: relative;
    width: 100% !important;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,ffffff+100&0.65+0,0+100 */
    background: -moz-linear-gradient(top,  rgba(226,226,226,0.65) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,0.65)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(226,226,226,0.65) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(226,226,226,0.65) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(226,226,226,0.65) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(226,226,226,0.65) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e2e2e2', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}
fieldset legend {
    padding: 5px 10px;
    color: #666;
}
.panel {
    margin-top: 15px;
}

.alert-box {
    font-weight: bold;
}

.panel label {
    font-weight: bold;
}
#register_form .error > label > small {
    text-transform: none;

}

.tabs .tab-title {
    padding:0;
}
.tabs .tab-title a {
    background-color: #DADADA;
    padding: 5px 10px;
    color: #fff;
}
.tabs .tab-title.done a {
    background-color: #B7CF5F;
    color: #fff;
}
.tabs .tab-title.done i {
    display: none;
}
.tabs .tab-title.active a {
    background-color: #98BB1D;
    color: #fff;
    font-weight: bold;
}
.tabs .tab-title.alert a:before {
    background-color: #E26168;
    color: #fff;
    font-weight: bold;
    font-family: 'foundation-icons';
    content: "\f101";
    position: absolute;
    padding: 0px 5px;
    right: 0px;
    top: 0px;
    z-index: 5;
    font-size: 22px;
}
.tabs .tab-title.alert.active a:before {
    background-color: #E20915;

}
.alert-box.alert {

    background-color: #E2474F;
}
/*
.switch label:checked + label:before {
    font-family: 'foundation-icons';
    content: "\f1a0";
    color: #fff;
    position: absolute;
    left: -32px;
    top: 5px;
    z-index: 5;
}*/
.switch input:checked + label {
    background: #99BB1E;
}
/*
.switch label:before {
    font-family: 'foundation-icons';
    content: "\f126";
    color: #D3D3D3;
    position: absolute;
    left: -4px;
    top: -1px;
    z-index: 5;
    font-size: 22px;
    display:none;
}
.switch label.content_color:before {
    font-family: 'foundation-icons';
    content: "\f126";
    color: #98BB1D;
    position: absolute;
    left: -4px;
    top: 0px;
    z-index: 5;
    font-size: 22px;
    display:block;
}*/
.switch label.content_color:before {
    color: #98BB1D;
}
.active .kf_grey, .kf_grey {
    color: #ddd !important;
}
.kf_grey2 {
    color: #bbb !important;
}
#fragen_register {
    padding: 5px 15px 5px 30px;
    border: 2px solid #7BB100;
    color: #7BB100;
    font-weight: bold;
    font-size: 16px;
    background: #fff;
}
.i-margin {
    margin: 0 5px;
}
#fragen_register span {
    color: #FF870D;
    font-size: 18px;
}
.order_button, .order_button_locked, .order_button_bestellt, .order_button_bestellt_locked {
    text-align: left;
    position: relative;
    width: 100%;
    border: 1px solid #858585 !important;
    padding-left: 50px;
    padding-right: 20%;
    margin-bottom: 0px;
    padding-top: 25px;
    padding-bottom: 20px;
    border-left: none !important;
    border-right: none !important;
}
.info_order_locked {
    color: #888;

}
.order_button.button, .order_button_locked.button, .order_button_bestellt.button, .order_button_bestellt_locked.button {
    font-size: 24px;
    line-height: 120%;
}
.order_button {
    background: #fff;
    color: #515151;
    /* border-top-left-radius: 5px;
     border-top-right-radius: 5px;*/
}
.order_button_wrapper {
    margin-bottom: 0px;
}
.navi .button {
    width: 100%;
}
.button {
}
.switch {
    margin-bottom: 5px;
    margin-top: 5px;
}
.autoorder_options {
    margin-left: 5px;
    padding-left: 15px;
}
#form_autoorders .switch input + label {
    margin-right: 1rem;
}
#hinweis_window {
    position: fixed;
    /*top: 40px;*/
    bottom: 0px;
    display: block;
    /*width: 50%;*/
    font-size: 18px;
    border: 2px solid #515151;
    /* border-radius: 5px;*/
    z-index: 100000 !important;
    padding-left: 50px;
    width: 75%;
    width: 100%;
    left: 0;
    margin: 0 0 0 0;
}

#hinweis_window2, #hinweis_window3 {
    display: block;
    font-size: 18px;
    border: 2px solid #515151;
    /* border-radius: 5px;*/
    padding-left: 50px;
    width: 75%;
    width: 100%;
    left: 0;
    margin: 0 0 10px 0;
}
.padding_left_50 {
    padding-left: 50px;
}
.margin_bottom_0 {
    margin-bottom: 0;
}
.hinweis i {
    font-size: 36px;
}
.secondary {
}
.login_col .alert-box {
    padding-left: 50px;
}
.medium-block-grid-2 .button {
    margin-bottom: 0;
}
.order_woche_wrapper {
    margin-top: 10px;
    position: relative;
    padding: 35px 0px 0px 0px;
    border: none;
    background: none;
    margin-bottom:0;
}
.wochen_wrapper {
    padding-top: 0px;
    margin-top: 30px;
}
.order_info_wrapper {
    background: #4B4C47;
    padding: 5px 10px;
    color: #fff;
    font-size: 14px;
}
.preis_on_btn {
    /* position: absolute;
     width: 30%;*/
    /* bottom: -26px;
     top: 20px;
     right: 50px;*/
    font-size: 15px;
    font-weight: bold;
    color: #515151;
    text-align: right;
    background: #EFEFEF;
    background: #fff;
}

.btn_info {
    position: absolute;
    bottom: 0;
    height: 30px;
    background-repeat: no-repeat;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-position-x: 95%;
    background-position-y: center;
    padding: 5px 20px 5px 5px;
    line-height: 21px;
    font-size: 10px;
    /*padding: 5px;
    padding-right: 35px;
    z-index: 100;
    line-height: 19px;
    width: 100%;*/
}
.has-tip {
    border-bottom: none;
    /*z-index: 10000;*/
}
.has-tip:hover {
    border-bottom: none;
    /*z-index: 10000;*/
}
.info_on_btn {
    /*position: absolute;
    right: 50px;
    top: 25px;*/
    color: #fff;
    background: #EFEFEF;
    font-weight: bold;
    font-size: 14px;
    padding: 0px 0px 0px 0px;
    height: 25px;
    width: 100%;
}

.info_order_button {
    border-left: none;
    border-right: none;
    width: 15%;
    position: absolute;
    right:0;
    bottom: 0px;
    /* background: #4B4C47;*/
}
.preis_button {
    /*color: #fff;*/

    position: absolute;
    top: 13px;
    right: 0px;
    /*  width: 90px;*/
    padding: 5px 5px 5px 0px ;
    font-size: 16px;
    /*width: 100%;*/
    display: block;
    font-weight: bold;
    text-align: right;
    border-top: none;
    color: #4B4C47;
}
.preis_info_zu_men {
    position: absolute;
    top: 0px;
    right: 0px;
    /* background: #A0D3E8;*/
    display: block;
    font-size: 12px;
    padding: 4px  5px 0px 5px;
    color: #666;
    height: 19px;
    line-height: 15px;
    text-align: right;
    font-weight: normal;
}
.order_button_bestellt .preis_button, .order_button_bestellt .preis_info_zu_men, .order_button_bestellt  .menu_nr {
    color: #C5ED2B;
}
.menu_nr {
    position: absolute;
    top: -2px;
    left:-3px;
    font-size: 14px;
    width: 25px;
    height: 19px;
    padding: 0px 0px;
    text-align: center;
    color: #888;
}
.vegi, .vegan {
    /*position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 11px;
    padding: 5px;*/
    color: #fff;
    background: #6B8E00;
    padding: 2px 3px 2px 3px;
    font-size: 10px;
    text-align: center;
    margin-right: 5px;
    margin-left: 5px;
    /*z-index: 1000;*/
    /* display: block;*/
}
.info_balken {
}

.info_bar {
    color: #ddd;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(66,66,66,0.96);
    z-index: 1000;
    padding: 10px 20px;
}
.info_bar .alert-box  {
    padding: 5px 10px;
    margin-right: 20px;
    color: #E4E4E4;
    background: rgba(235,235,235,0.7);
    background: rgba(55,55,55,0.8);
    border: none;
    margin-bottom: 5px;
}
.info_bar .secondary {
}
.info_bar .alert-box i  {
    color: #fff;
    margin-right: 10px;
}
.info_bar .has-tip {
    color: #fff;
}
.info_bar .size-16 {
    color: #9E9E9E;
}

i.has-tip {
    margin-right: 5px;
}
.order_button.has-tip:hover, .order_button.has-tip:focus, .order_button.has-tip.open  {
    color: #4B4C47;
    background: #fff;
}
.order_button.has-tip.open, .order_button_bestellt.has-tip.open {

}
.order_button.has-tip:hover {
    background-color: #EEEFEA;
}
.order_button_bestellt.has-tip:hover, .order_button_bestellt.has-tip:focus {
    background-color: #98BB1D;
    color: #4B4C47;
}
.untertitel {
    font-size: 12px;
    color: #777 !important;
    margin-bottom: 2px;
}
.order_button .kf_green {
    color: #DBDBDB;
}
.kf_green {
    color: #98BB1D !important;
}
.kf_red {
    color: #E20915 !important;
}
.kf_white {
    color: #fff !important;
}
.kf_black {
    color: #000 !important;
}
.section h3 {
    margin-top: 5px;
}
.top-bar-section .has-tip:hover, .has-tip:focus {
    border: none;
    color: #fff;
}
.top-bar-section .has-tip {
    line-height: 120%;
}
.top-bar-section ul  a.alert_bg {
    background-color: #E20915 ;
}
.top-bar-section ul  a.alert_bg   {
    font-size: 26px;
}
.top-bar-section ul  a.alert_bg:hover {
    background-color: #AB0000 ;
}
input[type=checkbox] {
    /* All browsers except webkit*/
    transform: scale(1.5);

    /* Webkit browsers*/
    -webkit-transform: scale(1.5);
}
.bestellt_check {
    position: absolute;
    left:10px;
    top: 26%;
    color: #fff;
    color: #C5ED36;
}
.vegi {
}
.vegan {
}
.alert-box {
    font-size: 14px;
}
.info_on_btn.success {
    background: #98BB1D;
}
.info_on_btn.ok {
}
.info_on_btn.fail {
    background: #EFEFEF;
    color: #333333 ;
}
.info_on_btn span {
    height: 20px;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
}
.title-area .name {

}
.title-area .name h1 img {

    margin-top: 8px;
    margin-bottom: 5px;
    width: 70%;
    min-width: 110px;
}
.title-area .name h1 a {
    padding-right: 0;
}
.title-area .name div  {
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
}
.order_button_action {

}
.bestellt_check_str {
    font-size: 16px;
    font-weight: bold;
    color: #C5ED36;
    margin-right: 5px;
    position: absolute;
    bottom: 0px;
    right: 30px;
}
.kauf_info_no, .kauf_info_yes, .kauf_info_no2 {
    /* position: absolute;
     right: 0px;
     bottom: 0;*/
    display: block;
    background-repeat: no-repeat;
    background-position: center center;

    color: #fff;
    margin: 0px 5px;
    padding: 0px 0px;
}
.kauf_info_no {
    background-color: #E20915;
    background: none;
    color: #E20915;
}
.kauf_info_no2 {
    background-color: #E20915;
    /* z-index: 1000;*/
    background: none;
    color: #E20915;
}
.kauf_info_yes {
    background-color: #99BB1E;
    bottom: 0px;
    color: #fff;
    background: none;
    color: #99BB1E;
}
.kauf_info_yes i:hover {
    color: #99BB1E;
}
.kauf_info_no:hover, .kauf_info_no2:hover {
    color: #E20915;
}
.info_on_btn .ok {
    background: #FE860C;
}
.info_on_btn .fail {
    background: #EFEFEF;
    color: #333333 ;
}
.info_on_btn .alert {
    background: #E20A15;
}
.info_on_btn .success {
    background: #98BB1D;
}
.frist_on_btn {
    position: relative;
    padding: 0px 0px 0px 10px;
}
.frist_on_btn i {
    margin: 0px 0px 0px 0px;
    padding: 0;
}
.frist_on_btn div {
}
.frist_on_btn .has-tip {
}
.object_ok
{
    border: 1px solid green;
    color: #333333;
}

.object_error
{
    border: 1px solid #AC3962;
    color: #333333;
}

.frist_on_btn strong {
    display: inline-block;
    font-size: 13px;
    margin: 4px 0px 4px 0px;
    padding: 0px 0px 0px 0px;
    color: #bdbdbd;
}
.frist_on_btn span {
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
}
.frist_on_btn span i {

}

.icon_frist_0, .icon_frist_1 {
    padding: 2px;
    display: block;
}

.frist_on_btn .maxabbest_abgelaufen {
    color: #ddd;
}
.frist_on_btn .maxbest_abgelaufen {
    color: #ddd;
}
.frist_on_btn span {
    font-size: 12px;
    color: #ddd;
}
.semi_dark_bg {
    background-color: rgba(0,0,0,0.5);
    color: #ddd;
    padding: 3px 5px;
}

.button_lcoked .error_txt {
    color: #333333;
}

.week_start_end {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 0px 10px;
    display: block;
    border: 1px solid #515151;
    border: none;
    background: #fff;
    background: none;
    font-weight: bold;
    font-size: 18px;
    color: #C4C4C4;
}


.autoorder_table input {
    display: inline-block;
    float: left;
    margin: 0;
}
.autoorder_table th {
    background: #666;
    color: #fff;
}
.autoorder_table td {
    border-collapse: collapse;
}

.autoorder_table td label {
    display: block;
    padding: 5px;
    border: 1px solid #444;
    padding-bottom: 35px;
    position: relative;
}
.autoorder_menus {
    font-size: 11px;
    padding: 5px;
}
.autoorder_menus span {
    border: 1px solid #444;
    padding: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.autoordered {
    background: #FF870D;
    color: #fff;
    font-weight: bold;
}
.autoorder_table td.tag_td label {
    padding-bottom: 5px;
}
.autoorder_table td.tag_td .autoordered {
    background: #99BB1E;
}

.autoorder_table td.globalordered {
    background: #FF870D;
}
.navi .button, .side-nav .button {
    text-align: right;
    text-align: left;
    padding-right: 15px;
    padding-left: 10px;
    background-position: 2% center;
    background-repeat:  no-repeat;
}
.side-nav .button {
    background: #f3f3f3;
    color: #777;
}
.side-nav .button:hover, .side-nav .button.info:hover, .top-bar ul li a.button.info:hover, .top-bar ul li a.button:hover {
    background: #dedede;
    color: #333;
}
.side-nav .button.alert {
    background: #E20915;
    color: #fff;
}
.top-bar-section ul li a.button.info {
    border-color: #fff;

}
.side-nav .active_nav.button i, .side-nav .button.alert i {
    color: #fff;
}
.side-nav a i, .top-bar-section .sub_nav ul li a i {
    color: #979797;
}
.side-nav .active_nav.button:hover, .top-bar .active_nav.button:hover {
    background-color: #D46B01;
}
.side-nav .button.info, .top-bar-section ul li a.button, .top-bar-section ul li a.button.info {
    background: #FECB97;
    background: #f3f3f3;
    color: #777;
}
.side-nav .active_nav ,.side-nav .active_nav.info , .top-bar-section ul li a.active_nav, .top-bar-section ul li a.active_nav.info {
    background-color: #d46b01;
    color: #fff;
}
.side-nav .active_nav, .top-bar-section ul li .active_nav  {
    color:#fff;
    background-color: #FE860C;
}
.navi .button:after {
    right: 5px;
    top: auto;
    bottom: 0px;
}

.button_example .button-icon {
    position: absolute;
    top: 0;
    right: 5%;
}

.button_example i {
    color: #979797;
}
.button_example {
    position: relative;
    text-align: right;
    text-align: left;
    padding-right: 15px;
    padding-left: 10px;
    background-position: 2% center;
    background-repeat:  no-repeat;
    background: #f3f3f3;
    color: #777;
    display: block;
    margin-top: -5px;
    margin-bottom: 5px;
    padding-right: 16px;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    width: 180px;
}

.standard-navi {
    padding: 10px;
    border-top: none;
    border-color: #fff;
}
.sticky {
    border-bottom: 1px solid #333;
}
.side-nav .button {
    margin-bottom: 5px;
    padding-right: 16px;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.button-icon {
    position: absolute;
    top: 3%;
    right: 5%;
}
.f-dropdown a, .dropdown a {
    position: relative;
}
.f-dropdown li .button-icon , .dropdown li .button-icon {
    line-height: 100%;
}
.icon_off {
    background-image: url(../images/icon_off.png);
    background-size: 20%;
}
.icon_settings {
    background-image: url(../images/icon_settings.png);
}
.icon_cart {
    background-image: url(../images/icon_cart.png);
}
.icon_user {
    background-image: url(../images/icon_user.png);
    background-size: 15%;
}
.icon_konto {
    background-image: url(../images/icon_konto.png);
}

.icon_locked {
    /*background-image: url(../images/icon_locked.png) ;*/
}
.icon_incart {
    background-image: url(../images/icon_incart.png) ;
    background-size: 20%;
}
.icon_cash {
    background-image: url(../images/icon_cash.png) ;
    background-size: 20%;
}

.icon_frist_0 {
    /*  background: url(../images/icon_frist_0.png) no-repeat;*/
}
.icon_frist_1 {
    /*background: url(../images/icon_frist_1.png) no-repeat;*/
}
.icon_info {
    background-image: url(../images/icon_info.png) ;
}
.icon_trash {
    /*  background-color: #E20915;*/
}
.icon_email {
    background-image: url(../images/icon_email.png) ;
    background-size: 20%;
}
.icon_protokoll {
    background-image: url(../images/icon_protokoll.png) ;
    background-size: 20%;
}
.icon_faq {
    background-image: url(../images/icon_faq.png) ;
    background-size: 20%;
}
.faq_frage {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
.icon_check {
    /* background-image: url(../images/icon_check.png) ;
     background-color: #99BB1E;
     background-position: 95% center;*/
}
.bg_size_contain {
    background-size: contain;
}

.ueberweisung_wrapper {
    position: relative;
    border: 1px solid red;
}

.vwz_text, .vwz2_text {
    position: absolute;
    left: 35px;
    color: #E20B13 !important;
    font-weight: bold;
    font-size:20px;
    letter-spacing: 8px;
    /*border: 3px solid #E20B13;*/
}

.vwz_text {
    top: 185px;
    top: 50%;
}
.vwz2_text {
    top: 215px;
    top: 58%;
}

#mark_vwz {
    padding: 5px 0px;
    background: #fff;
    border: 2px solid red;
    left: 38%;
    position: absolute;
    top: 50%;
    z-index: 1000;
}

.order_button:hover {
    background: #EBEBEB;
    color: #4B4C47;
}
.order_button:focus {
    background: #fff;
    color: #4B4C47;
}
.order_button_bestellt, .order_button_bestellt:hover, .order_button_bestellt:focus  {
    background-color: #FE860C;
    background-color: #98BB1D;
}
.joy_navi .button {
    top: auto;
    right: auto;
    color: #fff !important;
    font-size: 14px;
    line-height: auto ;
    text-decoration: none;
}
.joyride-tip-guide {
    z-index: 1006;
}
.joyride-content-wrapper i {
    margin-right: 5px;
}
.joyride-content-wrapper h4 {
    margin-bottom: 10px;
}
.joy_navi .joyride-next-tip {
    width: 100%;
    float: right;
}
.joyride-prev-tip {
    background: #666;
}
.joyride-tip-guide .joyride-nub.top, .joyride-tip-guide .joyride-nub.right, .joyride-tip-guide .joyride-nub.left, .joyride-tip-guide .joyride-nub.bottom {

    border-color: #0A3D52;
    border-color: #FE860C;
    border-color: #FEFE00;
}
.joyride-tip-guide .joyride-nub.left, .joyride-tip-guide .joyride-nub.right {
    top: 5px;
}
.joyride-content-wrapper {
    background: #333;
    border: 3px solid #FE860C;
    border: 3px solid #FEFE00;
}
.joy_highlighted {
    z-index: 1005;
    border: 4px solid #FEFE00;
}
.wider_joyride {
    width: 40%;
}
.clear {
    clear: both;
}
.custom_joy_button {
    margin-right: 10px;
}
.icon_legend span {
}
.hochgestellte_fussnote {
    font-size: 10px;
}
.order_table .order_button_bestellt_locked.disabled, .button[disabled] {
    background-color: #98BB1D;
}

.joyride-content-wrapper .button.joyride-prev-tip, .button.joyride-custom-prev-tip {
    margin-bottom: 5px !important;
    margin-right: 5px !important;
    background-color: #666666;
}





.kw_nav .button {
    position: relative;
    padding-right: 15px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 16px  !important;
    margin-bottom: 0;
}
.kw_nav .button .label {
    position: absolute;
    padding: 1px;
    bottom:0;
    right:0;
    background: none;
}
.kw_nav .button.secondary {
    color: #888;
    background: #fff;
    border: 1px solid #ccc !important;
}
.kw_nav .button.secondary:hover {
    background: #F2F2F2;
}
.kw_nav .success.button {
    color: #666;
    color: #F2F2F2 !important;
    background: #ddd;
    background: #98BB1D;
    border: 1px solid #aaa !important;
}
.kw_nav .button .label {
    color: #888;
    font-weight: bold;
    font-size: 14px;
}
.kw_nav_panel {
    position: relative;
    padding: 10px 0px 10px 0px;
    margin: 0;
    margin-top: 10px;
}
.kw_nav_panel a i {
    line-height: 100%;
}
.kw_nav_panel a  {
    text-align: left;
    color: #ccc;
}
.kw_nav_panel a.left  {
    position: absolute;
    top: 15px;
    left:3px;
}
.kw_nav_panel a.right  {
    position: absolute;
    top: 15px;
    right: 3px;
}

.kw_nav_panel a:hover, .kw_nav_panel a:focus  {
    color: #bbb;
}
.wochen_wrapper {
    margin-top: 0;
    padding-bottom: 0;
}
.order_woche_wrapper {
    padding-top: 0;
    padding-bottom: 0;
}


.button_col {
    padding: 0px;
    overflow:hidden;
}
hr {
    margin: 5px 0px;
}

.kw_prev_btn, .kw_next_btn {
    position: absolute;
    top: 50%;
    margin-top: -200px;
    width: 0;
    height: 0;
    border-top: 200px solid transparent;
    border-bottom: 200px solid transparent;
    z-index: -1;
}

.kw_next_btn {
    border-left: 35px solid #E0E0E0;
}
.kw_prev_btn  {
    border-right: 35px solid #E0E0E0;
}

.button_col .pos_rel {
}
.button_col a:hover .kw_next_btn, .button_col a:focus .kw_next_btn{
    border-left: 35px solid #D8D8D8;
}
.button_col a:hover .kw_prev_btn,  .button_col a:focus .kw_prev_btn{
    border-right: 35px solid #D8D8D8;
}

.frist_on_btn span.fristen_info {
    font-size: 13px !important;
    line-height:26px;
}

/*641px bis 1025px*/
@media only screen and (min-width: 40.0625em) and (max-width: 64.0625em) {

.top-bar-section li.has-dropdown a.active_user {
    padding: 3px 5px;
}

    .wider_joyride {
        width: 75%;
    }
    .top-bar a.button {
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .title-area .name h1 img {
        margin-top: 8px;
        width: 80%;
        min-width: 80%;
        margin-bottom: 8px;

    }
    .top-bar .name div h1 a  {
        padding: 0 5px 0px 5px;
        width: 50%;
    }
    .top_r .joyride-nub {
        left: auto ;
        right: 80px ;
        top: 5px;
    }
    .guthaben_mob.joyride-tip-guide {
        left: auto  !important;
        right: 60px !important;
    }
    .top_r.joyride-tip-guide {
    }

} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (max-width: 64.0625em) {
    .top-bar {
        height: 100px;
    }
    .top_r .joyride-nub {
        left: auto ;
        right: 80px ;
        top: 60px;
    }
    .guthaben_mob .joyride-nub {
        left: auto ;
        right: 80px ;
    }
    .title-area .name .show_konto_small {
        margin-right: 80px;
        color: #fff;
        padding: 5px 10px;
        border-right: 1px solid #4E4E4E;
        border-left: 1px solid #4E4E4E;
    }
    .title-area .name .show_konto_small i {
        margin-right: 5px;
    }
    .top-bar-section {
        padding-top: 80px;
    }
    .info_mob {
        position: absolute;top:0;left:0; display: block;
    }
    .top-bar .info_mob li a.has-tip:hover {
        background-color: #333333;
        cursor: default;
    }
    .top-bar .info_mob li a.has-tip {
        font-size: 11px;
        padding: 5px 10px;
    }
    #joy3_1 i {
        margin-top: -3px;
    }
    .start_joy {
    }
}

.size-9 { font-size: 9px; }
.size-10 { font-size: 10px; }
.size-11 { font-size: 11px; }
.size-12 { font-size: 12px; }
.size-13 { font-size: 13px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-26 { font-size: 26px; }
.size-28 { font-size: 28px; }
.size-30 { font-size: 30px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }


/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (max-width: 40.0625em) {
    .pauschalen_tr h5, .pauschalen_tr h5 p {
        font-size:14px;
    }
    .pauschalen_tr td .alert-box, .pauschalen_tr td a{
        font-size: 14px;
        padding:5px;
    }

    .kw_nav .button {
        font-size: 12px ;
    }
    .kw_nav .button i {
        font-size: 12px ;
    }
    .pikto_list li {
        font-size: 9px;
        line-height: 11px;
    }
    .pikto_list li i {
        font-size: 11px;
        line-height: 12px;
    }
    .frist_on_btn span.fristen_info {
        font-size: 11px !important;
        line-height:14px;
    }


    .frist_on_btn strong {
        margin-bottom: 0px;
    }
    .vegi, .vegan {
    }
    .wider_joyride {
        width: 95%;
    }
    .tooltip {
        width: 100% !important;
        max-width: 95%;
        left: auto;
    }
    .tooltip .nub {
        border-color: red;
        border-color: transparent transparent #333;
        top: -10px;
    }
    .top_r .joyride-nub {
        right: 5px !important;
    }
    .start_joy {
        width: 95%;
    }
    .login_col {
        margin-top: 30px;
    }
    .order_woche_wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    .footer-row {
        padding-bottom: 40px;
    }
    .column {
        padding-left: 10px;
        padding-right: 10px;
    }
    .button {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }


    .order_button, .order_button_locked, .order_button_bestellt, .order_button_bestellt_locked {
        padding-left: 40px;
        padding-right: 20%;
        padding-top: 22px;
        padding-bottom: 20px;
        font-size: 13px;
    }
    .order_button_bestellt i {
        font-size: 26px;

    }
    .order_button {

    }
    .order_woche_wrapper {
        padding-top: 0px;
    }
    .sub_nav {
        background-repeat: no-repeat;
        background-size: contain;
    }
    .menu_nr {
        width: 15px;
    }
    .kauf_info_no2 i, .kauf_info_no i, .kauf_info_yes i{
        font-size: 18px;
    }
    .info_order_button {
        top: auto;
        bottom:0;
        width: 35%;
    }
    .info_order_button i {
        font-size: 24px;
    }
    .kauf_info_no2 {
        font-size: 13px;
    }
    .preis_info_zu_men {
        left: 15px;
    }
    .preis_button {
        font-size: 13px;
        padding: 5px;
    }
    .week_start_end {
        margin-top: 0px;
    }


    .icon_check {
        background-position: center center;
    }
    .top-bar, .top-bar ul li, .top-bar.expanded .title-area {

    }
    .top-bar .toggle-topbar.menu-icon a, .top-bar ul li a {

    }
    .top-bar ul li a.button {
        background-size: contain;
        border-bottom: 1px solid #fff;
    }
    .top-bar .toggle-topbar.menu-icon a span::after {
        box-shadow: 0px 0px 0px 1px #fff, 0px 7px 0px 1px #fff, 0px 14px 0px 1px #fff;
    }

    .top-bar-section .has-dropdown > a::after {
        border-color: transparent transparent transparent rgba(100, 100, 100, 0.4);
    }
    .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
        color: #4C4746;
    }
    .top-bar-section .has-dropdown > a::after {

        right: -15px;
    }
    .top-bar-section .button {
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
        background: #4C4746;
    }
    .top-bar .name i  {
        display: block;
        margin-right: 3px;
    }
    .top-bar .name h1 a {
        padding-left: 5px;
    }
    .top-bar .name span {
        line-height: 115%;
        font-size: 12px;
        margin-top: 5px;
        width: 26%;
    }
    .top-bar .toggle-topbar.menu-icon a {
        padding: 0 2.2rem 0 0.2375rem !important;
    }
    .top-bar .title-area .name h1 a {
        display: inline-block;
        padding-right: 0 ;
        margin-right: 0 !important;
        padding-top: 3px;
        padding-bottom: 5px;
    }
    .mobile-icon-bar {
        top: auto;
        bottom: 0;
        z-index: 1000;
        border-top: 1px solid #555;
    }
    .mobile-icon-bar .item {
        padding: 5px;
    }
    .title-area .name h1 img {
        width: 65%;
        min-width: 110px;

    }


    .info_bar {
        position: fixed;
        top: 40px;
        top: auto;
        bottom: 4%;
        z-index: 1;

        margin: 0px;
        padding: 5px 0px;
    }
    .info_bar .alert-box  {

        padding: 0px 10px;
        line-height: 24px;
        margin: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        font-size: 12px;
        width: 100%;
    }
    .info_bar .small-50 {
        width: 70% ;
    }
    .info_bar .small-30 {
        padding: 0px 5px;
        width: 30% ;
    }
    .info_bar .secondary {
    }
    .info_bar .alert-box i  {
        color: #fff;
        margin-right: 10px;
    }
    .info_bar .has-tip {
        color: #fff;
    }
    .info_bar .size-36 {
        font-size: 26px;
    }
    .info_bar .size-30 {
        font-size: 26px;
    }
    .info_bar .size-26 {
        font-size: 21px;
    }
    .info_bar .size-21 {
        font-size: 18px;
    }
    .week_start_end {
        font-size: 12px;
        width: 100%;
        left: 0;
    }
    .footer-row {
        padding-bottom: 40px;
        padding-top: 10px;
    }
    .footer-row p {
        font-size: 12px;
    }
    .vwz2_text {
        left: 7%;
        font-size: 12px;

        letter-spacing: 3px;
    }
    .vwz_text {
        left: 7%;
        font-size: 12px;
        letter-spacing: 3px;
    }
    nav i.has-tip {
        color: #333333 !important;
    }
    .order_button.button, .order_button_locked.button, .order_button_bestellt.button, .order_button_bestellt_locked.button {
        font-size: 16px;
        line-height: 120%;
    }

    .bestellt_check_str {
        font-size: 12px;
        bottom: 0px;
        right: 20px;
    }
}

.tabs-content h3 {
    margin: 20px 0px;
    color: #888;
}

.tabs-content {
    *zoom: 1;
    margin-bottom: 1.5rem;

    /* Customized */
    /* opacity: 0;*/
}
/* Customized */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
.tabs-content:after {
    clear: both; }
.tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
.tabs-content > .content.active {

    /* Customized */
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    opacity: 1;

    display: block; }
.backbutton.button.secondary {
    color: #ccc;
    background: #eee;
    padding: 5px 25px;
}
.backbutton.button.secondary i {
    color: #ccc;
    font-size: 36px;
}
.backbutton.button i.fi-arrow-left {
    color: #fcfcfc;
}
.alert-box {
    /*padding-left: 50px;*/
}
.alert-box i {
    position: absolute;
    top: -2px;
    left: 8px;
    color: #fff;
    font-size: 40px;
}
.alert-box i.addit_icon {
    top: 35px;
}


/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#000; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status_loader {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}


.loading_modal {
    /*  display: none;*/
    display: block;
    position:   fixed;
    text-align: center;
    z-index:    2000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    /* background: rgba( 255, 255, 255, .9 )
                 url('../images/ajax-loader.gif')
                 50% 50%
                 no-repeat;*/
    background-color: #000;
}

.loading_modal .spin, .loading_txt {
    width:50px;
    height:50px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    margin:-25px 0 0 -25px; /* is width and height divided by two */
}
.reveal-modal-bg {

}
.reveal-modal {
    z-index:2000 !important;
    -webkit-transform: translate3d(0,0,1px);
    transform: translate3d(0,0,1px);
}
.reveal-modal * {
}
.loading_txt {
    font-weight: bold;
    color: #ddd;
    width: 300px;

    top: 41%;
    margin:-25px 0 0 -150px; /* is width and height divided by two */
}
.spin div {
    background: #fff;
}

.spin
{
    background: #000; /* outline */
    > *
    {
        background: red; /* hand */
    }
}

#joy8 .fi-alert {
    top: 0px;
}

.kf_green2 {
    color: #ACCF31 !important;
}

.panel  h6 {
    font-weight: bold !important;
    font-size: 16px;
}
.cc-window {
}
.cc-message {
    font-size: 12px;
}
.cc-dismiss {
    min-width: 100px;
}


.kf_orange {
    color: #FE860C;
}
.kf_orange_small {
    color: #FE860C;
}

.kf_blue_small {
    color: #6EB3DD;
}

.preis_info_zu_men.font_bold {
    font-weight: bold;
}


.top-bar-section .user_select li:not(.has-form).active a:not(.button) {
    background: #98BB1D;
}

.top-bar-section ul li.has-dropdown a.active_user {
    background: #98BB1D;
    font-weight:bold;
    font-size: 16px;
}

.nigtopf {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

#active_user_fixed {
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
}

.padding_smaller {
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}