@media print {
    @page {size: landscape !important;}
    body {-webkit-print-color-adjust: exact;}
}


html, body
{
    margin: 0;
    height: 100%;
    font-family: arial, sans, verdana;
}

a i
{
    padding: 10px;
    font-size: 150%;
    margin-right: 10px;
}

h2.blogTitle
{
    margin-bottom: 0;
    color: #999;
    font-size: 18px;
}

img
{
    max-width: 100%;
}

.fa.fa-eye.shared
{
    display: block;
    color: #65ae00;
    font-size: 12px;
}

.prevImg img
{
    width: 160px;
    max-width: 160px;
}

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

.dashContent .row
{
    display: flex;
    flex-direction: row;
}

.dashContent .welcome,
.dashContent .blogNews
{
    max-width: 100%;
}

.dashContent .blogEntry
{
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
}

.dashContent .blogEntry .blogOverviewImage
{
    
}

.dashContent .blogEntry .blogEntryContent
{
    padding: 20px;
    width: 867px;
}

.dashContent .blogEntry .blogEntryContent .blogSubject,
.blogEntries .blogEntry .blogEntryRow .subject
{
    font-weight: bold;
    font-size: 120%;
    display: block;
}

.dashContent .blogEntry .blogEntryContent .blogSubject .date,
.blogEntries .blogEntry .blogEntryRow .subject .datetime
{
    font-weight: normal;
    color: #999;
    font-size: 70%;
    display: inline-block;
    float: right;
}

.dashContent .blogEntry .blogEntryContent .blogContent
{}

.dashContent .blogEntry .blogEntryContent .blogMeta
{}


.blogEntries .blogEntry
{
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.blogEntries .blogEntry .blogEntryRow
{
    width: 100%;
    padding: 20px;
}

.blogEntries .blogEntry .blogEntryOptions
{
    width: 310px;
    padding: 20px;
}

.blogEntries .blogEntry .blogOverviewImage
{
    width: 145px;
}

button
{
    border: 0;
    padding: 10px 15px !important;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    box-shadow: 3px 3px 3px #ccc;
}

button:active
{
    margin-left: 3px;
    margin-top: 3px;
    box-shadow: none;
}

button.save::before
{
    font-family: 'Font Awesome 5 Free';
    content: '\f0c7';
    margin-right: 10px;
}

button.addZutat
{
    width: 45px;
}

body.loginBody
{
    background-color: #efefef;
}

.poolFilter
{
    text-decoration: none;
    background-color: transparent;
    border: 1px solid #0085ff;
    color: #0085ff;
    border-radius: 4px;
    padding: 5px 10px;
}

.poolFilter.active
{
    color: #fff;
    background-color: #0085ff;
}

td .stats
{
    display: block;
}

#loginForm
{
    display: block;
    width: 320px;
    border: 1px solid #000;
    border-radius: 4px;
    margin: auto;
    padding: 40px;
    margin-top: 40px;
    background-color: #fff;
}

#loginForm label
{
    font-size: 14px;
    display: block;
    margin-top: 10px;
}
#loginForm input
{
    height: 32px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    width: 100%;
}

.hidden
{
    display: none !important;
}

.strikethrough
{
    text-decoration: line-through !important;
}

.greyout
{
    color: #ccc;
}

.green
{
    color: #090;
}

.red
{
    color: #f00;
}

.bold
{
    font-weight: bold;
}

div.horizontal
{
    display: inline-block;
}

.noContentText
{
    display: block;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: #ccc;
}

.column .row,
.column .row
{
    display: block;
}

.column .row .label,
.column .row .input
{
    min-width: 120px;
    display: inline-block;
    padding: 0 0 20px 0;
    vertical-align: top;
    display: block;
}
.column .row .label
{
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.column .row input,
.column .row textarea,
.column .row select
{
    margin-top: 0;
    border-radius: 4px;
    border: 1px solid #ededed;
    background-color: #fff;
    padding: 16px 13px;
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 16px;
    min-width: 300px;
}
.column .row input[type=checkbox],
.column .row input[type=radio]
{
    min-width: 0;
}

.column .row textarea
{
    min-height: 150px;
}

fieldset .column .row input, 
fieldset .column .row textarea, 
fieldset .column .row select,
fieldset .row input[type=text],
fieldset .row input[type=password]
{
    padding: 0px 10px;
}

fieldset .column .row input[type=number]
{
    padding: 16px 10px;
}

td.datetime {
    font-size: 80%;
    color: #666;
    width: 80px;
}

.linkRename,
.linkView,
.linkGroup,
.linkPreise,
.linkMerge
{
    display: inline-block;
    background-color: #5577ff;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    text-decoration: none;
    border: 0;
}

.linkMerge,
.linkGroup
{
    background-color: #e61111;
}

.linkMerge:hover,
.linkGroup:hover
{
    background-color: #ff4444;
}

.linkRename::after,
.linkView::after,
.linkGroup::after,
.linkPreise::after,
.linkMerge::after
{
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    content: '\f304';
    font-weight: 600;
    margin-left: 10px;
}

.linkMerge::after
{
    content: '\f061\f060'
}

.linkGroup::after
{
    content: "\f500";
}

.linkPreise::after
{
    content: "\f155";
}

span.group
{
    font-size: 80%;
    color: #5d94ae;
}

.linkView::after
{
    content: '\f06e';
}

.linkRename:hover
{
    background-color: #88aaff;
}

a.linkStandby
{
    background-color: #b98e37;
}

#rezeptPreview a
{
    display: block;
    text-decoration: none;
    padding: 5px 10px;
    color: #000;
    background-color: #ebebeb;
    margin-bottom: 5px;
}

#rezeptPreview a:hover
{
    color: #b00;
}

.aosInputDatepickerContainer .aosInputDatepickerCalendars
{
    border-radius: 4px;
    border: 1px solid #999;
    box-shadow: 3px 3px 3px #ccc;
}

table.aosCalendarWidget
{
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
    overflow: hidden;
    border-radius: 4px;
}

table.aosCalendarWidget th,
table.aosCalendarWidget td
{
    padding: 5px 10px;
}

button.formButton
{
    padding: 10px 20px;
    border-radius: 10px;
    background: transparent;
    font-weight: bold;
    font-size: 16px;
    margin-right: 26px;
    border: 1px solid #7A0810;
    color: #7A0810;
    cursor: pointer;
}

a.selectAll::before
{
    font-family: 'Font Awesome 5 Free';
    content: '\f063';
    font-weight: 600;
    margin-right: 5px;
}

button.formButton:hover
{
    background-color: #ffd5bf;
}
button.formButton:active
{
    background-color: #ffccb7;
}

button.formButton.cta
{
    background-color: #7A0810;
    color: #fff;
}

button.formButton.cta:hover
{
    background-color: #821315;
    border-color: #821315;
}

button.formButton.cta:active
{
    background-color: #8d201d;
    border-color: #8d201d;
}

a.createLink,
a.createLink:hover,
a.createLink:active,
a.createLink:visited
{
    text-decoration: none;
    color: #1e1e1e;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
}

a.createLink:hover
{
    text-decoration: underline;
}

a.createLink::after,
a.createLink:hover::after,
a.createLink:active::after,
a.createLink:visited::after
{
    content: "+";
    color: #1e1e1e;
    font-size: 22px;
    margin-left: 5px;
    text-decoration: none;
}

a.betweenForm,
a.betweenForm:visited
{
    display: block;
    color: #E6181A; 
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    background-color: #f0f0f0;
    max-width: 1320px;
}

a.betweenForm::before,
a.betweenForm::after
{
    content:" ";
    display: block;
    height: 1px;
    width: 40%;
    position: absolute;
    top: 50%;
    left: 0;
    background: #E6181A;
}

a.betweenForm:hover::before,
a.betweenForm:hover::after
{
    background: #8d201d;
}

a.betweenForm:active::before,
a.betweenForm:active::after
{
    background: #7A0810;
}

a.betweenForm::after
{
    left: auto;
    right: 0;
}

a.betweenForm:hover
{
    color: #8d201d;
}
a.betweenForm:active
{
    color: #7A0810;
}

i.overviewAction
{
    color: #1e1e1e;
    /*font-weight: normal;*/
    margin-right: 10px;
    display: inline-block;
}

div#header-flex
{
    display: flex;
    flex-direction: column;
    height: auto;
    flex: 1;
    min-height: 100%;
}
div#header-flex .header-area
{
    display: block;
    height: 70px;
    box-shadow: 0px 0px 18px 0px #ccc;
    z-index: 5;
    background-color: #fff;
    line-height: 70px;
    padding: 0 40px;
    font-size: 20px;
    color: #b6b6b6;
}
div#top-flex
{
    position: relative;
    display: flex;
    flex-direction: row;
    height: auto;
    flex: 1;
}
.left
{
    text-align: left;
}

.left-navigation
{
    background-color: #fff;
    margin-left: 0px;
    width: 270px;
    display: flex;
    order: 0;
    padding: 0;
    box-shadow: 1px 0px 1px 0px #ccc;
    position: relative;
}
ul.navigation
{
    color: #000;
    display: block;
    width: 100%;
    margin: 20px 0 0 0;
    padding: 0px;
    position: absolute;
    left: 0;
    top: 0;
    transition: .3s all ease-out;
    background-color: #fff;
}

ul.navigation i
{
    font-size: 100%;
}

#navigation_page1
{
    z-index: 1;
}

#navigation_page2
{
    z-index: 0;
}

ul.navigation li
{
    display: block;
}
ul.navigation li a,
ul.navigation li a:hover,
ul.navigation li a:active,
ul.navigation li a:focus,
ul.navigation li a:visited
{
    color: #000;
    text-decoration: none;
    display: block;
    padding: 20px 40px;
    font-size: 16px;
}
ul.navigation li a.active,
ul.navigation li a:hover
{
    background-color: #efefef;
}
ul.navigation li a.active
{
    color: #e6181a;
}
ul.navigation li a.leedOnly
{
    background-color: #ffefef;
}

.left-navigation li .version
{
    text-decoration: none;
    display: block;
    padding: 20px 40px;
    font-size: 12px;
    font-weight: 100;
    color: #999;
}

div#content
{
    order: 1;
    padding: 20px 20px 40px 20px;
    width: 100%;
    background-color: #f0f0f0;
}

/* Messages */
#messages
{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    font-weight: normal;
}
#messages .messageError,
#messages .messageSuccess,
#messages .messageNotice,
#messages .messageInfo,
.messageSuccess,
.messageError
{
    display: block;
    padding: 10px 20px;
    background-color: #fcc;
    color: #b00;
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 18px 20px;
    font-size: 18px;
}

.messageSuccess,
.messageError
{
    font-size: 12px;
    padding: 5px 10px;
}

#messages .messageSuccess,
.messageSuccess
{
    background-color: #C4E7D2;
    color: #00732d;
}
#messages .messageInfo
{
    background-color: #C4D2E7;
    color: #00732d;
}

/* Page Elements */


.errorMsg
{
    display: block;
    color: #f66;
    font-size: 12px;
}

fieldset
{
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #000;
    padding: 20px;
}

fieldset.red
{
    border: 1px solid #E6181A;
}

fieldset legend
{
    font-size: 12px;
}

fieldset input[type=text],
fieldset input[type=password]
{
    width: 384px;
    height: 48px;
    border: 1px solid #d9d9d9;
    padding: 0px 10px;
}

fieldset input[type=text].integer
{
    width: 60px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

div.aosInputIntPlusMinusContainer button.aosInputIntPlusMinusButtonPlus, 
div.aosInputIntPlusMinusContainer button.aosInputIntPlusMinusButtonMinus
{
    height: 48px;
    width: 48px;
    font-size: 18px;
    border: 1px solid #d9d9d9;
}

.catRow .label
{
    min-width: 150px;
}
.catRow .categoryData
{
    display: block;
}
.catRow > div 
{
    display: inline-block;
}

.fold.active
{
    padding-bottom: 20px;
}

div.row span.label,
div.row span.erklarung
{
    display: block;
}

div.row span.label
{
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 6px;
    color: #1e1e1e;
    font-weight: bold;
}

.radioLabel,
.checkboxLabel
{
    color: #7f7f7f;
    font-size: 18px;
}

.erklarung
{
    font-size: 12px;
    color: #7f7f7f;
    margin-bottom: 10px;
}

.aosInputDatepickerContainer .aosInputDatepickerIcon::after
{
    margin-left: -30px;
    margin-top: 16px;
}

.aosInputDatepickerContainer .aosVisualDate
{
    padding: 13px 10px;
    color: #7f7f7f;
}

.aosInputCheckboxLabel.switch
{
    background-color: #b3b3b3;
    border: 1px solid #b3b3b3;
    height: 24px;
    width: 44px;
}

.aosInputCheckboxLabel.switch.checked
{
    background-color: #70E316;
    border: 1px solid #70E316;
}

.aosInputCheckboxLabel.switch::after
{
    background-color: #fff;
    border: 2px solid #fff;
    height: 18px;
    width: 18px;
}

.aosInputCheckboxLabel.checked.switch::after
{
    margin-left: 21px;
}

.aosInputRadioLabel
{
    color: #7f7f7f;
}

fieldset.editFieldset
{
    max-width: 1280px;
    position: relative;
}

div.twocolumn
{
    display: flex;
    flex-direction: row;
}

.twocolumn .column
{
    margin-right: 40px;
    width: 50%;
}

table.itemOverview
{
    border-collapse: collapse;
}

table.itemOverview tr
{
    margin-bottom: 2px;
}

table.itemOverview tr.row
{
    background-color: #fff;
    min-height: 40px;
}

table.itemOverview td
{
    padding: 20px;
}

table.itemOverview th 
{
    background-color: #d9d9d9;
    color: #1e1e1e;
    font-size: 12px;
    font-weight: normal;
    padding: 20px;
    text-align: left;
}

.clear
{
    clear: both;
}

th 
{
    padding: 5px;
    background-color: #ccc;
}

.changeMonth
{
    font-weight: bold;
    text-decoration: none;
}

.changeMonth::before,
.changeMonth::after
{
   font-family: 'Font Awesome 5 Free';
   content: '\f078';
   transform: rotate(90deg);
   display: inline-block;
   color: #000;
}
.changeMonth.next::before,
.changeMonth.next::after
{
    transform: rotate(-90deg);
}
.changeMonth::before
{
    margin-right: -5px;
}

.thSort
{
    cursor: pointer;
    vertical-align: top;
}

.thSort.active::before
{
    font-family: 'Font Awesome 5 Free';
    content: '\f078';
    margin-right: 5px;
    display: inline-block;
}

.thSort.active.desc::before
{
    transform: rotate(180deg);
}

.tdDate,
.tdCurrency,
.tdSource,
.tdAmount,
.tdText,
.tdType,
.tdCurrency,
.tdCategory,
.tdSource
{
    font-size: 12px;
}


.tdAmount
{
    text-align: right;
}

.tdText
{
    padding: 10px 0;
}

.tdType
{
    cursor: pointer;
}

.group
{
    display: block;
    padding: 5px 0;
    font-size: 14px;
}

.group .legend
{
    display:block;
    font-size: 10px;
}

.inputsDiv
{
    padding: 20px;
    border: 1px solid #ccccee;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
}

.newFormTrigger a,
.newFormTrigger a:hover,
.newFormTrigger a:active,
.newFormTrigger a:visited,
.newForm a,
.newForm a:hover,
.newForm a:active,
.newForm a:visited,
.tagFilterSelector a,
.tagFilterSelector a:hover,
.tagFilterSelector a:active,
.tagFilterSelector a:visited
{
    display: inline-block;
    padding: 20px 0;
    text-decoration: none;
    color: #0282bf;
}

.newForm a::after,
.newFormTrigger a::after,
.tagFilterSelector a::after
{
    font-family: "Font Awesome 5 Free";
    content: '\f078';
    transition: .3s all;
    margin-left: 10px;
    display: inline-block;
    color: #0282bf;
    font-weight: 900;
}

.newForm a::after
{
    content: '\f061';
}

.newFormTrigger a.open::after,
.tagFilterSelector a.open::after
{
    transform: rotate(180deg);
}
.fa-arrow-right
{
    font-weight: 900;
    margin-right: 5px;
}


.score
{
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

a.thumbsup::after,
a.thumbsdown::after
{
    font-family: 'Font Awesome 5 Free';
    content: '\f164';
    text-decoration: none;
    font-size: 22px;
    display: inline-block;
    margin: 5px;
    text-align: center;
}

a.thumbsdown::after
{
    content: '\f165';
}

.navRow:hover
{
    background-color: #def;
}

#newForm
{
    overflow: hidden;
    max-height: 0;
    margin-bottom: 20px;
    transition: .3s all;
    padding: 0 0;
}
#newForm.open
{
    max-height: 1200px;
    padding: 0 0 20px 0;
}

#modalBg
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    opacity: 0.8;
    z-index: 10;
}

#modal
{
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 727px;
    min-height: 200px;
    width: 90%;
    padding: 40px 36px 40px 40px;
    border-radius: 12px;
    box-shadow: 0 6px 3px 5px rgba(0, 0, 0, 0.19), 0 12px 24px 0 rgba(0, 0, 0, 0.14);
    background-color: #fafafa;
    z-index: 20;
    font-size: 13px;
    overflow-y: scroll;
}

.flex
{
    display: flex;
}

.cumulusResult
{
    display: block;
    border: 1px solid #cfcfcf;
    padding: 3px;
    margin: 3px;
}

.cumulusResult div
{
    font-size: 80%;
}

.cumulusResult div label
{
    display: inline-block;
    font-weight: bold;
    min-width: 40px;
}

#cumulusResult
{
    overflow-y: scroll;
    max-height: 450px;
}

.hasPrice
{
    font-size: 90%;
    color: #00cc00;
}

.modalContent
{
    padding: 20px;
}

#modal.promo
{
    padding: 0;
    display: flex;
    flex-direction: row;
}


#rezeptList
{
    padding: 20px;
    padding-bottom: 60px;
}

#rezeptList .rezeptSelection
{
    margin-bottom: 20px;
    display: flex;
}
#rezeptList .rezeptSelection .rezeptName .clickIcon
{
    font-size: 22px;
}

#rezeptList .rezeptSelection .rezeptName
{
    padding: 5px 20px;
}

#rezeptList .rezeptSelection .rezeptSelectionName,
#rezeptList .rezeptName .clickIcon i
{
    font-size: 22px;
}

#rezeptList .rezeptSelection span
{
    display: block;
}
#rezeptList .rezeptSelection span span
{
    display: inline-block;
}

#rezeptList .rezeptSelection .rezeptSelectionBild img
{
    float: left;
}
#rezeptList .rezeptSelection .rezeptAddLink
{
    display: inline-block;
    margin-left: 20px;
    height: 120px;
    font-size: 500%;
    line-height: 120px;
}

#newRezeptForm #document
{
    display: none;
}

.RezeptItem
{
    border-radius: 4px;
    padding: 5px;
    display: inline-block;
    background-color: #ccc;
    margin-bottom: 5px;
}

.RezeptItem .removeItem
{
    display: block;
    text-decoration: none;
}

.RezeptItem .removeItem::after,
.RezeptItem .removeItem:hover::after,
.RezeptItem .removeItem:visited::after,
.RezeptItem .removeItem:active::after
{
    font-family: 'Font Awesome 5 Free';
    content: '\f00d';
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background-color: #f66;
    border-radius: 4px;
    padding: 5px;
}

.rezeptItem .horizontal
{
    position: relative;
}

#zutatEditorSuggestions
{
    position: absolute;
    background-color: #efefef;
    color: #000;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #ccc;
    z-index: 10;
}

#zutatEditorSuggestions a
{
    display: block;
    text-decoration: none;
    color: #000;
    padding: 10px 20px;
}

#zutatEditorSuggestions a:hover
{
    background-color: #dfdfdf;
}

.row .input .image img
{
    border-radius: 4px;
    box-shadow: 3px 3px 3px #ccc;
}

.RezeptItem .removeItem:hover::after
{
    background-color: #f88;
}

.tagItem,
.tagFilter
{
    display: inline-block;
    border: 1px solid #ffbbbb;
    padding: 4px 20px;
    margin-right: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #ffdddd;
    text-decoration: none;
    color: #666;
}

.tagFilter.active
{
    background-color: #ddffdd;
    border: 3px solid #bbffbb;
}

.tagItem .tagDelete
{
    color: #666;
    margin-left: 20px;
    text-decoration: none;
    font-size: 80%;
}

.tagEditorView .tagItem a i
{
    padding: 0;
    margin-right: 0;
}

.tagEditorContainer
{
    position: relative;
}

#tagEditorSuggestions
{
    border: 1px solid;
    position: absolute;
    top: 52px;
    left: 0;
    background-color: #ffdddd;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #ccc;
}

#tagEditorSuggestions a
{
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}
#tagEditorSuggestions a:hover
{
    background-color: #ddbbbb;
}

.selectionSpacer
{
    min-height: 200px;
}

.planWeekday
{
    margin-bottom: 40px;
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
    width: 405px;
}

.planWeekday .weekdayName
{
    font-size: 120%;
    font-weight: bold;
}

.planWeekday .weekdayDate
{
    font-size: 80%;
    color: #999;
    display: inline-block;
    margin-left: 20px;
}

.planWeekday .planEntryInput .label
{
    font-size: 110%;
}

.planWeekday .planEntryInput
{
    margin-top: 20px;
}

.wochenPlanView
{
    margin: 20px;
    background-color: #fdfdfd;
    padding: 20px;
}

.wochenPlanView td
{
    background-color: #f6f6f6;
    padding: 20px;
}

td.planViewDay
{
    font-weight: bold;
    font-size: 110%;
}

td.planViewDay .dateView
{
    display: block;
    font-size: 80%;
    font-weight: normal;
}

td.planViewDaytime .viewText
{
    color: #999;
}

td.planViewDaytime svg
{
    width: 100px !important;
    height: 100px !important;
    float: right;
    margin-left: 20px;
}

#inhalt
{
    position: relative;
}

#groupTable
{
    position: relative;
}

.sortRow
{
    
    width: 420px;
    transition: border .3s;
    border: 1px solid #fff;
}

.sortRow .sortLabel
{
    padding: 10px;
}

.sortRow.dragging
{
    display: flex;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #ccc;
    background-color: #fff;
}

.sortRow.dragReplace td
{
    border: 1px dashed #ccc;
    background-color: #f8f8f8;
}

.einkaufslisteItem
{
    position: relative;
    display: flex;
    background-color: #f6f6f6;
    margin-bottom: 10px;
    margin-right: 50px;
}
.einkaufslisteItem.dragging,
.row.dragging
{
    position: absolute;
    left: 4px;
    right: -4px;
    z-index: 10;
}

.einkaufslisteItem.draggingChild
{
    position: absolute;
    left: 4px;
    right: -4px;
    z-index: 9;
    margin-top: -50px;
}

.einkaufslisteItem.grouped
{
    border: 1px solid #ccc;
    border-radius: 4px;
}

.einkaufslisteItemName
{
    flex: 1;
    padding: 20px 5px;
}

.einkaufslisteItem .groupLabel
{
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    font-size: 70%;
    padding: 2px 5px;
    background-color: #ccc;
    border-radius: 4px 0;
}

.einkaufslisteItemUnits
{
    display: block;
    margin-right: 10px;
}
.einkaufslisteItemUnit
{
    display: block;
    text-align: right;
    min-width: 70px;
    font-size: 70%;
}

.deleteItem a i
{
    padding: 10px 3px;
    margin-right: 0;
}

.einkaufslisteItem .sortItem,
td .sortItem
{
    cursor: move;
    top: 0;
    left: 0;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    font-size: 150%;
}

.sortGroup .sortItem
{
    text-align: left;
}

.sortGroup
{
    display: flex;
    flex-direction: row;
    vertical-align: middle;
}

.einkaufslisteItem .sortItem i
{
    height: 50px;
    width: 25px;
    line-height: 47px;
}

div#inhalt .dragReplace
{
    border: 1px dashed #ccc;
    border-radius: 5px;
    background-color: #fefefe;
    margin-bottom: 10px;
    touch-action: none;
    user-select: none;
    margin-right: 46px;
}

.einkaufslisteItem .deleteItem
{
    display: inline-block;
    margin-bottom: 10px;
}

.einkaufslisteItemInput
{
    position: relative;
}
.einkaufslisteItemInput .minilabel
{
    position: absolute;
    font-size: 80%;
    font-weight: bold;
    top: 5px;
    margin-left: 5px;
}

#newEinkaufslisteForm #document
{
    display: none;
}

#newForm #newEinkaufslisteForm .einkaufslisteItemInputRow
{
    display: none;
}

.einkaufslisteView
{
    columns: 300px 5;
    font-size: 120%;
}

.einkaufslisteViewItem
{
    padding: 10px 20px;
    background-color: #fafafa;
    margin-bottom: 10px;
    max-width: 300px;
}

.einkaufslisteViewItem .einkaufslisteViewItemName
{
    float: left;
    margin-right: 30px;
}
.einkaufslisteViewItem .einkaufslisteViewUnit
{
    text-align: right;
}

.sortItem
{
    touch-action: none;
    user-select: none;
}

.einkaufslisteItemName,
.einkaufslisteItemUnits
{
    user-select: none;
    touch-action: none;
}

body.stopMoving
{
    touch-action: none;
}

.clickIcon,
button
{
    display: inline-block;
    padding: 2px 5px;
    text-decoration: none;
    text-align: left;
    background-color: #0085ff;
    color: #fff;
    border-radius: 4px;
    width: 200px;
    margin-bottom: 10px;
}
.clickIcon:hover,
button:hover
{
    background-color: #00a5ff;
}

.clickIcon.thumb
{
    width: 40px;
}

.clickIcon.delete
{
    background-color: #ff5c5c;
}
.clickIcon.delete:hover
{
    background-color: #ff7c7c;
}

.clickIcon i
{
    font-size: 150%;
    margin-right: 0;
}

.clickIcon .label
{
    display: inline-block;
    font-size: 120%;
}

.rezeptTable,
.users
{
    border-collapse: collapse;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #666;
}

.rezeptTable td,
.users td
{
    background-color: #fff;
    padding: 10px 20px;
}

.rezeptTable .title,
.users .title
{
    font-weight: bold;
    font-size: 22px;
    display: block;
    margin-bottom: 10px;
}

.rezeptTable td .tagFilter
{
    font-size: 12px;
    padding: 2px 10px;
}

.rezeptTable .taskDone td,
.users tr.taskDone td
{
    text-decoration: line-through;
}
.rezeptTable tr.taskDone td.green
{
    text-decoration: none;
    color: #fff;
    background-color: #0c0;
}

.rezeptTable td.prevImg img,
#rezeptList .rezeptSelection .rezeptSelectionBild img
{
    border-radius: 4px;
    box-shadow: 3px 3px 3px #ccc;
}

.mobileOnly,
.mobileOnlyInline
{
    display: none;
}

a.regroup::after
{
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-family: 'Font Awesome 5 Free';
    content: '\f021';
    font-weight: 600;
    margin-left: 10px;
}



@media screen and (max-width: 1348px) {
    .einkaufslisteItemInput .minilabel
    {
        display: block;
        position: relative;
    }
}
    
@media screen and (max-width: 1267px) {
    .rezeptRow .datetime,
    th.datetime
    {
        display: none;
    }
}


@media screen and (max-width: 1062px) {
    table.users tr td.id,
    table.users tr th.id
    {
        display: none;
    }
}

@media screen and (max-width: 1000px)
{
    .navigationMobile 
    {
        position: absolute;
        left: 0;
        top: -5px;
        z-index: 5;
    }
    
    .left-navigation
    {
        position: absolute;
        left: -100%;
        top: 0;
        transition: all .3s;
    }
    
    .left-navigation.active
    {
        left: 0;
        z-index: 1;
    }
    
    a.mobileNavLink
    {
        text-decoration: none;
        padding: 5px;
        position: relative;
    }
    
    a.mobileNavLink::after,
    a.mobileNavLink:hover::after,
    a.mobileNavLink:active::after,
    a.mobileNavLink:focus::after
    {
        position: absolute;
        top: 15px;
        left: 5px;
        width: 15px;
        height: 15px;
        font-family: 'Font Awesome 5 Free';
        content: '\f0c9';
        padding: 10px;
        background-color: #fff;
        border-radius: 50%;
        line-height: 17px;
        font-weight: 600;
        text-decoration: none;
        color: #000;
        box-shadow: 3px 3px 3px #ccc;
        cursor: pointer;
        font-size: 18px;
        z-index: 10;
        transition: all .3s;
    }
    
    .navigationMobile.active a.mobileNavLink::after
    {
        left: 200px;
        content: "\f060";
    }
    
    div.twocolumn
    {
        display: block;
    }
    
    .twocolumn .column
    {
        margin-right: 0;
        width: 100%;
    }
}

@media screen and (max-width: 828px)
{
    .notMobile,
    table.users tr td.id
    {
        display: none;
    }
    
    .mobileOnly
    {
        display: block;
    }
    
    .mobileOnly.label
    {
        font-weight: bold;
        font-size: 80%;
    }
    
    .mobileOnlyInline
    {
        display: inline-block;
    }
    
    .linkIcons
    {
        font-size: 150%;
    }
    
    .linkIcons a
    {
        margin-right: 30px;
        margin: 10px 10px 10px 10px;
        display: inline-block;
    }
    
    #top-flex
    {
        display: block;
    }
    table.users 
    {
        width: 90%;
    }
    table.users tr,
    table.users tr td
    {
        display: block;
        padding-top: 20px;
    }
    
    table.users tr
    {
        width: 100%;
        margin-bottom: 40px;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .clickIcon .label
    {
        font-size: 90%;
    }
    
    td .changeScore a::after
    {
        background-color: #0085ff;
        color: #fff;
        padding: 10px;
        border-radius: 4px;
    }
    
    .score
    {
        text-align: left;
    }
    
    fieldset
    {
        margin-left: -20px;
        margin-right: -20px;
        box-sizing: border-box;
    }
    
    fieldset .column .row input, 
    fieldset .column .row textarea, 
    fieldset .column .row select, 
    fieldset .row input[type=text]
    {
        min-width: 0;
        width: 100%;
        margin-right: 20px;
        box-sizing: border-box;
    }
    
    .ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items
    {
        flex-wrap: wrap !important;
    }
    
    .aosInputDatepickerContainer a.aosInputDatepickerIcon
    {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .planWeekday
    {
        box-sizing: border-box;
        width: 100%;
    }
    
    .einkaufslisteItemInput .minilabel
    {
        position: relative;
        display: block;
        margin-bottom: 5px;
    }
    
    .fixedMobile
    {
        position: fixed;
    }
    
    
}