/* CHARACTER DATA TABLE ============================================================================================= */
#character-data-div {
    /* POSITIONING */
    margin-top: 30px;
    margin-bottom: 10px;
}

#character-data-table {
    /* CENTER TABLE */
    margin: 0 auto;
}

.text-box {
    /* TEXT */
    font-family: "fot-udmarugo_large_prob", Arial, serif;
    font-size: 15px;
    color: white;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px #000000,
    1px 1px 2px #000000,
    1px 1px 3px #000000;

    /* TEXT BOX DESIGN */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    background-color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    border-radius: 5px;
    padding: 10px 30px;
}

.character-name {
    /* POSITIONING */
    position: relative;
    bottom: 2px;
}

.character-rank {
    /* POSITIONING */
    position: relative;
    bottom: 3px;
}

img.character {
    /* IMAGE SIZE */
    max-width: 48px;
    max-height: 48px;

    /* IMAGE DESIGN */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
}

/* RANK COLORS ====================================================================================================== */
.common-rank_color {
    background-color: rgba(90, 190, 255, 0.5) !important;
}

.copper-rank_color {
    background-color: rgba(255, 182, 140, 0.5) !important;
}

.silver-rank_color {
    background-color: rgba(198, 211, 214, 0.5) !important;
}

.gold-rank_color {
    background-color: rgba(249, 194, 62, 0.5) !important;
}

.purple-rank_color {
    background-color: rgba(231, 109, 255, 0.5) !important;
}

.undefined-rank_color {
    background-color: rgba(255, 255, 255, 0.5) !important;
}