.BL-crew-button {
    position: relative;
    background-image: url(../images/game/features/crew-buttons-sprite.png);
    background-size: 1000% auto;
    width: 2em;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
    max-width: 50px;
}

.BL-crew-button.large {
    max-width: 100px;
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .BL-crew-button.large {
        background-image: url(../images/game/features/crew-buttons-sprite@2x.png);
    }

}

.BL-crew-button > div {
    padding-bottom: 100%;
}

.player-crew .BL-crew-button {
    width: 2.3em;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0, .5));
    margin-right: .3em;
}

.BL-player .BL-gang-color,
.BL-player .BL-crew-button {
    width: 3em;
    position: absolute;
    top: -1.5em;
}

.BL-player .BL-gang-color {
    height: 3em;
}

.player-crew {
    margin: .2em .4em 0 0;
}

.crew-button-label {
    display: flex;
    align-items: center;
    vertical-align: top;
}

.crew-button-label.inline {
    display: inline-flex;
}

.crew-button-label .BL-crew-button {
    width: 2em;
    position: relative;
    margin: -.5em 0 -.5em;
}

.crew-button-label .BL-gang-color {
    width: 2em;
    height: 2em;
    margin: -.5em 0 -.5em;
}

.BL-crew-button[data-id="0"] {
    display: none;
}

.BL-crew-button.hidden-none[data-id="0"] {
    visibility: hidden;
    display: block;
}

.BL-crew-button.blank-none[data-id="0"] {
    display: none;
}

.BL-crew-button[data-id="139"] {
    animation: ruby 2000ms infinite linear;
    animation-direction: alternate-reverse;
}

@keyframes ruby {
    from {
        filter: drop-shadow(0 0 1px #ff0000);
    }
    to {
        filter: drop-shadow(0 0 2px #ffe8e8) drop-shadow(0 0 2px #ff3535);
    }
}

.BL-crew-button[data-id="140"] {
    animation: diamond 2000ms infinite linear;
    animation-direction: alternate-reverse;
}

@keyframes diamond {
    from {
        filter: drop-shadow(0 0 0px #effaff);
    }
    to {
        filter: drop-shadow(0 0 1px #effaff) drop-shadow(0 0 2px #effaff);
    }
}



.BL-gang-color > div {
    width: 40%;
    height: 40%;
}

.BL-gang-color {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.BL-crew-button[data-id="0"] { background-position: 0% 0%; }.BL-crew-button[data-id="1"] { background-position: -100% 0%; }.BL-crew-button[data-id="2"] { background-position: -200% 0%; }.BL-crew-button[data-id="3"] { background-position: -300% 0%; }.BL-crew-button[data-id="4"] { background-position: -400% 0%; }.BL-crew-button[data-id="5"] { background-position: -500% 0%; }.BL-crew-button[data-id="6"] { background-position: -600% 0%; }.BL-crew-button[data-id="7"] { background-position: -700% 0%; }.BL-crew-button[data-id="8"] { background-position: -800% 0%; }.BL-crew-button[data-id="9"] { background-position: -900% 0%; }.BL-crew-button[data-id="10"] { background-position: 0% -100%; }.BL-crew-button[data-id="11"] { background-position: -100% -100%; }.BL-crew-button[data-id="12"] { background-position: -200% -100%; }.BL-crew-button[data-id="13"] { background-position: -300% -100%; }.BL-crew-button[data-id="14"] { background-position: -400% -100%; }.BL-crew-button[data-id="15"] { background-position: -500% -100%; }.BL-crew-button[data-id="16"] { background-position: -600% -100%; }.BL-crew-button[data-id="17"] { background-position: -700% -100%; }.BL-crew-button[data-id="18"] { background-position: -800% -100%; }.BL-crew-button[data-id="19"] { background-position: -900% -100%; }.BL-crew-button[data-id="20"] { background-position: 0% -200%; }.BL-crew-button[data-id="21"] { background-position: -100% -200%; }.BL-crew-button[data-id="22"] { background-position: -200% -200%; }.BL-crew-button[data-id="23"] { background-position: -300% -200%; }.BL-crew-button[data-id="24"] { background-position: -400% -200%; }.BL-crew-button[data-id="25"] { background-position: -500% -200%; }.BL-crew-button[data-id="26"] { background-position: -600% -200%; }.BL-crew-button[data-id="27"] { background-position: -700% -200%; }.BL-crew-button[data-id="28"] { background-position: -800% -200%; }.BL-crew-button[data-id="29"] { background-position: -900% -200%; }.BL-crew-button[data-id="30"] { background-position: 0% -300%; }.BL-crew-button[data-id="31"] { background-position: -100% -300%; }.BL-crew-button[data-id="32"] { background-position: -200% -300%; }.BL-crew-button[data-id="33"] { background-position: -300% -300%; }.BL-crew-button[data-id="34"] { background-position: -400% -300%; }.BL-crew-button[data-id="35"] { background-position: -500% -300%; }.BL-crew-button[data-id="36"] { background-position: -600% -300%; }.BL-crew-button[data-id="37"] { background-position: -700% -300%; }.BL-crew-button[data-id="38"] { background-position: -800% -300%; }.BL-crew-button[data-id="39"] { background-position: -900% -300%; }.BL-crew-button[data-id="40"] { background-position: 0% -400%; }.BL-crew-button[data-id="41"] { background-position: -100% -400%; }.BL-crew-button[data-id="42"] { background-position: -200% -400%; }.BL-crew-button[data-id="43"] { background-position: -300% -400%; }.BL-crew-button[data-id="44"] { background-position: -400% -400%; }.BL-crew-button[data-id="45"] { background-position: -500% -400%; }.BL-crew-button[data-id="46"] { background-position: -600% -400%; }.BL-crew-button[data-id="47"] { background-position: -700% -400%; }.BL-crew-button[data-id="48"] { background-position: -800% -400%; }.BL-crew-button[data-id="49"] { background-position: -900% -400%; }.BL-crew-button[data-id="50"] { background-position: 0% -500%; }.BL-crew-button[data-id="51"] { background-position: -100% -500%; }.BL-crew-button[data-id="52"] { background-position: -200% -500%; }.BL-crew-button[data-id="53"] { background-position: -300% -500%; }.BL-crew-button[data-id="54"] { background-position: -400% -500%; }.BL-crew-button[data-id="55"] { background-position: -500% -500%; }.BL-crew-button[data-id="56"] { background-position: -600% -500%; }.BL-crew-button[data-id="57"] { background-position: -700% -500%; }.BL-crew-button[data-id="58"] { background-position: -800% -500%; }.BL-crew-button[data-id="59"] { background-position: -900% -500%; }.BL-crew-button[data-id="60"] { background-position: 0% -600%; }.BL-crew-button[data-id="61"] { background-position: -100% -600%; }.BL-crew-button[data-id="62"] { background-position: -200% -600%; }.BL-crew-button[data-id="63"] { background-position: -300% -600%; }.BL-crew-button[data-id="64"] { background-position: -400% -600%; }.BL-crew-button[data-id="65"] { background-position: -500% -600%; }.BL-crew-button[data-id="66"] { background-position: -600% -600%; }.BL-crew-button[data-id="67"] { background-position: -700% -600%; }.BL-crew-button[data-id="68"] { background-position: -800% -600%; }.BL-crew-button[data-id="69"] { background-position: -900% -600%; }.BL-crew-button[data-id="70"] { background-position: 0% -700%; }.BL-crew-button[data-id="71"] { background-position: -100% -700%; }.BL-crew-button[data-id="72"] { background-position: -200% -700%; }.BL-crew-button[data-id="73"] { background-position: -300% -700%; }.BL-crew-button[data-id="74"] { background-position: -400% -700%; }.BL-crew-button[data-id="75"] { background-position: -500% -700%; }.BL-crew-button[data-id="76"] { background-position: -600% -700%; }.BL-crew-button[data-id="77"] { background-position: -700% -700%; }.BL-crew-button[data-id="78"] { background-position: -800% -700%; }.BL-crew-button[data-id="79"] { background-position: -900% -700%; }.BL-crew-button[data-id="80"] { background-position: 0% -800%; }.BL-crew-button[data-id="81"] { background-position: -100% -800%; }.BL-crew-button[data-id="82"] { background-position: -200% -800%; }.BL-crew-button[data-id="83"] { background-position: -300% -800%; }.BL-crew-button[data-id="84"] { background-position: -400% -800%; }.BL-crew-button[data-id="85"] { background-position: -500% -800%; }.BL-crew-button[data-id="86"] { background-position: -600% -800%; }.BL-crew-button[data-id="87"] { background-position: -700% -800%; }.BL-crew-button[data-id="88"] { background-position: -800% -800%; }.BL-crew-button[data-id="89"] { background-position: -900% -800%; }.BL-crew-button[data-id="90"] { background-position: 0% -900%; }.BL-crew-button[data-id="91"] { background-position: -100% -900%; }.BL-crew-button[data-id="92"] { background-position: -200% -900%; }.BL-crew-button[data-id="93"] { background-position: -300% -900%; }.BL-crew-button[data-id="94"] { background-position: -400% -900%; }.BL-crew-button[data-id="95"] { background-position: -500% -900%; }.BL-crew-button[data-id="96"] { background-position: -600% -900%; }.BL-crew-button[data-id="97"] { background-position: -700% -900%; }.BL-crew-button[data-id="98"] { background-position: -800% -900%; }.BL-crew-button[data-id="99"] { background-position: -900% -900%; }.BL-crew-button[data-id="100"] { background-position: 0% -1000%; }.BL-crew-button[data-id="101"] { background-position: -100% -1000%; }.BL-crew-button[data-id="102"] { background-position: -200% -1000%; }.BL-crew-button[data-id="103"] { background-position: -300% -1000%; }.BL-crew-button[data-id="104"] { background-position: -400% -1000%; }.BL-crew-button[data-id="105"] { background-position: -500% -1000%; }.BL-crew-button[data-id="106"] { background-position: -600% -1000%; }.BL-crew-button[data-id="107"] { background-position: -700% -1000%; }.BL-crew-button[data-id="108"] { background-position: -800% -1000%; }.BL-crew-button[data-id="109"] { background-position: -900% -1000%; }.BL-crew-button[data-id="110"] { background-position: 0% -1100%; }.BL-crew-button[data-id="111"] { background-position: -100% -1100%; }.BL-crew-button[data-id="112"] { background-position: -200% -1100%; }.BL-crew-button[data-id="113"] { background-position: -300% -1100%; }.BL-crew-button[data-id="114"] { background-position: -400% -1100%; }.BL-crew-button[data-id="115"] { background-position: -500% -1100%; }.BL-crew-button[data-id="116"] { background-position: -600% -1100%; }.BL-crew-button[data-id="117"] { background-position: -700% -1100%; }.BL-crew-button[data-id="118"] { background-position: -800% -1100%; }.BL-crew-button[data-id="119"] { background-position: -900% -1100%; }.BL-crew-button[data-id="120"] { background-position: 0% -1200%; }.BL-crew-button[data-id="121"] { background-position: -100% -1200%; }.BL-crew-button[data-id="122"] { background-position: -200% -1200%; }.BL-crew-button[data-id="123"] { background-position: -300% -1200%; }.BL-crew-button[data-id="124"] { background-position: -400% -1200%; }.BL-crew-button[data-id="125"] { background-position: -500% -1200%; }.BL-crew-button[data-id="126"] { background-position: -600% -1200%; }.BL-crew-button[data-id="127"] { background-position: -700% -1200%; }.BL-crew-button[data-id="128"] { background-position: -800% -1200%; }.BL-crew-button[data-id="129"] { background-position: -900% -1200%; }.BL-crew-button[data-id="130"] { background-position: 0% -1300%; }.BL-crew-button[data-id="131"] { background-position: -100% -1300%; }.BL-crew-button[data-id="132"] { background-position: -200% -1300%; }.BL-crew-button[data-id="133"] { background-position: -300% -1300%; }.BL-crew-button[data-id="134"] { background-position: -400% -1300%; }.BL-crew-button[data-id="135"] { background-position: -500% -1300%; }.BL-crew-button[data-id="136"] { background-position: -600% -1300%; }.BL-crew-button[data-id="137"] { background-position: -700% -1300%; }.BL-crew-button[data-id="138"] { background-position: -800% -1300%; }.BL-crew-button[data-id="139"] { background-position: -900% -1300%; }.BL-crew-button[data-id="140"] { background-position: 0% -1400%; }