#tooltip {
    position: absolute;
    max-width: 50%;
    border: 2px solid #fff;
    pointer-events: none;
}

.tooltip {
    padding: 0.5625%;
    color: #fff;
    background: #000;
}

.tooltip em {
    font-style: normal;
}

.tooltip,
.tooltip .item_details>ul>li>span,
.tooltip .item_details>ul>li>span {
    font-family: 'Ubuntu Condensed', sans-serif;
}

#tooltip.inactive {
    transition: none;
    opacity: 0;
    width: 50%;
}

#tooltip>div {
    font-size: 0.8em;
}

.tooltip>div h1,
.tooltip>div h2,
.tooltip>div h3,
.tooltip>div h4 {
    font-family: Impact, Impacto, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}

.tooltip .cost .token {
    background: transparent none no-repeat center center;
    background-size: contain;
}

.tooltip .item_details,
.tooltip .effect_details>div:nth-child(2),
.tooltip div:not(.trait_desc)>.equipment_slot>div:not(:first-child) {
    text-align: center;
}

.tooltip .item_details>.charge,
.tooltip .item_details>.item_type,
.tooltip .item_details>.stack {
    font-size: 0.8em;
    color: var(--light);
}

.tooltip .item_details>.charge.depleted {
    color: var(--red);
}

.tooltip .item_details>.charge.max {
    color: var(--green);
}

.tooltip .item_details>.charge>em,
.tooltip .item_details>.charge:not(.depleted)>span:before,
.tooltip .item_details>.stack:before {
    color: #999;
}

.tooltip .item_details>.stack:before {
    content: "Stack Size: ";
}

.tooltip.item_details.ctrl .item_details>.item_type,
.tooltip.item_details.ctrl .item_details>ul>li span.type,
.tooltip.item_details.ctrl .item_details>ul>li span.range,
.tooltip:not(.item_details):not(.ctrl) .item_details>.item_type,
.tooltip:not(.item_details):not(.ctrl) .item_details>ul>li span.type,
.tooltip:not(.item_details):not(.ctrl) .item_details>ul>li span.range {
    display: none;
}

.tooltip .item_details>ul>li span.type {
    font-size: 0.8em;
    color: #999;
}

.tooltip .item_details>ul>li span.range:before {
    content: " ("
}

.tooltip .item_details>ul>li span.range:after {
    content: ")";
}

.tooltip .item_details>ul,
.tooltip .spell_details>*:not(:first-child),
.tooltip .effect_details>*:not(:first-child),
.tooltip .skill_details>*:not(:first-child),
.tooltip .item_details>*:not(:first-child) {
    margin-top: 1%;
}

.tooltip .equipment_slot>div:first-child,
.tooltip .equipment_slot>div.headers,
.tooltip .spell_details>div:not(.effect_tooltip):first-child,
.tooltip .effect_details>div:first-child,
.tooltip .location_details>div:first-child,
.tooltip .item_details>div:first-child,
.tooltip .skill_details>div:first-child {
    text-align: center;
    font-size: 1.25em;
}

.tooltip .item_details>div.accessory_variant {
    font-style: italic;
    color: var(--light);
}

.tooltip .spell_details {
    color: var(--light);
}

.tooltip .spell_details .title {
    color: #fff;
}

.tooltip .effect_details>div:nth-child(2):empty,
#container:not(.trait_images) #tooltip .qualities,
.tooltip .trait_desc:empty {
    display: none;
}

.tooltip .trait_desc .equipment_slot>div:nth-child(2):not(:last-child):not(.headers),
.tooltip .trait_desc .equipment_slot>div:nth-child(1n +3),
.tooltip .qualities,
.tooltip .trait_desc {
    padding-top: 0.35155em;
}

.tooltip .qualities {
    text-align: center;
}

.tooltip .location_tooltip>div:not(.location_details),
.tooltip .effect_tooltip>div:not(.effect_details),
.tooltip ul.effects>li>div:first-child>div:first-child,
.tooltip .qualities>div {
    position: relative;
    display: inline-block;
    width: 6em;
    height: 6em;
    margin: 0 calc(0.35155em / 2);
    border: 1px solid #303030;
    background: none center center / 100% no-repeat transparent;
}

.tooltip .location_tooltip>div:not(.location_details),
.tooltip .effect_tooltip>div:not(.effect_details) {
    margin: 0 0.352em 0 0;
    flex-shrink: 0;
}

.tooltip .location_tooltip>div:not(.location_details) {
    width: calc(6em / 1152 * 2048);
    background-size: cover;
}

.tooltip ul.effects>li {
    padding: 0 calc(0.352em * 2);
}

.tooltip ul.effects>li:first-child {
    padding-top: 0.352em;
}

.tooltip ul.effects>li>* {
    margin-top: 0.352em;
}

.tooltip ul.effects>li>div:first-child {
    text-align: center;
    font-size: 1.25em;
    color: var(--green);
    padding-right: 0.2em;
    margin-top: calc(0.352em / 1.25);
}

.tooltip ul.effects>li>div:first-child>div:first-child {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin: 0 0.2em;
    background: transparent none no-repeat center center;
    background-size: 100% auto;
    vertical-align: top;
    font-family: var(--impact);
    color: #fff;
}

.tooltip .effect_timer {
    margin-top: 0.352em;
    color: var(--orange);
}

.tooltip ul.effects>li>div:first-child>* {
    vertical-align: middle;
}

.tooltip .location_tooltip>div:not(.location_details):after,
.tooltip .effect_tooltip>div:not(.effect_details):after,
.tooltip ul.effects>li>div:first-child>div:first-child:before,
.tooltip .qualities>div:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #000;
}

.tooltip .spell_details .tags {
    text-align: center;
    font-size: 0.9em;
}

.tooltip .spell_details .conditions,
.tooltip .spell_details .autocast,
.tooltip .spell_details .action_desires,
.tooltip .spell_details .spell_damage {
    text-align: center;
    font-size: calc(0.9em / 0.8 * 0.7);
}

.tooltip .spell_details .action_desires {
    justify-content: center;
}

.tooltip .spell_details .action_desires:empty {
    display: none;
}

.tooltip .spell_details .effect_details>.spell_damage,
.tooltip .spell_details .effect_details>.spell_damage span {
    color: #fff;
}

.tooltip .spell_details.body .tags {
    color: var(--red);
}

.spell_damage {
    font-size: 0.9em;
    color: #fff;
}

.spell_damage span.charge>span {
    vertical-align: baseline;
}

.spell_damage span.action:before,
.spell_damage span.spell:before {
    vertical-align: text-bottom !important;
}

.spell_damage span:not(:last-child) {
    margin-right: 0.6em;
}

.spell_damage span.charge>em,
.spell_damage span:before {
    margin-right: 0.2em;
}

.spell_damage span.damage:before {
    content: "Damage";
}

.spell_damage span.damage.double_crit {
    color: var(--green) !important;
}


.spell_damage span.charge>em,
.spell_damage span.selfcast {
    color: var(--orange) !important;
}

.spell_damage span.fumble:before {
    content: "Fumble";
}

.spell_damage span.back_fire:before {
    content: "Backfire";
}

.spell_damage span.hit:before {
    content: "Hit";
}

.spell_damage span.crit:before {
    content: "Crit";
}

.spell_damage span.crit.fail:before {
    content: "Crit Fail";
}

.spell_damage span.glance:before {
    content: "Glance";
}

.spell_damage span.hit:after,
.spell_damage span.fumble:after,
.spell_damage span.crit:after,
.spell_damage span.glance:after {
    content: "%";
}

.spell_damage span:before {
    color: var(--orange);
}

.lust .spell_damage span.damage:before {
    content: "Lust";
    color: var(--yellow);
}

.spell_damage .action:before,
.spell_damage .spell:before {
    display: inline-block;
    content: "";
    height: 1.17em;
    width: 1.17em;
    margin-right: 0.2em;
    background: transparent none no-repeat center center;
    background-size: 100% auto;
    vertical-align: top;
}

.spell_damage .spell:before {
    background-image: url('/media/gui/32/badge_shooting_star_bright.png');
    background-image: -webkit-image-set(url('/media/gui/32/badge_shooting_star_bright.png') 1x, url('/media/gui/64/badge_shooting_star_bright.png') 2x);
    background-image: image-set(url('/media/gui/32/badge_shooting_star_bright.png') 1x, url('/media/gui/64/badge_shooting_star_bright.png') 2x);
}

.spell_damage .action:before {
    background-image: url('/media/gui/32/badge_star_bright.png');
    background-image: -webkit-image-set(url('/media/gui/32/badge_star_bright.png') 1x, url('/media/gui/64/badge_star_bright.png') 2x);
    background-image: image-set(url('/media/gui/32/badge_star_bright.png') 1x, url('/media/gui/64/badge_star_bright.png') 2x);
}

.tooltip .item_details .hex {
    color: var(--red);
}

.tooltip .item_details .hex.unknown {
    font-family: 'Norse Code';
}

.tooltip .effect_details {
    flex-grow: 1;
}

.tooltip ul.effects>li>div:nth-child(2) span,
.tooltip .effect_details span {
    color: var(--pure);
}

.tooltip ul.effects>li>div:nth-child(2) span.lust,
.tooltip .effect_details span.lust {
    color: var(--yellow);
}

.tooltip ul.effects>li>div:nth-child(2) span.sexual,
.tooltip .effect_details span.sexual {
    color: var(--sexy);
}

.tooltip ul.effects>li>div:nth-child(2) span.knowledge,
.tooltip .effect_details span.knowledge {
    color: var(--curious);
}

.tooltip ul.effects>li>div:nth-child(2) span.skill,
.tooltip .effect_details span.skill {
    color: var(--cunning);
}

.tooltip ul.effects>li>div:nth-child(2) span.athletics,
.tooltip .effect_details span.athletics {
    color: var(--tough);
}

.tooltip .effect_details>div:nth-child(2),
.tooltip .spell_details.mind .tags {
    color: var(--teal);
}

.tooltip ul.effects>li.inactive,
.tooltip .effect_timer.inactive,
.tooltip .effect_tooltip.inactive {
    filter: brightness(0.5) saturate(0);
}

.tooltip .spell_details.special .tags,
.tooltip .spell_details.lust .tags {
    color: var(--yellow);
}

.tooltip ul.effects>li>div:nth-child(2),
.tooltip .equipment_slot>div:not(:first-child):not(.headers),
.tooltip .effect_details>div:nth-child(3),
.tooltip .skill_details>div:nth-child(2) {
    color: var(--light);
}

.tooltip .crafting_option_details div.materials,
.tooltip .spell_details>div.materials,
.tooltip .item_details>ul>li,
.tooltip .spell_details>ul>li {
    text-align: center;
    color: var(--teal);
}

.tooltip .crafting_option_details div.materials {
    text-align: left;
}

.tooltip .crafting_option_details div.known {
    color: var(--teal);
}

.tooltip .crafting_option_details div.materials.missing,
.tooltip .spell_details>div.materials.missing {
    color: var(--red);
}

.tooltip .skill_details>table>tr {
    vertical-align: top;
}

.tooltip .skill_details>table>tr>td,
.tooltip .filter>div:first-child.enabled {
    color: #00ffff;
}

.tooltip .filter>div:first-child.enabled:after {
    content: ": Enabled";
}

.tooltip .filter>div:first-child:not(.enabled):after {
    content: ": Disabled";
}

.tooltip .filter.sexuality>div:nth-child(2),
.tooltip .filter.sexuality>div:nth-child(3) {
    font-size: 0.8em;
}

.tooltip .filter.sexuality>div:nth-child(2):before,
.tooltip .filter.sexuality>div:nth-child(3):before {
    content: "\f12a\00a0";
    font: normal normal normal 1em / 1 Ionicons;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--red);
    font-variant: all-small-caps;
    display: inline-block;
    width: 1em;
    vertical-align: text-top;
}

.tooltip .filter.sexuality>div:nth-child(2).enabled:before,
.tooltip .filter.sexuality>div:nth-child(3).enabled:before {
    content: "\f122\00a0";
    color: inherit;
}

.tooltip .description,
.tooltip .hint {
    font-style: italic;
    color: #999;
    font-size: 0.8em;
}

.tooltip .spell_details .conditions,
.tooltip .description {
    color: var(--orange) !important;
}

.tooltip .spell_details .autocast {
    color: var(--green) !important;
}

.tooltip>div .cost {
    text-align: center;
    color: #999;
}

.tooltip .cost.invalid {
    color: #ff0000;
}

.tooltip .effect_details>div.flavor_text {
    font-style: italic;
    color: var(--orange);
}

.token.coin,
.tooltip .cost .token {
    display: inline-block;
    vertical-align: middle;
    width: 1.6em;
    height: 1.6em;
}

.token.coin,
.tooltip .cost .token.coin {
    vertical-align: text-bottom;
    width: 1em;
    height: 1em;
}

.tooltip.nameplate .tags>span:not(:last-child),
.tooltip.nameplate .names>span:not(:last-child) {
    margin-right: 0.35155em;
}

.tooltip.nameplate .tags:empty {
    display: none;
}

.tooltip.nameplate .roleplaying {
    color: var(--green);
}

.tooltip.nameplate .equipped {
    color: var(--yellow);
}

.tooltip.nameplate .roleplaying:before {
    content: "Roleplaying";
}

.tooltip.nameplate .equipped:before {
    content: "Equipped";
}

.tooltip.nameplate.tough .names>span:first-child:before {
    content: "Tough";
}

.tooltip.nameplate.pure .names>span:first-child:before {
    content: "Pure";
}

.tooltip.nameplate.curious .names>span:first-child:before {
    content: "Curious";
}

.tooltip.nameplate.cunning .names>span:first-child:before {
    content: "Cunning";
}

.tooltip.nameplate.sexy .names>span:first-child:before {
    content: "Sexy";
}

.tooltip.nameplate .filter>span {
    margin-top: 0.35155em;
}

.tooltip.nameplate .filter>span:first-child:not(.enabled) {
    padding-left: 0;
}

.tooltip.nameplate .filter>span:last-child:not(.enabled) {
    padding-right: 0;
}

.tooltip.nameplate .filter>span {
    color: #000;
    display: inline-block;
    padding: calc(0.35155em * 0.5);
}

.tooltip.nameplate.tough .filter>:not(.enabled),
.tooltip.nameplate.tough .names>span:first-child {
    color: var(--tough);
}

.tooltip.nameplate.pure .filter>:not(.enabled),
.tooltip.nameplate.pure .names>span:first-child {
    color: var(--pure);
}

.tooltip.nameplate.curious .filter>:not(.enabled),
.tooltip.nameplate.curious .names>span:first-child {
    color: var(--curious);
}

.tooltip.nameplate.cunning .filter>:not(.enabled),
.tooltip.nameplate.cunning .names>span:first-child {
    color: var(--cunning);
}

.tooltip.nameplate.sexy .filter>:not(.enabled),
.tooltip.nameplate.sexy .names>span:first-child {
    color: var(--sexy);
}

.tooltip.nameplate.tough .filter>.enabled {
    background: var(--tough);
}

.tooltip.nameplate.pure .filter>.enabled {
    background: var(--pure);
}

.tooltip.nameplate.curious .filter>.enabled {
    background: var(--curious);
}

.tooltip.nameplate.cunning .filter>.enabled {
    background: var(--cunning);
}

.tooltip.nameplate.sexy .filter>.enabled {
    background: var(--sexy);
}

.tooltip .hint:before {
    content: "(";
}

.tooltip .hint:after {
    content: ")";
}

.tooltip .item_details>div.hint {
    text-align: center;
}

.tooltip .item_details>.player_turned {
    color: #999;
    font-size: 0.8em;
}

.tooltip .item_details>.player_turned:before {
    content: "Formerly ";
}

.tooltip .item_details>.player_turned.retired:before,
.tooltip .item_details>.player_turned.retired span:first-child {
    text-decoration: line-through;
}

.tooltip .item_details>.player_turned span.lock:after {
    content: " \f200";
    font: normal normal normal 1em/1 Ionicons;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tooltip .item_details>.player_turned span:not(:first-child) {
    font-style: italic;
}

.tooltip .item_tooltip {
    position: relative;
}

.tooltip .item_tooltip,
.tooltip .location_tooltip,
.tooltip .effect_tooltip,
.tooltip .crafting_option_details {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.tooltip .item_tooltip>div:first-child {
    position: relative;
    flex-shrink: 0;
}

.tooltip .item_image {
    position: relative;
    background: transparent none no-repeat center center;
    background-size: 90% auto;
    width: calc(6.6em - 2px);
    height: calc(6.6em - 2px);
}

.tooltip.unknown .item_image {
    filter: contrast(0) grayscale(100%);
    opacity: 0.5;
}

.action_bars .magical_effect>div:before,
.tooltip .magical_effect:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-image: url('../assets/gui/sfx_magical_small1.jpg');
    -webkit-mask-image: url('../assets/gui/sfx_magical_mask1.png');
    mask-image: url('../assets/gui/sfx_magical_mask1.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-size: 750% auto;
    animation: tooltip_background_scrolling 409.6s linear infinite;
    will-change: background-position;
}

.action_bars .magical_effect>div:before {
    animation-duration: 1183.6s;
    z-index: -1;
}

.action_bars .magical_effect>div:before,
.tooltip .magical_effect.square:before {
    -webkit-mask-image: url('../assets/gui/sfx_magical_mask2.png');
    mask-image: url('../assets/gui/sfx_magical_mask2.png');
}

.action_bars .magical_effect.conjured>div:before,
.tooltip .magical_effect.conjured:before {
    background-image: url('../assets/gui/sfx_magical_small3.jpg');
}

.action_bars .magical_effect.hexed>div:before,
.tooltip .magical_effect.hexed:before {
    background-image: url('../assets/gui/sfx_magical_small2.jpg');
}

.tooltip .item_1x3,
.tooltip .item_1x2 {
    width: calc(4.95em - 2px);
    height: calc(9.9em - 2px);
}

.tooltip .item_1x3 {
    background-size: contain;
}

.tooltip .item_2x3 {
    height: calc(9.9em - 2px);
}

.tooltip .item_3x2,
.tooltip .item_3x1 {
    width: calc(9.9em - 2px);
}

.tooltip.accessory {
    overflow: hidden;
}

.tooltip.accessory .item_name:before,
.tooltip.accessory .item_name:after {
    display: inline-block;
    content: "";
    height: 1em;
    width: 1.2em;
    margin: 0 0.2em;
    background: transparent none center center no-repeat;
    background-size: auto 100%;
}

.tooltip.nameplate {
    text-align: center;
}

.tooltip .trade_padlock {
    position: relative;
    height: 1.5em;
    line-height: 1.5em;
}

.tooltip .trade_padlock:not(.open) {
    color: var(--orange);
}

.tooltip .trade_padlock:after {
    content: '';
    display: inline-block;
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    margin-left: 0.2em;
    background-color: var(--orange);
    mask-image: url('../assets/gui/crown_padlock.svg');
    mask-position: center left;
    mask-repeat: no-repeat;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
}

.tooltip .trade_padlock.open:after {
    background-color: var(--teal);
    mask-image: url('../assets/gui/crown_padlock_open.svg');
}

.tooltip .item_details>.player_turned.tough>span {
    color: var(--tough);
}

.tooltip .item_details>.player_turned.pure>span {
    color: var(--pure);
}

.tooltip .item_details>.player_turned.curious>span {
    color: var(--curious);
}

.tooltip .item_details>.player_turned.cunning>span {
    color: var(--cunning);
}

.tooltip .item_details>.player_turned.sexy>span {
    color: var(--sexy);
}

.tooltip table.desires {
    table-layout: fixed;
    width: 100%;
    color: var(--light);
}

.tooltip table.desires:first-child {
    margin-top: 0.35155em;
}

.tooltip table.desires>tr>td {
    color: var(--light);
    font-size: 0.8em;
    padding: calc(0.35155em / 2);
    text-align: center;
}

.action_desires {
    display: flex;
    justify-content: flex-start;
    font-size: 0.9em;
}

.action_desires .hearts {
    display: flex;
}

.tooltip table.desires .desire .hearts {
    display: flex;
    justify-content: center;
}

.tooltip table.desires .desire .hearts>.heart.disabled:not(.filled),
.tooltip table.desires .desire.disabled .hearts>.heart:not(.filled) {
    filter: brightness(0.5) saturate(0);
}

#combat_log .desire:before {
    content: "";
    width: round(0.6em, 1px) !important;
    height: round(1lh, 1px) !important;
    margin-right: 0.2em !important;
    mask-position: center center;
    vertical-align: bottom;
}

#combat_log .desire:before,
.action_desires .heart,
.tooltip.desire .heart,
.tooltip table.desires .desire .hearts>.heart {
    display: block;
    margin: 0.125em;
    margin: round(0.125em, 1px);
    width: 1lh;
    height: 1lh;
    width: round(1lh, 1px);
    height: round(1lh, 1px);
    background: var(--sexy);
    -webkit-mask-image: url(../assets/gui/heart_outline.svg);
    mask-image: url(../assets/gui/heart_outline.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
}

.action_desires>div:nth-child(odd) {
    color: var(--orange);
    margin-right: 0.1em;
    margin-right: round(0.1em, 1px);
}

.action_desires .heart {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.action_desires .heart:not(:last-child) {
    margin-right: 0.1em;
    margin-right: round(0.1em, 1px);
}

.action_desires .hearts:not(:last-child) {
    margin-right: 0.6em;
}

#combat_log .desire:before,
.action_desires .heart.filled,
.tooltip.desire .heart,
.tooltip table.desires .desire .hearts>.heart.filled {
    -webkit-mask-image: url(../assets/gui/heart_solid.svg);
    mask-image: url(../assets/gui/heart_solid.svg);
}

.action_desires .hearts.suppressed>.heart:not(.filled),
.action_desires .hearts.suppressed>.heart.filled.suppressed,
.tooltip table.desires .desire:not(.disabled).suppressed .hearts>.heart:not(.filled),
.tooltip table.desires .desire:not(.disabled).suppressed .hearts>.heart.filled.suppressed {
    background: var(--curious);
}

#combat_log .desire:before,
.tooltip.desire .heart {
    display: inline-block;
    margin: 0;
    width: 0.6em;
    height: 0.6em;
    width: round(0.6em, 1px);
    height: round(0.6em, 1px);
}

.tooltip.desire {
    max-width: 37.25% !important;
}

.tooltip.desire ul>li {
    padding: 0;
    padding-top: 0.352em;
    font-variant-caps: all-small-caps;
}

.tooltip.desire ul>li>div {
    display: inline-block;
    width: 1lh;
    height: 1lh;
    width: round(1lh, 1px);
    height: round(1lh, 1px);
    background: none center center / 100% no-repeat transparent;
    vertical-align: text-bottom;
}

.tooltip.desire ul>li:first-line {
    color: var(--orange);
}

.tooltip.desire ul>li.lust:first-line {
    color: var(--yellow);
}

.tooltip.desire ul>li.suppressed:first-line {
    color: var(--curious);
}

.tooltip.desire table {
    margin-top: 0.352em;
}

.tooltip.desire table>tr>td:last-child {
    padding-left: 0.352em;
    font-variant-caps: all-small-caps;
}