#tooltip {
    display: none;
    position: fixed;
    min-width: 180px;
    max-width: min(calc(100vw - 1.5em - 2px),400px);
    color:white;
    background-color:black;
    border: 1px solid #c6b78b;
    padding: 0.75em;
    pointer-events: none;
    touch-action: none;
    font-size: 18px;
    line-height: 1.5;
    white-space: pre-line;
}

#tooltip > h3 {
    margin: 0;
}

#tooltip > img {
    float: left;
    padding-right: 0.75em;
    padding-bottom: 0.25em;
}

#tooltip .resource-value-pair {
    display: inline;
    flex-direction: row;
    font-size: 1.25em;
}


:root {
    --mobile-tooltip-height: 4rem;
}





#tooltip .statWage:before,
#tooltip .profession:before,
#tooltip .statBuilder:before,
#tooltip .buff-list-header:before,
#tooltip .statSpecial:not(:empty):before{
    font-size: 0.8em;
    color: gray;
    content: 'Before the burn:';
    width: 100%;
    display: block;
    padding-top:0.5em;
}
#tooltip .statBuilder:before {
    content: 'Skills:';
}
#tooltip .statSpecial:not(:empty):before {
    content: 'Traits:'; /* Traits are called Special Ability in the JS code */
}
#tooltip .statWage:before {
    content: 'Wages:';
}
#tooltip .buff-list-header:before {
    content: 'Affected by:';
}
#tooltip .align-right {
    position: absolute;
    right: 1.5em;
    text-align: center;
    width: 1ch;
}


#tooltip .accounting .heading{
    display: block;
    width: 100%;
    color: gray;
    margin-top: 0.25em;
}
#tooltip .accounting .accounting-item {
    display: block;
    width: 100%;
}
#tooltip .accounting .total{
    border-top: 1px solid;
    margin-top: 0.1em;
    padding-top: 0.1em;
}
#tooltip .accounting .note{
    font-size: 0.75em;
    display: block;
    width: 100%;
    color: gray;
}


#tooltip .buff.positive-false {
    color: red;
}

#tooltip:has(:nth-last-child(n+16)) .buff {
    font-size:14px;
}


/*!* If there is no hover support, the tooltip is displayed on the bottom of the screen *!*/
/*#mobile-tooltip {*/
/*    display:none;*/
/*}*/
/*@media (hover: none){*/
/*    #inventory-wrap .inventory-button {*/
/*        bottom: calc(var(--inventory-item-size) + var(--mobile-tooltip-height));*/
/*    }*/
/*    #mobile-tooltip {*/
/*        display: flex;*/
/*        width: 100%;*/
/*        bottom:0;*/
/*        left:0;*/
/*        height:var(--mobile-tooltip-height);*/
/*        background-color: black;*/
/*        color:white;*/
/*        justify-content: center;*/
/*        align-items: center;*/
/*    }*/
/*    #mobile-tooltip>p {*/
/*        padding: 0;*/
/*        margin: 0;*/
/*        font-size: 0.8em;*/
/*    }*/
/*}*/