/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 =========================================================
 
*/
.equip-wrap{
    display:flex;
    justify-content:center;
    position:relative;
    z-index:1;
}

.equip-board{
    position:relative;
    display:inline-block;
    overflow:visible !important;
    margin:10px auto 36px;
    max-width:100%;
}

.equip-board .equip-bg{
    display:block;
    max-width:100%;
    height:auto;
}

.equip-cell{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    touch-action:manipulation;
}

.equip-cell img{
    width:100%;
    height:100%;
    object-fit:contain;
    image-rendering:pixelated;
}

.equip-cell .equip-tip{
    display:none !important;
}

#equipTooltipPortal{
    position:fixed;
    z-index:2147483647;
    display:none;
    max-width:min(420px,90vw);
    background:#0b0b0b;
    border:1px solid #2f2f2f;
    padding:10px 14px;
    color:#cfd3da;
    font-size:13px;
    line-height:1.35;
    border-radius:6px;
    box-shadow:0 12px 30px rgba(0,0,0,.55);
    pointer-events:none;
    white-space:normal;
    text-align:center;
}

#equipTooltipPortal .tip-name{
    color:#ffd25c;
    font-weight:700;
    margin-bottom:8px;
    font-size:16px;
    display:block;
}

#equipTooltipPortal .tip-name.exc{ color:#00ff66; }
#equipTooltipPortal .tip-name.anc{
    background:#2f3ecf;
    padding:2px 8px;
    margin:-10px -10px 8px;
    border-radius:0;
}

#equipTooltipPortal .tip-line{
    color:#a9c7ff;
    margin:3px 0;
}

#equipTooltipPortal .tip-req{
    color:#ff5a5a;
    margin:6px 0;
}

#equipTooltipPortal .tip-sep{
    border-top:1px solid #2f2f2f;
    margin:8px 0;
}

#equipTooltipPortal .tip-harmony{
    color:#ffd25c;
    font-weight:700;
}

#equipTooltipPortal .tip-380{
    color:#d88bd9;
    font-weight:700;
}

#equipTooltipPortal .tip-muted{
    color:#9aa3ab;
    opacity:.95;
    font-size:12px;
}

@media (max-width:576px){
    .equip-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:8px;
    }

    .equip-board{
        width:100%;
        max-width:var(--board-w,600px);
    }

    .equip-board .equip-bg{
        width:100%;
        height:auto;
        max-width:var(--board-w,600px);
    }

    #equipTooltipPortal{
        max-width:92vw;
    }
}