@font-face { font-family: 'novamono'; src: url('/fonts/0/NovaMono-Regular.ttf'); font-style: normal; }
@font-face { font-family: 'ubuntumono'; src: url('/fonts/0/ubuntumono/UbuntuMono-Regular.ttf'); font-style: normal; }
@font-face { font-family: 'ubuntumono'; src: url('/fonts/0/ubuntumono/UbuntuMono-Italic.ttf'); font-style: italic; }
@font-face { font-family: 'ubuntumono'; src: url('/fonts/0/ubuntumono/UbuntuMono-Bold.ttf'); font-weight: bold; }

/* Meyer reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

body { background-color: #F2F2EA; color: #002E2C; font-size: 20px; font-family: 'ubuntumono', monospace; background-image: linear-gradient(30deg, #F0F0E7 25%, #E6E6DA 25%, #E6E6DA 50%, #F0F0E7 50%, #F0F0E7 75%, #E6E6DA 75%, #E6E6DA 100%); background-size: 40px 23px; }
body .full-wrapper { display: block; }
.width-wrapper { position: relative; max-width: 1000px; margin: 0 auto; }
body.no-scroll { overflow: hidden; }

i { display: block; background-color: transparent; background-size: cover; background-image: url('/img/0/icons/icons-sprite.png'); }
.icon-image { background-position-x: calc(0 * -100%); }
.icon-logout { background-position-x: calc(1 * -100%); }
.icon-info { background-position-x: calc(2 * -100%); }
.icon-close { background-position-x: calc(3 * -100% + 1px); }
.icon-save { background-position-x: calc(4 * -100%); }
.icon-filter { background-position-x: calc(5 * -100%); }
.icon-download { background-position-x: calc(6 * -100%); }
.icon-cogwheel { background-position-x: calc(7 * -100%); }
.icon-menu { background-position-x: calc(8 * -100%); }
.icon-favorite { background-position-x: calc(9 * -100%); }
.icon-statistics { background-position-x: calc(10 * -100%); }
.icon-edit { background-position-x: calc(11 * -100%); }
.icon-profile { background-position-x: calc(12 * -100%); }
.icon-calendar { background-position-x: calc(13 * -100%); }
.icon-check { background-position-x: calc(14 * -100%); }
.icon-search { background-position-x: calc(15 * -100%); }
.icon-delete { background-position-x: calc(16 * -100%); }

input[type="text"], input[type="password"] { -webkit-appearance: none; border: none; background: #F2F2EA; color: #000; padding: 4px 4px; line-height: 1; border-radius: 4px; }
input[type="button"], input[type="submit"], button { cursor: pointer; }
input[type="checkbox"] { -webkit-appearance: none; cursor: pointer; width: 10px; height: 10px; background: white; border-radius: 2px; }
input[type="checkbox"]:checked { background: #444; }
input[type="checkbox"]:disabled { background: transparent; }

.login { overflow: hidden; }
.login fieldset { margin: 5px; }
.login input { float: left; width: 100px; margin-left: 5px; }
.login input[type="submit"] { float: left; width: auto; }

/* Header */
header { z-index: 10; position: fixed; top: 0; right: 0; left: 0; background-color: #002E2C; background-image: linear-gradient(120deg, #454515 25%, #38380E 25%, #38380E 50%, #454515 50%, #454515 75%, #38380E 75%, #38380E 100%); background-size: 23px 40px; }
header p { font-family: 'novamono', monospace; font-size: 36px; padding: 20px 10px 10px 10px; text-align: center; }
header a { color: #FFF; text-decoration: none; }
header menu { overflow: hidden; background-color: rgba(255, 255, 255, 0.85); border-radius: 5px 5px 0 0; }
header menu a { color: #002E2C; text-decoration: none; }
header ul { overflow: hidden; padding: 10px; float: left; }
header li { display: block; float: left; }
header .main li { margin-right: 12px; }
header .main li.active { border-bottom: 4px solid #454515; margin-right: 12px; }
header .account { float: right; }

/* Content */
.content { position: relative; padding: 120px 10px 10px 10px; background-color: rgba(255, 255, 255, 0.8); border-radius: 0 0 5px 5px; margin-bottom: 10px; }
.content::after { content: ""; clear: both; display: table; }

.scroll-margin { scroll-margin-top: 120px; }

.side-menu { float: left; width: 250px; border: 1px solid #DDDDC5; border-radius: 5px; position: sticky; top: 120px; font-size: 16px; }
.side-menu ul, .side-menu dl { margin: 0 5px; border-radius: 4px; padding: 5px; }
.side-menu dt { font-weight: bold; }
.side-menu li { margin-bottom: 2px; overflow: hidden; }
.side-menu .bullet { background: transparent; border: 1px solid #454515; border-radius: 2px; display: block; float: left; width: 7px; height: 7px; margin: 4px 10px auto 4px; }
.side-menu .selected .bullet { background-color: #787846; }
.side-menu a { display: block; cursor: pointer; color: #002E2C; text-decoration: none; }
.side-menu a:hover .bullet { background-color: #CCCCB4; }
.side-menu label { cursor: pointer; }
.side-menu label:hover input[type="checkbox"] { background-color: #DDDDC5; width: 7px; height: 7px; margin-left: 6px; }
.side-menu input[type="checkbox"] { background: transparent; border: 1px solid #DDDDC5; border-radius: 2px; width: 9px; height: 9px; vertical-align: middle; margin-left: 4px; }
.side-menu input[type="checkbox"]:checked { background-color: #DDDDC5; }

.index img { display: block; width: 100%; }

.cards-list { width: calc(100% - 255px); margin-left: 255px; border-radius: 5px; font-size: 18px; }
.cards-list dt { font-size: 20px; margin-bottom: 4px; padding-left: 10px; font-weight: bold; }
.cards-list dd { margin-bottom: 20px; padding-left: 20px; }
.cards-list li { margin-bottom: 2px; overflow: hidden; border-radius: 4px; }
.cards-list dl li { padding: 0; }
.cards-list .card.hidden { display: none; }
.cards-list .card-options { float: left; margin-right: 10px; }
.cards-list input[type="button"]:disabled { display: none; }
.cards-list .label { display: inline-block; overflow: hidden; border-radius: 4px; padding: 2px 10px; }
.cards-list .label input { vertical-align: middle;  }
.cards-list .collected0 .label { background-color: transparent; border: 1px solid #DDDDC5; /* Uncollected */ }
.cards-list .collected1 .label { background-color: #F2AF29; border: 1px solid #F2AF29; /* Prospect */ }
.cards-list .collected2 .label { background-color: #D8F793; border: 1px solid #D8F793; /* Collected */ }
.cards-list .collected3 .label { background-color: #DD7271; border: 1px solid #DD7271; /* Damaged */ }

.zelda-list { width: calc(100% - 255px); margin-left: 255px; border-radius: 5px; font-size: 18px; }
.zelda-list dl { margin-bottom: 10px; border-radius: 4px; padding: 10px; }
.zelda-list dl:hover { cursor: pointer; }
.zelda-list dt { font-size: 18; margin-bottom: 4px; font-weight: bold; }
.zelda-list .step { border: 1px solid #DDDDC5; }
.zelda-list .step.completed { background-color: #D8F793; border: 1px solid #D8F793; }

.imdb-list { width: 100%; border-radius: 5px; font-size: 18px; }
.imdb-list li { font-size: 18; margin-bottom: 4px; font-weight: bold; margin-bottom: 10px; border-radius: 4px; padding: 10px; }
.imdb-list input { cursor: pointer; }
.imdb-list a { color: #000; }
.imdb-list .movie { border: 1px solid #DDDDC5; }
.imdb-list .movie.watched { background-color: #D8F793; border: 1px solid #D8F793; }

.slowscore-list { width: calc(100% - 255px); margin-left: 255px; border-radius: 5px; font-size: 18px; }
.slowscore-list .score { overflow: hidden; border: 1px solid #DDDDC5; border-radius: 5px; }
.slowscore-list .score > dt { background: rgba(0,0,0,0.04); overflow: hidden; padding: 5px; }
.slowscore-list .score > dt dt { float: left; }
.slowscore-list .score > dt dd { float: right; }
.slowscore-list .score > dd { overflow: hidden; padding: 5px; }
.slowscore-list .score > dd dt { float: left; clear: left; }
.slowscore-list .score > dd dd { float: right; }

.slowscore-list #goals dl { margin: 10px 0; border: 1px solid #DDDDC5; border-radius: 5px; }
.slowscore-list #goals dt { background-color: rgba(0,0,0,0.04); padding: 5px; }
.slowscore-list #goals dd { padding: 5px; }
.slowscore-list #goals button { margin: 20px auto; padding: 15px 40px; cursor: pointer; font-size: 20px; display: block; }

article.diet { width: calc(100% - 255px); margin-left: 255px; border-radius: 5px; font-size: 18px; padding-bottom: 40px; }
article.diet h1 { font-size: 20px; margin-bottom: 14px; padding-left: 10px; font-weight: bold; }
article.diet dt { font-size: 20px; margin-top: 28px; margin-bottom: 4px; padding: 6px 0 4px 10px; font-weight: bold; border-radius: 4px 4px 0 0; background: rgba(69, 69, 21, 0.06); box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12); }
article.diet dt:first-child { margin-top: 6px; }
article.diet dt label { display: block; }
article.diet a { color: inherit; }
article.diet .row { display: block; margin-bottom: 1px; background-color: #fff; border: 1px dashed #DDD; }
article.diet .input { display: block; }
article.diet .input input[type="text"] { box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF; margin: 6px 0; background-color: #FFF; display: block; width: calc(100% - 20px); padding: 4px 10px; border: 1px solid transparent; border-bottom: 1px solid #DDD; }
article.diet .input input[type="text"].error { background-color: #FFE6E6; }
article.diet .input.short input[type="text"] { max-width: 140px; display: inline-block; margin: 2px 0; }
article.diet .input.inline { display: inline; }
article.diet .input.inline.micro input[type="text"] { display: inline-block; width: 38px; padding: 4px; margin-right: -6px; }
article.diet .input.inline label { display: block;   }
article.diet .entry .row { background-color: #F7F7ED; }
article.diet a:hover .row { border: 1px solid #AEAE90; }
article.diet .field { padding: 0 4px; margin: 2px; display: inline-block; border: 1px solid transparent; }
article.diet .entry .field { border: 1px solid #D5D5C9; }
article.diet .left { display: inline-block; }
article.diet .right { display: inline-block; float: right; }
article.diet .number { display: inline-block; text-align: right; margin-right: 4px; }
article.diet .micro .number { min-width: 30px; }
article.diet .kcal .number { min-width: 40px; }
article.diet .weight .number { min-width: 50px; }
article.diet .grams .number { min-width: 24px; }
article.diet .day { width: 18px; text-align: right; }
article.diet .item-name { padding: 0 4px; margin: 1px 4px 3px 4px; display: inline-block; border: 1px solid transparent; }
article.diet .row { }
article.diet .row .right button { font-size: 12px; display: inline-block; vertical-align: top; margin: 2px 2px; line-height: 1; }
article.diet .controls { overflow: hidden; padding: 4px; }
article.diet .controls button { padding: 4px 14px; }

article.diet dl dl dt { font-size: 16px; padding: 0 0 2px 10px; margin-top: 16px; }
article.diet dl dl dt:first-child { margin-top: 8px; }
article.diet dl dl dd { font-size: 16px; }

article.diet .select { display: block; margin-bottom: 6px; position: relative; padding-top: 4px; }

article.diet .input.amount { display: inline-block; }
article.diet .input.amount input[type="text"] { display: inline-block; text-align: right; width: 24px; margin: 2px 2px 2px 0; padding: 0 6px; }
article.diet .input.portions { display: inline-block; }
article.diet .input.portions input[type="text"] { display: inline-block; text-align: right; width: 24px; margin: 2px 2px 2px 0; padding: 0 6px; }
article.diet.entry dd li { display: block; font-size: 14px; margin-top: 2px; }
article.diet.entry dd li .row { margin: 0 6px; }
article.diet .checkbox-col { float: left; padding-right: 6px; margin-right: 6px; }
article.diet .checkbox-col:hover { cursor: pointer; }
article.diet .checkbox { cursor: pointer; padding: 6px; border-radius: 2px; border: 1px solid #AAA; margin: 5px 0 0 4px; position: relative; }
article.diet .checkbox-col:hover .checkbox { background: #DDD; }
article.diet .checkbox i { width: 20px; height: 20px; position: absolute; top: -6px; left: -2px; }
article.diet .entry:not([checked="checked"]) .checkbox i { background: transparent; }
article.diet .cursor-list .row.entry:hover { cursor: pointer; border: 1px solid #AEAE90; }

article.diet .sub-rows { display: block; clear: both; }
article.diet .sub-row { display: block; margin: 2px 8px 0 8px; border-top: 1px solid #EEE; padding-top: 2px; font-size: 0.8em; overflow: hidden; }

#add-food-errors { color: red; margin: 8px 0; }

@media screen and (max-width: 800px) {
  .login { overflow: hidden; }
  .login fieldset { float: none; margin: 5px; text-align: center; }
  .login input { float: none; width: 100px; margin-left: 5px; }
  .login input[type="submit"] { float: none; width: auto; }

  #mobile-menu { z-index: 1; position: absolute; top: 2px; right: 10px; display: block; width: 40px; height: 40px; border-radius: 5px; background-image: linear-gradient(30deg, #F0F0E7 25%, #E6E6DA 25%, #E6E6DA 50%, #F0F0E7 50%, #F0F0E7 75%, #E6E6DA 75%, #E6E6DA 100%); background-size: 10px 15px; }
  header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
  header p { padding: 5px; }
  header .login { position: fixed; bottom: 0; }
  header menu { margin: 0 10px; display: none; }
  header menu.open { display: block; }
  header ul { float: none; }
  header li { padding: 5px 0; float: none; }
  header .main li { margin-right: 0; }
  header .main li.active { background: rgba(0,0,0,0.2); border-bottom: none; margin-right: 0; }

  .side-menu  { float: none; width: auto; position: static; }
  .mobile-menu-open .content { height: 0; overflow: hidden; }
  .mobile-menu-open header { height: 100%; z-index: 1; }
  .mobile-menu-open .side-menu { background-color: rgba(255, 255, 255, 0.85); z-index: 2; position: fixed; overflow-y: auto; height: calc(100% - 222px); top: 218px; right: 10px; bottom: 4px;left: 10px; }

  .slowscore-list #goals { min-height: 350px; }

  .content { margin: 10px 10px 10px 10px; padding-top: 50px; }
  .scroll-margin { scroll-margin-top: 54px; }

  .cards-list, .zelda-list, .slowscore-list, article.diet { float: none; width: auto; margin: 10px 0 10px 0; }
  .cards-list dt { padding: 0; }
  .cards-list dd { padding: 0; }
  .cards-list .card-options { float: none; }

  article.diet dd { font-size: 14px; }
  article.diet dd a { margin: 4px 0; }
  article.diet dd .number { margin-right: 2px; }
  article.diet dd .micro .number { min-width: 20px; }
  article.diet dd .micro .kcal .number { min-width: 30px; }
  article.diet dd .micro .wrap:not(.kcal) { display: none; }
  article.diet dd .row .micro .wrap:not(.kcal) { display: inline-block; }
  article.diet dd .row { overflow: hidden; }
  article.diet dd .row .right { float: right; }
  article.diet dd .weight .number { min-width: 34px; }
  article.diet dd .day { width: 14px; }
  article.diet .checkbox { padding: 4px; margin: 5px 0 0 4px; }
  article.diet .checkbox i { width: 16px; height: 16px; top: -5px; left: -3px; }
}

.q-select { display: block; background: #fff; position: relative; width: 100%; height: 20px;}
.q-select { border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12); }
.q-select .placeholder { display: block; padding-left: 32px; padding-top: 1px; color: #888; }
.q-select .search { display: none; height: 100%;}
.q-select .icon-search { width: 16px; height: 16px; position: absolute; left: 6px; top: 2px; }
.q-select.open .icon-search { z-index: 132; }
.q-select.open .search { display: block; }
.q-select .close-button { display: none; }
.q-select .search input[type="text"] { display: block; position: absolute; z-index: 131; top: 0; right: 0; bottom: 0; left: 0; background: #fff; border-radius: 0; border: 1px solid #CCC; padding: 2px 8px 2px 32px; margin: 0; }
.q-select .options { display: none; z-index: 130; background: #fff; position: absolute; top: 20px; width: 100%; padding: 6px 0; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; }
.q-select.open .options { display: block; }
.q-select .option { padding: 4px 8px; }
.q-select .option:not(.info):hover { background-color: #F6F6F6; cursor: pointer; }
.q-select .option.info { color: #888; }

@media screen and (max-width: 800px) {
  .q-select.open { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 15; }
  .q-select.open .options { overflow: scroll; position: fixed; top: 20px; bottom: 0; max-height: inherit; }
  .q-select.open .close-button { display: block; position: absolute; z-index: 132; top: 0; right: 0; cursor: pointer; padding: 0 6px; }
  .q-select.open .icon-close { display: block; width: 20px; height: 20px; }
}

.width-wrapper.full { position: relative; max-width: none; margin: 10px; }
.qquest-quests .table { width: 100%; }
.qquest-quests .quest {
  display: grid;
  grid-template-columns:
    60px /*quest-id*/
    minmax(200px, 1fr) /*name*/
    70px /*giver-id*/
    70px /*giver-x*/
    70px /*giver-y*/
    minmax(180px, 220px) /*giver-name*/
    60px /*side*/
    minmax(180px, 240px) /*races*/
    minmax(180px, 240px) /*classes*/
    70px /*level*/
    70px /*req*/
    70px /*exp*/
    minmax(180px, 240px) /*chain-parent*/
    minmax(180px, 240px) /*unlock-parents*/
    minmax(180px, 240px) /*holiday*/
    minmax(180px, 240px) /*profession*/
    minmax(180px, 240px) /*wh-category*/
    120px /*disabled*/
    ;
  width: 100%;
}


.qquest-quests { padding-bottom: 120px; }
.qquest-quests .quest { position: relative; }
.qquest-quests h1 { font-size: 32px; margin-bottom: 4px; text-align: center; border-bottom: 2px solid #000; }
#quest-table .quest.header { font-weight: bold; position: sticky; top: 110px; background: #FFF; z-index: 10; }
#quest-table .quest:nth-child(even) { background-color: rgba(0,0,0,0.05); }
#quest-table .quest:not(:first-child):hover { background-color: #FFFF0090; }
#quest-table .quest span { padding: 2px 4px; box-shadow: inset 0 0 0 0.2px #00000030; }
#quest-table .quest .quest-id { text-align: right; }
#quest-table .quest.header span { text-align: center; }
#quest-table .quest.header .name { text-align: left; }

#quest-table:has(.quest:not(.header) .quest-id:hover) .quest.header .quest-id { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .name:hover) .quest.header .name { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .giver-id:hover) .quest.header .giver-id { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .giver-x:hover) .quest.header .giver-x { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .giver-y:hover) .quest.header .giver-y { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .giver-name:hover) .quest.header .giver-name { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .side:hover) .quest.header .side { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .races:hover) .quest.header .races { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .classes:hover) .quest.header .classes { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .level:hover) .quest.header .level { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .req:hover) .quest.header .req { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .exp:hover) .quest.header .exp { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .chain-parent:hover) .quest.header .chain-parent { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .unlock-parents:hover) .quest.header .unlock-parents { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .holiday:hover) .quest.header .holiday { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .profession:hover) .quest.header .profession { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .wh-category:hover) .quest.header .wh-category { background-color: #FFFF0090; }
#quest-table:has(.quest:not(.header) .options:hover) .quest.header .options { background-color: #FFFF0090; }

#quest-table .quest input { font-size: 16px; width: 100%; border: 0; padding: 0; background-color: transparent; }
#quest-table .quest span.center input { text-align: center; }

#quest-table .quest[quest-disabled="1"]:after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: red; pointer-events: none;  }
/*#quest-table .quest:has(input[altered="1"]) .save-button { color: red; }*/