/*
@import url('https://fonts.googleapis.com/css?family=Lato:wght@700&display=swap');

/* can be used as point of reference for other shades, with diminished alpha */
:root {
    --blue: rgb(50, 120, 180);
    --red: rgb(140, 25, 25);
    --green: rgb(0, 100, 0);
    --alternate-link: #85c7ff
}

@font-face {
    font-family: 'GitLabSans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../assets/fonts/GitLabSans.woff2) format('woff2');
}

body {
    font-family: 'GitLabSans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: auto;
    background: #fff;
    margin-bottom: 10px;
    font-size: 15px;
}
body.not-ready, body.not-ready footer,
body.not-ready div, body.not-ready header { background: black }

html {
    /* necessary for footer to behave like a footer */
    position: relative;
    min-height: 100%;
    padding-bottom: 25px;
    box-sizing: border-box;
}

.headline {
    background: #f0f0f0;
    font-size: 80%;
    padding: 3px 2.5px 1px;
    border: solid #000;
    border-width: 0 0 1px;
    display: flex;
}
header .headline { user-select: none; }
#announcement {
    background: rgb(247, 196, 133);
    position: absolute;
    box-sizing: border-box;
    opacity: .95;
    right: 0;
    border-width: 0 0 1px 1px;
    max-width: 98.9%;
    padding: 4px 2px 4px;
    z-index: 3;
}
#announcement.off {
    width: auto;
    opacity: .7;
    padding-left: 2px;
}
#announcement section.left {
    padding-left: 2px;
    padding-right: 6px;
}
#announcement div {
    font-size: 12px;
    font-family: 'Consolas', monospace;
    line-height: 21px;
}
#announcement.off section.left,
#announcement.off section.center { display: none; }
#announcement.off.new { opacity: .8; }
#announcement.off.new .octicon { fill: #b00; }
#announcement.off.new2 {
    background: var(--red);
}
#announcement em.octicon.octicon-small svg {
    width: 12px;
    height: 12px;
    padding: 0;
    vertical-align: baseline;
    margin: 0 -2px;
}

button.not-a-button { all: unset; cursor: pointer } /* used in modal, X button */
button:focus, button.not-a-button:focus { outline: 1px auto var(--blue); }

.headline .left, .headline .center { margin-right: auto }
.headline .site-title strong { font-weight: 500; font-size: 15px }
.headline .right { text-align: right }

.site-title a { text-decoration: none; color: inherit !important }
.headline button:hover, .headline a:hover, .headline label:hover { opacity: .6 }

.headline .site-title img {
    width: 23px;
    vertical-align: bottom;
    margin-right: 2px;
    margin-left: 0;
    margin-bottom: 1px;
}

.headline .octicon { vertical-align: middle }
.headline .octicon svg, .warning .octicon svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
header .headline .reset-container span {
    font-size: 14px;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    padding: 0 2px;
    line-height: 20px;
}
header .headline .reset-container svg { margin: -2px -2px 0 0 }

.hidden { display: none !important }
.invisible { right: 50000px }
.strikethrough { text-decoration: line-through; }

.octicon svg { vertical-align: bottom; padding: 2px }
i.octicon svg { width: 8px }

a { color: var(--blue) }
.filter-header a {
    cursor: pointer;
    color: var(--alternate-link);
    text-decoration: underline;
}
a:visited { color: #551a8b }
/*a .octicon, a.octicon { fill: var(--blue) }
a:visited .octicon, a.octicon:visited { fill: #551a8b }/*  used to be for external-link octicon, deprecated (2021-06-30) */
.orange { color: #e7b478; }
.orange .octicon { fill: rgb(184, 89, 0) }
.orange .red { fill: var(--red) }
.gray .octicon { fill: #858585 }
.no-underline { text-decoration-line: none; }

.octicon { fill: #000 }

.export-url {
    position: fixed;
    width: 100%;
    margin: auto;
    z-index: 2;
    display: flex;
    flex: 10;
}
.export-url input {
    flex: 9;
    padding: 0 3px;
    height: 24px;
    border: 1px solid #ccc;
    max-width: 900px;
}
.export-url > button { height: 26px }
.export-url > button.octicon svg { fill: black }
.export-url > button.octicon[disabled] svg { fill: #999 }

content, main { margin: 0 5px; display: block }
content { margin-top: 5px; margin-bottom: -5px } /* marginBottom:-5 for when filters panel is toggled off */
main { margin-top: 5px; }
.filter-body.top { margin-left: -4px; margin-bottom: 5px }

.octicon[title][data-octicon=info], span[title], small[title], time {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

time[data-alt] {
    cursor: pointer;
}

span.error { color: #F44336; font-size: 95% }

label { 
    user-select: none;
    white-space: nowrap;
}

section.filter-container {
    border-top: 1px solid #000;
    padding-bottom: 5px;
}

section.filter-container > section { padding: 3px 5px; }

section.filter-header {
    font-size: 15px;
    background-color: #777;
    color: white;
    margin-bottom: 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    flex: 10;
    user-select: none;
}
.filter-header .filter-filler { flex: 9; text-align: right }
.filter-header .filter-filler > span {
    background: rgba(255, 255, 255, .8);
    display: inline-block;
    padding: 0 5px;
    margin: 0 5px;
    font-weight: bold;
    font-family: 'Consolas', monospace;
}
section.filter-header input,
section.filter-header button {
    vertical-align: text-bottom
}
section.filter-body { user-select: none }

.clear svg { padding: 0; fill: #000; height: 15px }
.clear { display: none }
.filter-container.active .filter-header .clear,
.filter-header.active .local.clear,
.filter-body.active .local.clear { display: inline }

.filter-container.active .filter-header,
.filter-header.active { background-color: #555 }

small.tip-or, small.tip-and, sup.new { text-transform: uppercase }

/* filter type selection */
.filter-body.and .filter-store[data-filter-type=or],
.filter-body.or .filter-store[data-filter-type=and] {
    display: none;
}
.or .tip-or, .and .tip-and {
    background: #555;
    color: white;
    border-radius: 4px;
    padding: 0 3px;
}
[id^=ft-switch-] .tip-or, [id^=ft-switch-] .tip-and { cursor: pointer; }
[id^=ft-switch-] .tip-or { margin-left: 1px; }
[id^=ft-switch-] .tip-and { margin-right: 1px; }
/* */

sup.new {
    font-size: 60%;
    vertical-align: top;
    user-select: none;
    color: #b06119;
    cursor: help;
}

button {
    user-select: none;
    text-align: center;
}
button.action { font-weight: bold }

button.mock { pointer-events: none; }

button[data-filter], button.filter-more-button {
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    margin: 2px 4px;
    outline: none;
    padding: 2px 4px;
    white-space: nowrap;
    font-size: 13px;
    text-transform: capitalize;
}

button.filter-more-button {
    background: transparent;
    border: 1px dotted #777;
    border-radius: 5px;
    color: #777;
    padding: 2px 6px;
    margin-right: 0 /* not sure why necessary */
}

button[data-filter=ignore] { display: none }

/*button[data-filter=ignore]:nth-child(-n+3),*/ /* always displays only the 3 first... huh. */
.filter-body.more button[data-filter=ignore] { display: inline-block }

button[data-filter=yes],
button[data-filter=no] {
    border: 1px solid transparent;
    color: #fff;
}

button[data-filter=yes] { background: var(--blue) }
button[data-filter=no] { background: var(--red) }

#tag_support_and, #tag_support_or { border-bottom: 1px solid #000 }

.center { text-align: center }

.blue, .cost-mana { color: var(--blue) }
.red, .cost-life { color: var(--red) }
.green { color: var(--green) }
.border-blue { border-color: var(--blue) !important; }
.border-red { border-color: var(--red) !important; }
.border-green { border-color: var(--green) !important; }

.cost-es { color: #00bcd4 }
.bold { font-weight: 600 }

.filter-level-container > * {
    box-sizing: border-box; 
}
#number-level { width: 40px }

.filter-header input[type=text] {
    border: 0;
    margin: 2px 1px;
}

#text-icon {
    width: 20px;
    font-family: 'Consolas', monospace;
    text-align: center;
    font-weight: bold;
}
.filter-container small {
    line-height: 1.6em;
}

#actionSearch { margin: 0 3px 0 5px }

.advanced-toggle {
    border-radius: 2px;
    white-space: nowrap;
    padding: 2px 0 5px 3px;
}
.advanced-toggle.active { background: rgb(50, 120, 180, .2)  }
.advanced-button {
    font-family: 'Consolas', monospace;
    font-size: 110%;
    padding: 0 6px;
}
.advanced-container input[type=checkbox] {
    margin: 0;
    margin-right: 5px;
    position: relative;
    top: 2px;
    height: 12px;
}

.warning, .info {
    margin: 5px auto;
    padding: 5px 7px;
    background-color: rgba(247, 198, 139, 0.5)
}
.info {
    background-color: #e6e7f4;
}
.warning.clickable:hover {
    opacity: .8;
    cursor: pointer;
}
#result-show-anyway { margin: 15px auto }
#result-show-anyway strong { font-weight: 600 }
#links-conflict-warning { background-color: rgba(255, 55, 55, .25) }
.show-details-container .gem-more-warning { display: none }
.show-details-container.show-gem-more-warning .gem-more-warning { display: inline-block }

.minimized #new-feature-warning {
    display: none;
}
.minimized #links-conflict-warning {
    text-indent: -999px;
    height: 3px;
    padding: 0;
    margin: -1px 0;
    background-color: rgba(255, 55, 55, .75);
}

.filter-body input[list] {
    border: 1px solid rgb(153, 153, 153);
    border-radius: 2px;
    padding: 4px;
    vertical-align: bottom;
}
.filter-body input[list].error { background-color: rgba(255, 125, 125, 0.7); }
.gemlink {
    border: 3px double #ccc;
    border-radius: 8px;
    margin: 2px 4px;
    padding: 4px 5px;
    white-space: nowrap;
    font-size: 13px;
    text-transform: capitalize;
    background-color: #eee;
    line-height: 20px;
}
.gemlink[data-filter=yes] {
    border-color: var(--blue);
}
.gemlink[data-filter=no] {
    border-color: var(--red);
}
.gemlink:first-child { margin-left: 2px }

.gemlink svg {
    vertical-align: bottom;
    fill: #000;
    margin-left: 2px;
}
.gemlink button:hover { opacity: .7 }

.td-filters { margin-top: 5px; }
.td-filters input {
    vertical-align: bottom;
    margin-right: 2px
}

body.empty #result { display: none }
body.empty div.td-filters { display: none }

table { width: 100%; margin-top: 10px }
table tbody tr { position: relative }
table[data-is-finder] tbody tr:nth-child(4n+3),
table[data-is-finder] tbody tr:nth-child(4n+3) + tr { background: #f0f0f0 }
td.enchantments ul li:nth-child(even) { list-style-type: circle }
table td, .pad { padding: 5px 10px }
table .wiki { width: 1px }

table tbody tr.collected { background-color: rgb(50, 120, 180, .2)  !important }
table tbody tr:not(.show-details):hover { background-color: rgb(50, 120, 180, .3)  !important }

table tbody.hideCollection tr.collected { display: none } /* collection */

table td.colors,
table td.level {
    font-family: 'GitLabSans', Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}
td.colors, td.links, td.level, td.act, td.npc, td.price, td.quest, td.group { width: 8px; }
tbody td.price { padding: 0; }
td.price .img-container { text-align: center }
td.price img {
    width: 28px;
    border: 1px solid #aaa;
    vertical-align: middle;
}
td.npc { white-space: nowrap; }

.star-container em.star-fill,
tr.collected .star-container em.star { display: none }
tr.collected .star-container em.star-fill { display: initial }

td.name, td.links {
    white-space: nowrap;
    padding-right: 5px;
}
td.name .gem-name-container, tbody td.name .octicon {
    color: #000;
    fill: #000;
    vertical-align: top; /* alignment with icons */
}
.name-prefix { font-size: 10pt; text-transform: uppercase; font-weight: 300;}
td.name.error span { color: #F44336 } /* disabled */
td.name .gem-img, span.transfig.name .gem-img {
    width: 34px;
    margin: -5px auto;
    vertical-align: middle; /* in case text-bottom is not handled */
    vertical-align: text-bottom;
}
td.name #gem-count-container { font-weight: 400; }
td.transfig { max-width: 400px; }
td.transfig img.wiki { vertical-align: sub; }

iframe {
    border: 0;
    /* max-height: 700px; /* might be necessary later */
    max-width: 450px;
}

iframe.minimized {
    overflow: hidden;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

.parentIFrame {
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 3;
}
.parentIFrame.minimized {
    border-bottom: 1px solid #1ba29b;
    border-radius: 0 0 4px 0;
}
.parentIFrame.focus {
    z-index: 4;
}
.headerIFrame {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
    cursor: move;
}

.headerIFrame > div {
    z-index: 5;
    font-family: 'Consolas', monospace;
    color: white;
}

.iframe-exit {
    background: transparent;
    cursor: pointer;
    width: 25px;
    height: 25px;
    margin-right: 20px;
    margin-top: 7px;
    background: url('/assets/img/close-iframe.png');
    background-position: 0 0;
}
.iframe-exit:hover {
    filter: brightness(1.3) saturate(1.3);
}

.iframe-move {
    background-color: transparent;
    top: 2px;
    flex-grow: 1;
    padding: 10px;
}
.parentIFrame.moving .iframe-move {
    height: 100px;
}
.parentIFrame.minimized .iframe-move {
    height: auto;
}

td.links { text-align: center; }
td.links a { text-decoration: none }
td.links img, td.links svg.ninja {
    margin: 0;
    border: 1px solid transparent;
    background: transparent;
}
td.links svg.ninja, td.links img.poedb { border-color: #aaa }
td.links img.poedb { padding: 1.5px; /* exactly 21x21 */ }
td.links a:hover { opacity: .8 }
td.links img.wiki, td.transfig img.wiki {
    width: 19px;
    height: 19px;
}
td.links svg.ninja {
    padding: 1px; 
    width: 17px;
    height: 17px;
}
td.links .ninja g { fill: #000; }
button.td-name-controls {
    padding: 0;
    margin: 0;
    margin-left: 3px;
    vertical-align: top;
    float: right;
}
button.td-name-controls:hover {
    opacity: .6;
}
button.td-name-controls.active svg {
    fill: var(--blue);
}
.orange svg {
    fill: rgb(184, 89, 0) !important;
}
.red svg {
    fill: var(--red) !important;
}

td.cost { white-space: nowrap }
table tbody td.colors { 
    color: #fff;
    font-weight: bold;
    border: 1px solid transparent;
    width: 15px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 2px solid transparent
}
table td.colors.red { background-color: red }
table td.colors.green { background-color: green }
table td.colors.blue { background-color: blue }
table td.colors.white { 
    background-color: white;
    border: 2px solid #ccc
}

table td.links,
table td.colors,
table td.level,
table td.tags,
table td.cost,
table td.quests,
table td.quality,
table td.weapons,
table td.jewels,
table td.uniques,
table td.transfig,
table td.enchantments,
table td.act,
table td.npc,
table td.quest,
table td.howto,
table td.group,
table td.price { display: none }

table.links td.links,
table.colors td.colors,
table.level td.level,
table.tags td.tags,
table.cost td.cost,
table.price td.price,
table.quality td.quality,
table.weapons td.weapons,
table.jewels td.jewels,
table.uniques td.uniques,
table.transfig td.transfig,
table.enchantments td.enchantments,
table.act td.act,
table.npc td.npc,
table.howto td.howto,
table.group td.group,
table.quest td.quest,
table.quests td.quests { display: table-cell }

table thead td { 
    font-size: 80%;
    font-weight: bold;
    background: #777/*#c4c4c4*/;
    color: white;
    letter-spacing: .33px;
    user-select: none;
    white-space: nowrap;
}
table thead td.colors { padding: 5px; }

.sort-arrow-container { vertical-align: sub }
td.level .sort-arrow-container { vertical-align: middle } /* necessary for some reason */
table.shuffle .sort-arrow-container { visibility: hidden; }
table thead td[data-sort=asc] { background-color: var(--blue); }
table thead td[data-sort=desc] { background-color: var(--red); }
table.shuffle thead td[data-sort] { background-color: #777; } /* dark different */

.sort-arrow { display: none }
/* .sort-arrow svg .octicon { vertical-align: middle; padding: 0 3px; } */

thead td svg.octicon { fill: #fff; }

td[data-sort=asc] #sort-arrow-asc,
td[data-sort=desc] #sort-arrow-desc { display: inline }

td .thead-button { float: right; font-weight: 300 }
td .thead-button:hover { opacity: .7 }
td .dont-sort { cursor: pointer }

td.quality { max-width: 400px }
td.quality div span { display: none }
td.quality div.default span[data-type=default],
td.quality div.alternate span[data-type=alternate],
td.quality div.both span[data-type=both] { display: inline }

td.quality .table { display: table; width: 100%; border-collapse: collapse }
td.quality .tr { padding: 2px }
td.quality .type { width: 22px; margin-right: 5px }

tbody.quality-default .type,
tbody .tr.an, tbody .tr.di, tbody .tr.ph, 
tbody.quality-alternate .tr.su { display: none }

tbody.quality-both td.quality .tr,
tbody.quality-alternate td.quality .tr[class^=alt] { display: table-row }

td.quests div.tr { display: table-row }
td.quests div.tr:nth-child(4n+3) { margin-top: 3px }
tbody.quest-howto .display-quest, tbody .display-howto { display: none }
tbody.quest-howto .display-howto, tbody .display-quest { display: inline-block }
tbody.quest-howto .display-howto a, tbody .display-quest a { text-wrap: nowrap }

.table .td { display: table-cell; text-align: left; padding: 2px }
.table .th { padding-right: 5px; font-weight: 200; font-family: 'Consolas', monospace }
.table .tr:nth-child(even), td.enchantments ul li:nth-child(even) { color: #555 }
.quality-both .table .tr:hover { filter: drop-shadow(.25px .25px #555) }

tbody ul.merciless,
tbody.enchantment-merciless ul.eternal { display: none }
tbody.enchantment-merciless ul.merciless { display: block }
tbody td ul { margin: 0; padding: 0; padding-left: 20px; }

.transfig.name {
    white-space: nowrap;
    padding-right: 10px;
}

.trans-details-container button:hover, .trans-details-container a:hover { opacity: .8 }
.trans-details-container .trans-details { display: none; }
.trans-details-container.show-details .trans-details { display: inline-block; }
.trans-details-container.show-details .diff svg { fill: var(--blue); }
.trans-details span { margin: 4px 0; text-indent: 8px; }
.trans-details small { opacity: .6; }

#go-top-button {
    position: fixed;
    bottom: 15px;
    right: 15px;
    padding: 5px 10px;
    opacity: .5;
    background: #000;
    cursor: pointer;
    z-index: 1;
}
#go-top-button .octicon { fill: #eee }
#go-top-button:hover { opacity: 1 }

footer.headline {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-width: 1px 0 0 0;
    padding-bottom: 3px;
}
footer.headline .right {
    font-variant: small-caps
}

.star-container .octicon, .collection-control .octicon { cursor: pointer }
.star-container .octicon:hover, .collection-control .octicon:hover { opacity: .7 }

.collection-container {
    margin: -3px 0 15px 0;
    user-select: none;
}
.collection-control { padding-left: 2px }
.collection-control .octicon svg { padding: 0; height: 16px; width: 16px }

body.empty .collection-toggle,
.collection-control .collection-show,
.collection-control.hideCollection .collection-hide { display: none }
.collection-control.hideCollection .collection-show { display: initial }

.collection-list { margin: 0; padding: 0; display: inline }
.collection-list li { display: inline-block }
body.empty .collection-only { display: initial }
.collection-name {
    text-transform: uppercase;
    font-size: 60%;
    border: 1px solid #777;
    padding: 2px 4px 2px 3px;
    white-space: nowrap;
/*  cursor: pointer; until we find something cool to do here */
    color: inherit;
    text-decoration: none;
}
.collection-name:visited, .collection-name:hover, .collection-name:active { color: inherit }
/*.collection-name:hover { background-color: #999; color: #000 } until we find something cool to do here */
.collection-name.support { border-style: dashed } /* this first, it matters for Firefox */
.collection-name.socket-blue { border-left: 5px solid var(--blue) }
.collection-name.socket-green { border-left: 5px solid var(--green) }
.collection-name.socket-red { border-left: 5px solid var(--red) }
.collection-name.socket-white { border-left: 5px solid #ccc }

.sB-container, .sG-container {}
.sB-container div, .sG-container div {
    /* display: inline-flex; */
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sB-container .sub-gem-container.awk,
.sB-container .sB-length-awk,
.sB-container.show-awk .sB-length { display: none !important } /* !important to not get filtered in by .show-<COLOR> (see below) */
.sB-container.show-awk .sub-gem-container.awk,
.sB-container.show-awk .sB-length-awk { display: inline-block !important } /* same */

.sub-gem-container {
    margin: 5px;
    display: none;
    border: 1px solid #333;
    padding: 5px;
    white-space: nowrap;
    border-left-width: 5px;
}
.all-subgems-container.show-blue .sub-gem-container.blue, /* .show-<COLOR> */
.all-subgems-container.show-green .sub-gem-container.green,
.all-subgems-container.show-red .sub-gem-container.red { display: inline-block }

.no-sG-no-sB { margin: .9em 0; opacity: .7; font-style: italic }

.sub-gem-container button { padding: 2px 1px; }
.sub-gem-container.found {
    font-weight: 600;
    border-width: 2px 2px 2px 5px;
    text-decoration: underline;
}
.sB-container img, .sG-container img {
    width: 24px;
    vertical-align: middle;
    margin-right: 5px;
}
.show-details-container td { 
    border-bottom: 3px double rgb(119, 119, 119);
    position: relative;
}
.show-details-container label { font-size: 10pt; }

.subgem-filters { /* todo: find a better way */
    position: absolute;
    top: 5px;
    right: 5px;
}