.BL-player {
    position: relative;
    display: inline-flex;
    margin: .2em;
    /*flex-wrap: wrap;*/
    justify-content: center;
    vertical-align: middle;
    font-size: 9px;
    border-color: #7a726b;
    cursor: pointer;
    color: #fff;
}

.BL-player > .BL-player-icon {
    width: 2em;
    z-index: 5;
    border-color: inherit;
    border-style: solid;
    border-width: 1px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
}

.BL-player.vertical {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.BL-player.vertical > .BL-player-icon {
    width: 3em;
}

.BL-player > .bar {
    margin: 1px 0 1px -2px;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #7a726b;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
}

.BL-player:not(.vertical) > .bar {
    border-left: none;
    border-radius: .3em;
    padding: 0 .7em 0 .8em;
}

.BL-player.no-image .bar {
    border-left: 1px solid #7a726b;
    padding: .2em .4em;
}

.BL-player.vertical > .bar {
    border-radius: 0;
    padding: .3em .5em .2em;
    justify-content: center;
    margin: -.25em 0 0;
    z-index: 5;
}

.BL-player.in-organization .bar {
    /* padding-right: 2.1em; */
}

.BL-player.vertical.xlarge > .bar {
    min-width: 55px;
}

.BL-player.small {
    font-size: .9rem;
}

.BL-player.xsmall {
    font-size: .8rem;
}

.BL-player.xxsmall {
    font-size: .7rem;
}

.BL-player .bars {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: .8em;
}

.BL-player-icon {
    position: relative;
    display: inline-block;
    width: 2em;
}

.BL-player-icon.xxlarge {
    font-size: 5rem;
}

.BL-player-icon.xlarge {
    font-size: 3.5rem;
}

.BL-player-icon.large {
    font-size: 2.5rem;
}

.BL-player-icon.xxlarge .level {
    font-size: .5em;
}

.BL-player-icon.large .level,
.BL-player-icon.xlarge .level {
    font-size: .6em;
}

.BL-player-icon .level-frame,
.BL-player-icon[data-frame="4"]::before {
    width: 152%;
    height: 152%;
    position: absolute;
    background-image: url(/images/game/template/level-frames-sprite.png);
    background-size: 100% auto;
    left: -26%;
    top: -26%;
    z-index: 20;
}

/*.BL-player-icon > .BL-player-image {
    position: relative;
    width: 100%;
}*/

.BL-player-icon .player-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* border-radius: 8%; */
    z-index: 10;
}

.BL-player-icon .backing {
    position: relative;
    padding-bottom: 100%;
    background: #4a4a4a;

}

.BL-player-icon[data-frame="0"] .level-frame {
    background-position: 0 0;
}

.BL-player-icon[data-frame="1"] .level-frame {
    background-position: 0 -100%;
}

.BL-player-icon[data-frame="2"] .level-frame {
    background-position: 0 -200%;
}

.BL-player-icon[data-frame="3"] .level-frame, .BL-player-icon[data-frame="4"] .level-frame {
    background-position: 0 -300%;
}

.BL-player-icon[data-frame="4"]::before {
    content: '';
    background-position: 0 -400%;
    z-index: 5;
}

.BL-player-icon .level {
    position: absolute;
    z-index: 30;
    width: 1.2em;
    height: 1.2em;
    background: #23201d;
    bottom: -6%;
    right: -6%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8%;
}

.BL-player-icon .level p {
    font-family: "Tolyer No.1";
    font-size: 1em;
    line-height: 1;
}

.BL-player-icon[data-frame="1"] .level {
    background: #46280c;
    color: #f7ab65;
}

.BL-player-icon[data-frame="2"] .level {
    background: #525252;
    color: #ffffff;
    text-shadow: 0 0 5px #2d2d2d;
}

.BL-player-icon[data-frame="3"] .level,
.BL-player-icon[data-frame="4"] .level {
    background: #796326;
    color: #ffdc86;
    text-shadow: 0 0 5px #3a2500, 0 0 5px #3a2500;
}

.BL-player .crew-color {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 -.5em 0 .6em;
}

.BL-player .button-container {
    position: relative;
    width: 2.5em;
}

.BL-player.is-staff .BL-gradient {
    background: -webkit-linear-gradient(top, #a5a5a5 0%,#3e3e3e 100%) !important;
    border-color: #afafaf;
}

.BL-player.is-staff .BL-player-icon {
    border-color: #afafaf;
}

.BL-player.is-genasai-birthday .BL-gradient {
    background: -webkit-linear-gradient(top, turquoise 0%,#253f3c 100%) !important;
}

.BL-player.is-genasai-birthday .BL-gradient,
.BL-player.is-genasai-birthday .BL-player-icon {
    border-color: #96dbd5;
    box-shadow: 0 0 5px turquoise, 2px 2px 5px rgba(0, 0, 0, .5);
}

.BL-player.is-genasai-birthday {
    color: #4bffed !important;
    text-shadow: 0 0 4px #0e1c1b;
    font-weight: bold;
}