<style>
@media all {
    .hall-character-image {
        display: block;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .ship-logo {
        position: absolute;
        left: .5rem;
        bottom: .5rem;
        width: 48px;
        height: 48px;
        z-index: 2;
    }

    .ship-logo img {
        opacity: 0.5;
        transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -webkit-transition: opacity 0.5s ease-in-out;
    }
    .ship-logo:hover {
        opacity: 1;
    }
}
</style>
<div class="card" id="hall" style="display: none;">
	<div class="rounded-top" style="--bs-bg-opacity: .5;">
        <ul class="nav nav-tabs" id="killstats-killmail-hallof">

            <li class="nav-item" id="shame-nav">
                <a class="nav-link active" href="#tab-shame" data-bs-toggle="tab" data-bs-target="#tab-shame" >
                    Hall of Shame
                </a>
            </li>

            <li class="nav-item" id="fame-nav">
                <a class="nav-link" href="#tab-fame" data-bs-toggle="tab" data-bs-target="#tab-fame">
                    Hall of Fame
                </a>
            </li>

        </ul>
    </div>
    <div class="bg-secondary tab-content">
        <!--Hall of Shame-->
        <div id="tab-shame" class="tab-pane active">
            <div class="panel-body">
                <div class="charactercards">
                    <ul class="cards_container">
                    </ul>
                </div>
            </div>
        </div>
        <!--Hall of Fame-->
        <div id="tab-fame" class="tab-pane">
            <div class="panel-body">
                <div class="charactercards">
                    <ul class="cards_container">
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
