/* Material Icons */

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url("../font/MaterialIcons.woff2") format("woff2");
}
.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}
.by-icon {
    position: absolute;
    margin-left: 5px;
    margin-top: -3px;
}

/* Modals */
.modal {
    background-color: #00000099;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.modal > div {
    margin: 60% auto;
    padding: 0.5em;
    width: 80%;
}
.tallmodal > div { margin: 30% auto }
.modalHeader { font-weight: bold }
.modalContent { padding: 0.5em 0.5em 0 }
#modalInfo .modalContent { padding-bottom: 0.5em; padding-top: 0 }
.modalContent > input { width: 100% }
.modalFooter { font-size: small; text-align: center }
.modalFooter > * { margin: 0 0.5em }
input.comeOn { border: 1px solid #FF0000 !important }
#modalAlert .modalContent { word-break: break-word }
#advTags { margin-bottom: 1em }

/* Buttons */
.btn, .addBtn, nav li { cursor: pointer }
.addBtn, .recipeBtn {
    border-radius: 50%;
    height: 30px;
    width: 35px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
}

/* Header */
#head {
    left: 0;
    top: 0;
    padding-top: 0.25rem;
    position: sticky;
    font-size: 1.25em;
    z-index: 10;
}
#backBtn { display: none }
#title {
    font-weight: bold;
    height: 1.5em;
    overflow: hidden;
}
#menuBtn { padding: 0.25em }
#menuRight { float: right; padding: 0.25em }

/* Tags */
.modalTagColor {
    width: 1em;
    height: 1em;
    display: inline-block;
    border: 1px solid var(--text-color);
}
.tagBox {
    width: 0.75em;
    height: 0.5em;
    margin-right: 0.25em;
    display: inline-block;
    border: 1px solid var(--text-color);
}
.tagGroup { display: inline-block }
.tagGroup > * { vertical-align: sub }
.tagBox + .name {
    margin-left: 0;
}

/* General Shit */
#bMain > h4, #bCredits > p:first-child { padding-top: 1em }
#bCredits { padding: 0 1em }
#bCredits > * { font-size: 0.8em }
#bHelp .material-icons { vertical-align: middle }
* { -webkit-tap-highlight-color: rgba(255, 255, 255, 0) }
#front {
    background-color: #000000;
    color: #FFFF00;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
#front > div {
    text-align: center;
    margin: 60% auto;
    padding: 0.5em;
    width: 80%;
}
#front > div > * { margin-bottom: 0 }

/* Sidebar */
#cover { z-index: 15 }
nav {
    transition: 1s;
    z-index: 20;
    top: 0;
    left: -100%;
    width: 55%;
    position: fixed;
    display: flex;
    flex-flow: column;
    height: 100%;
}
nav > ul > li { padding: 0 0.25em }
nav.active { left: 0; transition: 0.35s }
#rightbar {
    left: unset;
    right: -100%;
    border-right: unset;
}
#rightbar > h4 { padding: 0 0.25em }
#rightbar.active { right: 0 }
.sideMore { float: right }

/* Body Elements */
#content.listView { 
    padding: 0;
    width: 100%;
    max-width: unset;
}
.body { display: none }
body { font-size: 2em }

/* Checklist */
#savingIcon {
    bottom: 0;
    display: none;
    left: 0.5em;
    position: fixed;
}
#savingIcon > i {
    font-size: 2em;
    animation: fade 1s linear;
    animation-iteration-count: infinite;
}
@keyframes fade {
    0% { opacity: 100% }
    50% { opacity: 33% }
    100% { opacity: 99% }
}
.addBtn {
    position: fixed;
    bottom: 0.5em;
    right: 0.5em;
}
.lefty .addBtn {
    right: inherit;
    left: 0.5em;
}
.cbitem, .settingsItem {
    padding: 0.3em 0.5em 0.15em;
    margin-bottom: 0;
}
.cbitem:last-child { margin-bottom: 3em }
.note:last-child { margin-bottom: 5em }
#listData > li:first-child { margin-top: 0.5em }

.cbitem > span {
    display: inline-block;
    margin-left: 0.5em;
    max-width: 75%;
    word-break: break-word;
}
.cbitem > .edit, .cbitem > .handle, .cbitem > .goToResult, .cbitem > .restoreItem {
    float: right;
    font-size: 1.25em;
    padding: 0.25em;
    padding-right: 0;
}
.cbitem > .important {
    font-size: 1.35em;
    margin-top: 0.5em;
}
.cbitem > .important + span {
    position: absolute;
    font-weight: bold;
    margin-left: 5px;
    margin-top: 0.5em;
}

.note .edit, .note .handle, .note .goToResult, .note .restoreItem {
    float: right;
    font-size: 1.25em;
}

/* Checklist Settings */
.settings { text-align: right }
.lefty .settings { text-align: left }
.option {
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    padding: 0 0.5em;
    min-width: 2em;
}
.option > i { font-size: 1.5em }
.option > div { font-size: 0.5em }
.option.active {
    background-color: var(--secondary-bg-color);
    color: var(--bg-color);
}
.tagDisp > .tag {
    border: 1px solid var(--secondary-border-color);
    border-radius: 2px;
    display: inline-block;
    font-size: 0.5em;
    padding: 0.25em 0.5em;
    margin-right: 0.25em;
}
.tagDisp > .tag > .editorTagBox { margin-top: 0.15em }
.tagDisp > .tag.active { background-color: var(--secondary-bg-color); color: var(--bg-color) }
.tagDisp.noTags {
    border: 1px solid var(--text-color);
    border-radius: 0.5em;
    font-size: 0.66em;
    padding: 0.33em;
}
#sortTypes, #filterTypes, .settingToggled { display: none }
.settingToggled > li.active, #sortTypes > li.active, #filterTypes > li.active {
    background-color: var(--bg-color-important);
    border: 1px solid var(--text-color);
    border-radius: 0.5em;
}
#sortDirIcon { float: right }
#moveChecklists > li {
    border: 1px solid var(--text-color);
    border-radius: 0.5em;
    text-align: center;
}

/* General Settings */
.box {
    border: 1px solid black;
    display: inline-block;
    height: 1.8em;
    padding-top: 0.2em;
    text-align: center;
    width: 2em;
}
.box > .material-icons { font-weight: bold; margin-top: 0.15em }
.box.theme0 { color: #B3B3B3; background: linear-gradient(0deg, #000000 80%, #FBFB07 80%) }
.box.theme1 { color: #000000;  background: linear-gradient(0deg, #FFFFFF 80%, #A0A0FF 80%) }
.box.theme2 { color: #000000; background: linear-gradient(0deg, #FFCCCC 80%, #AA0000 80%) }
.settingsItem > div { text-align: center }
.settingsButton { margin-top: 0.5em }

/* Themes */
:root {
    --bg-color: #000000;
    --bg-color-important: #660000;
    --text-color: #B3B3B3;
    --text-color-brighter: #DDDDDD;
    --secondary-bg-color: #FBFB07;
    --secondary-border-color: #898937;
    --header-bg-color: #939393;
    --header-text-color: #FFFFFF;
    --button-text-color: #4C4C4C;
    --current-tag-color: #FF0000;
}

#sidebarData {
    height: 60vh;
    position: relative;
    overflow-y: scroll;
}
#sidebarData > li.active {
    background: var(--header-bg-color);
    color: var(--header-text-color);
    padding-top: 0.3em;
}
input.checkbox {
    -webkit-appearance: none;
    border: 0.1em solid var(--secondary-bg-color);
    border-radius: 0.25em;
    color: var(--bg-color);
    display: inline-block;
    height: 1.25em;
    margin-top: 0.5em;
    outline: none;
    padding-left: 1em;
    position: relative;
    vertical-align: middle;
    width: 1em;
}
.itemContainer { vertical-align: middle; margin-bottom: 0.25em }
input.checkbox:checked { background: var(--secondary-bg-color) }
input.checkbox::before {
    content: "✔";
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    right: 0em;
    visibility: hidden;
}
input.checkbox:checked::before { visibility: visible }

body { background: var(--bg-color); color: var(--text-color) }
button { color: var(--text-color) !important }
.button-primary {
    background-color: var(--secondary-bg-color) !important;
    border: 1px solid var(--secondary-border-color) !important;
    color: var(--button-text-color) !important;
}
#head { background: var(--header-bg-color); color: var(--header-text-color) }
.addBtn, .recipeBtn {
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--secondary-border-color);
    color: var(--button-text-color);
}
nav { background: var(--bg-color); border-right: 2px solid var(--secondary-bg-color) }
.cbitem.important, .note.important { background-color: var(--bg-color-important) }
.cbitem, .settingsItem { background: var(--bg-color); border-bottom: 1px solid var(--header-bg-color) }
#rightbar { border-left: 2px solid var(--secondary-bg-color) }
.option { background-color: var(--bg-color); border: 1px solid var(--header-bg-color) }
.cbitem > .edit { color: var(--text-color-brighter) }
.box { border: 1px solid var(--header-bg-color) }
.modal > div {
    background-color: var(--bg-color);
    border: 1px solid var(--header-bg-color);
}
.modalContent > input { border-color: var(--header-bg-color) }
.modalContent > input:focus { border-color: var(--secondary-bg-color) }

/* NEW AND IMPROVED CSS */

i.important { vertical-align: sub }

#checklistScroller {   
    position: fixed;
    bottom: 0em;
    left: 0em;
    background: var(--bg-color);
    border-top: 1px solid var(--secondary-bg-color);
    padding-top: 0.25em;
    width: 100%;
}
.scrollerBtn {
    display: inline-block;
    text-align: center;
    min-width: 5em;
    max-width: 5em;
    overflow-x: hidden;
    white-space: nowrap;
}
.lefty .scrollerBtn { float: right }
.lefty #prevScroller { border-right: none }
.lefty #nextScroller { border-right: 1px solid var(--secondary-bg-color) }
#prevScroller { border-right: 1px solid var(--secondary-bg-color) }
.scrollerBtn_text {
    font-size: 0.5em;
    margin-top: -0.5em;
    padding: 0 0.5em;
}

.input-full { width: 100% !important }
.input-bg { 
    background-color: var(--bg-color) !important;
    border-color: var(--header-bg-color) !important;
    color: var(--text-color) !important;
}

.citem-text { padding: 0 1em }
.citem_cname {
    text-align: right;
    font-size: 0.75em;
    font-style: italic;
}
.citem_notes {
    font-size: 0.75em;
    font-style: italic;
    margin: -0.75em 0 0.25em 3em;
}

.addtlRecipeDetails {
    font-size: 0.75em;
    font-style: italic;
}

.sidebar_header {
    font-weight: bold;
    background-color: var(--secondary-bg-color);
    border-bottom: 1px solid var(--bg-color);
    color: var(--button-text-color);
    margin-bottom: 0;
}
.sidebar_setting {
    background-color: var(--secondary-border-color);
    color: var(--header-text-color);
    border-bottom: 1px solid var(--bg-color);
    margin-bottom: 0;
}
#sidebar ul { margin-bottom: 0 }

.bottomElem {
    width: 55%;
    left: -100%;
    transition: 1s;
    bottom: 0;
    position: fixed;
}
nav.active .bottomElem { left: 0; transition: 0.35s }

#noteTitle {
    background-color: var(--bg-color);
    color: var(--header-text-color);
    width: 100% !important;
    margin-top: 0.5em;
}
#noteBody {
    background-color: var(--bg-color);
    color: var(--header-text-color);
    width: 100% !important;
    height: 75vh;
}
#noteBodyRead {
    height: 76vh;
    overflow-y: scroll;
}
.noteBtns {
    width: 100%;
    text-align: center;
}

.note {
    border-bottom: 1px solid var(--secondary-border-color);
    padding: 0 0.75em;
    margin-bottom: 0;
}
.note_body {
    font-size: 0.75em;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 8em;
    overflow-y: scroll;
}

#noteTitleRead, #noteBodyRead { padding: 0 1em }
#noteTitleRead { margin: 0.25em 0 }
#noteBodyRead { overflow-wrap: break-word; white-space: pre-wrap; }

.tileView {
    align-items: start;
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-template-columns: 50% 50%;
    margin-bottom: 5em;
    width: 100%;
}
.lock { text-align: center }
.tileCol { margin: 0 !important }
.tileColInner { margin: 0 }
.tileView > li > ul > .note {
    border: 1px solid var(--secondary-border-color);
    border-radius: 1em;
    margin: 0.15em;
}
.tileView .option {
    min-width: 1.75em;
    font-size: 0.75em;
}
#head {
    display: grid;
    grid-template-columns: 10% 75% 15%;
}

.strikethru { text-decoration: line-through }

.no-items { padding: 1em }

.tagColorSelector {
    border: 1px solid var(--secondary-border-color);
    display: inline-block;
    height: 2em;
    width: 1em;
}
.tagColorSelector.active {
    border: 5px solid var(--header-text-color);
}
div.tc0 { background-color: #FF0000 }
div.tc1 { background-color: #00FF00 }
div.tc2 { background-color: #0000FF }
div.tc3 { background-color: #FFFF00 }
div.tc4 { background-color: #FF00FF }
div.tc5 { background-color: #00FFFF }
div.tc6 { background-color: #999999 }
div.tc7 { background-color: #333333 }
div.tc8 { background-color: #FFAA33 }
div.tc9 { background-color: #33AAFF }
div.tc10 { background-color: #000000 }
div.tc11 { background-color: #FFFFFF }
div.tc12 { background-color: #990099 }
div.tc13 { background-color: #009999 }
div.tc14 { background-color: #999900 }
div.tc15 { background-color: #990000 }
div.tc16 { background-color: #009900 }
div.tc17 { background-color: #000099 }
div.tc18 { background-color: #FF9900 }
div.tc19 { background-color: #FF0099 }
div.tc20 { background-color: #99FF00 }
div.tc21 { background-color: #00FF99 }
div.tc22 { background-color: #9900FF }
div.tc23 { background-color: #0099FF }
i.tc0 { color: #FF0000 }
i.tc1 { color: #00FF00 }
i.tc2 { color: #0000FF }
i.tc3 { color: #FFFF00 }
i.tc4 { color: #FF00FF }
i.tc5 { color: #00FFFF }
i.tc6 { color: #999999 }
i.tc7 { color: #333333 }
i.tc8 { color: #FFAA33 }
i.tc9 { color: #33AAFF }
i.tc10 { color: #000000 }
i.tc11 { color: #FFFFFF }
i.tc12 { color: #990099 }
i.tc13 { color: #009999 }
i.tc14 { color: #999900 }
i.tc15 { color: #990000 }
i.tc16 { color: #009900 }
i.tc17 { color: #000099 }
i.tc18 { color: #FF9900 }
i.tc19 { color: #FF0099 }
i.tc20 { color: #99FF00 }
i.tc21 { color: #00FF99 }
i.tc22 { color: #9900FF }
i.tc23 { color: #0099FF }

.horiz-scroll {
    overflow-x: scroll;
    white-space: nowrap;
}
#tagIconList > i, .dispTag {
    color: var(--current-tag-color);
    text-shadow: -1px -1px 1px var(--text-color), 
                  1px -1px 1px var(--text-color),
                  1px  1px 1px var(--text-color), 
                 -1px  1px 1px var(--text-color),
                  0px -1px 1px var(--text-color), 
                  0px  1px 1px var(--text-color),
                  1px  0px 1px var(--text-color), 
                 -1px  0px 1px var(--text-color);
}
.hiddenTag {
    text-shadow: none !important;
    color: var(--text-color) !important;
    opacity: 0.5;
}
.editorTagBox {
    font-size: 26px;
    width: 0.75em;
    height: 0.75em;
    display: inline-block;
    border: 1px solid var(--text-color);
    background-color: var(--current-tag-color);
}
.editorTagBoxSm {
    font-size: 22px;
    margin-bottom: 0.1em;
}
#tagIconList > .active {
    border: 5px solid var(--header-text-color);
}

.tagEdit {
    display: grid;
    grid-template-columns: 10% 74% 8% 8%;
    border-bottom: 1px solid var(--header-bg-color);
}
.tagImg, #tagData > li > i { margin: 0.25em }
.spaced-out { text-align: center }
.spaced-out > button { margin: 0 1em 1em }

input, option, select, textarea { color: #000000 }

/* Cookbook */
.recipeDetails > h4 { margin: 0.25em 0.5em }
.servingSize {
    display: inline-block;
    width: 3em;
}
.recipeSection {
    border-bottom: 1px solid var(--header-bg-color);
    margin-bottom: 0;
    overflow-y: scroll;
}
.recipeSection-tiny { height: 15vh }
.recipeSection-small { height: 25vh }
.recipeSection-smallMaybe { max-height: 25vh }
.recipeSection-big { height: 47.75vh }
.recipeBtn {
    height: 25px;
    width: 30px;
}
#ddlModalUnit {
    margin-bottom: 1em;
    width: 100%;
}
#modalAddIngredient > div { margin: 40% auto }
.editIngredient, .editStep {
    display: grid;
    grid-template-columns: 76% 12% 12%;
    margin: 0 0.5em 0.5em 1em;
}
.recipeEditBtn {
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--secondary-border-color);
    color: var(--button-text-color);
    border-radius: 0.5em;
    padding-top: 0.1em;
    text-align: center;
    width: 80%;
    height: 1.2em;
}

#txtStep { width: 100%; height: 8em; }
#modalAddStep > div { margin: 50% auto }
.btn-small {
    font-weight: bold;
    padding: 0.25em;
}
.btn-small > i { vertical-align: sub }
#recipeTopBtns { display: none }
#recipeHeader {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-auto-rows: min-content;
    margin-bottom: 0.5em;
}
#recipeHeader > div {
    text-align: center;
    border: 1px solid var(--button-text-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--bg-color-important);
}
#recipeHeader > div.active {
    border-bottom: 0;
    background-color: var(--bg-color);
}
.ingredientHeader {
    font-weight: bold;
    padding: 0 0.5em;
}
.viewIngredient { padding: 0 0.5em 0 1em }
#stepViewList { padding: 0 0.75em }
#matterType { text-align: center }
.step-unit, .help-step {
    border: 1px dashed var(--bg-color-important);
    border-radius: 0.35em;
    padding: 0.15em;
    white-space: nowrap;
}
.recipeSection.full {
    height: 100vh;
    max-height: 100vh;
}
#ingredientEditList.full {
    height: 50vh;
    max-height: 50vh;
}
#recipeMetadata {
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 0 0.5em;
}
#recipeNotes { font-size: 0.75em }
#recipeTimeInfo {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    padding: 0 0.5em;
}
.timeInfo {
    display: grid;
    grid-template-rows: 33% 67%;
    text-align: center;
}
.timeInfo > span:first-child { font-size: 0.75em }
#recipeBy, #recipeNotes { padding: 0 0.5em }

#sidebarData > li > span.by-icon {
    overflow-x: hidden;
    white-space: nowrap;
}
.viewStep.checked {
    text-decoration: line-through;
}
.groceryDetails {
    font-size: 0.75em;
    margin-left: 1em;
}
#groceryInfo { font-size: 0.75em; margin-bottom: 0.25em }
.addToCart {
    float: right;
    margin-right: 0.25em;
}
.addToCart.alreadyAdded { color: var(--secondary-border-color) }
.divider {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    font-size: 0.75em;
}
#ingredientGroups > li { padding: 0 0.5em }
.ingGroup .handle { vertical-align: middle }

#tagFilter {
    padding-top: 0.25em;
    padding-left: 0.125em;
    border-bottom: 1px solid var(--header-bg-color);
}
.tfButton {
    float: right;
    font-size: 0.5em;
    height: 3em;
    line-height: 0.5em;
    padding: 0 1em;
    margin-right: 0.4em;
    margin-top: -0.125em;
}
#advTagFilters { margin-bottom: 1em }
#tagFilter i, #tagFilter .editorTagBox { vertical-align: middle }
.filterDisplay {
    overflow-x: scroll;
    white-space: nowrap;
    width: 50vw;
    display: inline-block;
    vertical-align: middle;
    text-overflow: ellipsis;
}
#tagFilterType { text-align: center }
.tagToggle { 
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
.tagToggle > .tag {
    align-items: center;
    display: grid;
    text-align: center;
 }
 .center { text-align: center }
 .smallOr {
     font-size: 0.75em;
     margin-bottom: 0.5em;
}
.bee {
    animation: 0.1s linear 0s infinite alternate wiggle;
    left: 0;
    top: 0;
    pointer-events: none;
    position: fixed;
    vertical-align: middle;
    -webkit-text-stroke: 0.5px var(--text-color);
    z-index: 1000000;
}
@keyframes wiggle {
    from { font-size: 1em }
    to { font-size: 0.95em }
}