/*!
(c) oekobox-online.eu 2016-19. Free for use with oekobox-online services .
NoDesign Test Pages. You'll find the component-related styles below the generic selectors.
See https://oekobox-online.de/news?a=js.CSSDocu for more information.

This is the core framework CSS. Place your overrides into separate files.

CSS follows lightly the BEM style, but with a naming following the components.

Version $Revision: 1.232 $
*/

.oo-password-field {
    position: relative;
}

.oo-password-icon-container{
    position: absolute;
    right: 10%;
    transform: translateY(-50%);
    top: 50%;
}

.oo-toggle-password-show{
    background-image: url("../api/oo_icons.svg?fg=black#oo-eye");
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    cursor: pointer;
}

.oo-toggle-password-hide{
    background-image: url("../api/oo_icons.svg?fg=black#oo-eyeclosed");
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    cursor: pointer;
}

.oo-border {
    border: 1px solid #000;
}

.oo-text-center {
    text-align: center;
}

.oo-p-2 {
    padding: 8px;
}

.oo-mr-2 {
    margin-right: 8px;
}

.oo-mt-2 {
    margin-top: 8px;
}

.oo-testing {
    display: none ;
}

.oo-loadingbar-box {
     width:100%;height:2px;z-index:9999;top:0
}
.oo-loadingbar-bar {
    width:0;height:100%;background:#000;
    transition:opacity .7s;
}
.oo-loadingbar-done {
    opacity:0;
}

/****** Chat Component */
#oo-chat {
    width: 300px;
    z-index: 2000;
}
#oo-chat-pane {
    border: 1px solid gray;
    height: 400px;       /* not 100%, unless we preallocate the space */
    margin-bottom: 30px; /* opens upwards */
}

#oo-chat-pane table {
    height: 100%;
    width: 100%;
    min-height: 100%;
    border: none;
}

#oo-chat-pane table td {
    vertical-align: bottom;
}

.oo-chat-conversation {
    background-color: ghostwhite;
    height: 330px;
    position:relative;
    padding: 1em;
}
.oo-chat-conversation-inner {
    position: absolute;
    overflow-y: auto;
    max-height: 100%;
    bottom: 0;
    padding-right: 1em;
}
.oo-chat-sep {
    font-size: 0.8em;
    text-align: center;
    border-bottom: 1px dotted gray;
    color: darkgray;
    margin-bottom: 3px;
    clear: both;
}
.oo-chat-input form {
    margin: 0;
}
.oo-chat-input input[type="text"] {
    width: 84%;
    padding: 3px;
    box-sizing: border-box;
}
.oo-chat-input button {
    width: 10%;
    height: 22px;
    vertical-align: middle;
    padding: inherit;
}
.oo-chat-boxy, .oo-chat-user {
    padding: 3px;
    display: inline-block;
    clear: both;
    border-radius: 5px;
    margin-top: 1px;
}

.oo-chat-boxy {
    background-color: bisque;
    float: right;
    margin-left: 2em;
}

.oo-chat-boxy LI {
    display: list-item;
    list-style: circle;
}

.oo-chat-user {
    background-color: limegreen;
    float: left;
}
.oo-chat-boxy table td {  /* server responses have some decent html */
    border-bottom: 1px solid silver;
}
#oo-chat .oo-overlay-close {
    z-index: 1000;
    position: relative;
}
.oo-chat-aiwaiting {
    background: url(oo_icons.svg#oo-refresh) no-repeat;
    vertical-align: middle;
    animation: rotation 2s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
/****** Navigation Component */

.oo-navi-head.oo-navi-image-none {
    display: none;           /* collapse the banner area if there is no image */
}

/****** Status Component */

#oo-status .oo-status-auth-logoutlink {
    display: none; /* we dont want the user to logout, so better dont show this that prominent. Another logout is in profile */
}
#oo-status div {
    display: inline-block;
}
#oo-status div.oo-status-cart-empty {         /* change this if you want to show an empty cart */
    display: none;
}
#oo-status  .oo-status-cart-label, #oo-status .oo-status-fav-label  {   /* optional a text */
    display: none;
}
#oo-status .oo-status-cart-preview {
    max-width: 350px;
    max-height: 350px;
    right: 0;
}

#oo-status .oo-status-cart-preview  {   /* see also shared below */
    overflow-y: scroll;
    font-size: smaller;
}
#oo-status .oo-status-cart-preview A, #oo-status .oo-status-auth-preview A {
    display: block;
    margin: 4px;
}

#oo-status tbody.oo-cart-pos-over10 {  }                                      /* added when > 10 positions in list */

#oo-status .oo-cart-delivercost-note {                                        /* finetune cart preview table */
    display: block;
}
#oo-status .oo-cart-delivercost {
    font-size: smaller;
}
#oo-status .oo-cart-delivercost td , #oo-status .oo-cart-sum td {
    border-top: 1px solid silver;
}
.oo-cart-delivercost tr {
    line-height: 1.2em;
}
#oo-status .oo-status-cart-preview .oo-container, #oo-status .oo-status-cart-preview table  {
    width: 100%;
}
#oo-status .oo-cart-sum td, #oo-status .oo-cart-pos td.oo-e2 {
    text-align: right;
}                                                                           /* END finetune cart preview table */
#oo-status .oo-status-auth-date-preview LI {                                /* finetune dates preview */
    list-style: none;
    padding: 4px;
}
#oo-status .oo-status-auth-date-preview UL {
    padding: 0;
}
#oo-status .oo-status-cart .oo-status-cart-count:before {
    content: "(";
}
#oo-status .oo-status-cart .oo-status-cart-count:after {
    content: ")";
}
.oo-status-cart-modified .oo-status-cart-count {  /* red indicates: "dont forget to send!" */
    color: red;
}
#oo-status .oo-status-fav, #oo-status .oo-status-help {
    width: 20px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 16px;
    text-align: center;
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
}
#oo-status .oo-status-help {
    background-image: url(oo_icons.svg#oo-help);
    background-size: 1.4em 1.4em; /* use max line */
}
.oo-status-help-pane {
    width: 60%;
    position: fixed !important;
    left: 20%;
    max-height: 70%;
    min-height: 20%;
    top: 20%;
    z-index: 201;
    padding: 1em !important;
}
.oo-status-help-content li {
    display: list-item;
    list-style: disc;
}
.oo-help-buttons {
    float: right;
    padding-top: 1em;
}
#oo-help-blend {
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index:100;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
#oo-status #oo-cookie {      /* see also below*/
    /* display: none; initially */
}

#oo-status .oo-status-auth-date-preview .oo-active A {
    cursor: default;
}
#oo-status .oo-status-tourinfo-hint {
    position: fixed;
    left: 20% !important;
    top: 20% !important;
    width: 50%;
    z-index: 1000;
}
.oo-status-tourinfo-hint .oo-status-tourinfo1 {
    min-height: 3em;
}
#oo-status .oo-status-tourinfo1-btn {
    display: block;
    text-align: right;
}
    /****** Flash Component */

.oo-flash-msg, .oo-flash-error {
    display: inline-block;
    margin: 10px;
    font-weight: bold;
}
.oo-flash-msg {
    color: darkgreen;
}
.oo-flash-error {
    background-color: lightsalmon;
}
.oo-flash-error:after {
    content: "x";
    position: relative;
    top: -2px;
    right: -10px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    background-color: ivory;
    color: red;
    cursor: pointer;
}

/****** Path Component  */

/****** Date Component */

#oo-date-pane A span + span:before {
   content: ", ";
}

.oo-date-over, .oo-status-field A.oo-date-over {          /* shared with status */
    color: red;
}
#oo-date .oo-date-over {
    cursor: not-allowed !important;
    pointer-events: none;
    background-color: silver;
}
#oo-date .oo-active, #oo-date .oo-active A {
    cursor: default;
}
.oo-date-too-late, .oo-date-too-late A {
    color: red;
}
.oo-date-itemcount:after {
    content: ' Artikel'
}
.oo-date-abocount:after {
    content: ' Abos'
}
#oo-date-pane {
    padding: 10px;
}
#oo-date-pane LI {
    list-style: none;
    padding: 10px;
}
#oo-date-pane LI .oo-date-tour-txt {
    display: block;
}
.oo-date-msg {
    margin-left: 20px;
}
.oo-date-extra {
    color: gray;
}

#oo-date-list {
    display: block;
    clear: both;
}
.ui-datepicker-prev {
    float: left;
    padding-right: 10px;
}
#oo-date-action {
    clear: both;
}
.oo-date-action-tour-info .oo-p4 {
    white-space: nowrap;
}
#oo-date-action-tours .oo-p1, #oo-date-action-tours .oo-p3, #oo-date-action-tours .oo-p3, #oo-date-action-tours .oo-p4 {
    font-style: italic;
}
.oo-date-icon {
    border-radius: 1em;
    color: transparent;
    display: none;      /* enable : inline-block */
    height: 1em;
    vertical-align: top;
}
#oo-date .ui-datepicker-calendar TD A, #oo-date .ui-datepicker-calendar TD SPAN  {          /* datepicker is reused also in profile! */
    min-width: 1em;
}
.oo-date-action-tour-osh-g {
    padding-left: 1.5em;
    background-image: url(oo_icons.svg#oo-att);
    background-size: 1.2em 1.2em;
    background-repeat: no-repeat;
}
/****** Ticker Component */

.oo-ticker {
    width: 200px;
    position: relative;
}
.oo-ticker-item {
    display: inline-block;
    vertical-align: top;
    position: relative;     /* for inner stuff to be positioned */
}
.oo-ticker .oo-item-img {
    width: 200px;
    height: 200px;
}

.oo-ticker:hover .oo-ticker-controls {      /* shows scrolling buttons */
    display: inline-block;
    z-index: 200;
}
.oo-ticker .oo-ticker-controls {
    /*  display: none;  initially */
    position: absolute;
    right: 0;
    top: 0;
}

#oo-ticker-popup {
    display: none;
}
.oo-ticker-tags {
    display: none;
}
.oo-ticker-head {
    display: none;
}
.oo-ticker .oo-item-discounttag {
    display: none;
}

/****** Cart Component */

.oo-cart-headline {
    display: none;
}
.oo-cart-item-price-wrapper {
    display: none;  /* test me !*/
}

.oo-cart-cart {
    padding-bottom: 100px;
}
.oo-cart-cartlink1-wr { /* extra link, only useful for embedded carts*/
    display: none;
}
.oo-cart-info-ddate-thx-cid-txt {
    display: none;         /* better not, not good for new custoemrs */
}
.oo-cart-pos {
    border: 1px solid silver;
    cursor: pointer;
}
#oo-cart TD {
    padding: 5px;
}
.oo-cart-pos > div {
    float: left;
    display: inline-block;
}
.oo-cart-pos-info {
    clear: left;
}
.oo-cart-pos-img {
    vertical-align: top;
    float: left;
    width: 40px;
    height: 40px;
}
#oo-cart-pane DIV, .oo-cart-pane-extra DIV {   /* cart positions */
    display: inline;
}
#Xoo-cart-pane .oo-cart-pos-info {
    display: inline-block;
}
#oo-cart-sum, #oo-cart-vat-pane, #oo-cart-pane .oo-cart-pos-total, .oo-cart-delivercost TD {
    text-align: right;
}
#oo-cart-sum .oo-cart-quotes {
    float: left;
}

TD.oo-cart-delivercost-val {
    vertical-align: top;
}

.oo-cart-pos Td{                  /* see also shared */
    position: relative;
}
.oo-cart-pos-controls {
    position:absolute;
    right:30px;
    top: 5px;
}

#oo-cart tr .oo-icon {                           /* abo icons */
    background-size: 1.5em 1.5em;                    /* icons are in a svg named matrix   */
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    opacity: 0.7;
}
.oo-cart-pos-infotxt {
    display: none;                  /* default save space */
}
.oo-cart-pos-voucher  .oo-cart-pos-infotxt {  /*important info */
    display: block;
}
.oo-cart-pos-voucher  .oo-cart-item-price-wrapper,.oo-cart-pos-voucher .oo-cart-pos-amount,
    .oo-cart-pos-voucher .oo-cart-pos-unit, .oo-cart-pos-voucher .oo-cart-pos-note-hint {
    display: none !important;
}
/* handling of position notes */
#oo-cart .oo-cart-pos-note-btn {
    background-image: url(oo_icons.svg#oo-comment);
    vertical-align: bottom;
}
.oo-cart-pos-note-ta {
    display: block;
    width: 100%;
    height: 2.5em;
    /* min-height: 2em;        sandstorm layout */
    border-color: #f0f0f0;
    padding: 2px;
    padding-left: 5px;
    font-style: italic;
    overflow: auto;
}
.oo-cart-pos-note-note form {
    position: relative;
}
.oo-cart-pos-note-note .oo-overlay-close {
    bottom: 0.5em;
    position: absolute;
    line-height: 1;
    font-size: 0.8em;
    right: 1em;
    /* display: none;  see below */
}
#oo-cart .oo-cart-pos-note-hint {
    background-image: url(oo_icons.svg#oo-comment);
    vertical-align: bottom;
    display: none;
}

/* div variant */
div.oo-cart-pos {
    display: block;
    width: 100%;
    position: relative;
    float:left;
}
div.oo-cart-pos .oo-cart-pos-item {
    min-width: 70%;
}
.oo-cart-pos-controls {
    right: 60px;
}
div.oo-cart-pos-total {
    float: right;
}
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-abodates {
    top: 0px;
    position: absolute;
}

.oo-cart-pos {
    Xborder: none;
}
.oo-cart-list div.oo-cart-pos {
    border: none;
    border-top: 1px solid silver;
}

/* div with boxes */
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-dupinfo {
    position: absolute;
    top:20px;
}
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-problem {
    position: absolute;
    top:20px;
}
.oo-cart-boxes div.oo-cart-pos {
    display: inline-block;
    width: 10em;
    height: 8em;
    margin: 1px;
    border: 1px solid silver;
}
.oo-cart-boxes .oo-cart-pos-controls {
    right: 0;
    z-index: 1;   /* to be over all other elements */
}
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-item {
    display: block;
    width: 100%;
}
.oo-cart-boxes .oo-cart-item-price-wrapper {
    position: absolute;
    bottom: 1.5em;
    right: 0;
    display: inline-block;
}
.oo-cart-search input {
    border: 1px solid silver;
}

.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-amountline {
    display: block;
    width: 100%;
    height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-img {
    width: 100%;
    height: 4em;
    opacity: 35%;
}
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-name {
    /*
    max-width: 6em;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 1.2em;
     */
}
/* todo show box like braun */

#oo-cart-view-controls div {  /* make hoizontal */
    display: inline-block;
    height: 2em;
}
.oo-cart-boxes.oo-cart-sort-g .oo-pos-groupchg {
    clear: both;
}
.oo-cart-list.oo-cart-sort-g .oo-pos-groupchg {
    border-top: 2px dashed silver;
    padding-top: 2em;
}
.oo-cart-sort-g .oo-pos-groupchg {
    clear: both;
}

/* no space for gimmicks... */
.oo-cart-boxes div.oo-cart-pos .oo-item-associationtag, .oo-cart-boxes div.oo-cart-pos .oo-cart-pos-ti, .oo-cart-boxes div.oo-cart-pos .oo-cart-pos-note,
.oo-cart-boxes div.oo-cart-pos .oo-cart-pos-abodates .oo-text, .oo-cart-boxes .oo-cart-pos-total,
.oo-cart-boxes .oo-cart-pos-assortment-group
{
    display: none !important;
}

/* no grouping of boxes in most sort modes */
.oo-cart-sort-az #oo-cart-pane DIV.oo-cart-pos-assortedhint, .oo-cart-sort-g #oo-cart-pane  DIV.oo-cart-pos-assortedhint {
    display: inline-block;
}
.oo-cart-sort-az #oo-cart-pane .oo-cart-pos-assortment-group, .oo-cart-sort-g #oo-cart-pane .oo-cart-pos-assortment-group {
    display: none;
}
.oo-cart-sort-az div.oo-cart-pos-assorted,.oo-cart-sort-g div.oo-cart-pos-assorted {
    padding-left: 0;
}
.oo-cart-boxes DIV.oo-cart-pos-assortedhint {
    position: absolute;  /* arrange for boxes */
    top: 46px;
}

#oo-cart-view-controls {
    float: right;
}
#oo-cart-view-controls div {
    display: block;
}
#oo-cart-view-controls div.oo-cart-view-list {
    background-image: url(oo_icons.svg#oo-recipe);
}
#oo-cart-view-controls div.oo-cart-view-box {
    background-image: url(oo_icons.svg#oo-pack);
}
#oo-cart-view-controls div.oo-cart-view-sortaz {
    background-image: url(oo_icons.svg#oo-sort-az);
    margin-top: 1em;
}
#oo-cart-view-controls div.oo-cart-view-sortts {
    background-image: url(oo_icons.svg#oo-sort-ts);
}
#oo-cart-view-controls div.oo-cart-view-sortabo {
    background-image: url(oo_icons.svg#oo-sort-abo);
}
#oo-cart-view-controls div.oo-cart-view-sortg {
    background-image: url(oo_icons.svg#oo-sort-g);
}


/*
.oo-cart-pos-note-ta:focus + span {  show on focus    https://stackoverflow.com/a/13315900/1667804 - cool idea - but prevents event handlimg
     display: block;
}
*/

/* we pray for safari 11.1: https://caniuse.com/#feat=svg-fragment */
.oo-sub-mark-due .oo-sub-period-1 .oo-icon { background-image: url(oo_sub.svg#oo-sub); }
.oo-sub-mark-due .oo-sub-period-2 .oo-icon { background-image: url(oo_sub.svg#oo-sub2); }
.oo-sub-mark-due .oo-sub-period-3 .oo-icon { background-image: url(oo_sub.svg#oo-sub3); }
.oo-sub-mark-due .oo-sub-period-4 .oo-icon { background-image: url(oo_sub.svg#oo-sub4); }
.oo-sub-mark-due .oo-sub-period-5 .oo-icon { background-image: url(oo_sub.svg#oo-sub5); }
.oo-sub-mark-due .oo-sub-period-6 .oo-icon { background-image: url(oo_sub.svg#oo-sub6); }
.oo-sub-mark-due .oo-sub-period-8 .oo-icon { background-image: url(oo_sub.svg#oo-sub6); }
.oo-sub-mark-due .oo-sub-period-monthly-1 .oo-icon { background-image: url(oo_sub.svg#oo-sub); }
.oo-sub-mark-due .oo-sub-period-monthly-2 .oo-icon { background-image: url(oo_sub.svg#oo-sub2); }
.oo-sub-mark-due .oo-sub-period-monthly-3 .oo-icon { background-image: url(oo_sub.svg#oo-sub3); }

.oo-sub-mark-undue .oo-sub-period-1 .oo-icon { background-image: url(oo_sub.svg#oo-sub-undue); }
.oo-sub-mark-undue .oo-sub-period-2 .oo-icon { background-image: url(oo_sub.svg#oo-sub2-undue); }
.oo-sub-mark-undue .oo-sub-period-3 .oo-icon { background-image: url(oo_sub.svg#oo-sub3-undue); }
.oo-sub-mark-undue .oo-sub-period-4 .oo-icon { background-image: url(oo_sub.svg#oo-sub4-undue); }
.oo-sub-mark-undue .oo-sub-period-5 .oo-icon { background-image: url(oo_sub.svg#oo-sub5-undue); }
.oo-sub-mark-undue .oo-sub-period-6 .oo-icon { background-image: url(oo_sub.svg#oo-sub6-undue); }
.oo-sub-mark-undue .oo-sub-period-8 .oo-icon { background-image: url(oo_sub.svg#oo-sub6-undue); }
.oo-sub-mark-undue .oo-sub-period-monthly-1 .oo-icon { background-image: url(oo_sub.svg#oo-sub-undue); }
.oo-sub-mark-undue .oo-sub-period-monthly-2 .oo-icon { background-image: url(oo_sub.svg#oo-sub2-undue); }
.oo-sub-mark-undue .oo-sub-period-monthly-3 .oo-icon { background-image: url(oo_sub.svg#oo-sub3-undue); }

.oo-sub-deleted .oo-sub-period-1 .oo-icon { background-image: url(oo_sub.svg#oo-sub-del); }
.oo-sub-deleted .oo-sub-period-2 .oo-icon { background-image: url(oo_sub.svg#oo-sub2-del); }
.oo-sub-deleted .oo-sub-period-3 .oo-icon { background-image: url(oo_sub.svg#oo-sub3-del); }
.oo-sub-deleted .oo-sub-period-4 .oo-icon { background-image: url(oo_sub.svg#oo-sub4-del); }
.oo-sub-deleted .oo-sub-period-5 .oo-icon { background-image: url(oo_sub.svg#oo-sub5-del); }
.oo-sub-deleted .oo-sub-period-6 .oo-icon { background-image: url(oo_sub.svg#oo-sub6-del); }
.oo-sub-deleted .oo-sub-period-8 .oo-icon { background-image: url(oo_sub.svg#oo-sub6-del); }

.oo-cart-pos-abo-new .oo-sub-period-1 .oo-icon {  background-image: url(oo_sub.svg#oo-sub-add); }
.oo-cart-pos-abo-new .oo-sub-period-2 .oo-icon {  background-image: url(oo_sub.svg#oo-sub2-add); }
.oo-cart-pos-abo-new .oo-sub-period-3 .oo-icon {  background-image: url(oo_sub.svg#oo-sub3-add); }
.oo-cart-pos-abo-new .oo-sub-period-4 .oo-icon {  background-image: url(oo_sub.svg#oo-sub4-add); }
.oo-cart-pos-abo-new .oo-sub-period-5 .oo-icon {  background-image: url(oo_sub.svg#oo-sub5-add); }
.oo-cart-pos-abo-new .oo-sub-period-6 .oo-icon {  background-image: url(oo_sub.svg#oo-sub6-add); }
.oo-cart-pos-abo-new .oo-sub-period-8 .oo-icon {  background-image: url(oo_sub.svg#oo-sub6-add); }

#oo-cart .oo-cart-pos-abodates {
    font-size: small;
}
#oo-cart .oo-cart-pos-name {
    font-weight: bold;
}

#oo-cart .oo-cart-pos-abo-del, #oo-cart .oo-cart-pos-abo-amt {      /* overrides */
    width: 250px;
}

.oo-cart-pos-assortment {                            /* not more specific to cope with oo-sub-mark-undue below*/
    background-color: rgba(48, 193, 160, 0.97);
}

tr.oo-cart-pos-assortment ~ tr.oo-cart-pos-assorted  {                   /* matches a open box' positions */
    background-color: rgba(44, 175, 141, 0.18);
}
#oo-cart-pane DIV.oo-cart-pos-assortedhint {
    display: none;                      /* alternative , if you choose to disable oo-cart-pos-assortment-group, set display: inline-block; see braun*/
    background-image: url(oo_icons.svg#oo-box-full);
    background-repeat: no-repeat;
    background-size: cover;
    width: 1em;
    height: 1em;
}
#oo-cart  tr.oo-cart-pos-assortment ~  tr.oo-cart-pos-assorted td, div.oo-cart-pos-assorted {     /* matches a open box' first pos td */
    padding-left: 20px;
}
.oo-cart-pos-assortment-controls {
    float: right;
}
.oo-cart-pos-assortment .oo-cart-pos-note-btn { /* dont show for ass */
    display: none !important;
}


.oo-cart-pos-dupflash {        /* gimmick: flash upon click on "duplicate" */
    background-color: red !important;
}
TR.oo-cart-pos-problem TD.oo-cart-pos-total, TR.oo-sub-mark-undue TD.oo-cart-pos-total  {       /* dont show totals if row is not due */
    color: silver;
}
TR.oo-cart-pos-problem {
    background-image: repeating-linear-gradient(135deg, #e0e0e0 , #e0e0e0  5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
}
.oo-cart-pos.oo-cart-pos-noedit-over .oo-cart-pos-noedit-over {        /* and also oo-icon */
    background-image: url(oo_icons.svg#oo-blocked);
    background-size: 1em 1em;          
    height: 1em;
    width: 1em;
    display: inline-block;
}
.oo-cart-pos-pchange-up {
    background-image: url(oo_icons.svg?fg=black#oo-up);
    padding-left: 22px;
}
.oo-cart-pos-pchange-down {
    background-image: url(oo_icons.svg?fg=black#oo-down);
    padding-left: 22px;
}
.oo-cart-pos-season {
    background-image: url(oo_icons.svg?fg=black#oo-season);
    padding-left: 22px !important;
}
.oo-cart-pos-bulkprice {
    background-image: url(oo_icons.svg?fg=black#oo-bulk);
    padding-left: 22px !important;
}
.oo-item-bulkprice {
    background-image: url(oo_icons.svg?fg=black#oo-bulk);
    padding-left: 2em;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}
.oo-cart-buttons-group {
    display: inline-block;
    text-align: center;
}
.oo-cart-buttons-group div{
    font-size: smaller;
}

#oo-cart-paypal-button {
    max-width: 300px;
    margin: auto
}

.oo-cart-pos.oo-packhl {
    animation: blink-animation 0.5s steps(2, start) 3;
}
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
.oo-cart-search {
    float: right;
}
.oo-cart-search-empty {
    text-align: center;
    clear: both;
}
/****** Shop Component */

#oo-shop div.oo-shop-item-box {             /* wrapper element for SEO, should stay invisible */
    padding: 0;
    margin: 0;
    text-decoration: none;
    border: none;
    color: inherit;
    width: 100%;
}
.oo-shop-sl-pane .oo-shop-item {     /* all "small" boxes within the selection */
    display: inline-flex;           /* inline-block almost works too */
    position: relative;
    background-position: center;
    text-align: center;
    margin: 5px;
    cursor: pointer;
}
.oo-shop-sl-pane .oo-shop-item .oo-select-tabs {
    display: none;   /* hide the subscription option form the item panels INI? */
}
.oo-shop-sl-pane {
    position: relative;
}

.oo-shop-sl-pane > DIV.oo-shop-item {
    width: 200px;
    height: 200px;
    margin: 10px;
    position: relative;
    float: left;
}
.oo-shop-singleitem .oo-item-img , .oo-shop-title-img{
    max-width: 300px;               /* limits size for big images. Note: they get a zoom option if much bigger */
    width: auto;                    /* retains ratio */
    height: auto;
    max-height: 300px;
}

#oo-shop .blend {          /* list item blend helper  */
    top:0;left:0;
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.5;
    background-color: white;
     display: none;  /* initially jq3 ok*/
}
/* everything inside oo-shop-item (list) */

.oo-item-oneway {
    display: block;
}
.oo-shop-item-price-wrapper .oo-item-oneway {
    font-size: smaller;
}
.oo-shop-amount, .oo-shop-sl-pane .oo-shop-item h3, .oo-shop-sl-pane .oo-shop-item .oo-item-txt, .oo-shop-item-loaded, .oo-shop-sub-loaded, .oo-shop-item-count {
    position: absolute;
}
.oo-shop-sl-pane .oo-shop-item h3, .oo-shop-sl-pane .oo-shop-item .oo-item-txt {
    width: 190px;
}
.oo-shop-item-count {
    bottom: 0;
    right: 10px;
    z-index: 11;
}
.oo-shop-amount {       /* attached info for order and assortment content amounts */
    background-color: white;
    border: 1px solid #D0BFA6;
    border-radius: 5px;
    right: -5px;
    top: -5px;
    padding: 2px;
    z-index: 12; /* over text */
}
.oo-shop-sl-pane .oo-shop-item h3 {
    top: 10px;
    z-index: 10;   /* covers oo-item-text if long */
}
.oo-shop-sl-pane .oo-shop-item .oo-item-txt {
    top: 35px;
}
.oo-shop-sl-parentlink, .oo-shop-parentlink, .oo-subnavi-parent {
    display: none;
}
.oo-shop-sl-pane .oo-item-refpricetag {     /* refprice is in detail view anyway , still the law says display, two occurances in list block !*/
    display: none;
}
.oo-shop-abo-loaded  /* variant selector */, .oo-shop-item-incart  .oo-select-container {
    border: 1px solid #3b9c4a;
}
.oo-shop-item-incart .oo-shop-item-loaded, .oo-shop-item-insub .oo-shop-sub-loaded {
    display: block;
}
.oo-shop-sub-loaded, .oo-shop-item-loaded  {      /* green triangle indicating that item is in cart */  /* shared with ticker */
     display: none;   /*initially*/
}
.oo-shop-item-incart  .oo-select-container {
    border-radius: 5px;
}
.oo-item-img, .oo-cart-pos-img, .oo-shop-title-img {                         /* element with an image */
    background-size: contain;
    background-repeat: no-repeat;
}
.oo-shop-item .oo-item-name, .oo-shop-item-price-wrapper , .oo-item-txt, .oo-item-pname, .oo-shop-item-select , .oo-shop-abobox-detail-variant, .oo-shop-item-select {
    background-color: white;
    border-radius: 5px;
    margin: 10px 5px 5px;
}
.oo-item-txt, .oo-item-pname {
    font-size: smaller;
}

.oo-shop-sl-pane .oo-item-pname {
    display: none;
}

#oo-shop .oo-shop-item .oo-shop-item-select, #oo-shop .oo-shop-item-price-wrapper {
    position: absolute;
    width: 190px;
    margin: 5px;
}
#oo-shop .oo-shop-singleitem .oo-shop-item-select, #oo-shop .oo-shop-title .oo-shop-item-select {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

#oo-shop .oo-shop-item .oo-shop-item-select, #oo-shop .oo-shop-item .oo-shop-ass-select , #oo-shop .oo-shop-item-select {                    /* mouse over and amount selection */
    position: absolute;                                          /* dont like it? http://stackoverflow.com/questions/11600687/hover-and-active-only-when-not-disabled */
    top: 60px;
    left: 4px;
    border: 1px solid silver;
    /*   display: none; initially, see app.js */
    text-align: center;
    max-width: 180px;
    cursor: default;
}
#oo-shop .oo-shop-title .oo-shop-item-select,  #oo-shop .oo-shop-singleitem-select .oo-shop-item-select {
    position: relative;
    top: 0;
}

.oo-shop-sl-pane .oo-sh-pre {
    display: none;
}
.oo-shop-sl-pane .oo-sh-pre-a {
    display: inline;
}
.oo-shop-singleitem .oo-sh-pre {
    display: inline;
}
.oo-shop-singleitem .oo-sh-pre-a {
    display: none;
}

#oo-shop.oo-shop-entity-AssortmentContainer .oo-shop-ac-hint {
    display: block;
}
.oo-shop-favorite-off {                      /* favourite indicator */
    background-image: url(oo_icons.svg#oo-nofav);
      background-size: 1.4em 1.4em;               /* use max line */
      background-position: -1px -2px;
}
.oo-shop-favorite-on {
    display: inline-block;
    background-image: url(oo_icons.svg#oo-fav);
    background-size: 1.39em 1.39em;               /* hack to circumvent webkit caching bug */
}
.oo-shop-favorite {
    width: 1.5em;
    height: 1.5em;
    bottom: 0;
    left: 50%;
    position: absolute;
    background-repeat: no-repeat;
    margin-left: -8px;
    z-index: 60;
    /* display: none;  initially */
}
.oo-status-fav-count {
    color: white;
    font-size: 0.8em;
    vertical-align: top;
}
#oo-status .oo-status-notify {
    background-image: url(oo_icons.svg#oo-mail);
    color: transparent;
}

.oo-shop-sl-nofav, .oo-shop-sl-nofavnow  {
    padding-left: 30px;
    background-repeat: no-repeat;
}

#oo-shop .oo-shop-singleitem .oo-shop-favorite {
    display: inline-block;
    position: relative;
    left: 10%;
}

#oo-shop .oo-shop-item .oo-shop-item-select, #oo-shop .oo-shop-item  .blend {         /* blend is defined above */
    display: none;
}
#oo-shop .oo-shop-item:hover {
    filter: none;
}
#oo-shop .oo-shop-item:hover .oo-shop-item-select, #oo-shop .oo-shop-item:hover .oo-shop-favorite {   /* fade in the controls */
    display: inline-block;
}

#oo-shop .oo-shop-item:hover  .blend {        /* blend a bit the image below */
    display: inline-block;
}
#oo-shop .oo-shop-item:hover.oo-shop-data-type-AssortmentGroup .blend, #oo-shop .oo-shop-item:hover.oo-shop-data-type-AssortmentGroup .oo-shop-item-select , .oo-shop-item .oo-item-id {
    display: none;
}
                                                                 /* mouse over and amount selection */
#oo-shop .oo-shop-sl-paging-more {
    clear: both;
    float: right;
    padding: 10px;
}
#oo-shop .oo-shop-item-price-wrapper {
    top: 150px;
    left: 0;
}
#oo-shop .oo-shop-title-head {
    background-color: #ebd8bc;
}
#oo-shop h1.oo-shop-title-head {
    font-size: inherit;
}
#oo-shop .oo-shop-entity-Assortment .oo-shop-title-head {
    display: none;            /* would duplicate otherwise */
}
#oo-shop .oo-select-container .oo-select-value, #oo-shop .oo-select-container .oo-select-units {       /* (list) item selector */
    width: 60px;
    text-align: center;
}
#oo-shop .oo-select-container button, .oo-shop-abobox-detail-variant-big .oo-shop-abobox-detail-variant-tpl {
    cursor: pointer;
}
#oo-shop .oo-select-sub-info {
    width: 100%;
    border-radius: 5px;
}
#oo-shop .oo-select-sub-info-new, #oo-shop .oo-select-sub-info-ex, #oo-shop .oo-select-sub-info-running {
    /*   display: none; initially */
}

#oo-shop .oo-select-sub-info  BUTTON {      /* overrides agai, todo fixme */
    display: block;
    padding: 10px;
    float: right;
}
#oo-shop .oo-select-sub-info .oo-overlay-close {
    float: right;
}
#oo-shop .oo-select-sub .oo-arrow-down {
    background-image: url(oo_icons.svg#oo-arrow-down);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: right;
    padding-right: 1.5em;
}
#oo-shop .oo-select-container .oo-select-container-pm {
    display: inline-block;
    vertical-align: bottom;
}
.oo-shop-singleitem {
    padding: 10px;
}
.oo-shop-singleitem-info .oo-shop-singleitem-infoblock .oo-shop-tags {
    display: none;
}
/* disable one alternative tags set*/
.oo-shop-singleitem-info .oo-shop-singleitem-select .oo-shop-tags {
    display: none;
}
.oo-shop-singleitem-select .oo-shop-tags SPAN { /* and style the other */
    display: block;
    margin-bottom: 2px;
}
.oo-shop-item .oo-shop-tags SPAN {
    float: right;
}
.oo-shop-item-sale-n, .oo-shop-item-sale-out {
    background-image: url(oo_icons.svg#oo-saleout);
    background-size: 1.4em 1.4em;
    background-repeat: no-repeat;
    background-position: -2px -3px;
    padding-left: 25px;
    text-align: center;
    margin-left: 10px;
}
.oo-shop-sl-pane-tpl .oo-shop-item-sale-n, .oo-shop-item-sale-out {
    width: 0;                /* leave only the icon */
    overflow: hidden;
}
/* all single item blocks horizontal  */
.oo-shop-singleitem-info, .oo-shop-singleitem-select , .oo-shop-singleitem-img, .oo-shop-singleitem-container {
    display: inline-block;
}
/* or alternative: img left, info and controls right
.oo-shop-singleitem-img, .oo-shop-singleitem-container {
    display: inline-block;
}
*/
.oo-select-lastOrderTime {
    background-image: url(oo_icons.svg?fg=black#oo-timed);
    background-size: 1.4em 1.4em;
    background-repeat: no-repeat;
    padding-left: 25px;
    text-align: center;
}
.oo-shop-sl-pane .oo-select-lastOrderTime {
   display: none;
}
.oo-shop-sl-pane > DIV.oo-shop-item.oo-shop-data-type-AssortmentGroup{            /* abogroup display */
    height: 400px;
}

.oo-shop-sl-pane .oo-shop-abogroup-pane, .oo-shop-sl-pane .oo-shop-abobox-detail-pane {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
}
.oo-shop-abobox-detail-pane .oo-item-name {
    background-color: inherit;
}
.oo-shop-abobox-detail-info-planned, .oo-shop-abobox-detail-info-unplanned  {
    font-size: smaller;
}
.oo-shop-abo-discount {
    color: red;
    font-weight: bold;
}
                                                                            /* end abogroup and details */
#oo-shop .oo-select-sub-dates {
    /*  display: none; initially */
}
#oo-shop .oo-shop-item-incart {    /* added to oo-shop-item when item is already in cart,  */
    /* unused here, we use an extra layer .oo-shop-item-loaded */
}
.oo-shop-abobox-detail-variant-tpl.oo-shop-item-incart {
    border: 1px solid green;
}
.oo-shop-abobox-detail-variant-tpl {
    white-space: nowrap;
}

#oo-shop .oo-select-base {
    font-size: 0.8em;
}
.oo-shop-item .oo-select-base {      /* cont confuse with too many details in overview */
    display: none;
}
.oo-shop-title .oo-shop-title-controls {   /* title in shop component */
    float: right;
}

DIV.oo-shop-sl-pane-itemstart {     /* inserted before the first item in the list */
    display: block;
    clear: both;
}

.oo-shop-item-select .oo-select-tabs BUTTON {
    padding: 1px;
    /*   display: none;  initially */
}

.oo-item-pricetag .oo-item-price:after, .oo-item-refpricetag .oo-item-refprice:after, .oo-item-discount:after, .oo-item-bulkref:after {  /* shared with ticker */
    content: "/"
}

.oo-shop-title-btn-all {
    max-width: 200px;
    cursor: pointer;
}
.oo-item-pricetag, .oo-discount-applies {
    color: green;
}
.oo-shop-item.oo-price-reduced .oo-item-pricetag,
    .oo-shop-singleitem.oo-price-reduced .oo-item-pricetag .oo-item-price,
    .oo-shop-singleitem.oo-price-reduced .oo-item-pricetag .oo-item-unit {
    color: red;
    text-decoration: line-through;
}
.oo-shop-item.oo-price-reduced .oo-shop-item-price-wrapper .oo-item-price {
    color: red;
    text-decoration: line-through;
}
.oo-shop-item.oo-price-reduced .oo-item-price-del-r, .oo-shop-item.oo-price-reduced .oo-item-unit-r {
    display: none;
}
/* in lists , show only the percentage */
.oo-shop-item.oo-price-reduced .oo-item-discounttag .oo-item-discountrow .oo-item-discount-x {
    display: none;
}
.oo-shop-item.oo-price-reduced .oo-item-discounttag {
    position: absolute;
    top: 20%;
    right: 0;
}

.oo-item-lastprice {
    color: red;
    text-decoration: line-through;
}
.oo-item-association-logo, .oo-item-euorigin-logo {
    width: 25px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}
.oo-shop-singleitem .oo-item-euorigin-logo {
    width: 3em;
    height: 3em;
    vertical-align: middle;
}
.oo-shop-item .oo-item-euorigin-logo {
    position: absolute;
    top: 30%;
    width: 2.5em;
    height: 2.5em;
    left: 5%;
}
.oo-shop-item .oo-item-euorigin {
    display: none;    /* no euorigin text in list */
}
/* example to use icons instead of text
.oo-select-sub-2 {
    width: 20px;
    height: 20px;
    color: transparent;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/gif;base64,R0lGODlhDwAMAPcAABiMKRiEMRiMMf///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAQALAAAAAAPAAwAQAg5AAkIHBig4MCDAgMgJEhQgMKFBB5CPCgxIUSHBSsaFOhwYseEFTl6JJgxpEWGEAN8PDkRIoCNBwMCADs=");
}
*/

.oo-shop-singleitem  .oo-tab-navi {            /* itemdetail tabs */
    display: flex;
    padding: 5px;
}
.oo-shop-singleitem .oo-tab-content > DIV {      /* revert back */
    text-align: left;
    /*  display: none;  initially   */
}
.oo-shop-singleitem .oo-tab-navi > A, .oo-shop-singleitem-info .oo-item-regiotag {
    cursor: pointer;
}


.oo-shop-item-images-content-preview {         /* img tab */
    background-repeat: no-repeat;
    max-width: 40px;                           /* max size for the prevuew image */
    max-height: 40px;
    text-align: center;
    padding: 1px;
    cursor: pointer;
}
.oo-shop-item-images-content-img {
    max-width: 600px;                          /* max size for the displayed image */
    max-height: 600px;
    min-width: 300px;                          /* just to demo here, take out for production to get native img size  */
    min-height: 300px;                          /* just to demo here, take out for production to get native img size  */
}

.oo-shop-item-images-content > DIV {           /* wrapper */
    text-align: center;
}
.oo-zoomed::after {                          /* zoom indicator on big images  */
    background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNrMlT1rwlAUhvMhImhEsRQEoRBag2t1Cjo4OmUpgj9D8D+4CeI/cFPcHR0iDiqdpBALgS46qFSKQhBSmwMNtJrozc2XB8Lh3gTuc8953xPyeDwSepAk+aKlZ8LjoE7WPe159RvCF5CAyX7vN2O1Jp/PhxKJBL3ZbNThcKjgQmCBwOHdbvchmUwG9b3lcnkol8sfl2DIE2EafYMk1kwmExyPx4+RSITe7XaqJEkKx3EhfV0qlWQzEArhgkgaqdfr93DgfD5XWJaVcrmcDBnWsF+r1e7sVAKpIovFgoM2FAqF9783hhaJovgE1WAY5g23EkgV0Q6gjfY1cX5DhmpYsSgWyGQy2UM+LTu0CfJgMPjCcYcl1zSbzXWxWIwKghCfTqfB0Wi053k+nM1mw/C+3W5/OqGJqxqpVqvxRqORMvoYBKrpQ16tVqqTEIYgYNVKpRKNxWL0drtVZVk+tFqtlO4cIxC7EEhzBBzS7/dZMxCKsB9X5whYFoYV2DSdToc6nU7Kjjtsg8AYn81mitPtsDzi7c4JR0a82xBYIG5AWAZxC8ISiJsQyCBuQyCBeAFxFcQriIsgXkKYgngNYQjiB8QZiF8Q/0AChL/RO/uL+hUUcQNxExA/AgwAQCThORpp8DAAAAAASUVORK5CYII=") repeat scroll 0 0;
    content: "";
    display: block;
    height: 33px;
    position: absolute;
    right: 0;
    top: 0;
    width: 33px;
}                                            /* oo-shop-item-preorder: this item can only be preordered */
.oo-shop-sl-pane .oo-shop-item.oo-shop-item-preorder .oo-select-container {
   display: none;                            /* dont offer the direct select in list form, too dense */
}

.oo-shop-sl-pane .oo-shop-item .oo-item-origintag, .oo-shop-sl-pane .oo-shop-item .oo-item-certtag, .oo-shop-sl-pane .oo-shop-item .oo-item-associationtag {
    position: absolute;
    bottom: 0;
    font-size: smaller;
}
.oo-shop-sl-pane .oo-shop-item .oo-item-origintag {
    left: 3px;
    bottom: 1em;
    text-align: left;
}
.oo-shop-sl-pane .oo-shop-item .oo-item-certtag {
    right: 2em;   /* below is icon */
}
.oo-shop-sl-pane .oo-shop-item .oo-item-associationtag {
    right: 0;
}
.oo-shop-node-inactive {
    background-color: #c0c0c070;
    filter: grayscale(100%);
}
.oo-shop-node-inactive .oo-shop-item-price-wrapper {
    display: none !important;
}
.oo-shop-sl-pane .oo-shop-item.oo-shop-node-inactive .blend {
    cursor: initial;
}

/*
Alt logik: Siehe http://oekobox-online.de/shopdocu/wiki/API.concepts.TextStructure.
Aktuell wird nur das Produkt-Datenblatt dargestellt
*/

/** extra ecoinform embedded info */
#oo-ecoinform #tabangaben {
   /* inhaltsstoffe */
   border: 1px solid #d2d2d2;
}
#oo-ecoinform .tabangaben_head  {
   /* inhaltsstoffe section header */
   font-size: 13px;
   font-weight: bold;
}
#oo-ecoinform .tabangaben  {
   /* inhaltsstoffe small infoblock */
   border: 1px solid #d2d2d2;
   margin: 2px;
}
#oo-ecoinform .tabangaben TH {
   background-color: #d2d2d2;
}
#oo-ecoinform .nixdrin {
   /* class added if its  assumed to be NOT contained */
   opacity: 0.5;
}
#oo-ecoinform #oekoinform_prodimage {
   float: right;
}
#oo-ecoinform  h3 + p, #oo-ecoinform  .oekoinform_fussnote {
    margin-left: 20px;
}
/* end eco */

#oo-shop .oo-shop-item-nutrition-content .lnames TD {
   background-color: silver;
}
@media (max-width: 490px) {
    .oo-shop-sl-pane > DIV.oo-shop-item {
        width: 92%;
    }

    #oo-shop .oo-shop-item .oo-shop-item-select, #oo-shop .oo-shop-item .oo-shop-ass-select, #oo-shop .blend {
        right: 0;
        top: 0;
        left: auto;
    }
}
@media (max-width: 470px) {
    
    /*change table when we get small */
    #oo-shop .oo-shop-sl-pane .oo-shop-singleitem .oo-shop-item-nutrition-content td {
        display: block;
    }
    #oo-shop .oo-shop-sl-pane .oo-shop-singleitem .oo-shop-item-nutrition-content tr {
        float: left;
    }
}

@media (max-width: 490px) {         /* more samll screen opts */
    .oo-status-auth-profile {
        background-image: url(oo_icons.svg#oo-profile);
        background-size: 2em;
        background-repeat: no-repeat;
        background-position: center;
    }
    #oo-status .oo-status-auth-profile a.oo-status-auth-name {        /* hide text but keep line height */
        color: transparent;
    }
    #oo-status .oo-status-auth-profile a.oo-status-auth-name .oo-p1, #oo-status .oo-status-auth-profile a.oo-status-auth-name .oo-p2, #oo-status .oo-status-auth-profile a.oo-status-auth-name .oo-p3 {
        display: none;
    }
    .oo-status-auth-profile .oo-status-auth-name .oo-p1 {
        display: none;
    }
}
#oo-shop .oo-tab-content {
    padding: 10px;
}
#oo-shop .oo-shop-item-allergy-content-label.oo-shop-item-allergy-lmv {
    font-weight: bold;
}

#oo-shop .oo-tab-content .oo-item-img {                 /* small image labels in recipe tab */
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.oo-shop-link {
    cursor: pointer;
}
#oo-shop .oo-tab-content .oo-shop-link {
    border: 1px solid silver;
    display: inline-block;
    border-radius: 4px;
    margin: 3px;
    vertical-align: middle;
}
DIV.oo-shop-item.oo-shop-item-orderstate--1 {                  /* available in order list (shop) */
    background-color: #f5f5f5;
}
#oo-shop .oo-shop-data-type-Assortment .oo-shop-item-select {
    display: none !important;   /* select click handler not yet impl */
}
/****** Search Component */

#oo-search {
    height: 20px;
}
#oo-search .oo-item-img {
    height: 80px;
    width: 80px;
}
#oo-search .oo-search-preview {   /* see also shared below */
    overflow-y: auto;
    font-size: smaller;
}
#oo-search .oo-search-preview {
    max-width: 400px;
    max-height: 550px;
    min-width: 400px;
}
.oo-search-preview-items-item {
    width: 100px;
    height: 130px;
    float: left;
    margin: 5px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
}
.oo-search-preview-items-item .oo-item-name {
    position: absolute;
    top: 60px;
    opacity: 0.9;
    background-color: white;
}
.oo-search-preview-items-addbox {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.oo-search-preview-items-plus {
    position: absolute;
    bottom: 0;
    right: 0;
}
.oo-search-preview-items-more {
    float: right;
    padding-right: 2.5em;     /* room for x */
}
.oo-search-preview-hint, .oo-status-cart-hint {     /*todo make it a framework thing */
    margin-top: 5px;
    font-size: smaller;
}
#oo-search .oo-search-suggestion, #oo-search .oo-search-navigation, #oo-search .oo-search-btn {
    cursor: pointer;
}

#oo-search-admin {  /* reachable by admin: in search field */
    /*  display: none; initially */
    padding: 20px;
}
#oo-search-preview-items .oo-shop-item-loaded {   /* item area is smaller here */
    top: 100px;
}
/* recommended, but does not fit into any design - position is adjusted using javascript (search.js) */
.oo-search-preview .oo-overlay-close {
    Xposition: fixed;
    border: 2px solid white;
    right: inherit;
    z-index: 10;
    top:inherit;   /* needs to stay where rendered */
}
/* search req modification */
.oo-search-req .oo-search-noitem {
    display: none;
}
.oo-shop-add-picked-state-ok {
    background-image: url(oo_icons.svg?fg=green#oo-ok);
}
.oo-shop-add-picked-state-blocked {
    background-image: url(oo_icons.svg#oo-blocked);
}
.oo-shop-add-picked-state-att {
    background-image: url(oo_icons.svg?fg=xFDE47F#oo-att);
}
.oo-shop-add-alt {
    background-image: url(oo_icons.svg#oo-search);
}
#oo-shop-add-pane {
    width: 96%;
    margin: auto;
}
#oo-shop-add-pane td {
    padding-left:3px;
    padding-right:3px;
}
#oo-shop-add-close {
    padding-right: 7px;
    width: 100%;
    text-align: right;
}
#oo-shop-add-table {
    max-height: 20em;
    overflow: auto;
}
.oo-shop-add-raw span {
    cursor: pointer;
}
.oo-shop-add-help LI {
    display: list-item;
    list-style: disc;
}
#oo-shop-add-pane tr.oo-active {
    border: 1px solid gray;
}
tr.oo-add-state-blocked {
    opacity: 0.5;
}
.oo-shop-item-info-content .oo-item-certtag,
.oo-shop-item-info-content .oo-item-hklassetag {
    display: none;
}
/****** Profile Component */

.oo-profile-forcompany label {
    padding-left: 0.2em;
    display: inline;
    /* display: none;
    display: inline;   enable the company selection here */
}
.oo-cart-registration .oo-cart-agbinfo {
    display: none;        /* extra  */
}
#oo-profile-anon, #oo-profile-authed {
    display: none;
}
#oo-profile > div, #oo-profile form > div {
    margin: 5px;
    padding: 10px;
}

input#oo-profile-zip, input#oo-profile-number { width: 60px;}
input#oo-profile-city, input#oo-profile-street  { width: 200px;}
.oo-profile-address-zc-label, .oo-profile-address-sn-label { width: 8em; display: inline-block;}
#oo-profile-locate-zip {
    width: 5em;
}
.oo-profile-address-zc-labelg {
    display: inline-block;
}

#oo-profile-tab li {
    float: left;
    list-style: none;
}
#oo-profile .oo-state-located form button, .oo-profile-located-registererr  {
    float: right;
}
.oo-profile-set-save, .oo-profile-cont, .oo-overlay-okbtn {
    float: right;
}
#oo-profile .oo-select-area input {
    width: 60px;
}
#oo-profile label {
    width: 10em;
}
#oo-profile .oo-profile-field-inspectlet label {
    width: 18em;
}
.oo-profile-set-good A , .oo-profile-set-bad A  {                   /* tab / formset controls */
    background: no-repeat right 0;
    background-size: 1em 1em;
    padding-right: 1.5em;
    margin-right: 20px;
}
.oo-profile-signal {
    font-style: italic;
}
.oo-profile-set-good A.oo-profile-tab {               /* want your own? http://www.base64css.com */
    background-image: url(oo_icons.svg#oo-ok);
}
.oo-profile-set-bad A.oo-profile-tab {
    background-image: url(oo_icons.svg#oo-att);
}

.oo-complain-container {
    padding: 5px;
}

.oo-profile-edit-hint {                 /* additional dont-forget-to-save- hint */
    display: none;
}

.oo-profile-revert .oo-profile-revertbtn {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: middle;
    background: url(oo_icons.svg#oo-refresh) no-repeat;
    background-size: 1em 1em;
}

#oo-profile .oo-state-auth .oo-profile-set-good .oo-profile-edit-hint {
   display: inline;
}
#oo-profile .oo-profile-located-payment > div {
    height: 50px;
}
.oo-profile-field-pay-sepa > DIV, .oo-profile-field-pay-paypal > DIV, .oo-profile-field-daddress > DIV {
    margin-left: 50px;
}
#oo-profile fieldset > A:not([href]) {
    display: none;
}
#oo-profile-tab UL {
    padding-left:0;
}
#oo-profile .oo-profile-logout {
    float: right;
}
#oo-profile-edit-sub-pane .oo-profile-edit-sub IMG {
    float: left;
}
#oo-profile-edit-sub-pane .oo-profile-edit-sub {
    clear: both;
}

#oo-profile .oo-profile-edit-sub-editnote    {
    padding: 10px;
    float: right;
}
#oo-profile .oo-profile-edit-sub {
    padding: 5px;
    margin: 5px;
}
#oo-profile .oo-profile-sub-season {
    background-image: url(oo_icons.svg?fg=black#oo-season);
    display: inline-block;
    padding-left: 22px;
}

#oo-profile form .oo-profile-edit-pause  BUTTON {
    float: none;
}
#oo-profile .oo-profile-edit-pause-new input {
    width: 6em;
}
#oo-profile .oo-profile-edit-pause-new label, #oo-profile .oo-profile-edit-pause-new input {
    width: inherit;
}
#oo-profile-reg-form .oo-overlay-close {      /* in registration, we dont normally use a close option */
    display: none;
}
#oo-profile-reg-form .oo-profile-field-inspectlet {
    display: none;
}
#oo-profile .oo-profile-field-email-i-hint {
    font-size: smaller;
}
.oo-profile-auth-delivery-hint, #oo-profile-balance-info {
    clear: both;
}
.oo-profile-auth-delivery-info-one span, .oo-profile-auth-delivery-info-multi span {
    font-style: italic;
}
#oo-profile-code-check {
    display: none
}
/* jquery UI datepicker */
.ui-datepicker-calendar TR TD, .ui-datepicker-calendar TR TH {            /* each day is a A or a SPAN inside a TD */
    text-align: center;                 /* make sure the various attributes dont overlap! */
                                        /* a day can be one of: has an order, has a planned abo, can be selected for an order */
    padding: 0;                         /* additional info: can be today, is in a pause, is selected, is a weekend/holiday */
    margin: 0;
}
.ui-datepicker-calendar TD A, .ui-datepicker-calendar TD SPAN {
    border-radius: 1em;
    display: inline-block;
    padding: 2px;
    margin: 2px;
    min-width: 2em;
}
.oo-date-cal-legend {
    font-size: 0.8em;
}
.oo-date-cal-legend-1 {
    float: right;
}
.oo-date-cal-legend-2 {
    display: none;
}

@media (max-width: 1000px) {
    .oo-date-cal-legend-1 {
        display: none;
    }
    .oo-date-cal-legend-2 {
        display: block;
    }

}
.oo-date-cal-legend TH {
    text-align: center;
}
TD.oo-date-cal-legend-val {
    text-align: left;
}

.ui-datepicker-next {
    float: right;
    background-image: url(oo_icons.svg#oo-arrow-right);
}
.ui-datepicker-prev {
    background-image: url(oo_icons.svg#oo-arrow-left);
}
.ui-datepicker-next span, .ui-datepicker-prev span {
    color: transparent;
}
.ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
    background-size: 1em 1em;
    height: 1em;
    width: 1em;
}
.ui-datepicker-title {
    text-align: center;
}


.ui-datepicker-current-day, .ui-datepicker-current-day A {    /* selection from user */
    background-color: silver;                                 /* todo */
    color: red;
}
.ui-datepicker-today {
    border: 1px solid gray;
}
.ui-state-active {
    background-color: chartreuse;
}
.ui-datepicker-week-end A , .ui-datepicker-week-end SPAN  {
    color: silver;
}
#oo-date-calscreen  .ui-datepicker-inline {
    max-width: 100%;
}
.ui-datepicker-group {
    float: left;
    width: 17em;
}
.ui-datepicker-inline {        /* override jq-ui datepicker script */
    width: initial !important;
}
.oo-profile-pause-cal-ddate A, .oo-profile-pause-cal-ddate SPAN {
    border: 1px dashed #3b9c4a;
}
.oo-profile-pause-cal-abo A, .oo-profile-pause-cal-abo SPAN {
    border: 1px solid #3b9c4a;
}
.oo-profile-pause-cal-pause A, .oo-profile-pause-cal-pause SPAN  {
    color: red;
    text-decoration: line-through;
}
.oo-profile-cal-aux A, .oo-profile-cal-aux SPAN {
    background-color: #e9e9e9;
}
.oo-profile-cal-shop A, .oo-profile-cal-shop SPAN {
    background-color: #E38888;
}
.oo-profile-pause-cal-order A, .oo-profile-pause-cal-order SPAN {
    border: 2px solid #3b9c4a;
}
.oo-date-cal-legend SPAN {
    text-decoration: underline;
}
/* this date is currently selected. Can have an order or a subscription */
.oo-profile-pause-cal-selected A,.oo-profile-pause-cal-selected SPAN {
    background-color: rgba(59, 156, 74, 0.24);
}
.oo-profile-field-place label {
    vertical-align: top;
}
.oo-profile-field-place-values {
    display: inline-block;
}
.oo-profile-field-place-values TEXTAREA {
    width: 100%;
    max-width: 500px;
    margin: 0.3em;
    vertical-align: middle;
}
#oo-profile-IBAN, #oo-profile-BIC {
    width: 15em;
}
#oo-profile .oo-state-auth form .oo-profile-edit-sub-toursel-pane button {
    float: inherit;
}
.oo-profile-BICfield {
    display: none; /* default */
}



#oo-profile #oo-profile-edit-favourites button.oo-profile-favourites-droplink, button.oo-shop-item-recipe-related-all, button.oo-profile-passwd-new-off {
    float: inherit;
}

#oo-profile .oo-profile-favourites-gone {
    background-color: silver;
}
#oo-profile .oo-state-auth button.oo-profile-passwd-new, #oo-profile .oo-state-auth button.oo-profile-passwd-new-off {
    float: none;
}
.oo-profile-edit-sub-select .oo-select-area {
    display: inline-block;
}
.oo-profile-edit-sub-select, .oo-profile-edit-sub-periodsel {
    margin: 5px;
}
.oo-profile-edit-sub-pane-wrapper {
    display: inline-block;
}

/* reg */
.oo-profile-tourinfo-some-tabs, .oo-profile-tourinfo-some-pane, .oo-profile-tourinfo-depotlist {
    padding: 10px;
}
#oo-profile-depot-map {
    height: 300px;
}
.oo-profile-tourinfo-some-tabs {
    border: 1px solid silver;
}
a.oo-sub-itemlink.oo-shop-node-inactive {
    cursor: default;
    padding:0;
}
.oo-cberrorX:before {                    /* todo firefox issue !*/
    border: 2px solid lightsalmon;
    content: "\00a0";
    display: inline-block;
    height: 14px;
    width: 14px;
}
.oo-cberror {
    border: 2px solid lightsalmon;
    display: inline-block;
    height: 14px;
    width: 14px;
}

.oo-profile-locate-city-wrapper {
    display: inline-block;
}
#oo-profile-locate-city-suggest {
    position: absolute;
}
.oo-profile-field-ddept {                   /* optional */
    display: none;
}
#oo-profile-edit-discountinfo .oo-p1, #oo-profile-edit-discountinfo .oo-p2, #oo-profile-edit-discountinfo .oo-p3, #oo-profile-edit-discountinfo .oo-p4 {
    font-style: italic;
}
.oo-profile-set-discountinfo-pane .oo-p1 {
    display: none;                   /* pcg classic does not gibe a nice name */
}
/* .oo-profile-field-place  .oo-profile-revertbtn { display: none; }  needed? */
/****** SubNavi Component */

#oo-subnavi UL {
    padding: 0;
}
#oo-subnavi LI {
    list-style: none;
    padding: 3px;
}
#oo-subnavi .oo-subnavi-cnt {
    display:none;
}

/****** Loading pseudo Component */
.oo-loading-big, .oo-loading-long, .oo-loading-init {
    background-color: #eef5f2;
    border-radius: 10px;
    height: 80%;
    left: 2%;
    opacity: 0.95;
    position: fixed;
    text-align: center;
    top: 2%;
    width: 96%;
    z-index: 5000;
    pointer-events: none;
    padding-top: 10%;
    font-size: 40px;
    color: gray;
}

#oo-profile .oo-profile-tourinfo-some-pane, #oo-profile .oo-profile-tourinfo-some1, .oo-profile-tourinfo-depotlist {
    max-height: 200px;
    overflow-y: auto;
}

.oo-profile-tourinfo-some-date .oo-p3 {
    display: none;
}
#oo-profile .oo-profile-actions  A {
    display: inline-block;
}

#oo-profile .oo-profile-set-lastorder {
    max-height: 27em;
    overflow-y: auto;
}
#oo-profile .oo-profile-set-favourites {
    max-height: 400px;
    overflow-y: auto;
}
.oo-profile-qr {

}
.oo-profile-fss-removeme A.oo-profile-tab {
    float: right;
    margin-right: 3em;
}
.oo-profile-removeme-info1 {
    margin: auto;
    border: 1px solid black;
    width: 75%;
}
.oo-profile-removeme-info1 p {
    display: inline-block;
    width: 49%;
    padding: 1em;
}
.oo-profile-removeme-info1 textarea {
    width: 100%;
}
.oo-profile-removeme-info li {
    display: list-item;
    list-style: circle;
}
#oo-profile-edit-removeme {
}
.oo-appstore {
    text-align: center;
}
/****** Logon Component */

#oo-logon .oo-state-anon > div {
    float: left;
    margin: 20px;
}
.oo-logon-logonMessage1, .oo-logon-logonMessage2 {
    margin:0;
}
.oo-logon-logon-txt1, .oo-logon-whenbtn-txt1 {
    display: none;
}
#oo-logon .oo-logon-forgot-pane {      /* forgot password logic */
    max-width: 300px;
    padding: 10px;
    /*    display: none;                     initially*/
}
#oo-logon .oo-forgotten {
    color: red;
    animation: flash linear 1s 3;
}
@keyframes flash {
	0% { opacity: 1; }
	50% { opacity: .1; }
	100% { opacity: 1; }
}
#oo-logon .oo-logon-forgot-pane input {
    display: block;
}
#oo-logon .oo-logon-forgot-pane button {
    float: right;
}

/****** filter component */

#oo-filter .oo-filter-group {
    float: left;
    max-width: 250px;
}
#oo-filter .oo-filter-set {
    /* display: none; initial */
}
#oo-filter .oo-filter-hint {
    font-size: smaller;
}
.oo-filter-group-0 {   /* 0 is a special group: origin */
    border-color: #D0BFA6 !important;
}
.oo-filter-buttons {
    float: right;
}
.oo-filter-group-neg {
    background-image: url("data:image/gif;base64,R0lGODlhKAAoAPcAAAAAAPcpMf////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////crNCH5BAEAAP8ALAAAAAAoACgAAAiUAAH8G0iwoMGDCBMWFKiwocODDBk+nJhQ4j+LFDNivJix48aBHztCbBhSJMiHJT1STDmRpUGXCmG+NMmRpkyCNxHezFmxJU2dDnkGjfmTJNCiRhciRYlzqU+hP6HarOk0KdWqI5VinZl161WuWFlK7Wq16E6kPKVCFTo259iTPp26fAv26NaQdHvW9Xo179CvfHEGBAA7");
    background-size: 50% 100%;
}
.oo-filter-group-rows LI {
    list-style-type: none;
}
.oo-filter-group-rows {
    max-height: 300px;
    overflow-y: auto;
}

#oo-filter-pane .oo-active {
    display: inline-block;
    animation: shake .5s 10 alternate;
}
@keyframes shake {
    0% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    85% { transform: rotate(5deg); }
    95% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
/****** some shared assignments for components */
.oo-missing-img {      /* a standard placeholder  image (rectangles)*/
    background-image: url(f.px?bs.i=none);
    /*background-image: url(oo_icons.svg?fg=xf3f3f3#oo-missing-img); */
    background-size: contain;
    min-width: 40px;
    min-height: 40px;
}

/* undue stuff less bold */
.oo-sub-mark-undue {
    background-color: rgba(145, 134, 136, 0.18);
}
.oo-sub-mark-undue .oo-cart-pos-img {            /* reduce inactive positions a bit */
    height: 26px;     /* to have still a convienient touch size for the controls */
    filter: grayscale(100%);
}
#oo-cart .oo-sub-mark-undue .oo-cart-pos-name {
    font-weight: normal;
}

.oo-sub-last {
    display: none;
}
#oo-cart .oo-cart-pos-abo-new {
    background-color: rgba(13, 138, 102, 0.07);
}
.oo-sub-mark-due {
    background-color: rgba(56, 174, 189, 0.3);
}
.oo-cart-pos-ti {
    display: none;
}
#event_notification_grid {
    border-collapse: collapse;
    width: 100%;
    display: block;
}
#event_notification_grid tr.oo-state-admin {
    display: table-row;
}
#event_notification_grid th, #event_notification_grid td {
    border: 1px solid #ddd;
    padding: 8px;
}

#event_notification_grid th {
    background-color: #f2f2f2;
}
#event_notification_grid td {
    vertical-align: top;
}

#oo-cart .oo-cart-pos-timed .oo-cart-pos-ti, #oo-cart .oo-cart-info-osh-txt1a .oo-cart-pos-ti {
    display: inline-block;
    background-image: url(oo_icons.svg#oo-timed);
    font-size: small;
}
.oo-hint {
    font-size: small;
}

#oo-cart .oo-cart-sure, #oo-profile .oo-profile-edit-sub-delete-sure, #oo-cart-pane DIV.oo-cart-pos-abo-del, DIV.oo-cart-pos-last, #oo-cart-pane DIV.oo-cart-pos-abo-amt {
    /* display: none;   initially */
    text-align: center;
    min-width: 150px;
}

/* overlays are popup-like layers */
.oo-overlay, .oo-ham-on {
    background-color: ivory;
}
.oo-overlay {
    min-width: 12em;
}
.oo-overlay , /* unprefixed */ #ui-datepicker-div.ui-datepicker {
    z-index: 1000; /* to be atop anything rendered later */
    position: absolute;
    animation: fadein 1s;
    border: 1px solid white;
}
.oo-overlay-close {
    color: red;
    float: right;
    cursor: pointer;
}
#oo-search .oo-search-preview, #oo-status .oo-status-cart-preview, #oo-status .oo-status-auth-preview, #oo-status .oo-status-auth-date-preview,
    #oo-navi .oo-navi-2nd-pane, #oo-cart .oo-cart-sure, .oo-select-sub-info , #oo-profile .oo-profile-edit-sub-delete-sure,
    /* unprefixed */ #ui-datepicker-div.ui-datepicker, #oo-filter-pane {          /* these are oo-overlay, but here for specifity reasons */
    /*    display: none; initially */
}

/* unprefixed */ #ui-datepicker-div.ui-datepicker {
    display: none;     /* jq3 ok */
 }
#oo-status .oo-cart-pos-controls, #oo-cart .oo-cart-pos-controls {
    /*     display: none; initially */
}
.oo-cart-pos-recipeinfo .oo-cart-pos-total {
    display: none; /* is 0 anyway */
}
.oo-cart-pos-fromrecipe {
    background-image: url(oo_icons.svg?fg=black#oo-fromrecipe);
}
.oo-cart-pos-isrecipe {
    background-image: url(oo_icons.svg?fg=black#oo-isrecipe);
}
/* genereic action indicator */
.oo-active, .oo-profile-tab-selected, .oo-profile-edit-selected > a, .oo-shop-singleitem .oo-tab-navi > A.oo-tab-active, .oo-search-preview-items-more:focus  {
    background-color: chartreuse;
}

#oo-status .oo-cart-pos-controls A , #oo-cart .oo-cart-pos-controls A {      /* in-cart controls */
    margin-right: 6px;
    padding:5px;
    border: 0;
    border-radius: 3px;
    background-color: #D0BFA6;
    float: right;
}

#oo-cart A.oo-cart-pos-rm {
    margin-left: 10px;
}
/* labels */
.oo-label {
    border: 1px solid gray;
    border-radius: 5px;
    font-size: smaller;
    padding-left: 2px;
    padding-right: 2px;
    background-size: contain;
    background-repeat: no-repeat;
}
/* space for an image */
.oo-label.oo-label-image {
    padding-left: 1.5em;
}

#oo-filter .oo-filter-set span {
    cursor: alias;     /* shall indicate deletability */
}
.oo-filter-set A:after {
    content: ":";
}

/****** shoplink componente */
.oo-shoplink-wrapper {
   position: relative;
}
.oo-shoplink-wrapper .oo-overlay {
   top: 1em;
   left: 2em;
   display: none;
}
.oo-shoplink-tags {
    display: block;
}

/****** oo Framework */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.oo-fadein {
    animation: fadein 0.5s;
}
.oo-fadeout {
    animation: fadeout 0.5s;
    opacity: 0;
}

.oo-style-majoraction {            /* mostly Buttons, but some A's */
    cursor: pointer;
}

.oo-style-altaction {              /* even less prominent than minor, may be behind a menu */
    cursor: pointer;
}
.oo-style-minoraction {
    cursor: pointer;
}
button.oo-style-minoraction {      /* secondary action button, mostly A's  */
    padding: 5px;
}

.oo-suggest {
    display: inline-block;
    Xposition: relative;
}
.oo-suggest span {
    display: block;
}
.oo-error {                 /* see also flash */
    color: lightsalmon;
}
.oo-warn {
    
}

.oo-success {
    color: green;
}
.oo-agb-cb-error {
    border: 1px solid red;
}
.oo-input-error INPUT {     /* oo-input-error is always on parent element ! */
    background-color: #fcebcf;
    box-shadow: 0 0 0.5em red;
}

#oo-cookie {
    background-color: white;
    border-radius: 10px;
    left: 25%;
    padding: 20px;
    position: fixed;
    top: 10%;
    width: 40%;
    z-index: 4000;     /* below loader! */
}
/* hamburger slide */
@keyframes oo-leftslidein {
  from { left: -100%; opacity: 0; }      /* -100% may not always be enough, therefore also opacity. */
  to { left: 0; opacity: 1; }
}
@keyframes oo-leftslideoff {
  from { left: 0; opacity: 1; }
  to { left: -100%; opacity: 0;}
}
.oo-ham-on, .oo-ham-off {
    animation-duration: 0.5s;
}
.oo-ham-on {                             /* assigned to hamburger'ed elements */
    animation-name: oo-leftslidein;
    z-index: 110;
}
.oo-ham-off {
    animation-name: oo-leftslideoff;
    left: -100%;
    opacity: 0;
    display: none;    /* to avoid somebdy clicking on it */
}

.oo-icon {             /* https://www.iconfinder.com/iconsets/pink_moustache */
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    opacity: 0.8;       /* assuming a black icon */
    cursor: pointer;
}

#oo-navi LI.oo-state-admin, .oo-state-admin, .oo-shop-sl-pane .oo-shop-item.oo-state-admin  {    /* hidden for the public, second sel wegen specificality */
    background-color: pink !important;
    display: none;
}
span.oo-state-admin {
    border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
    font-style: italic;
}
html.oo-current-state-admin  .oo-state-admin {
    display: inline-block;
}
.oo-component {
    position: relative;
}
.oo-container {
    display: inline-block;
}
.oo-unused {
    display:none !important;
    visibility: hidden;
}
.ui-disabled, .oo-disabled, .oo-show-disabled {
    opacity: .3;
    cursor: default !important;
}
.ui-disabled, .oo-disabled {
    pointer-events: none;
}
.oo-running {
    background-color: #00CC66;
    pointer-events: none;
    opacity: .7;
}
button.oo-running {
    padding-right: 18px;
    background-image: url('data:image/gif;base64,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');
    background-repeat: no-repeat;
    background-position: right;
}

/*
.oo-disabled-animation {    scss: size=35      https://codepen.io/schliflo/pen/xwbVPz
   position: absolute;
   top: 50%;
   left:50%;
   margin-left: -17.5px;
   margin-top: -17.5px;
   background-size: contain;
   height: 35px;
   width: 35px;
   animation:  elastic-rotation 1.33s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
   background-repeat: no-repeat;
    background-position: center center;
   XXbackground-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzhfU0VMRUNUX0xvZ28iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzEuOSAxNi4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMS45IDE2LjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0yOS41LDIuNGMxLjYsMS42LDIuNCwzLjUsMi40LDUuOHMtMC44LDQuMi0yLjQsNS44Yy0xLjYsMS42LTMuNSwyLjQtNS44LDIuNGMtMS4zLDAtMi41LTAuNC0zLjgtMS4xYy0xLjItMC43LTIuMS0xLjQtMi42LTJjLTAuNS0wLjYtMC44LTEtMC45LTEuMmMtMC40LTAuNi0wLjMtMS4xLDAuMi0xLjRjMC42LTAuNCwxLjEtMC4zLDEuNSwwLjJjMCwwLjEsMC4yLDAuNCwwLjcsMC45YzAuNCwwLjUsMS4xLDEuMSwyLjEsMS42YzAuOSwwLjYsMS45LDAuOSwyLjgsMC45YzEuNywwLDMuMS0wLjYsNC4zLTEuOGMxLjItMS4yLDEuOC0yLjYsMS44LTQuM3MtMC42LTMuMS0xLjgtNC4zYy0xLjItMS4yLTIuNi0xLjgtNC4zLTEuOGMtMC44LDAtMS43LDAuNC0yLjYsMS4yUzE5LjUsNC43LDE5LDUuNGMtMC41LDAuNy0xLjIsMS44LTIuMiwzLjNjLTAuOCwxLjItMS40LDIuMi0xLjksMi44Yy0wLjUsMC42LTEuMSwxLjQtMS44LDIuM2MtMC44LDAuOS0xLjUsMS41LTIuMywxLjljLTAuOCwwLjQtMS42LDAuNi0yLjYsMC42Yy0yLjMsMC00LjItMC44LTUuOC0yLjRTMCwxMC40LDAsOC4yQzAsNS45LDAuOCw0LDIuNCwyLjRTNS45LDAsOC4yLDBDMTEsMCwxMy4zLDEuNywxNSw1LjJjMC4yLDAuNywwLjEsMS4xLTAuNiwxLjRDMTMuOCw2LjgsMTMuMyw2LjYsMTMsNkwxMi41LDVjLTAuMy0wLjctMC45LTEuMy0xLjctMnMtMS43LTEtMi42LTFDNi42LDIuMSw1LjEsMi43LDQsMy45UzIuMiw2LjUsMi4yLDguMnMwLjYsMy4xLDEuOCw0LjNzMi42LDEuOCw0LjMsMS44YzAuOCwwLDEuNy0wLjQsMi42LTEuMnMxLjYtMS41LDIuMS0yLjFjMC41LTAuNywxLjItMS44LDIuMi0zLjNjMC44LTEuMiwxLjQtMi4yLDEuOS0yLjhzMS4xLTEuNCwxLjgtMi4zczEuNS0xLjUsMi4zLTEuOUMyMS45LDAuMiwyMi43LDAsMjMuNiwwQzI1LjksMCwyNy45LDAuOCwyOS41LDIuNHoiLz48L2c+PC9zdmc+);
   background-image:  url('data:image/gif;base64,R0lGODlhPABOAPcAAACEOQCMOQh7OQiEOQiMORB7ORCEOQB7QgCEQgCMQgh7QgiEQgiMQhB7QhCEQhCMQgCESgCMSgCUSgh7SgiESgiMSgiUShB7ShCEShCMShCUShh7ShiEShiMSiGMSgCMUgiEUgiMUgiUUgiUWhCEUhCMUhCMWhCUUhiEUhiMUhiMWhiUWhiUYxicWhicYyGEUiGEWiWMWiGUUimQWiGUWimUWiGUYymUYyGcWimcWiGcYymcYymcaymccymlYymlazGMYzGUXjmQYzmUazGcYzGcazGcczGlYzGlazmcYzmcazmla0KUa0Kca0Kla0qlazGtczmUczmcczmlc0KUc0Kcc0Klc0Ktc0qcc0qlc0Kle0Kte0qce0qle0qlhFKcc06pe1alf1qlhEq1hFKtf1SyflqthFq1hGOtiGO1hFq9jGutjGu1hGO9hGS4j2u1lHOvjmu9jG26lnO9jHO9lH+xmHu5mHDDmXvBmHvGnHvGpXvOnHvOpYS9nIS9pYS9rYTGnITGpYTGrYTOpYTOrYTWpYTWrYy9nIy9pYy9rYzGpYzGrYzOpYzOrYzOtYzWpZS9nJS9rZTGpZTGrZTGtZTOpZTOrZTOtZTWrZTWtZzGrZzOrZzOtZzWtZzWvZzWxpzevaXOraXOtaXOvaXWraXWtaXWvaXeta3Ota3WvbLWw63evbXevaXexq3exq3nxrXexrXezrXnxrXnzrXvzr3Wxr3evb3exr3ezr3nxr3nzr3n1r3vxr3v1sbWzsbezsbe1sbnxsbnzsbn1sbvzsbv1sbv3s7exs7ezs7e1s7e3s7nzs7n1s7n3s7v1s7v3s733tbn1tbn3tbvztbv1tbv3tbv59b33tb/597n1t7n3t7n597v3t7v597v79733t735973797/7+fn5+fv3ufv5+fv7+f33uf35+f37+f/5+f/7+f/9+/v7+/35+/37+/39+//7+//9+////f37/f39/f/7/f/9/f////37//39//3////7///9////////yH5BAEAAP8ALAAAAAA8AE4AAAj+AP0JHEiwoMGB+wTe84cPn8B+9Q5KnEixIkV9/vQ19JfQosePBDv6W+iv3rx7/TA6dAiypUuG2rj4eSdQ5MuJTm6swTUQH8aEDfv124evH0N89EpggEAKX0J98zZirInvnsN9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');
}

@keyframes elastic-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
*/

.oo-required {
    /* if you dont want to rely on the required form attribute */
}
.oo-special-label, .oo-joker {
    display: none;
}
.oo-hidden {               /* see std/inc_head.jsp ! , see search.jsp oben */
    display: none !important;
}

/*
.ui-hidden {
    display: none;
}
*/

.oo-clearfix:after {        /* like any clearfix */
    content: " ";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

::placeholder {
  color: #e2e2e2;
}

/*
    magic elipsis, http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
    change max-height if you need more lines . We usually add a title with javascript then.

    Set in std shop with addMixin()
*/
.oo-limitlines {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative;
    /* use this value to count block height */
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 2.4em;
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;
    /* place for '...' */
    margin-right: -1em;
    padding-right: 1em;
}

/* create the ... */
.oo-limitlines:before {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 0;
    bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.oo-limitlines:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
    background: white;
}

/*         end oo **/

/* hacks
.oo-shop-singleitem.oo-shop-item-incart .oo-select-incart {
    top: 110px !important;
}
*/
.oo-profile-field-pay-nopay.oo-state-located {visibility: hidden; height: 0;}
/* DataNATURe information */
.oo-dnr-label-true {color: green; border: 1px solid green; border-radius: 5px; padding: 2px;}
.oo-dnr-label-false {color: red; border: 1px solid red; border-radius: 5px; padding: 2px;background-image: url("data:image/gif;base64,R0lGODlhKAAoAPcAAAAAAPcpMf////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////crNCH5BAEAAP8ALAAAAAAoACgAAAiUAAH8G0iwoMGDCBMWFKiwocODDBk+nJhQ4j+LFDNivJix48aBHztCbBhSJMiHJT1STDmRpUGXCmG+NMmRpkyCNxHezFmxJU2dDnkGjfmTJNCiRhciRYlzqU+hP6HarOk0KdWqI5VinZl161WuWFlK7Wq16E6kPKVCFTo259iTPp26fAv26NaQdHvW9Xo179CvfHEGBAA7");}
#oo-dnr-data h4 {
    font-style: oblique;
    border-bottom: 1px solid silver;
}
.oo-dnr-nwae-table th {background-color: snow;}
.oo-dnr-nwae-table tr td {text-align: center;}
@media (max-width: 1200px) {
    .oo-dnr-nwae-table tr td, .oo-dnr-nwae-table tr th {
        display: block;
        line-height: 15px;
        height: 50px;
        border-top: 1px solid silver;
    }

    .oo-dnr-nwae-table tr {
        display: block;
        float: left;
        width: 45%;
    }
}
.oo-dnr-trailer {
    margin-top: 10px;
    font-size: x-small;
    color: silver;
}
.oo-dnr-producer-phone, .oo-dnr-producer-email {     /* dont show these details to end users */
    display: none;
}
.oo-producer-thumb {
    max-width: 300px;
}
/* generic info window */
.oo-info {
    position: fixed;
    top: 10%;
    left: 25%;
    width: 50%;
    height: 50%;
    z-index: 10000;
    background-color: white;
    color: black;
    border: 1px solid gray;
    padding: 5px;
    margin: 5px;
    overflow: auto;
}

/* failpage */
#failpage {
    text-align: center;
}
#failpage .shoplink {
    font-size: large;
    padding: 10px;
    display: block;
}

/* test */
.oo-shop-data-testitem .oo-item-refpricetag,
.oo-shop-node-inactive.oo-shop-data-testitem .oo-shop-item-price-wrapper {
      display: block !important;
}


.delivery-container {
    position: relative;
    width: 100%;
    height: 50px;
}

.delivery-container .line {
    position: absolute;
    width: calc(100% - 40px);
    height: 5px;
    background-color: #f8d977;
    top: 50%;
    transform: translateY(-50%);
}

.delivery-container .bullet {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #f8d977;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid white;
    border-radius: 50%;
}

.delivery-container .arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #f8d977;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.delivery-container .circle {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: 1px solid white;
    border-radius: 50%;
}



#oo-websitesearch-results .oo-website-thumbnail {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#oo-websitesearch-results{
    display: flex;
}
#oo-websitesearch-results .oo-website-search-suggestion{
    position: relative;
    max-width: 100px;
    width: 100px;
    margin-right: 5px;
  }


#oo-websitesearch-results .oo-website-title {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    background-color: #fde47fc4;
}

.truck-icon {
    background-image: url("../api/oo_icons.svg?fg=%23f8d977&bg=white#oo-truck");
    max-width: 30px;
    min-height: 30px;
    background-size: 30px;
    background-repeat: no-repeat;
    margin-top: -10px;
}

.home-icon {
    background-image: url("../api/oo_icons.svg?fg=%23f8d977&bg=white#oo-home");
    max-width: 30px;
    min-height: 30px;
    background-size: 30px;
    background-repeat: no-repeat;

    left: calc(100% - 26px);
    width: 30px;
    height: 20px;
    position: absolute;
    bottom:12px;
}

.home-icon2 {
    background-image: url("../api/oo_icons.svg?fg=%23f8d977&bg=white#oo-home2");
    max-width: 30px;
    min-height: 30px;
    background-size: 30px;
    background-repeat: no-repeat;

    left: calc(100% - 26px);
    width: 30px;
    height: 20px;
    position: absolute;
    bottom:12px;
}

/* Tooltip container */
.oo-tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 10px;
}

/* Tooltip text */
.oo-tooltip-text {
    visibility: hidden;
    /*width: 160px;*/
    /*background-color: #555;*/
    /*color: #fff;*/
    color: #444;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 100%;
    /*bottom: 125%;*/
    left: 50%;
    margin-left: -80px;
    opacity: 0;
    transition: opacity .3s;
    border: 1px solid #f8d977;
}

/* Tooltip arrow */
/*.oo-tooltip-text::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    left: 50%;*/
/*    margin-left: -5px;*/
/*    border-width: 5px;*/
/*    border-style: solid;*/
/*    border-color: #555 transparent transparent transparent;*/
/*}*/

/* Show tooltip on hover */
.oo-tooltip-container:hover .oo-tooltip-text {
    visibility: visible;
    opacity: 1;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}