body, ul, fieldset, textarea, img, legend, button, i, pre, input, div {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    --bgh: #fafafb;
    --col1: blue;
    --cola: blue;
    --mnafoc: blue;
    --menuahov: #E5ECF9;
    --colt: #262626;
    --lstitmbg: white;
    --lstitmbrdc: gainsboro;
}

body {
    background-color: #fafafa;
    font-family: Roboto, "Segoe UI", Oxygen-Sans, Ubuntu, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    line-height: 1.42857143;
    font-size: 15px;
    color: var(--colt);
}

    body.val {
        --bgh: #e77f94;
        --col1: white;
        --mnafoc: white;
        --menuahov: #e91e63;
    }

    body.gui {
        background: #fff;
    }

    body.zen {
        background: #e1e1e2;
        --mnafoc: white;
    }

    body.gtx {
        --bgh: #262626;
        --col1: white;
        --cola: #8ad900;
        --mnafoc: white;
        background: #000;
        --colt: #eee;
        --lstitmbg: #262626;
        --lstitmbrdc: #555;
        --menuahov: #777;
    }

    body.bts, body.met, body.gui3, body.start {
        --mnafoc: white;
    }

    body.black-cab {
        --col1: white;
        --colt: #F8F9F5;
        --cola: white;
        --mnafoc: white;
        background: #3d4a5a;
        --lstitmbg: #485769;
        --lstitmbrdc: #303948;
        --menuahov: #5A849C;
    }

.awe-col, .elabel, .menu, h1, h2, h3, b {
    font-family: "Segoe UI", Oxygen-Sans, Ubuntu, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}

h1, h2, h3 {
    font-size: 1.5em;
    font-weight: normal;
}

input[type="text"], textarea, input[type="password"] {
    margin: 0;
    padding: 5px 8px 6px;
    color: #333;
    border: 1px solid #D5D5D5;
    border-top-color: #B5B5B5;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    font: inherit;
}

a {
    color: var(--cola);
}

/* Styles for validation helpers*/
.field-validation-valid {
    display: none;
}

.input-validation-error {
    background-color: #ffeeee;
}

.field-validation-error {
    color: red;
}

.field-validation-error span {
    position: absolute;
    background-image: url("error.png");
    background-repeat: no-repeat;
    background-position: 3px 3px;
    display: inline-block;
    font-size: 0;
    min-height: 23px;
    min-width: 25px;
    margin-left: 3px;
    vertical-align: bottom;
    z-index: 1;
    color: black;
}

#guide {
    fill: var(--col1);
}

/*menu*/
.menu {
    display: inline-block;
    font-size: 0;
    line-height: 42px;
}

    .menu li {
        display: inline-block;
        font-size: 16px;
        vertical-align: middle;
        padding: 0;
        font-weight: 600;
        text-decoration: none;
        color: var(--col1);
    }

    .menu a {
        padding: 12px 7px;
        color: var(--col1);
        text-decoration: none;
    }

        .menu a:hover {
            background: var(--menuahov);
        }

.mitem {
    display: inline-flex;
    cursor: pointer;
    padding: 0 7px;
}

.micc {
    position: relative;
    width: 1.5em;
}

/*dropmenu*/
.amenu .o-v.o-itm {
    padding: 0;
}

.amenu a {
    display: block;
    padding: 0 27px;
}

.amenu .o-itm a, .amenu .o-itm {
    color: var(--cola);
    text-decoration: none;
}

.amenu .focus a, .amenu .focus {
    color: var(--mnafoc);
}

#main {
    padding: 10px 1.5em;
    min-height: 700px;
    max-width: 2000px;
    margin: auto;
}

#footer {
    text-align: center;
    padding: 2em 0 1em;
    clear: both;
    line-height: 2em;
}

    #footer a {
        padding: .35em;
    }

#header {
    overflow: hidden;
    background: var(--bgh);
    width: 100%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05),0 1px 4px rgba(0,0,0,0.05),0 2px 8px rgba(0,0,0,0.05);
}

#so {
    margin: 0 0 -10px;
}

.black-cab #header {
    background: linear-gradient(to bottom, #55697A 0, #435060 100%);
    border-bottom-color: #2B3443;
}

.cont {
    padding-right: 10px;
    padding-left: 10px;
    margin: auto;
}

@media (min-width: 1600px) {
    .cont {
        width: 1500px;
    }
}

/* icons */
.ico-crud {
    background-image: url(editdel.png);
}

.dark .ico-crud {
    background-image: url(editdel_w.png);
}

.ico-edit, .ico-del, .ico-restore, .ico-settings {
    display: block;
    overflow: hidden;
    height: 18px;
    width: 18px;
    background-repeat: no-repeat;
}

.ico-settings {
    background: url(settingsg.svg);
    width: 25px;
    height: 25px;
    border: none;
}

.ico-edit {
    background-position: 0 -1px;
}

.ico-del {
    background-position: -17px -2px;
}

.ico-restore {
    background-position: -33px 0;
}

.ico-link {
    background: url(link.svg);
    width: 23px;
    height: 17px;
    display: inline-block;
    vertical-align: inherit;
}

/* form layout */

.efield {
    padding: 5px;
    padding-right: 15px;
}

.elabel label {
    font-weight: 600;
    text-transform: capitalize;
}

.eform {
    display: flex;
    flex-wrap: wrap;
}

.earea {
    flex: 1;
    padding: 0 .5em;
}

.evldmsg {
    height: 1.45em;
}

.eform .efield {
    padding: 0;
    padding-right: 0;
    padding-bottom: 1em;
}

.eform .einput {
    display: flex;
    flex-direction: column;
}


.finput .awe-field {
    width: 100%;
}

.edcard .einput .awe-field {
    width: 13em;
    min-width: 13em;
}

.awe-popup .einput .awe-multilookup-field .awe-display {
    max-height: 11.9em;
    overflow-y: auto;
}

/* form components */
.efield {
    padding: 5px 0;
}

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

.elabel label {
    font-weight: 600;
    text-transform: capitalize;
}

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

    .einput .awe-field,
    .einput textarea, .einput .o-mltsl,
    .einput input.awe-autocomplete,
    .einput .awe-field.o-cmped.o-tmp {
        min-width: 15em;
    }

    .einput .o-mltsl {
        max-width: 15em;
    }    

/* change picture popup */

.changePicPnl {
    padding-left: 220px;
    height: 100%;
    display: flex;
}

.picPreview {
    position: absolute;
    left: 20px;
}

.dropzone, #cropEditor {
    flex: 1;
}

.dz-default.dz-message {
    font-size: 18px;
}

@media (max-width: 850px) {
    .changePicPnl {
        padding-left: 0;
        flex-direction: column;
    }

    .picPreview {
        position: inherit;
    }
}

/* misc */
.morebtn {
    width: 100%;
    margin: 0 .5em;
    border-radius: 7px;
}

.expl {
    margin: .5em 0;
    padding: .5em;
    background: white;
    border: 1px solid pink;
    border-radius: 3px;
    color: black;
}

.settings {
    margin-bottom: 1em;
}

.inputarea {
    display: inline-block;
    width: 430px;
    vertical-align: top;
}

.hidden {
    display: none;
}

.inl {
    display: inline-block;
}

img.cthumb {
    border-radius: 3px;
    margin-right: .5em;
    vertical-align: middle;
    zoom: .7;
}

#nos {
    background: #ff5544;
    text-align: center;
    padding: 0.3em;
    color: White;
    font-size: 2em;
    font-weight: bold;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.cbt {
    clear: both;
}

.searchPanel .awe-field {
    width: 13em;
}

.spanel {
    min-height: 2.6em;
}

    .spanel .awe-field {
        width: 12em;
        padding: .1em 0;
    }

    .spanel .o-dd {
        min-width: initial;
    }

.bar {
    padding: 5px 0;
}

    .bar .awe-field {
        padding: .1em 0;
    }

/*grid custom render*/
.listGrid .awe-morebtn {
    margin: .5em 0;
}
.listGrid, .listGrid .awe-content {
    border: none;
    background: transparent;
}

    .listGrid .awe-itc {
        padding: 0;
        background: transparent;
    }

#mealsGrid .awe-itc {
    display: flex;
    flex-flow: row wrap;
    background: transparent;
}

.awe-itc {
    padding: .5em;
}

.itcard, .edcard, .gwrap {
    display: inline-block;
    min-width: 20em;
    min-height: 3em;
    padding: 1em;
    border: 1px solid var(--lstitmbrdc);
    border-radius: .35em;
    margin: .5em;
    background: var(--lstitmbg);
}

.edcard {
    min-width: 29.7em;
    flex-grow: 1;
    width: 0;
}

@media (max-width: 850px) {
    .edcard {
        display: block;
        max-width: initial;
    }
}

.itcard .elabel {
    width: 110px;
}

.edcard .elabel {
    width: 150px;
}

.edcard .einput {
    display: block;
}

.cardhead {
    padding: .5em;
}

.inlbtns {
    text-align: right;
    padding-top: .5em;
}

    .inlbtns .awe-btn {
        margin-left: .3em;
        height: 2.5em;
        padding-right: .5em;
        padding-left: .5em;
    }

.edcard .elabel {
    display: block;
    text-align: left;
}

.edcard .einput .awe-txt:not(.awe-dtp):not(.o-src) {
    min-width: 13em;
}

.edcard textarea {
    width: 100%;
    height: 2.9em;
    padding: 0 .5em;
}

/* dinners grid */
.dinnerItem {
    display: block;
    padding: 7px;
    border-radius: 2px;
    margin: 5px 0 0 0 !important;
    padding: 5px !important;
    border: 1px solid var(--lstitmbrdc);
    background: var(--lstitmbg);
}


/* meals inline edit */
.mealItemMain {
    padding-left: 1em;
    display: inline-block;
    vertical-align: top;
}

.cardComm {
    min-height: 3.7em;
}

.thumb {
    border-radius: 3px;
    height: 150px;
    width: 200px;
    display: block;
}

/* cookie msg */
#cookieMsg {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    border-top: 1px solid gainsboro;
    padding: 7px 5%;
    background: #006efc;
    color: white;
    font-size: 14px;
}

    #cookieMsg a {
        color: white;
        text-decoration: underline;
    }

#btnCookie {
    margin: 2px 7px;
    padding: 0.2em 2.5em;
    cursor: pointer;
    border-radius: 2px;
}


@media (min-width: 767px) {
    #header {
        position: fixed;
        top: 0;
        z-index: 1;
    }

    #main {
        margin-top: 3em;
    }
}

@media (max-width: 700px) {
    .optional {
        display: none !important;
    }

    .inputarea {
        width: auto;
    }
}

/* meals multilookup */

.mealsMLPopup .awe-lookup-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.mealsMLItem img {
    margin: .3em 0 0 .5em;
}

.mealsMLPopup li.awe-li.awe-morecont {
    grid-column: 1 / -1;
}

.mealMLCaption {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
}

.awe-multilookup-field .awe-display {
    justify-content: unset;
}

/* scrollbars */

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 25px;
    height: 5px;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar {
    background-color: rgba(0,0,0,0);
    width: 5px;
    height: 7px;
}

body::-webkit-scrollbar {
    background-color: rgba(0,0,0,0);
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

body.gtx::-webkit-scrollbar-thumb, body.gtx .scrlh:hover ::-webkit-scrollbar-thumb {
    background: #ffffff33;
}