@font-face {
    font-family: "open-sans";
    src: url("webfonts/OpenSans-Regular.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "open-sans";
    src: url("webfonts/OpenSans-Light.ttf");
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: "open-sans";
    src: url("webfonts/OpenSans-Bold.ttf");
    font-style: normal;
    font-weight: bold;
}

BODY {
    margin: 0px;
    font-family: 'open-sans', sans-serif;
    text-transform: initial;
    font-size: 14px;
    font-weight: 300;
    width: 100%;
    height: 100%;
    background: white;
    overflow: hidden !important;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    -webkit-overflow-scrolling: touch;
}
.main-content {
    height: calc(100vh - 60px);
    overflow: auto;
}
BODY.noscroll .main-content {
    overflow: hidden !important;
}
TEXTAREA, SELECT, INPUT, BUTTON {
    font-family: 'open-sans', sans-serif;
    text-transform: initial;
    font-size: 14px;
    font-weight: 300;
}

HTML {
    /* background: white; */
    height: 100%;
}
A {
    color: #8733A8;
}
html{font-size:110%;} 
@media(min-width:60em){html{font-size: 90%}}

@media(min-width:800px){
    .max-800 {
        display: none;
    }
}
@media(max-width:799px){
    .min-800 {
        display: none;
    }
}

.topbar-menu {
    /* box-shadow: 3px 3px 5px rgba(0, 0, 0, .3); */
    height: 60px;
    margin: 0px;
    /* padding: 0px 10px; */
    box-sizing: border-box;
    /* text-align: center; */
    /* position: fixed;
    top: 0px;
    left: 0px; */
    width: 100%;
    overflow: ellipsis;
    white-space: nowrap;
    padding-left: 10px;

    /* Permalink - use to edit and- share this gradient: http://colorzilla.com/gradient-editor/#ac147e+0,362783+100 */
    background: #ac147e; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ac147e 0%, #362783 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ac147e 0%,#362783 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ac147e 0%,#362783 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac147e', endColorstr='#362783',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.topbar-menu-right {
    position: absolute;
    right: 0px;
    top: 0px;
}
.topbar-menu#pagetitle-list .topbar-title {
    width: calc(100vw - 45px - 40px - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-menu#pagetitle-list.selections-enabled-move .topbar-title,
.topbar-menu#pagetitle-list.selections-enabled-delete .topbar-title {
    width: calc(100vw - 45px - 40px - 40px - 40px - 40px);
}

.topbar-menu#pagetitle-list:not(.selections-enabled-delete):not(.selections-enabled-move) #pagetitle-list-checkall {
    display: none;
}
.topbar-menu#pagetitle-list:not(.selections-enabled-move) #pagetitle-list-move,
.topbar-menu#pagetitle-list:not(.selections-enabled-delete) #pagetitle-list-delete {
    display: none;
}

.body-content-recipe .topbar-title {
    width: calc(100vw - 5px - 40px - 40px - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.body-content-recipes-shared .topbar-title {
    width: calc(100vw - 45px - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.body-content-recipes-shared .selections-enabled .topbar-title {
    width: calc(100vw - 45px - 40px - 40px - 40px - 40px);
}
.body-content-settings .topbar-menu {
    box-shadow: none;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e46121+0,de0279+100 */
    background: #e46121; /* Old browsers */
    background: -moz-linear-gradient(left, #e46121 0%, #de0279 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #e46121 0%,#de0279 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e46121 0%,#de0279 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e46121', endColorstr='#de0279',GradientType=1 ); /* IE6-9 */
}
BODY.body-content-slides .topbar {
    display: none;
}
/* BODY.body-content-slides .topbar-menu, */
BODY.body-content-welcome .topbar-menu {
    background: none;
}
.topbar-title {
    line-height: 60px;
    color: #ffffff;
    font-size: 20px;
    display: inline-block;
    font-weight: normal;
    text-transform: uppercase
}
.topbar-button {
    line-height: 60px;
    color: white;
    font-size: 30px;
    vertical-align: middle;
    display: inline-block;
}
.topbar-button .material-icons {
    display: block;
    line-height: 60px;
}
.topbar-menu A.topbar-button {
    color: white;
    padding: 0px 5px;
    float: left;
    text-decoration: none;
}
.topbar-menu A {
    color: white;
}
.slides-language,
.welcome-language {
    padding-left: 20px;
    padding-top: 20px;
}
.welcome-language A {
    text-decoration: none;
}
/* .topbar-menu > .topbar-button:first-child {
    padding-left: 10px;
} */
@media (min-width: 800px) {
    .topbar-button-menu {
        display: none;
    }
}

.slide-nav-profile {
    padding: 20px;
    box-sizing: border-box;
    color: white;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ac147e+0,362783+100 */
    background: #ac147e; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ac147e 0%, #362783 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ac147e 0%,#362783 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ac147e 0%,#362783 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac147e', endColorstr='#362783',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.slide-nav-profile A {
    text-decoration: none;
}
NAV UL, NAV LI {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 20px;
}
.profile-photo {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    background: white;
    overflow: hidden;
}
.profile-photo DIV {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
}
.profile-name {
    font-weight: bold;
}
.profile-email {
    opacity: .6;
}
.popup-overlay {
    background: rgba(0, 0, 0, .6);
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    position: absolute;
    transition: left .3s linear;
    display: none;
    z-index: 2;
}
.popup-overlay.on {
    display: block;
}
.content-placeholder {
    height: 60px;
}
.content-600 {
    max-width: 600px;
    margin: 0px auto;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.clearfix {
    clear: both;
}

.content {
    padding: 0px;
    /* padding-top: 10px; */
}
#content-lists,
#content-recipes {
    padding-bottom: 90px;
}
.card {
    margin: 10px 20px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
    padding: 0px 10px;
    background: #690092;
    cursor: pointer;
    color: white;
    border-radius: 20px;
    line-height: 35px;
    min-height: 35px;
}
.card A {
    color: white;
    text-decoration: none;
    display: block;
}
.card A .material-icons {
    font-size: 20px;
    line-height: 35px;
    display: block;
}
/* .card-progress-bar {
    height: 2px;
    line-height: 2px;
    background: #e0e0e0;
    margin: 10px 0px;
}
.card-progress-bar > DIV {
    height: 2px;
    line-height: 2px;
    background: #34a853;
} */
/* .side-nav-menu {
}
.side-nav-menu LI {
} */
.side-nav-menu LI A {
    line-height: 2.5em;
    text-decoration: none;
    color: black;
    padding: 0px 16px;
    font-size: 16px;
}
/* .side-nav-menu LI.flags A {
    display: inline-block;
    line-height: 2.5em;
    border: solid 2px #e3e3e3;
    padding: 5px 10px;
    margin-left: 16px;
}
.side-nav-menu LI.flags A IMG {
    vertical-align: middle;
    width: 40px;
}
*/
.side-nav-menu LI A {
    display: block;
}
.side-nav-menu LI A IMG.flag {
    margin-right: 10px;
    width: 16px;
    line-height: 16px;
}
.side-nav-menu LI A I {
    margin-right: 10px;
    vertical-align: middle;
    color: #690092;
    font-size: 20px;
}
.side-nav-menu LI A:hover,
.side-nav-menu LI A:active {
    background: #d0d0d0;
}
.side-nav-menu UL UL {
    display: none;
    background: #eeeeee;
    box-shadow: 
        inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;
}
.side-nav-menu UL .side-nav-menu-open UL {
    display: block;
}
.side-nav-menu UL UL LI A {
    padding-left: 32px;
}
.hide {
    display: none !important;
}
.popup {
    position: absolute;
    background: white;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
    box-sizing: border-box !important;
    max-width: 600px;
    min-width: 250px;
    z-index: 3;
}
#popupnotify-div .popup {
    position: static;
    margin: 10px auto;
    z-index: 100;
    box-shadow: 0px 0px 20px 5px rgba(0,0,0,.5);
    white-space: initial;
}
.popup:not(.popup-full) {
    /* left: 16px; */
    left: calc((100% - 600px) / 2);
    top: 16px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.popup:not(.popup-full):not(.popup-wordwrap) {
    white-space: nowrap;
}
.popup.popup-full {
    overflow-y: auto;
}
.popup-grey {
    background: #e6e6e6;
    color: black;
}
.popup-grey .popup-content {
    padding: 20px;
}
.popup-grey .popup-header {
    padding: 20px 20px 0px;
}
.popup-grey.error .popup-header {
    background-image: url('../img/face-sad.png');
    padding-top: 80px;
    background-position: center 20px;
    background-repeat: no-repeat;
}
.popup:not(.popup-full) .popup-content {
    padding: 10px;
    max-height: calc(100vh - 32px - 45px - 23px);
    overflow-y: auto;
    text-align: center;
    box-sizing: border-box;
}
.popup-grey .popup-content {
    overflow-y: visible;
}
.popup .popup-content.popup-recommend {
    padding: 0px;
}
#popup-registration .popup-content,
#popup-forgot-password .popup-content,
#popup-login .popup-content {
    max-height: calc(100vh - 134px - 60px);
    padding: 30px 50px;
}
/* #popup-recommend .popup-content A I {
    font-size: 18px;
    color: #b3b3b3;
} */
#popup-recipe-import {
    min-width: 320px;
}
.popup-gradient {
    /* background: #8f498e;
    background: -moz-linear-gradient(left, #8f498e 0%, #2d4691 100%);
    background: -webkit-linear-gradient(left, #8f498e 0%,#2d4691 100%);
    background: linear-gradient(to right, #8f498e 0%,#2d4691 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f498e', endColorstr='#2d4691',GradientType=1 ); */
    padding: 0px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8f498e+0,2d4691+100 */
    background: #8f498e; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #8f498e 0%, #2d4691 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #8f498e 0%,#2d4691 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #8f498e 0%,#2d4691 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f498e', endColorstr='#2d4691',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.popup-gradient .popup-content {
    margin: 0px;
    max-height: 100vh;
    padding: 0px;
}
.popup-gradient .popup-content .popup-content-padding {
    margin: 20px 30px;
}
.popup-gradient H1,
.popup-gradient A {
    color: white;
}
.popup-gradient .popup-content A {
    color: white;
    margin: 10px;
    text-decoration: none;
    display: inline-block;
}
.popup-gradient A I {
    margin-right: 10px;
    color: white;
}
.product-edit-image-button .material-icons {
    color: #E6007D;
    font-size: 24px;
    margin-right: 0px;
    vertical-align: middle;
}
@media(min-width: 800px) {
    .popup {
        width: 600px;
        left: calc((100% - 600px) / 2);
        margin: 0px auto;
        top: 100px;
    }
}
@media(max-width: 799px) {
    .popup-full {
        left: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
    }
    .popup-min {
        min-width: calc(90vw - 20px);
    }
}
.popup-header {
    padding: 10px;
    position: relative;
    /* border-bottom: solid 1px #ccc; */
}
#popup-registration .popup-header,
#popup-forgot-password .popup-header,
#popup-login .popup-header {
    padding: 0px;
    color: white;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ac147e+0,362783+100 */
    background: #ac147e; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ac147e 0%, #362783 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ac147e 0%,#362783 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ac147e 0%,#362783 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac147e', endColorstr='#362783',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.popup-header-registration {
    background: url('../img/basket_shadow.png') no-repeat center bottom;
    padding: 80px 20px 30px;
}
.popup-tabbar {
    padding: 10px;
}
.popup-footer {
    text-align: center;
    padding: 0px;
    border-top: solid 1px #ccc;
}
/* .popup-footer A {
    color: #aaa;
    text-decoration: none;
    display: block;
    padding: 10px;
} */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: block;
    font-size: 18px;
    text-decoration: none;
    color: #690092;
}
.popup-header-registration .popup-close {
    color: white;
}
.popup-header H1 {
    margin: none;
    text-transform: uppercase;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    color: #690092;
}
#popup-registration .popup-header H1,
#popup-forgot-password .popup-header H1,
#popup-login .popup-header H1 {
    color: white;
}
.popup FORM LABEL:not(.settings-checkbox),
.popup-form LABEL:not(.settings-checkbox) {
    display: block;
    margin: 10px 0px;
    position: relative;
    line-height: 38px;
    color: #666;
}
.popup FORM .settings-checkbox > B {
    border: solid 1px #e6e6e6;
    display: block;
}
.popup#popup-registration FORM .settings-checkbox > B {
    border: solid 1px #666;
}
.popup FORM INPUT[type="text"],
.popup FORM INPUT[type="number"],
.popup FORM INPUT[type="password"],
.popup FORM SELECT,
.popup FORM TEXTAREA,
.popup FORM .fake-select,
.popup-form INPUT[type="text"],
.popup-form INPUT[type="number"],
.popup-form INPUT[type="password"],
.popup-form TEXTAREA,
.popup-form SELECT,
.popup-form .fake-select {
    display: block;
    border: solid 1px #666;
    box-sizing: border-box;
    width: 100%;
    outline: none;
    font-size: inherit;
    /* font-weight: bolder; */
    height: 38px;
    line-height: 38px;
    border-radius: 19px;
    background: white;
    color: black;
}
.popup FORM .fake-select,
.popup-form .fake-select {
    line-height: 18px;
}
.popup FORM TEXTAREA,
.popup-form TEXTAREA {
    height: 100px;
    line-height: 20px;
}
.popup FORM INPUT[type="text"],
.popup FORM INPUT[type="number"],
.popup FORM INPUT[type="password"],
.popup FORM TEXTAREA,
.popup FORM .fake-select,
.popup-form INPUT[type="text"],
.popup-form INPUT[type="number"],
.popup-form INPUT[type="password"],
.popup-form TEXTAREA,
.popup-form .fake-select {
    text-align: center;
    padding: 18px 18px 2px;
}
.popup FORM SELECT,
.popup-form SELECT {
    /* padding: 2px 18px 2px 170px; */
    text-align: center;
    text-align-last: center;
    padding: 2px;
}
.popup-gradient FORM INPUT[type="text"],
.popup-gradient FORM INPUT[type="number"],
.popup-gradient FORM INPUT[type="password"],
.popup-gradient FORM TEXTAREA,
.popup-gradient FORM SELECT {
    border: none;
}
.popup FORM INPUT.input-left {
    border-radius: 19px 0px 0px 19px;
}
.popup FORM .product-edit-checkbox.input-right,
.popup FORM INPUT.input-right {
    border-radius: 0px 19px 19px 0px;
}
.popup FORM .product-edit-checkbox.input-right {
    text-align: left;
}
.popup FORM LABEL > INPUT + SPAN,
.popup FORM LABEL > SELECT + SPAN,
.popup FORM LABEL > TEXTAREA + SPAN,
.popup FORM LABEL > .label-span,
.popup-form LABEL > INPUT + SPAN,
.popup-form LABEL > SELECT + SPAN,
.popup-form LABEL > TEXTAREA + SPAN,
.popup-form LABEL > .label-span {
    position: absolute;
    top: 3px;
    left: 12px;
    transition: all .1s linear;
    text-align: center;
}
.popup FORM LABEL > INPUT + SPAN,
.popup FORM LABEL > TEXTAREA + SPAN,
.popup FORM LABEL > .label-span,
.popup-form LABEL > INPUT + SPAN,
.popup-form LABEL > TEXTAREA + SPAN,
.popup-form LABEL > .label-span {
    width: calc(100% - 24px);
    line-height: 16px;
    font-size: 10px;
}
.popup FORM LABEL > SELECT + SPAN,
.popup-form LABEL > SELECT + SPAN {
    width: calc(100% - 24px);
    line-height: 16px;
    font-size: 10px;
}
.popup FORM LABEL > INPUT.empty:not(:focus) + SPAN,
.popup FORM LABEL > SELECT.empty:not(:focus) + SPAN,
.popup FORM LABEL > TEXTAREA.empty:not(:focus) + SPAN,
.popup-form LABEL > INPUT.empty:not(:focus) + SPAN,
.popup-form LABEL > SELECT.empty:not(:focus) + SPAN,
.popup-form LABEL > TEXTAREA.empty:not(:focus) + SPAN {
    top: 0px;
    line-height: 38px;
    font-size: 14px;
}
.fake-select-label {
    position: relative;
}
.fake-select-label SELECT {
    position: absolute; left: 0px; top: 0px; width: 100%; opacity: 0;
}
.fake-select-label .fake-select-button {
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 24px;
    line-height: 38px;
}
.fake-select-button-purple {
    color: #8733A8;
}
.popup-button {
    padding: 10px;
    display: inline-block;
    background: transparent;
    color: #34a853;
    border: solid 1px transparent;
    outline: none;
    box-shadow: none;
    font-size: inherit;
    font-weight: normal;
    text-decoration: none;
    box-sizing: border-box;
}
.popup-button:focus {
    border: dotted 1px #34a853;
}
.popup-button:disabled {
    color: #aaaaaa;
}

.button {
    padding: 0px;
    line-height: 38px;
    height: 38px;
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    box-sizing: border-box !important;
    border: none;
    border-radius: 19px;
    text-transform: uppercase;
    transition: all .3s linear;
    background: white;
    color: #690092;
    width: 220px;
    display: block;
    text-align: center;
    margin: 10px auto;
    outline: none;
    -webkit-appearance: none;
}
#profile-instagram {
    width: 220px;
    margin: 0px auto;
}

.profile-picture {
    text-align: center;
}
.profile-picture > DIV:first-child {
    display: inline-block; margin: 10px auto 0px; text-align: left;
}
.profile-picture > DIV:first-child > A:first-child {
    float: left; overflow: hidden;
    position: relative;
}
.profile-picture > DIV:first-child > A:first-child > .profile-picture-image {
    display: block; width: 80px; height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
.profile-picture > DIV:first-child > DIV:nth-child(2) {
    float: left;
}
.profile-picture > DIV:first-child A SPAN {
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    font-size: 20px;
}
.profile-picture > DIV:first-child A SPAN I {
    line-height: 30px;
    width: 30px;
}
#profile-picture-upload-form {
    display: inline-block;
}

.button-inline-block {
    display: inline-block;
}
.button-small {
    height: 30px;
    line-height: 30px;
    width: auto;
    padding: 0px 15px;
}
.button-wide {
    width: auto;
    min-width: 180px;
    padding: 0px 20px;
}
.button-tiny {
    height: 24px;
    line-height: 24px;
    width: auto;
    padding: 0px 12px;
    font-size: 13px;
}
.button-primary {
    background: #690092;
    color: white;
}
.button-slidenav {
    background: #e5007d;
    color: white;
}
.button-red {
    background: #f7260d;
    color: white;
}
.button-light {
    background: #964CB3;
    color: white;
}
.button-pink {
    background: #E6007D;
    color: white;
}
.button-gradient {
    color: white;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e60289+0,333092+78 */
    background: #e60289; /* Old browsers */
    background: -moz-linear-gradient(left, #e60289 0%, #333092 78%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #e60289 0%,#333092 78%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e60289 0%,#333092 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60289', endColorstr='#333092',GradientType=1 ); /* IE6-9 */
}
.button-full {
    width: 100%;
}

.logged-out .for-logged-in {
    display: none;
}
.logged-in .for-logged-out {
    display: none;
}

.plus-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 22px;
    color: white;
    border-radius: 50%;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333092+22,e60289+100 */
    background: #333092; /* Old browsers */
    background: -moz-linear-gradient(top, #333092 22%, #e60289 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #333092 22%,#e60289 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #333092 22%,#e60289 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333092', endColorstr='#e60289',GradientType=0 ); /* IE6-9 */
    background-size: 70px 70px;
}
.plus-button .material-icons,
.plus-button .fa {
    line-height: 70px;
}

.options {
    position: relative;
    text-align: center;
}
.options-inner {
    position: absolute;
    top: 60px;
    right: 20px;
    background: #ececec;
    box-shadow: 7px 7px 7px rgba(40, 40, 40, .3);
    white-space: nowrap;
    z-index: 50;
}
.options-inner::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #ececec transparent;
    content: '';
    right: 0px;
    bottom: 100%;
    position: absolute;
    /* box-shadow: 7px 7px 7px rgba(40, 40, 40, .3); */
}
.options A {
    display: block;
    color: #565656;
    text-decoration: none;
    padding: 5px 20px;
}
.sharing-listitem {
    text-align: left;
}
.sharing-image {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    margin-left: 0px;
}
.sharing-letter {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: #71c13f;
    color: white;
    font-size: 20px;
    text-align: center;
}
.sharing-options-button {
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
    margin-left: 10px;
}
.sharing-name {
    line-height: 25px;
    margin: 10px 0px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 60px - 42px);
}
.sharing-name-waiting {
    opacity: .5;
}
.sharing-checkbox {
    line-height: 50px;
    margin: 10px;
    float: right;
    text-align: center;
    margin-right: 0px;
}
.sharing-checkbox A,
.sharing-checkbox LABEL {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: solid 1px #c0c0c0;
    vertical-align: middle;
}
.sharing-checkbox INPUT {
    display: none;
}
.sharing-checkbox A I,
.sharing-checkbox INPUT + i {
    font-size: 20px;
    line-height: 30px;
}
.sharing-checkbox INPUT + i {
    display: none;
}
.sharing-checkbox INPUT:checked + i {
    display: block;
}

#toast-div {
    position: fixed;
    z-index: 200;
    right: 20px;
    top: 20px;
}
.toast {
    padding: 20px;
    background: white;
    color: black;
    /* border-radius: 20px; */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
    margin-bottom: 10px;
}
.toast-error {
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #a94442;
}
.toast-success {
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d;
}
.toast-info {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
}
.toast-warning {
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b;
}

#notify-div {
    position: fixed;
    z-index: 100;
    left: 0px;
    bottom: 100px;
    width: 100%;
    text-align: center;
}
#popupnotify-div {
    position: fixed;
    z-index: 100;
    left: 0px;
    top: 100px;
    width: 100%;
    text-align: center;
}
.notify {
    background-color: rgba(0, 0, 0, .7);
    color: white;
    bottom: 100px;
    border-radius: 30px;
    padding: 10px 20px;
    margin: 0px auto;
    display: inline-block;
    /* position: fixed;
    z-index: 100; */
}
.notify.error {
    background: rgba(250, 70, 70, .8);
}

.textcontent {
    padding: 10px;
    /* background: white; */
    text-align: left;
    color: #333333;
}

/* .for-device-android, .for-device-ios, .for-device-browser {
    display: none;
}
.device-browser .for-device-browser,
.device-ios .for-device-ios,
.device-android .for-device-android {
    display: initial;
} */
.device-browser .for-device-android:not(.for-device-browser),
.device-browser .for-device-ios:not(.for-device-browser),
.device-android .for-device-ios:not(.for-device-android),
.device-android .for-device-browser:not(.for-device-android),
.device-ios .for-device-browser:not(.for-device-ios),
.device-ios .for-device-android:not(.for-device-ios) {
    display: none;
}

#content-shops,
#content-profile,
#content-sharing,
#content-userdata,
#content-list,
#content-lists,
#content-welcome,
#content-slides,
#content-recipes,
#content-recipes-logout,
#content-recipe,
#content-recipe-creator,
#content-recipes-shared,
#content-recipes-public,
#content-recipes-waiting,
#content-recipe-categories,
#content-settings,
#content-news,
#content-cards,
#content-card,
#content-scan,
#pagetitle-profile,
#pagetitle-shops,
#pagetitle-sharing,
#pagetitle-userdata,
#pagetitle-list,
#pagetitle-lists,
#pagetitle-welcome,
#pagetitle-slides,
#pagetitle-recipes,
#pagetitle-recipes-logout,
#pagetitle-recipe,
#pagetitle-recipe-creator,
#pagetitle-recipes-shared,
#pagetitle-recipes-public,
#pagetitle-recipes-waiting,
#pagetitle-recipe-categories,
#pagetitle-news,
#pagetitle-cards,
#pagetitle-card,
#pagetitle-scan,
#pagetitle-settings {
    display: none;
}

.body-content-shops #content-shops,
.body-content-profile #content-profile,
.body-content-sharing #content-sharing,
.body-content-userdata #content-userdata,
.body-content-list #content-list,
.body-content-lists #content-lists,
.body-content-welcome #content-welcome,
.body-content-slides #content-slides,
.body-content-recipes #content-recipes,
.body-content-recipes-logout #content-recipes-logout,
.body-content-recipe #content-recipe,
.body-content-recipe-creator #content-recipe-creator,
.body-content-recipes-shared #content-recipes-shared,
.body-content-recipes-public #content-recipes-public,
.body-content-recipes-waiting #content-recipes-waiting,
.body-content-recipe-categories #content-recipe-categories,
.body-content-settings #content-settings,
.body-content-news #content-news,
.body-content-cards #content-cards,
.body-content-card #content-card,
.body-content-scan #content-scan,

.body-content-shops #pagetitle-shops,
.body-content-profile #pagetitle-profile,
.body-content-sharing #pagetitle-sharing,
.body-content-userdata #pagetitle-userdata,
.body-content-list #pagetitle-list,
.body-content-lists #pagetitle-lists,
.body-content-welcome #pagetitle-welcome,
.body-content-slides #pagetitle-slides,
.body-content-recipes #pagetitle-recipes,
.body-content-recipes-logout #pagetitle-recipes-logout,
.body-content-recipe #pagetitle-recipe,
.body-content-recipe-creator #pagetitle-recipe-creator,
.body-content-recipes-shared #pagetitle-recipes-shared,
.body-content-recipes-public #pagetitle-recipes-public,
.body-content-recipes-waiting #pagetitle-recipes-waiting,
.body-content-recipe-categories #pagetitle-recipe-categories,
.body-content-news #pagetitle-news,
.body-content-cards #pagetitle-cards,
.body-content-card #pagetitle-card,
.body-content-scan #pagetitle-scan,
.body-content-settings #pagetitle-settings {
    display: block;
}

/* .recommend-items {
    line-height: 40px;
}
.recommend-items TABLE {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
.recommend-items TR > TD {
    padding: 0px;
}
.recommend-items TR > TD:nth-child(1),
.recommend-items TR > TD:nth-child(3),
.recommend-items TR > TD:nth-child(4) {
    color: #333333;
    width: 24px;
}
.recommend-items TR > TD:nth-child(3) A {
    padding-right: 20px;
} */

.recommend-items .clock,
.recommend-items .clock .material-icons {
    font-size: 20px;
    display: block;
    line-height: 40px;
    text-decoration: none;
}
.recommend-table {
    padding: 0px;
    text-align: left;
}
.recommend-table > DIV {
    line-height: 40px;
}
.recommend-table > DIV > DIV:not(.clearfix) {
    float: left;
}
.recommend-table > DIV > DIV:nth-child(1) {
    margin-left: 30px;
    width: 27px;
}
.recommend-table > DIV > DIV:nth-child(1) .product-checkbox {
    padding: 0px;
}
.recommend-table > DIV > DIV:nth-child(2) {
    width: calc(100% - 27px - 20px - 10px - 10px - 30px - 30px);
    padding: 0px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recommend-table > DIV > DIV:nth-child(3) {
    width: 20px;
    margin-right: 30px;
}
.recommend-later-days {
    width: 38px;
    height: 30px;
    padding: 0px 5px;
    border: none;
    line-height: 30px;
    margin: 0px;
    border-radius: 15px 0px 0px 15px;
    box-sizing: border-box;
    border: solid 1px #690092;
    border-right: none;
    vertical-align: middle;
    display: inline-block;
}
.button-recommend {
    border-radius: 0px 15px 15px 0px;
    vertical-align: middle;
    margin: 0px;
}

.popup-tab {
    display: inline-block;
    border-bottom: solid 2px white;
    padding: 5px 10px;
    text-decoration: none;
    color: #333333;
    font-size: 20px;
}
.popup-tab.active {
    border-bottom: solid 2px #71c13f;
}

.backgroundline {
    background: #353f49; height:1px; margin-top:10px; text-align: center;
}
.backgroundline SPAN {
    background: #fff; padding:10px; position:relative; top:-10px;
}
.facebook-button, .google-button {
    color: white;
    padding: 0px 15px;
    text-decoration: none;
    font-size: 13px;
    text-transform: none;
}
.facebook-button I, .google-button I {
    margin-right: 10px;
    background: white;
    border-radius: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
}
.facebook-button { background: #1f3f92; }
.google-button { background: #dd4b39; }
.facebook-button I { color: #1f3f92; }
.google-button I { color: #dd4b39; }

A.recipe {
    /* border-top: solid 1px #ccc; */
    line-height: 70px;
    height: 70px;
    background: white;
    display: block;
    position: relative;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#content-recipes-shared-list A:nth-child(even),
#content-recipes-public-list A:nth-child(even),
#content-recipes-waiting-list A:nth-child(even),
#content-recipes-list A:nth-child(even) {
    background: #E6E6E6;
}
#content-recipes-shared-list A:nth-child(odd),
#content-recipes-public-list A:nth-child(odd),
#content-recipes-waiting-list A:nth-child(odd),
#content-recipes-list A:nth-child(odd) {
    background: #F3F3F3;
}
.recipe-list-image {
    overflow: hidden;
    display: inline-block;
    width: 120px;
    height: 70px;
    line-height: 70px;
    vertical-align: top;
}
A.recipe IMG {
    /* height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle; */
    width: 100%;
}
A.recipe SPAN {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}

.recipe-data-steps {
    list-style-position: inside;
    margin: 0px;
    padding: 0px;
}
.recipe-data-steps LI {
    list-style-position: inside;
    margin: 0px 0px 10px 0px;
    padding: 0px;
}

#loader-div {
    position: fixed;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: url('../img/ajax-loader.svg') no-repeat center center;
    background-size: 80px 80px;
    /* box-shadow: 0px 0px 5px white; */
    z-index: 200;
}

/* RECIPE */
#content-recipe * {
    box-sizing: border-box;
}
#recipe-data-image-div {
    position: relative;
    min-height: 68px;
}
#recipe-data-image {
    width: 100%;
}
#recipe-data-image-public-div {
    text-align: center;
}
#recipe-data-image-public {
    width: 100%;
}
.recipe-block-1, .recipe-block-2 {
    padding: 0px 20px;
}
@media (min-width: 800px) {
    #recipe-data-image-div,
    #recipe-data-image-public-div {
        width: 50%;
        float: left;
    }
    .recipe-block-1 {
        width: 50%;
        float: right;
    }
}
@media (max-width: 799px) {
    #recipe-data-image-div,
    #recipe-data-image-public-div {
        width: 100%;
    }
}

.recipe-filter {
    padding: 20px;
}
.recipe-search {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: solid 1px #666;
    border-radius: 15px;
    box-sizing: border-box;
}
.recipe-search input {
    width: calc(100% - 32px);
    /* width: 100%; */
    box-sizing: border-box;
    height: 28px;
    /* margin: 20px; */
    line-height: 28px;
    padding: 0px 10px;
    color: #666;
    border-radius: 15px;
    outline: none;
    /* display: inline-block; */
    float: left;
    border: none;
    background: transparent;
}
.recipe-search A {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    box-sizing: border-box;
    /* display: inline-block; */
    float: right;
    color: #666;
}
.recipe-search A I {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
}
.recipe-buy {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.selections.selections-enabled-delete .selectable,
.selections.selections-enabled-move .selectable,
.selections.selections-enabled .selectable {
    /* transform: scale(.9); */
    opacity: .5;
}
.selections.selections-enabled-delete .selectable.selected,
.selections.selections-enabled-move .selectable.selected,
.selections.selections-enabled .selectable.selected {
    transform: scale(1);
    opacity: 1;
}
A.recipe i {
    display: none;
    position: absolute;
    left: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: transparent;
    /* border: solid 2px red; */
    /* border-radius: 50%; */
    color: white;
    text-shadow: 0px 0px 3px rgba(0,0,0,.5);
    font-size: 25px;
}
.selections.selections-enabled A.recipe.selectable.selected i.fa-check-circle {
    display: inline-block;
}
.selections.selections-enabled A.recipe.selectable i.fa-circle {
    display: inline-block;
}
.selections.selections-enabled A.recipe.selectable.selected i.fa-circle {
    display: none;
}


#recipe-category-list .recipe-category {
    height: 50px;
    line-height: 50px;
}
#recipe-category-list .recipe-category SPAN:nth-child(1) {
    padding: 0px 10px;
}
#recipe-category-list .recipe-category:nth-child(odd) {
    background: #f3f3f3;
}
#recipe-category-list .recipe-category:nth-child(even) {
    background: #E6E6E6;
}
#recipe-category-list .recipe-category:not(.selected) .fa-circle,
#recipe-category-list .recipe-category.selected .fa-check-circle {
    display: inline-block;
}
#recipe-category-list .recipe-category.selected .fa-circle,
#recipe-category-list .recipe-category:not(.selected) .fa-check-circle {
    display: none;
}

#content-recipe H1 {
    font-size: 16px;
    color: #690092;
    font-weight: bold;
    text-align: left;
    margin: 10px 0px;
    padding: 0px;
}
#content-recipe SMALL {
    font-size: 12px;
    font-weight: normal;
    color: black;
}
#content-news H2,
#content-recipe H2 {
    font-size: 14px;
    color: black;
    font-weight: bold;
    margin: 10px 0px;
    padding: 0px;
}
#recipe-data-ingredients, #recipe-data-ingredients LI {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#recipe-data-steps OL, #recipe-data-steps LI {
    margin: 0px;
    padding: 0px;
}
#content-recipe {
    font-size: 14px;
}


.settings-checkbox INPUT {
    display: none;
}
.settings-checkbox > B {
    background: white;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    display: inline-block;
    text-align: left;
}
.settings-checkbox > B > B {
    background: #a0a0a0;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 1px;
    margin-left: 1px;
    transition: all .2s linear;
    display: block;
}
.settings-checkbox INPUT:checked + B > B {
    background: #8733A8;
    margin-left: 16px;
}
.settings-checkbox.invalid > B {
    background: red;
    border: none;
}
.settings-checkbox.invalid > B > B {
    background: white;
}
.settings-table {
    margin: 10px auto;
    color: white;
    width: 90%;
    max-width: 440px;
    line-height: 24px;
}
.settings-table LABEL {
    color: white;
}
.settings-table TR TD:nth-child(3) {
    text-align: right;
}
.settings-table TH {
    text-transform: uppercase;
}
.settings-table TR:not(:first-child) TH {
    padding-top: 35px;
}
.settings-table LABEL {
    line-height: 24px;
}
.settings-table A,
.settings-table .material-icons {
    line-height: 24px;
    color: white;
}
.product-edit-checkbox {
    background: white;
    border-radius: 19px;
    height: 38px;
    line-height: 38px;
    position: relative;
    margin: 10px 0px;
    padding: 0px 10px;
    text-align: center;
}
.product-edit-checkbox .settings-checkbox {
    position: absolute;
    right: 10px;
    top: 9px;
    margin: 0px;
}
.product-edit-checkbox .settings-checkbox > B {
    background: #e6e6e6;
}

.language-active {
    font-weight: bold;
}
.h1-2 {
    font-size: 34px;
}
.h1-1 {
    color: #8733A8;
    font-weight: normal;
    margin-top: 35px;
    text-transform: uppercase;
}

.input-error {
    position: absolute;
    width: 100%;
    left: 0px;
}
.input-error .input-error-inner {
    display: none;
    position: absolute;
    top: 15px;
    left: 20px;
    background-color: #ececec;
    background-image: url('../img/face-sad.png');
    background-repeat: no-repeat;
    background-position: center 20px;
    box-shadow: 7px 7px 7px rgba(40, 40, 40, .3);
    z-index: 1;
    padding: 80px 20px 20px;
    width: calc(100% - 40px - 40px);
    line-height: 1.4em;
    white-space: normal;
}
.input-error.invalid .input-error-inner {
    display: block;
}
.input-error .input-error-inner H1 {
    margin-bottom: 10px;
}
.input-error .input-error-inner::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #ececec transparent;
    content: '';
    right: 0px;
    bottom: 100%;
    position: absolute;
}
.news {
    background: white;
    /* box-shadow: 3px 3px 5px rgba(0, 0, 0, .3); */
    /* padding: 10px; */
}
.news > DIV {
    background: #690092;
    color: white;
    padding: 10px;
    border-radius: 20px;
    margin: 10px 20px;
}
.news .button {
    margin-bottom: 0px;
}

.add-product ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(255,255,255,.8);
}
.add-product ::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255,255,255,.8);
}
.add-product :-ms-input-placeholder { /* IE 10+ */
    color: rgba(255,255,255,.8);
}
.add-product :-moz-placeholder { /* Firefox 18- */
    color: rgba(255,255,255,.8);
}

body:not(.device-iosa) .inputfile-label input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
body:not(.device-iosa) .inputfile-label > span {
    font-size: 14px;
    display: inline-block;
    line-height: 30px;
    height: 30px;
    padding: 0px 10px;
    margin: 0px 0px 10px;
    text-align: center;
}
body:not(.device-iosa) .inputfile-label-1 {
    color: white;
    background-color: #690092;
    border-radius: 15px;
}
body:not(.device-iosa) .inputfile-label > span > I {
    margin-right: 5px;
}
body:not(.device-iosa) .inputfile-label:focus > span:nth-child(1),
body:not(.device-iosa) .inputfile-label:hover > span:nth-child(1) {
    background-color: #e5007d;
}
body:not(.device-iosa) .inputfile-label {
	cursor: pointer;
}
body:not(.device-iosa) .inputfile-label:focus {
	outline: 1px dotted #690092;
	outline: -webkit-focus-ring-color auto 5px;
}

body:not(.device-iosa) .inputfile-label-inverse .inputfile-label-1 {
    background-color: #e5007d;
}
body:not(.device-iosa) .inputfile-label-inverse .inputfile-label-2 {
    color: white;
}
/*
body.device-ios .inputfile-label-1,
body.device-ios .inputfile-label-2 {
    display: none;
}
*/
.recipe-input-1 {
    width: calc(100%);
    line-height: 30px;
    display: block;
}
.recipe-input-2 {
    line-height: 30px;
    border: solid 1px #690092;
    border-radius: 15px;
    outline: none;
    padding: 0px 10px;
    margin: 0px 0px 10px;
    text-align: center;
}
select.recipe-input-2 {
    height: 30px;
    background: white;
}
.recipe-input-2:focus,
.recipe-input-1:focus {
    border: solid 1px #e5007d;
}
.recipe-form {
    padding: 10px;
}
.recipe-form, .recipe-form * {
    box-sizing: border-box;
}
.recipe-ingredients-textarea {
    height: 20px;
    line-height: 20px;
}
.recipe-form IMG {
    max-width: 100%;
}
.ingredients-table INPUT,
.steps-table INPUT {
    width: 100%;
}
.ingredients-table TR > TD:nth-child(1),
.ingredients-table TR > TD:nth-child(2) {
    display: inline-block;
    /* (window - padding - last column) * 0,2 */
    width: 25%;
}
.ingredients-table TR > TD:nth-child(3) {
    display: inline-block;
    width: 50%;
}
.ingredients-table TR > TD:nth-child(4) {
    width: 40px;
    text-align: center;
}

.steps-table TR > TD:nth-child(1) {
    display: inline-block;
    /* (window - padding - last column) * 0,2 */
    width: 100%;
}
.steps-table TR > TD:nth-child(2) {
    width: 40px;
    text-align: center;
}
.ingredients-table, .steps-table {
    width: 100%;
}
.ingredients-table A, .steps-table A,
.ingredients-table .material-icons, .steps-table .material-icons {
    width: 20px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 20px;
}
.ingredients-table > TBODY > TR:first-child A:first-child, .steps-table > TBODY > TR:first-child A:first-child {
    visibility: hidden;
}
.steps-table TEXTAREA {
    text-align: left;
}

.recipe-form H2 {
    font-size: 16px;
    color: #690092;
    margin: 10px 0px 5px;
}
.recipe-plus {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}
.recipe-plus I {
    background: #333092; /* Old browsers */
    background: -moz-linear-gradient(top, #333092 22%, #e60289 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #333092 22%,#e60289 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #333092 22%,#e60289 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333092', endColorstr='#e60289',GradientType=0 ); /* IE6-9 */
    color: white;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
}

.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}



.buy-checkbox {
    margin: 5px 20px;
}
.buy-checkbox LABEL {
    line-height: 25px;
}
.buy-checkbox INPUT {
    display: none;
}
.buy-checkbox INPUT + i {
    border: solid 1px #000;
    color: transparent;
    font-size: 24px;
    transition: all .2s linear;

    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}
.buy-checkbox INPUT:checked + i {
    opacity: .8;
    color: black;
    /* background: #59b64b; */
    border: solid 1px black;
}
.buy-checkbox SPAN {
    margin-left: 5px;
}


#circularG{
	position:relative;
	width:75px;
	height:75px;
	margin: auto;
}

.circularG{
	position:absolute;
	background-color:rgb(172,20,126);
	width:18px;
	height:18px;
	border-radius:11px;
		-o-border-radius:11px;
		-ms-border-radius:11px;
		-webkit-border-radius:11px;
		-moz-border-radius:11px;
	animation-name:bounce_circularG;
		-o-animation-name:bounce_circularG;
		-ms-animation-name:bounce_circularG;
		-webkit-animation-name:bounce_circularG;
		-moz-animation-name:bounce_circularG;
	animation-duration:1.1s;
		-o-animation-duration:1.1s;
		-ms-animation-duration:1.1s;
		-webkit-animation-duration:1.1s;
		-moz-animation-duration:1.1s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#circularG_1{
	left:0;
	top:30px;
	animation-delay:0.41s;
		-o-animation-delay:0.41s;
		-ms-animation-delay:0.41s;
		-webkit-animation-delay:0.41s;
		-moz-animation-delay:0.41s;
}

#circularG_2{
	left:8px;
	top:8px;
	animation-delay:0.55s;
		-o-animation-delay:0.55s;
		-ms-animation-delay:0.55s;
		-webkit-animation-delay:0.55s;
		-moz-animation-delay:0.55s;
}

#circularG_3{
	top:0;
	left:30px;
	animation-delay:0.69s;
		-o-animation-delay:0.69s;
		-ms-animation-delay:0.69s;
		-webkit-animation-delay:0.69s;
		-moz-animation-delay:0.69s;
}

#circularG_4{
	right:8px;
	top:8px;
	animation-delay:0.83s;
		-o-animation-delay:0.83s;
		-ms-animation-delay:0.83s;
		-webkit-animation-delay:0.83s;
		-moz-animation-delay:0.83s;
}

#circularG_5{
	right:0;
	top:30px;
	animation-delay:0.97s;
		-o-animation-delay:0.97s;
		-ms-animation-delay:0.97s;
		-webkit-animation-delay:0.97s;
		-moz-animation-delay:0.97s;
}

#circularG_6{
	right:8px;
	bottom:8px;
	animation-delay:1.1s;
		-o-animation-delay:1.1s;
		-ms-animation-delay:1.1s;
		-webkit-animation-delay:1.1s;
		-moz-animation-delay:1.1s;
}

#circularG_7{
	left:30px;
	bottom:0;
	animation-delay:1.24s;
		-o-animation-delay:1.24s;
		-ms-animation-delay:1.24s;
		-webkit-animation-delay:1.24s;
		-moz-animation-delay:1.24s;
}

#circularG_8{
	left:8px;
	bottom:8px;
	animation-delay:1.38s;
		-o-animation-delay:1.38s;
		-ms-animation-delay:1.38s;
		-webkit-animation-delay:1.38s;
		-moz-animation-delay:1.38s;
}



@keyframes bounce_circularG{
	0%{
		transform:scale(1);
	}

	100%{
		transform:scale(.3);
	}
}

@-o-keyframes bounce_circularG{
	0%{
		-o-transform:scale(1);
	}

	100%{
		-o-transform:scale(.3);
	}
}

@-ms-keyframes bounce_circularG{
	0%{
		-ms-transform:scale(1);
	}

	100%{
		-ms-transform:scale(.3);
	}
}

@-webkit-keyframes bounce_circularG{
	0%{
		-webkit-transform:scale(1);
	}

	100%{
		-webkit-transform:scale(.3);
	}
}

@-moz-keyframes bounce_circularG{
	0%{
		-moz-transform:scale(1);
	}

	100%{
		-moz-transform:scale(.3);
	}
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    background: #fafafa;
}
.slideout-menu-left {
    left: 0;
} 
.slideout-menu-right {
    right: 0;
} 
.slideout-panel {
    position: relative;
    z-index: 1;
    /* will-change: transform; */
    min-height: 100vh;
    transition: transform .3s ease;
} 
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
} 
.slideout-open .slideout-menu {
    display: block;
}
.slideout-menu A {
    color: white;
}
.slideout-menu .topright {
    position: absolute;
    right: 20px;
    top: 20px;
}
.slideout-menu .topright A {
    text-decoration: none;
    font-size: 14px;
    line-height: 22px;
}
.slideout-menu .topright I {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 22px;
    line-height: 22px;
    transform: rotate(180deg);
}

#not-sidebar {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
    background: white;
}
BODY.body-content-welcome #not-sidebar,
BODY.body-content-slides #not-sidebar,
BODY.body-content-settings #not-sidebar {
    color: #ffffff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
BODY.body-content-settings #not-sidebar,
BODY.body-content-welcome #not-sidebar {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e46121+0,de0279+100 */
    background: #e46121; /* Old browsers */
    background: -moz-linear-gradient(left, #e46121 0%, #de0279 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #e46121 0%,#de0279 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e46121 0%,#de0279 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e46121', endColorstr='#de0279',GradientType=1 ); /* IE6-9 */
}
BODY.body-content-slides #not-sidebar {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e4007d+0,6a007e+100 */
    background: #e4007d; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #e4007d 0%, #6a007e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #e4007d 0%,#6a007e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #e4007d 0%,#6a007e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4007d', endColorstr='#6a007e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#content-slides,
#content-welcome {
    text-align: center;
}

@media screen and (min-width: 800px) {
    .slideout-panel {
        margin-left: 300px;
    }
    .slideout-menu {
        display: block;
    }
    .btn-hamburger {
        display: none;
    }
    .topbar-menu {
        left: 300px;
        /* width: calc(100% - 300px); */
    }
}

.shop-list {}
.shop-item:nth-child(odd) {
    background: #e6e6e6;
}
.shop-item:nth-child(even) {
    background: #f3f3f3;
}
.shop-image {
    width: 120px;
    float: left;
}
.shop-image IMG {
    display: block;
}
.shop-text {
    width: calc(100% - 120px - 40px - 20px);
    float: left;
    line-height: 20px;
    padding-top: 20px;
    padding-left: 20px;
}
.shop-name {
    color: #8733A8;
    font-weight: 600;
}
.shop-button {
    width: 40px;
    text-align: center;
    float: left;
    line-height: 80px;
}
.shop-button A {
    color: grey;
    text-decoration: none;
}

.sharing-checkbox.sharing-checkbox-shared .sharing-checkbox-false {
    display: none;
}
.sharing-checkbox:not(.sharing-checkbox-shared) .sharing-checkbox-true {
    display: none;
}

#content-list:not(.selections-enabled):not(.selections-enabled-delete):not(.selections-enabled-move) .product-options-select,
#content-list.selections-enabled .product-checkbox,
#content-list.selections-enabled .product-options-image,
#content-list.selections-enabled .product-options-sort,
#content-list.selections-enabled .product-options-edit,
#content-list.selections-enabled-delete .product-checkbox,
#content-list.selections-enabled-delete .product-options-image,
#content-list.selections-enabled-delete .product-options-sort,
#content-list.selections-enabled-delete .product-options-edit,
#content-list.selections-enabled-move .product-checkbox,
#content-list.selections-enabled-move .product-options-image,
#content-list.selections-enabled-move .product-options-sort,
#content-list.selections-enabled-move .product-options-edit {
    display: none;
}
#content-list .product[selection="true"] .product-options-select-false,
#content-list .product[selection="false"] .product-options-select-true {
    display: none;
}
.recipe-portions .material-icons {
    vertical-align: middle;
    font-size: 22px;
}
.recipe-portions:not(.editable) A {
    display: none;
}
.recipe-portions {
    float: right;
}
body:not(.moderator) .for-moderator {
    display: none;
}
.recipe-moderation {
    background: #e46121; /* Old browsers */
    background: -moz-linear-gradient(left, #e46121 0%, #de0279 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #e46121 0%,#de0279 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e46121 0%,#de0279 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e46121', endColorstr='#de0279',GradientType=1 ); /* IE6-9 */
    color: white;
    padding: 20px;
}
.recipe-moderation A {
    color: white;
}
#recipe-data-more {
    margin-top: 10px;
}
#product-add-image-browser {
    display: none;
    margin: 0px 20px;
}

table.diff {
	border-collapse:collapse;
	width: 100%;
}
table.diff tbody th {
	background:#EED;
	color:#886;
	text-align:right;
	vertical-align:top
}
table.diff .empty {
	background-color:#DDD;
}
table.diff .replace {
	background-color:#FD8
}
table.diff .delete {
	background-color:#E99;
}
table.diff .skip {
	background-color:#EFEFEF;
	border:1px solid #AAA;
	border-right:1px solid #BBC;
}
table.diff .insert {
	background-color:#9E9
}
#scan-overlay {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100vw;
    height: 20vh;
    box-sizing: border-box;
    color: white;
    background: rbga(0, 0, 0, .3);
}
.category_list_item {
    background: #fa0076;
    border-radius: 15px;
    height: 20px;
    line-height: 20px;
    padding: 5px 5px 5px 10px;
    color: white;
    display: inline-block;
    margin: 10px 10px 0px 0px;
}
.category_list_item A {
    color: #fa0076;
    background: white;
    height: 20px;
    line-height: 20px;
    width: 20px;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    margin-left: 10px;
    vertical-align: text-bottom;
}
.category_list_item A I {
    line-height: 20px;
}
#recipe-filter-categories, #recipe-public-filter-categories {
    border-radius: 15px;
    border: solid 1px #666;
    padding: 10px;
    margin-top: 10px;
}

HTML.scanning {
    background: transparent;
}
HTML.scanning BODY {
    background: transparent;
}
HTML.scanning {
    background: transparent;
}
HTML.scanning #not-sidebar {
    background: transparent;
}

.scan-buttons {
    position: fixed;
    bottom: 20px;
    left: 20px;
}
.scan-button {
    font-size: 30px;
    background: rgba(0,0,0,.4);
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    border-radius: 50%;
    box-sizing: border-box;
    text-decoration: none;
    margin-right: 20px;
}
.scan-button i {
    box-sizing: border-box;
    font-size: 30px;
    background: transparent;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    border-radius: 50%;
    border: solid 1px white;
    color: white;
    text-align: center;
}
#card-data {
    text-align: center;
}
#barcode {
    width: 100%;
    height: auto;
}
.card-shop-50 {
    margin: 0px 5px 5px 0px;
    width: calc(50% - 5px);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    text-decoration: none;
}
.card-shop-list {
    white-space: normal;
    width: 100%;
    text-align: left;
}
#autocomplete span {
    color: #727272;
}
.device-ios #popup-registration.popup FORM LABEL > INPUT + SPAN,
.device-ios #popup-login.popup FORM LABEL > INPUT + SPAN {
    transition: auto;
}
.popup form label > span,
.popup-form label > span {
    pointer-events: none;
}


.advertisement-container {
    background: #ddd;
    display: none;
    position: relative;
}
body.advertising .advertisement-container {
    display: block;
}
.advertisement-container A.bannerad {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.advertisement-container A.bannerad IMG {
    display: block;
    margin: 0px auto;
    max-width: 100%;
}

/* begining of advertisements */
/* .productad-cart {
    float: left;
    text-decoration: none;
    line-height: inherit;
    height: 100%;
    width: 30px;
    margin: 0px 20px 0px 10px;
}
.productad-cart I.material-icons {
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    border-radius: 50%;
    font-size: 22px;
    background: #ac147e;
    background: -moz-linear-gradient(-45deg, #ac147e 0%, #362783 100%);
    background: -webkit-linear-gradient(-45deg, #ac147e 0%,#362783 100%);
    background: linear-gradient(135deg, #ac147e 0%,#362783 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac147e', endColorstr='#362783',GradientType=1 );
}
.productad-max-800 .productad-cart {
    margin: 0px 10px;
}
.productad-max-800 .productad-cart I.material-icons {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
}
.productad-content {
    float: left;
    text-decoration: none;
    line-height: inherit;
    height: 100%;
    color: #333;
    width: calc(100% - 100px - 20px);
}
.productad-max-800 .productad-content {
    width: calc(100% - 100px);
}
.productad-image {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}
.productad-image IMG {
    max-width: 100px;
    max-height: 100%;
    vertical-align: middle;
    display: inline-block;
}
.productad-text {
    display: inline-block;
    height: 100%;
    margin-left: 10px;
    line-height: 25px;
    text-decoration: none;
    vertical-align: top;
}
.productad-max-800 .productad-text {
    line-height: 20px;
}
.productad-text SPAN:nth-child(1) {
    color: #8733A8;
    font-size: 18px;
    display: block;
    font-weight: bolder;
}
.productad-text SPAN:nth-child(2) {
    color: #8733A8;
    font-size: 15px;
    display: block;
}
.productad-text SPAN:nth-child(3) {
    color: #8733A8;
    font-size: 14px;
    display: block;
}
.productad-price {
    height: 100%;
    line-height: 15px;
    text-decoration: none;
    vertical-align: top;
    width: 100px;
    text-align: center;
    float: right;
}
.productad-max-800 .productad-price {
    line-height: 15px;
}
.productad-price > SPAN:first-child {
    background: white;
    padding: 5px 10px;
    box-shadow: 5px 5px 0px 0px #aaa;
    border-radius: 10px;
    display: block;
    margin-top: 5px;
}
.productad-price > SPAN > SPAN {
    display: block;
}
.productad-price > SPAN:nth-child(2) {
    font-size: 12px;
}
.productad-price > SPAN:first-child > SPAN:first-child {
    color: #E6007D;
    font-weight: bold;
}
.productad-price > SPAN:first-child > SPAN:nth-child(2) {
    text-decoration: line-through;
}
.productad-close {
    width: 30px;
    margin: 0px 10px 0px 20px;
    display: inline-block;
    text-align: right;
    vertical-align: top;
    text-decoration: none;
    font-size: 18px;
}
.productad-close I {
    margin-top: 10px;
    display: block;
}
.productad-max-800 .productad-close {
    margin: 0px 10px;
} */

.productad-cart {
    display: inline-block;
    text-decoration: none;
    line-height: inherit;
    width: 30px;
    height: 30px;
    margin: 10px;
}
.productad-cart I.material-icons {
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    border-radius: 50%;
    font-size: 22px;
    background: #ac147e; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ac147e 0%, #362783 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ac147e 0%,#362783 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ac147e 0%,#362783 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac147e', endColorstr='#362783',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.productad-close {
    width: 30px;
    margin: 10px;
    display: inline-block;
    text-align: right;
    text-decoration: none;
    font-size: 18px;
}
.productad-close I {
    display: block;
}
.productad-price {
    background: white;
    padding: 5px 10px;
    box-shadow: 5px 5px 0px 0px #aaa;
    border-radius: 10px;
    display: block;
    margin-top: 5px;
    text-align: center;
}
.productad-price > SPAN:first-child {
    display: block;
    color: #E6007D;
    font-weight: bold;
}
.productad-price > SPAN:nth-child(2) {
    display: block;
    text-decoration: line-through;
}
.productad-unit-price {
    text-align: center;
}
.productad-title {
    color: #8733A8;
    font-size: 18px;
    display: block;
    font-weight: bold;
}
/* end of advertisements */

/* */
body:not(.show-prices) .hide-prices,
body.show-prices .show-prices {
    display: none;
}



#sliders {
    /* scroll-snap-type: x mandatory; */
    overflow-x: auto;
    display: flex;
    width: 100%;
    height: 100%;
    white-space: nowrap;
}
#sliders > div.slide {
    scroll-snap-align: center;
    /* display: inline-block; */
    width: 100%;
    height: 100%;
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    scroll-snap-stop: always;
    flex-shrink: 0;
    white-space: initial;
    padding: 20px;
    box-sizing: border-box;
}
.sliders_pettyes_sor {
    padding: 20px 0px;
    box-sizing: border-box;
    font-size: 16px;
    position: fixed;
    left: 50%;
    bottom: 0px;
    width: 150px;
    margin-left: -75px;
}
.sliders_pettyes_sor A {
    line-height: 30px;
    display: block;
}
.sliders_pettyes_sor I {
    font-size: 30px;
    line-height: 30px;
    display: block;
}
.sliders_elso_oldali_cucc,
.sliders_utolso_oldali_cucc {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 16px;
}
.sliders_elso_oldali_cucc {
    border-top: solid 2px rgba(255, 255, 255, .5);
}
.sliders_elso_oldali_cucc I {
    font-size: 22px;
    display: block;
}
#sliders > div div.sliders_szoveges {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 30%;
    max-height: 180px;
    background: #4d0c72;
    padding: 10px 20px 30px;
    box-sizing: border-box;
    font-size: 16px;
}
.sliders_pettyek > DIV {
    display: inline-block;
    width: 7px;
    height: 7px;
    line-height: 7px;
    background: #24124c;
    border-radius: 50%;
    margin: 0px 1px;
    cursor: pointer;
}
.sliders_pettyek > DIV.sliders_petty {
    box-shadow: 0px 0px 0px 1px white;
    background: white;
    margin: 0px 2px;
}
#sliders > DIV.slide:first-child {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#800288+0,333192+100 */
    background: #800288; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #800288 0%, #333192 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #800288 0%,#333192 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #800288 0%,#333192 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800288', endColorstr='#333192',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#sliders A {
    text-decoration: none;
    color: white;
}
@media (max-height: 599px) {
    .sliders_logo {
        width: 50%;
        max-width: 300px;
        margin-top: 30px;
    }
    .sliders_basket {
        width: 30%;
        max-width: 300px;
    }
}
@media (min-height: 600px) {
    .sliders_logo {
        width: 50%;
        max-width: 300px;
        margin-top: 100px;
    }
    .sliders_basket {
        width: 40%;
        max-width: 300px;
        margin: 20px;
    }
    #sliders {
        font-size: 16px;
    }
}
@media (min-height: 660px) {
    #sliders {
        font-size: 18px;
    }
}
@media (max-height: 330px) {
    .sliders_logo {
        display: none;
    }
}
@media (max-height: 490px) {
    .sliders_basket {
        display: none;
    }
    .sliders_logo {
        margin-top: 0px;
    }
    #sliders > div div.sliders_szoveges {
        padding: 10px;
    }
    .sliders_szoveges P {
        margin: 0px;
    }
}
.sliders_pettyek_helye {
    width: 124px;
    height: 22px;
    display: block;
}