:root {
    --banner: mediumpurple
}

table {
    background-color: var(--background1);
}

td {
    text-align: center
}

th {
    font-size: 75%
}

.hover:hover {
    opacity: 0.8;
}

#categoryTabs .button {
    height: 25px;
    width: 100px;
    font-size: 100%;
}

#categoryTabs .container {
    justify-content: flex-start;
}

.textBlock {
    white-space: normal;
    max-width: 700px;
}

#dropbox {
    width: 450px;
    height: 300px;
    border: 3px dashed white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.2s;
    position: relative;
}

.dropboxHover {
    background-color: var(--gray) !important;
}

.pulseSize:not(.activeBanner) {
    animation: pulseSize 1s infinite;
}

@keyframes pulseSize {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.flash {
    animation: flash 0.5s ease-in-out;
}

@keyframes flash {
    0% {
        filter: brightness(1.3)
    }

    100% {
        filter: brightness(1)
    }
}

.rrSec {
    font-family: var(--font2);
    font-size: 120%;
    padding: 0 20px
}

#runRecap_chart svg {
    box-shadow: none
}

#loadouts .button {
    width: 60px;
}

#loadouts img {
    height: 20px;
    width: auto
}

#boardTitleSrc img {
    height: 22px;
    width: auto;
}

.trophy {
    filter: drop-shadow(0.5px 1px 0 black) drop-shadow(-0.5px -0.5px 0 black);
    padding: 0 3px
}

#tabs {
    width: 500px !important
}

#commBestILsSubmit td {
    text-align: left;
    font-size: 100%
}

#commBestILsSubmit select {
    font-size: 100%;
}

.lobber,
.charge {
    width: 30px !important
}

.tooltip {
    position: relative;
    /* display: inline-block; */
    cursor: pointer;
}

.tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: var(--background1);
    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    border: 3px solid var(--banner);
    bottom: 100%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.headerButton {
    gap: 6px;
    font-size: 85%;
    background-color: limegreen
}

.mrwheezy {
    background-color: saddlebrown;
}

.hopuspocus {
    background-color: royalblue;
}

.pirouletta {
    background-color: forestgreen;
}

.kingdice2 {
    background-color: rebeccapurple;
}

.candycorn {
    background-color: orange;
}

.waffle {
    background-color: peru;
}

.cupcake {
    background-color: lightgreen;
}

.gumball {
    background-color: lightskyblue;
}

.jawbreaker {
    background-color: tomato;
}