.BL-content-header,
.BL-content {
    box-shadow: 0 0 9px 2px rgba(0, 0, 0, .5);
    position: relative;
    border: 1px solid #7a726b;
    border-radius: 5px;
    overflow: hidden;
}

.BL-content-header {
    background: rgb(44,38,33);
    background: linear-gradient(180deg, rgba(44,38,33,1) 0%, rgba(22,15,12,1) 100%);
    margin-bottom: -1em;
    z-index: 5;
    padding: .5em;
    text-align: center;
    font-weight: bold;
    border-color: #524943;
}

.BL-content.BL-content-inner,
.BL-content .BL-content-inner {
    background: #464341;
    padding: .5em;
}

.BL-content-header + .BL-content-inner {
    padding-top: 1.5em;
}

.BL-gradient-brown,
.BL-header {
    background: #1a1611;
    background: -moz-linear-gradient(top, #1a1611 0%, #413529 47%, #1a1611 100%);
    background: -webkit-linear-gradient(top, #1a1611 0%,#413529 47%,#1a1611 100%);
    background: linear-gradient(to bottom, #1a1611 0%,#413529 47%,#1a1611 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1611', endColorstr='#1a1611',GradientType=0 );
}

.BL-header {
    text-align: center;
    padding: .7em;
    font-size: 1.3em;
    font-weight: bold;
    color: #efe0d1;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: inherit;
    font-family: 'Uni Neue';
}

.BL-dialog {
    position: relative;
}

.BL-dialog .header-new {
    z-index: 5;
    padding: .5em;
    box-shadow: unset;
    background: rgb(37,31,24);
    background: linear-gradient(0deg, rgba(37,31,24,1) 0%, rgba(72,61,47,1) 38%, rgba(36,30,23,1) 100%);
    border-bottom: 0;
}

.BL-dialog .header-new h1 {
    font-size: 1rem;
    line-height: 1;
    margin: .2em;
    font-weight: bold;
    text-align: center;
}

.BL-dialog .BL-content {
    border-radius: 0;
}

.BL-dialog > .BL-content-inner {
    padding: 1em;
}

.BL-dialog .dialog-title {
    font-weight: bold;
    text-align: center;
}

.BL-dialog-container {
    position: fixed;
    z-index: 5000;
    background: rgba(0, 0, 0, .65);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    display: none;
}

.BL-dialog-container.show {
    display: flex;
}

.BL-dialog-container .icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

.icon-close {
    background-image: url(../images/game/misc/icon-close.png);
    background-size: 100% auto;
    width: 25px;
}

.icon-close > div {
    padding-bottom: 100%;
}

.BL-bg-dark {
    background: #393634;
}

.BL-bg-3 {
    background: #252220;
}

.font-1 {
    font-family: 'Uni Neue';
}

.font-3 {
    font-family: "Tolyer No.1";
}

.color-off {
    color: #b1adab;
}

.font-bold {
    font-weight: bold;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueBlack.eot');
    src: url('../fonts/uni-neue/UniNeueBlack.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueBlack.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueBlack.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueBlack.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueBlack.svg#UniNeueBlack') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueBold.eot');
    src: url('../fonts/uni-neue/UniNeueBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueBold.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueBold.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueBold.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueBold.svg#UniNeueBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueThin.eot');
    src: url('../fonts/uni-neue/UniNeueThin.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueThin.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueThin.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueThin.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueThin.svg#UniNeueThin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueThin-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueThin-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueThin-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueThin-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueThin-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueThin-Italic.svg#UniNeueThin-Italic') format('svg');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueHeavy-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueHeavy-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueHeavy-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueHeavy-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueHeavy-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueHeavy-Italic.svg#UniNeueHeavy-Italic') format('svg');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueLight.eot');
    src: url('../fonts/uni-neue/UniNeueLight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueLight.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueLight.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueLight.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueLight.svg#UniNeueLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueLight-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueLight-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueLight-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueLight-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueLight-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueLight-Italic.svg#UniNeueLight-Italic') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueRegular.eot');
    src: url('../fonts/uni-neue/UniNeueRegular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueRegular.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueRegular.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueRegular.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueRegular.svg#UniNeueRegular') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue Book';
    src: url('../fonts/uni-neue/UniNeueBook-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueBook-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueBook-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueBook-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueBook-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueBook-Italic.svg#UniNeueBook-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueBold-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueBold-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueBold-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueBold-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueBold-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueBold-Italic.svg#UniNeueBold-Italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueRegular-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueRegular-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueRegular-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueRegular-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueRegular-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueRegular-Italic.svg#UniNeueRegular-Italic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueHeavy.eot');
    src: url('../fonts/uni-neue/UniNeueHeavy.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueHeavy.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueHeavy.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueHeavy.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueHeavy.svg#UniNeueHeavy') format('svg');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue Book';
    src: url('../fonts/uni-neue/UniNeueBook.eot');
    src: url('../fonts/uni-neue/UniNeueBook.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueBook.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueBook.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueBook.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueBook.svg#UniNeueBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Neue';
    src: url('../fonts/uni-neue/UniNeueBlack-Italic.eot');
    src: url('../fonts/uni-neue/UniNeueBlack-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/uni-neue/UniNeueBlack-Italic.woff2') format('woff2'),
    url('../fonts/uni-neue/UniNeueBlack-Italic.woff') format('woff'),
    url('../fonts/uni-neue/UniNeueBlack-Italic.ttf') format('truetype'),
    url('../fonts/uni-neue/UniNeueBlack-Italic.svg#UniNeueBlack-Italic') format('svg');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Tolyer No.1';
    src: url('../fonts/tolyer/TolyerNo1-Medium.eot');
    src: url('../fonts/tolyer/TolyerNo1-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tolyer/TolyerNo1-Medium.woff2') format('woff2'),
    url('../fonts/tolyer/TolyerNo1-Medium.woff') format('woff'),
    url('../fonts/tolyer/TolyerNo1-Medium.ttf') format('truetype'),
    url('../fonts/tolyer/TolyerNo1-Medium.svg#TolyerNo1-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Tolyer No.1';
    src: url('../fonts/tolyer/TolyerNo1-Bold.eot');
    src: url('../fonts/tolyer/TolyerNo1-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tolyer/TolyerNo1-Bold.woff2') format('woff2'),
    url('../fonts/tolyer/TolyerNo1-Bold.woff') format('woff'),
    url('../fonts/tolyer/TolyerNo1-Bold.ttf') format('truetype'),
    url('../fonts/tolyer/TolyerNo1-Bold.svg#TolyerNo1-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Tolyer No.1';
    src: url('../fonts/tolyer/TolyerNo1-Regular.eot');
    src: url('../fonts/tolyer/TolyerNo1-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/tolyer/TolyerNo1-Regular.woff2') format('woff2'),
    url('../fonts/tolyer/TolyerNo1-Regular.woff') format('woff'),
    url('../fonts/tolyer/TolyerNo1-Regular.ttf') format('truetype'),
    url('../fonts/tolyer/TolyerNo1-Regular.svg#TolyerNo1-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Beaumont';
    src: url('../fonts/beaumont/Beaumont-Regular.woff2') format('woff2'),
    url('../fonts/beaumont/Beaumont-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Beaumont';
    src: url('../fonts/beaumont/Beaumont-SemiBold.woff2') format('woff2'),
    url('../fonts/beaumont/Beaumont-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Beaumont';
    src: url('../fonts/beaumont/Beaumont-Light.woff2') format('woff2'),
    url('../fonts/beaumont/Beaumont-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Beaumont';
    src: url('../fonts/beaumont/Beaumont-Bold.woff2') format('woff2'),
    url('../fonts/beaumont/Beaumont-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Beaumont';
    src: url('../fonts/beaumont/Beaumont-Black.woff2') format('woff2'),
    url('../fonts/beaumont/Beaumont-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.BL-feature-info .info {
    background: #252220;
    border: 1px solid #534f4c;
    border-radius: .5em;
    padding: 1em;
    font-family: "Uni Neue";
    font-size: 1.3em;
    position: absolute;
    left: 50%;
    width: 80%;
    max-width: 400px;
    top: 37%;
    transform: translate(-50%, -50%);
    margin-top: 3em;
}

.BL-feature-info .info > p,
.BL-feature-info .inner-info > p {
    color: #bdbdbd;
    line-height: 1.6;
    margin: 1em 0;
}

.BL-feature-info {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 500;
    display: none;
}

.BL-feature-info.open {
    display: block;
}

.BL-feature-info .backing {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .68);
}

.info-icon {
    background-image: url(../images/game/misc/info-icon.png);
    background-size: 100% auto;
    width: 15px;
}

.info-icon > div {
    padding-bottom: 100%;
}

.BL-header .info-icon {
    position: absolute;
    right: .8em;
    top: .8em;
    /*width: 13px;*/
    opacity: .3;
    transition: 300ms;
    cursor: pointer;
}

.BL-header .info-icon:hover {
    opacity: 1;
}




.can-busy .loading-icon {
    display: none;
}

.can-busy.is-busy .loading-icon {
    display: inline-block;
}

.can-busy.is-busy input[type="submit"] {
    opacity: .65;
}

.loading-icon {
    width: 1.2em;
    background-image: url(../images/game/template/loading.gif);
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 0 .5em;
    display: inline-block;
    position: relative;
}

.loading-icon.abs {
    position: absolute;
    margin-top: .3em;
}

.loading-icon > div {
    padding-bottom: 100%;
}

.BL-content-inner-box {
    position: relative;
    background: #2f2d2b;
    border: 1px solid #6e6661;
    margin: .5em;
    padding: .5em .8em;
    border-radius: .3em;
    overflow: auto;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .3);
}

.BL-row {
    display: flex;
    flex-wrap: wrap;
    background: #3e3b3a;
    margin: 2px 0;
    padding: .5em 0;
    justify-content: space-between;
    position: relative;
}

.BL-row:nth-child(even) {
    background: #3a3736;
}

.BL-row > div {
    margin: 0 .5em;
}

.BL-bg {
    background: #464341;
}

.BL-bg-2 {
    background: #3e3b3a;
}

.red-x-icon {
    background-image: url(../images/game/misc/close.png);
    background-size: 100% auto;
    width: 10px;
    transition: 150ms;
    filter: grayscale(100%);
    cursor: pointer;
}

.red-x-icon > div {
    padding-bottom: 100%;
}

.red-x-icon:hover {
    filter: grayscale(0%);
}

.BL-progress-bar {
    position: relative;
    background: #3e3b38;
    width: 90%;
    height: 1em;
    line-height: 1;
    display: inline-block;
    box-sizing: border-box;
    font-size: 1em;
    font-family: "Tolyer No.1";
    border: 1px solid #2f2f2f;
    border-radius: .3em;
    text-align: left;
    /* overflow: hidden; */
    box-shadow: inset 1px 1px 5px black;
}
/*
.BL-progress-bar.uninit .bar {
    transition: 0ms;
}*/

/*html.spring-break {
    background: url(../images/game/events/spring-break/spring-break-background-4.jpg) no-repeat center center fixed;
}*/

html.spring-break body::after {
    content:"";
    position:fixed; /* stretch a fixed position to the whole screen */
    top:0;
    height:100vh; /* fix for mobile browser address bar appearing disappearing */
    left:0;
    right:0;
    z-index:-1; /* needed to keep in the background */
    background: url(../images/game/events/spring-break/spring-break-background-4.jpg) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html.spring-break body {
    background: none !important;
}

html.spring-break .topHeading {
    background: none !important;
}

html.spring-break .layover .stats {
    background-color: rgba(43, 50, 49, 0.69);
    margin: 1em;
    border-radius: .5em;
    padding: 1em;
    font-size: 1.1em;
}

html.in-city body::after {
    content:"";
    position:fixed; /* stretch a fixed position to the whole screen */
    top:0;
    height:100vh; /* fix for mobile browser address bar appearing disappearing */
    left:0;
    right:0;
    z-index:-2; /* needed to keep in the background */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html.in-city.new-orleans body::after {
    background: url(../images/game/template/new-orleans-background.jpg) center center;
    background-size: cover;
}

html.in-city.rocky-mount body::after {
    background: url(../images/game/template/rocky-mount-background-3.jpg) center center;
    background-size: cover;
}

html.show-game-intro body::after {
    background: #000 !important;
}

html.mobile.rocky-mount body::after {
    background-position: center 80%;
}

html.in-city.new-orleans.mobile body::after {
    background-size: 410%;
}

html.in-city body {
    background: none !important;
}

html.in-city .topHeading {
    background: none !important;
}

html.in-city .layover .stats {
    background-color: rgba(43, 50, 49, 0.69);
    margin: 1em;
    border-radius: .5em;
    padding: 1em;
    font-size: 1.1em;
}


.BL-progress-bar .bar {
    position: relative;
    height: 100%;
    background: -webkit-linear-gradient(top, #5ab32a 0%, #96ff75 12%, #114700 100%);
    width: 0;
    border-radius: inherit;
    /*transition: 500ms;*/
}

.BL-progress-bar .bar .label {
    position: absolute;
    left: 100%;
    margin-left: .2em;
    transform: translateY(-50%);
    top: 50%;
    font-size: 1.3em;
}

.BL-progress-bar > .bar + .label {
    position: absolute;
    font-weight: 500;
    font-size: 1.3em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.BL-progress-bar.near-full .bar > .label {
    left: unset;
    right: 2px;
}

.BL-progress-bar[data-color="green"] .label,
.BL-health,
.BL-hp {
    color: #d7ffc6;
    text-shadow: 0 0 3px #051700, 0 0 3px #051700, 0 0 3px #051700;
}

.BL-progress-bar[data-color="blue"] .bar {
    background: -webkit-linear-gradient(top, #2a8eb3 0%, #8fcee5 12%, #053f55 100%);
}

.color-defense,
.BL-progress-bar[data-color="blue"] .label,
.BL-protection-hp {
    color: #ade8ff;
    text-shadow: 0 0 3px #005677, 0 0 3px #005677, 0 0 3px #005677;
}

.BL-progress-bar[data-color="purple"] .bar {
    background: -webkit-linear-gradient(top, #5d418d 0%, #8c6eab 12%, #32173e 100%);
}

.BL-progress-bar[data-color="purple"] .label {
    color: #c68bdf;
    text-shadow: 0 0 3px #160021, 0 0 3px #160021, 0 0 3px #160021;
}

.BL-progress-bar[data-color="experience"] .bar {
    background: -webkit-linear-gradient(top, #2f114d 0%, #ab64b1 12%, #0f072d 100%);
}

.BL-progress-bar[data-color="experience"] .label {
    color: #f7b0ee;
    text-shadow: 0 0 3px #160021, 0 0 3px #160021, 0 0 3px #160021;
}

.BL-progress-bar[data-color="orange"] .bar {
    background: -webkit-linear-gradient(top, #ffe5c8 0%, #ef7d00 12%, #a54e00 100%);
}

.attribute-points-color,
.BL-progress-bar[data-color="orange"] .label {
    color: #ffebd1;
    text-shadow: 0 0 4px #2e1a00, 0 0 4px #2e1a00, 0 0 4px #2e1a00;
}

.BL-progress-bar[data-color="booze"] .bar {
    background: -webkit-linear-gradient(top, #ffc093 0%, #d05600 12%, #5d2600 100%);
}

.attribute-gym-color,
.attribute-points-color,
.BL-progress-bar[data-color="booze"] .label {
    color: #ff9234;
    text-shadow: 0 0 4px #2e1a00, 0 0 4px #2e1a00, 0 0 4px #2e1a00;
}

.BL-progress-bar[data-color="red"] .bar,
.BL-progress-bar[data-color="criminal"] .bar {
    background: -webkit-linear-gradient(top, #ee2020 0%, #c10000 24%, #2e1010 100%);
    border-radius: inherit;
}

.energy-cost-color,
.BL-progress-bar[data-color="criminal"] .label {
    color: #ff7272;
    text-shadow: 0 0 4px #2e0000, 0 0 4px #2e0000, 0 0 4px #2e0000;
}

.BL-progress-bar[data-color="criminal-mastermind"] .bar {
    background: -webkit-linear-gradient(top, #eac91e 0%, #d3b01a 24%, #542b0a 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="criminal-mastermind"] .label {
    color: #ead37b;
    text-shadow: 0 0 4px #2e0000, 0 0 4px #2e0000, 0 0 4px #2e0000;
}

.BL-progress-bar[data-color="influence"] .bar {
    background: -webkit-linear-gradient(top, #0f99dd 0%, #1047ed 24%, #000d36 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="pink"] .bar {
    background: -webkit-linear-gradient(top, #ca285c 0%, #f77ca9 24%, #a60c45 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="shark"] .bar {
    background: -webkit-linear-gradient(top, #a75959 0%, #5f0f0f 24%, #000000 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="magenta"] .bar {
    background: -webkit-linear-gradient(top, #ff63ca 0%, #e50593 24%, #6f0047 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="mana"] .bar {
    background: -webkit-linear-gradient(top, #ff83e4 0%, #b1009b 12%, #1f0021 100%);
}

.BL-progress-bar[data-color="mana"] .label {
    color: #ff00b1;
    text-shadow: 0 0 4px #32003c, 0 0 4px #32003c, 0 0 4px #32003c;
}

.BL-progress-bar[data-color="auto-theft"] .bar {
    background: -webkit-linear-gradient(top, #5c291b 0%, #fdaf81 12%, #4e2014 100%);
}

.attribute-auto-theft-color,
.BL-progress-bar[data-color="auto-theft"] .label {
    color: #ffc8b2;
    text-shadow: 0 0 4px #39180b, 0 0 4px #39180b, 0 0 4px #39180b;
}

.intimacy-color,
.BL-progress-bar[data-color="magenta"] .label {
    color: #ffa8df;
    filter: drop-shadow(0 0 2px #4b002f) drop-shadow(0 0 2px #4b002f) drop-shadow(0 0 2px #4b002f);
}

.text-criminal-influence,
.BL-progress-bar[data-color="influence"] .label {
    color: #90b6ff;
    text-shadow: 0 0 4px #000a2e, 0 0 4px #000a2e, 0 0 4px #000a2e;
}

.BL-progress-bar[data-color="yellow"] .bar {
    background: -webkit-linear-gradient(top, #fffa63 0%, #e5e005 24%, #6f6600 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="yellow"] .label {
    color: #fffba8;
    filter: drop-shadow(0 0 2px #292600) drop-shadow(0 0 2px #272300) drop-shadow(0 0 2px #272400);
}

.BL-progress-bar[data-color="car-melt"] .bar {
    background: -webkit-linear-gradient(top, #d7622c 0%, #603016 24%, #241208 100%);
    border-radius: inherit;
}

.BL-progress-bar[data-color="car-melt"] .label {
    color: #ff5a00;
    filter: drop-shadow(0 0 2px #3a1a0c) drop-shadow(0 0 2px #3a1a0c) drop-shadow(0 0 2px #3a1a0c);
}

.BL-progress-bar[data-color="shooting"] .bar {
    background: -webkit-linear-gradient(top, #0e2e1f 0%, #1fb46f 24%, #004525 100%);
    border-radius: inherit;
}

.attribute-shooting-color,
.color-gun-skill,
.BL-progress-bar[data-color="shooting"] .label {
    color: #2af697;
    text-shadow: 0 0 5px #03311b, 0 0 5px #03311b, 0 0 5px #03311b, 0 0 5px #03311b;
}

.BL-progress-bar[data-color="fern"] .bar {
    background: -webkit-linear-gradient(top, #466819 0%, #86c152 12%, #1a3200 100%);
}

.BL-progress-bar[data-color="pearl"] .bar {
    background: -webkit-linear-gradient(top, #fff8e8 0%, #eae0c8 12%, #978e79 100%);
}

.BL-progress-bar[data-color="pearl"] .label {
    color: #fffaee;
    text-shadow: 0 0 4px #2f2300, 0 0 4px #2f2300, 0 0 4px #2f2300;
}

.BL-old-tabs li {
    background: #464341;
    min-width: 9em;
    padding: .5em 1.5em;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    margin: 1px 1px;
    vertical-align: top;
    border-radius: .3em;
}

.BL-old-tabs {
    margin: 0 0 2em 0;
    padding: 0;
    list-style-type: none;
}

.none-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.BL-page-tabs {
    position: relative;
    z-index: 2;
    margin: 1em 2px 0 0;
}

.BL-page-tabs li {
    background: #464341;
    display: inline-block;
    padding: .5em 1em;
    margin: 0;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    position: relative;
    opacity: .7;
    border-radius: .5em .5em 0 0;
    top: 1px;
    border-color: #7a726b;
}

.BL-page-tabs li.selected {
    /* top: 1px; */
    /* background: #403730; */
    opacity: 1;
    border-bottom-color: #464341;
}

.BL-page-tabs + .BL-content {
    border-top-left-radius: 0;
}


ul:not(.standard) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.BL-wide-arrow {
    width: 100%;
    max-width: 30px;
    background-image: url(../images/game/misc/wide-arrow.png);
    background-size: 100% auto;
}

.BL-wide-arrow > div {
    padding-bottom: 600%;
}

.BL-wide-arrow.arrow-left {
    background-position: 0 -100%;
}

.BL-gradient {
    background: -webkit-linear-gradient(top, #565350 0%,#2f2e2c 100%) !important;
}

.BL-speech-bubble {
    background: -webkit-linear-gradient(top, #ffffff 0%,#c7c7c7 100%);
    padding: .8em;
    color: #000;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 1em;
    display: inline-block;
    box-shadow: 5px 5px 11px rgba(0,0,0,.5);
    max-width: 220px;
    z-index: 500;
    position: absolute;
    box-sizing: border-box;
    text-align: center;
}

.BL-speech-bubble::before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: .8em solid transparent;
    border-bottom-color: #c2c2c2;
    transform: rotate(45deg);
    bottom: -.8em;
    right: 2rem;
}

.player-currencies-top {
    position: relative;
    background: rgba(0, 0, 0, .7);
    border: 1px solid #383838;
    min-width: 12em;
    padding: .2em .8em .2em .4em;
    box-sizing: border-box;
    border-radius: 0 .3em .3em 0;
    display: inline-block;
    border-left: none;
}

.player-currencies-top .BL-currency-label {
    font-size: 9px;
    margin: .2em 0;
    display: flex;
}

.player-currencies-top .BL-crew-button {
    position: absolute;
    right: .2em;
    top: .4em;
    width: 30px;
    display: none;
}

.player-currencies-top.with-button {
    padding-right: 4em;
    /*min-width: 15em;*/
}

.player-currencies-top.with-button .BL-crew-button {
    display: block;
}

.energy-bar.criminal.side-bar {
    margin-top: 1em;
}

.energy-bar.side-bar .recharge-info {
    font-size: 1.2rem;
    text-align: right;
    margin-right: .5em;
    color: #c7c7c7;
}


.criminal-energy-icon {
    background-image: url(../images/game/pages/criminal-energy-icon@2x.png?b=20200726);
    width: 25px;
    background-size: 100% auto;
}

.criminal-energy-icon.criminal-mastermind {
    background-position: 0 -100%;
}

.criminal-energy-icon.influence {
    background-position: 0 -200%;
}

.criminal-energy-icon.mobile {
    position: absolute;
    left: 7px;
    top: -3px;
}

.criminal-energy-icon > div {
    padding-bottom: 172%;
}

.energy-bar.criminal.mobile .recharge-info {
    font-size: 1.3rem;
}

.BL-energy-bar.is-full .recharge-info {
    opacity: 0;
    margin-top: -1em;
}

.BL-energy-bar.is-init .recharge-info {
    transition: 300ms;
}

.energy-bar.side-bar:not(.is-full) .recharge-info {
    margin-bottom: .5em;
    margin-top: -.1em;
}

/**
item tooltip
 */

.BL-item-info {
    display: none;
    z-index: 7000;
}

.BL-item-info.show {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.BL-item-info.show.is-touch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.BL-item-info .dialog {
    position: absolute;
    width: 80%;
    max-width: 240px;
    box-sizing: border-box;
    overflow: visible;
}

.BL-item-info .info-loaded {
    display: none;
}

.BL-item-info.is-loaded .info-loaded {
    display: flex;
}

.BL-item-info .info-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.BL-item-info.is-loaded .info-loading {
    display: none;
}

.BL-item-info.is-loaded .info-loaded .icon {
    margin: .5em;
}

.BL-item-info.is-loaded .info-loaded .name {
    font-weight: 600;
    margin-bottom: .5em;
}

.BL-item-info.is-loaded .info-loaded .details {
    position: relative;
    margin: .5em;
}

.BL-item-info .loading-message {
    opacity: .6;
}

.BL-perk:not(.no-info):hover,
.BL-skill:not(.no-info):hover,
.BL-item:not(.no-info):hover,
.BL-effect:not(.no-info):hover {
    filter: brightness(120%);
}

.BL-item-info .icon-close {
    background-image: url(../images/game/misc/icon-close.png);
    width: 30px;
    height: 30px;
    background-size: 100% auto;
    position: absolute;
    top: -34px;
    right: -3px;
    filter: drop-shadow(2px 2px 2px black);
    display: none;
}

.BL-item-info.is-touch .icon-close {
    display: block;
}

.BL-item-info.is-loaded .info-loaded .type {
    font-size: 1.4em;
    line-height: 1;
    margin: .5em 0;
    text-transform: capitalize;
}

.BL-item-info .visibility {
    position: relative;
    margin: .5em 0 0;
}

.BL-item-info .extra-html {
    border-radius: .5em;
    margin: .5em;
    padding: .5em;
}

.BL-item-info .extra-html ul {
    margin: .5em;
}

.icon-red-x {
    position: relative;
    background-image: url(../images/game/template/red-x@2x.png);
    background-size: 100% auto;
    width: 20px;
    max-width: 25px;
}

.icon-red-x > div {
    padding-bottom: 100%;
}

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

    .BL-wide-arrow {
        background-image: url(../images/game/misc/wide-arrow@2x.png);
    }

}

.BL-page {
    position: relative;
    margin: 2em auto;
    width: 97%;
    max-width: 420px;
}

.mobile .BL-page {
    margin: 0 auto;
}

.BL-page header {
    background: rgb(44,38,33);
    background: linear-gradient(180deg, rgba(44,38,33,1) 0%, rgba(22,15,12,1) 100%);
    margin-bottom: -1em;
    z-index: 5;
}

.BL-page header h1 {
    font-weight: 400;
    font-size: 2.5rem;
    margin: .5rem;
}

.BL-page > .BL-content-inner {
    padding-top: 2em;
}

.color-firepower {
    color: #fffb82;
    font-weight: 500;
    text-shadow: 0 0 3px #9e5200, 0 0 3px #9e5200, 0 0 4px #9e5200;
}

.playing-with-elephant {
    color: #f5cceb !important;
    font-weight: bold;
    text-shadow: 0 0 5px #e83b8b, 0 0 5px #e83b8b;
    padding-left: 20px;
    position: relative;
}

.playing-with-elephant::before {
    content: '';
    background-image: url(../images/game/pages/mini-pink-elephant.png);
    width: 16px;
    height: 19px;
    display: inline-block;
    background-size: 100% auto;
    position: absolute;
    left: 1px;
    top: -4px;
    animation: 8s elephantSpin infinite linear;
}

@keyframes elephantSpin {
    0% {
        transform: rotate(0);
    }
    90% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.player-buzz-writer {
    color:#82CAFF;
    font-weight: bold;
}

.block-table:not(.show-yard) .jail-yard-tr {
    display: none;
}

.block-table.show-yard .image-tr {
    display: none;
}

.block-table .BL-gym {
    margin: .5em auto 1em;
}

.block-table .block-image .gym-sign {
    position: absolute;
    left: 5px;
    bottom: 9px;
    cursor: pointer;
    width: 30%;
    max-width: 130px;
}

.block-table .block-image {
    position: relative;
}

.icon-gear {
    background-image: url(../images/game/misc/icon-gear.202209092.png);
    background-size: 100% auto;
    width: 25px;
}

.icon-gear > div {
    padding-bottom: 100%;
}

.BL-attribute {
    background-image: url(../images/game/features/character-attributes-sprite@2x.2021.png);
    background-size: 100% auto;
    width: 40px;
    max-width: 50px;
}

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

.BL-attribute[data-id="strength"] {
    background-position: 0 -100%;
}

.BL-attribute[data-id="stamina"] {
    background-position: 0 -200%;
}

.BL-attribute[data-id="agility"] {
    background-position: 0 -300%;
}

.BL-attribute[data-id="auto-theft"] {
    background-position: 0 -400%;
}

.game-times {
    position: relative;
    margin-bottom: .55em;
    cursor: pointer;
}

.game-times .local-time {
    display: none;
}

.game-times.local .local-time {
    display: block;
}

.game-times.local .BL-time {
    display: none;
}



.BL-car {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.BL-car .car-image {
    position: relative;
    width: 100%;
}

.booze-and-crate {
    background-image: url(../images/game/booze/booze-crate-sprite.202206082.png);
    background-size: 100% auto;
    width: 60px;
}

.booze-and-crate > div {
    padding-bottom: 130%;
}

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

    .booze-and-crate {
        background-image: url(../images/game/booze/booze-crate-sprite@2x.202206082.png);
    }

}

.booze-and-crate[data-booze-id="1"] {
    background-position: 0 -100%;
}

.booze-and-crate[data-booze-id="2"] {
    background-position: 0 -200%;
}

.booze-and-crate[data-booze-id="3"] {
    background-position: 0 -300%;
}

.booze-and-crate[data-booze-id="4"] {
    background-position: 0 -400%;
}

.booze-and-crate[data-booze-id="5"] {
    background-position: 0 -500%;
}

.booze-and-crate[data-booze-id="6"] {
    background-position: 0 -600%;
}

.booze-and-crate[data-booze-id="7"] {
    background-position: 0 -900%;
}

.booze-and-crate[data-booze-id="8"] {
    background-position: 0 -700%;
}

.booze-and-crate[data-booze-id="9"] {
    background-position: 0 -800%;
}

.profile-picture {
    position: relative;
    width: 100px;
    max-width: 300px;
}

.profile-picture > div {
    padding-bottom: 100%;
}

.profile-picture .profile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    max-width: unset;
}

.profile-picture.size-300 {
    width: 300px;
}

.profile-picture.size-50 {
    width: 50px;
}

.ui-sortable-helper {
    z-index: 50000 !important;
}

.item.equipped.ui-sortable-helper .BL-item {
    opacity: .4;
    filter: grayscale(100%) brightness(150%);
}

.item.ui-sortable-helper {
    width: 40px !important;
    height: auto !important;
}

.item.ui-sortable-helper .BL-item {
    width: 100%;
    height: auto;
}

.item.equipped {
    background: #2d2b2a;
}

/*.item.expiring-soon .BL-item {
    animation: 2s expiringGlow infinite linear alternate;
}*/

@keyframes expiringGlow {
    from {
        box-shadow: 0 0 1px 1px #570000;
    }
    to {
        box-shadow: 0 0 2px 2px #ae0000;
    }
}

/*.item.expiring-soon::before {
    content: '';
    background: #ae0000;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    animation: 2s expiringBackground infinite linear alternate;
}*/

@keyframes expiringBackground {
    from {
        opacity: .1;
    }
    to {
        opacity: .4;
    }
}

.grecaptcha-badge {
    visibility: collapse !important;
}

.hardened-resolve .BL-character-icon {
    border-color: #6e73df;
    box-shadow: 0 0 1em #121083;
}

.page-block .players-container {
    position: relative;
    text-align: center;
    padding: .5em;
}

.page-block .players-container .BL-player {
    margin: .5em;
}

.page-block .players-container:empty:before {
    content: 'None';
    margin: 1em 0;
    display: block;
    opacity: .5;
    font-style: italic;
}

.page-block .gold-notice {
    position: relative;
    background: #404040;
    margin: 1em auto;
    max-width: 28em;
    padding: .5em;
    box-sizing: border-box;
    border-radius: .5em;
}

.page-block .security-level-stars {
    position: relative;
    margin: 0 auto 1em;
    width: 100px;
}

.page-block .main-timer {
    position: relative;
    font-size: 2.4em;
    margin: 1rem auto .5rem;
}

.page-block .self-bust-container {
    position: relative;
    padding: 1em;
    display: none;
}

.page-block .self-bust-container.show {
    display: block;
}



.ui-icon {
    position: relative;
    background-image: url(../images/game/template/icons-sprite.20250319.png);
    background-size: 500% auto;
    width: 40px;
    max-width: 40px;
}

.ui-icon > div {
    padding-bottom: 100%;
}

.ui-icon.icon-settings {
    background-position: 0 0;
}

.ui-icon.icon-refresh {
    background-position: 0 -100%;
}

.ui-icon.icon-upload {
    background-position: 0 -200%;
}

.ui-icon.icon-gift {
    background-position: 0 -300%;
}

.ui-icon.icon-location {
    background-position: 0 -400%;
}

.ui-icon.icon-friends {
    background-position: 0 -500%;
}

.ui-icon.icon-search {
    background-position: 0 -600%;
}

.ui-icon.icon-arrow-right {
    background-position: -100% 0;
}

.ui-icon.icon-abilities {
    background-position: -100% -100%;
}

.ui-icon.icon-warning {
    background-position: -100% -200%;
}

.ui-icon.icon-down-arrow {
    background-position: -100% -300%;
}

.ui-icon.icon-left-arrow {
    background-position: -100% -400%;
}

.ui-icon.icon-right-arrow {
    background-position: -100% -500%;
}

.captcha-block {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: 10000;
    display: none;
}

.captcha-block .dialog {
    position: relative;
    box-sizing: border-box;
    max-width: 97%;
}

.captcha-block.show {
    display: flex;
}

/** landmarks start */

.landmarks {
    position: relative;
}

.landmarks .dialog {
    display: flex;
    gap: .5em;
    max-width: 380px;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
}

.landmarks .landmark {
    position: relative;
    background: #404040;
    width: 120px;
    padding: 0 1em 3em;
    cursor: pointer;
    box-sizing: border-box;
}

.landmark-image {
    background-image: url(../images/game/pages/landmarks-sprite.png);
    background-size: 500% auto;
    width: 100px;
    max-width: 100px;
}

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

    .landmark-image {
        background-image: url(../images/game/pages/landmarks-sprite@2x.png);
    }

}

.landmark-image > div {
    padding-bottom: 75%;
}

.landmark-image[data-id="boone-inn"] {
    background-position: -100% 0;
}

.landmark-image[data-id="coney-island-prize-wheel"] {
    background-position: -200% 0;
}

.landmark-image[data-id="bridgettes"] {
    background-position: -300% 0;
}

.landmark-image[data-id="french-market"] {
    background-position: -400% 0;
}

.landmark-image[data-id="voodoo-shop"] {
    background-position: 0 -100%;
}

.landmark-image[data-id="chateau-stella-dbelle"] {
    background-position: -100% -100%;
}

.landmark-image[data-id="the-ayling-hotel"] {
    background-position: -200% -100%;
}

.landmark-image[data-id="roccos-di-napoli"] {
    background-position: -300% -100%;
}

.landmark-image[data-id="5th-avenue"] {
    background-position: -400% -100%;
}

.landmark-image[data-id="docs-boom-boom-bungalow"] {
    background-position: 0 -200%;
}

.landmarks .landmark-image {
    position: relative;
    margin: 0 auto;
    width: 90%;
}

.landmarks .details {
    position: absolute;
    text-align: center;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    padding: .5em;
    box-sizing: border-box;
}

.landmarks .name {
    font-weight: 600;
    text-shadow: 1px 1px 2px black;
}

.landmarks .type {
    color: #cecece;
}

.landmarks .container {
    position: relative;
    transition: 300ms;
    pointer-events: all;
    z-index: 5;
}

.landmarks .title {
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .5em;
}

.landmarks-container.desktop .landmarks .container {
    left: 100%;
}

.landmarks-container.desktop .landmarks.open .container {
    left: 0;
    transition: 550ms;
}

.landmarks .landmark:hover {
    background: #5c5c5c;
}

.landmarks .landmark:hover .landmark-image {
    filter: brightness(1.1);
}

.landmarks a:hover {
    text-decoration: none;
}

.landmarks-button .button {
    position: relative;
    background: #5f5f5f;
    border-radius: 25px;
    border: 1px solid #939393;
    width: 100%;
    height: 100%;
    transition: inherit;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
}

.landmarks-button .ui-icon {
    position: absolute;
    width: 130%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landmarks-button.desktop {
    position: absolute;
    top: 0;
    left: .5em;
}

.landmarks-button {
    position: relative;
    width: 20px;
    height: 20px;
    padding: .5em;
    z-index: 2;
}

.landmarks-button.active .button {
    background: #999999;
    border-color: #b7b7b7;
    top: 1px;
    left: 1px;
    filter: none;
}

.landmarks-button:hover:not(.active) .button {
    background: #6e6e6e;
}

.landmarks-container.mobile .landmarks {
    width: 97%;
    margin: 1em auto;
}

.landmarks-container.desktop .landmarks {
    top: 8.5em;
    right: 0;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
}

.landmarks-container.desktop .landmarks .dialog {
    background: #4a4a4a;
    border: 1px solid #b1a89b;
    border-right-width: 0;
}

.landmarks-container.mobile .landmark {
    width: 32%;
}

.landmarks-container.desktop .landmarks .dialog {
    padding: .5em;
}

.landmarks-container.mobile .landmark {
    background: rgba(44, 44, 44, .75);
}

/** landmarks end */

/** friends list start **/

.ui-dialog-container .BL-dialog {
    position: absolute;
    width: 87vw;
    max-width: 320px;
    height: 60vh;
    max-height: 480px;
    flex-direction: column;
    display: none;
}

.ui-dialog-container.active {
    z-index: 601;
}

.ui-dialog-container .BL-dialog.open {
    display: flex;
}

.ui-dialog-container .BL-dialog > .BL-content-inner {
    flex-grow: 1;
    background: #4a4a4a;
    padding: .5em;
}

.ui-dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 600;
}

.mobile .ui-dialog-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);

}

.mobile .ui-dialog-container.open {
    display: flex;
}

.ui-dialog-container .ui-draggable-handle {
    cursor: default;
}

.ui-dialog-container .icon-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.mobile .ui-dialog-container .BL-dialog {
    top: unset !important;
    left: unset !important;
}

/** abilities start **/

.abilities-list .abilities {
    position: relative;
    background: #363636;
    height: 100%;
    border: 1px solid #706b62;
    padding: .5em;
    box-sizing: border-box;
    overflow: auto;
}

.ability {
    background: #4a4a4a;
    border: 1px solid #535353;
    position: relative;
    padding: .5em;
    margin: 0 0 .5em;
}

.ability .BL-ability {
    float: left;
    margin: 0 .5em .5em 0;
    width: 36px;
}

.ability .name {
    font-weight: bold;
}

.ability .description {
    color: #cecece;
}

.abilities-list .actions {
    position: relative;
    text-align: center;
    clear: both;
    margin: 1em 0 0;
}

.ability.BL-timer-active .use-button {
    visibility: hidden;
}

.abilities-list .ability .actions .BL-timer-display {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
}

.abilities-list .ability.no-energy .BL-ability,
.abilities-list .ability.BL-timer-active .BL-ability {
    filter: grayscale(1) brightness(1.2) contrast(.8);
}

.abilities-list .ability.no-energy > *,
.abilities-list .ability.BL-timer-active > * {
    opacity: .8;
}

.abilities-list.is-loaded .abilities:empty::before {
    content: 'No abilities';
    display: block;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    text-align: center;
    opacity: .5;
}

.abilities .BL-energy-bar {
    font-size: 1.4em;
}

.abilities .BL-energy-bar .BL-progress-bar {
    width: 100%;
}

/** abilities end **/

/*.friends-list {
    position: absolute;
    width: 100vw;
    max-width: 240px;
    height: 60vh;
    max-height: 480px;
    /* border: 1px solid red; *//*
    flex-direction: column;
    left: -30em;
    top: -5em;
    display: none;
    z-index: 600;
}*/

.friends-list {
    max-width: 240px !important;
}

/*.friends-list.open {
    display: flex;
}*/

/*.friends-list > .BL-content-inner {
    flex-grow: 1;
    background: #4a4a4a;
}*/

.friends-list .friends {
    position: relative;
    background: #363636;
    height: 100%;
    border: 1px solid #706b62;
    padding: .5em;
    box-sizing: border-box;
    overflow: auto;
}

.friends-list .friend {
    position: relative;
    display: flex;
    padding: .5em;
}

.friends-list .friend .profile-picture {
    border: 1px solid #828282;
    width: 100%;
}

.friends-list .friend .details {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: .5em .5em .5em 1em;
}

.friends-list .friend .image {
    position: relative;
    width: 30px;
}

/*.friends-list .BL-content {
    border-color: #b1a89b;
}*/

/*.ui-dialog-container .BL-content-inner {
    padding: .5em;
}*/

.friends-list .friend.online .status {
    color: lime;
}

.friends-list .friend.offline .status {
    opacity: .5;
}

.friends-list .friend.offline .image {
    opacity: .5;
}

/*.friends-list-container {
    position: absolute;
    top: 0;
    left: 0;
}*/

/*.friends-list .ui-draggable-handle {
    cursor: default;
}*/

.boot-camp-icon {
    background-image: url(../images/game/events/boot-camp-icon.png);
    width: 66px;
    height: 28px;
    background-size: 100% auto;
}

.bottom-navigation {
    position: fixed;
    bottom: 0;
    right: 17em;
    border: 1px solid #242424;
    background: #0c0c0c;
    padding: .5em;
    z-index: 550;
    display: flex;
    gap: 10px;
    align-items: center;
}

.bottom-navigation .navigation-link {
    position: relative;
    display: flex;
    align-items: center;
    cursor: default;
    opacity: .8;
    flex-direction: column;
}

.bottom-navigation .navigation-link.active {
    opacity: 1;
}

.bottom-navigation .navigation-link .ui-icon {
    width: 3em;
    margin: -.25em 0;
}

.mobile .bottom-navigation {
    right: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    border-width: 1px 0 0 0;
    padding-bottom: 1em;
    z-index: 600;
    font-size: .8em;
}

#layover {
    z-index: 700;
    /*background: #000;*/
}

.mobile .friends-list {
    top: unset;
    left: unset;
}

.mobile .friends-list-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);

}

.mobile .friends-list-container.open {
    display: flex;
}

.friends-list .icon-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/** friends list end **/

/** player timers start **/

.player-timers {
    position: relative;
    height: 15px;
    text-align: center;
    visibility: hidden;
}

.player-timers.is-init {
    visibility: visible;
}

.player-timers .timer:last-child {
    border-right: unset;
}

.player-timers .timer-complete {
    color: #8EF393;
}

.player-timers .player-timer.no-gun .timer-complete {
    color: #fff;
}

.player-timers .timer {
    border: 1px solid #b1a89b;
    border-width: 0 1px 1px 0;
    text-align: center;
    background-position: center;
    white-space: nowrap;
}

.player-timers .player-timer {
    background-image: url(../images/game/template/table-bg/green.gif);
}

.player-timers .player-timer.no-gun,
.player-timers .player-timer.BL-timer-active {
    background-image: url(../images/game/template/table-bg/red.gif);
}

.player-timers .timer a,
.player-timers .timer a:hover {
    padding: 1px 10px;
    text-decoration: none;
    display: block;
}

.player-timers .timer-complete,
.player-timers .BL-timer-display {
    font-weight: bold;
}

.player-timers.mobile {
    height: initial;
    margin: 1em auto;
    width: 99%;
}

.player-timers .legacy-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    height: 30px;
    vertical-align: top;
    padding: 0;
    margin: 0 1px 3px;
    width: 24%;
    border: 1px solid #787878;
    box-sizing: border-box;
    flex-direction: column;
}

.player-timer.BL-timer-active .timer-complete {
    display: none;
}

.player-timer .BL-timer-display {
    display: none;
}

.player-timer.BL-timer-active .BL-timer-display {
    display: initial;
}

/** player timers end **/

.BL-table {
    position: relative;
    border: 1px solid #8C867E;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 10px;
    background-color: #4A4A4A;
}

.BL-table td, .BL-table th {
    padding: 2px;
}

.BL-table td {
    border: 1px solid #8C867E;
}

.BL-table .header {
    text-align: center;
    position: relative;
}

.desktop .search-event-icon {
    position: absolute;
    width: 60px;
    left: -30px;
    top: -70px;
    z-index: 5;
}

.mobile .search-event-icon {
    position: absolute;
    width: 60px;
    left: 1em;
    bottom: -.5em;
}

.BL-modal {
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 5000;
    backdrop-filter: blur(2px);
    display: none;
}

.BL-modal.open {
    display: flex;
}

.BL-modal .modal-dialog {
    position: relative;
    width: 97%;
    max-width: 300px;
}

.BL-modal .header .icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

.icon-change-indicator {
    background-image: url(../images/game/template/icon-change-indicator-sprite@2x.png);
    background-size: 100% auto;
    max-width: 25px;
    width: 11px;
}

.icon-change-indicator > div {
    padding-bottom: 100%;
}

.icon-change-indicator[data-direction="up"] {
    background-position: 0 -100%;
}

.icon-change-indicator[data-direction="down"] {
    background-position: 0 -200%;
}

/**
round countdown
 */

.round-countdown-display {
    position: fixed;
    bottom: 1em;
    left: 1em;
    background: rgba(0, 0, 0, .67);
    padding: .5em .5em .5em 4.7em;
    display: none;
    z-index: 800;
    cursor: default;
}
.round-countdown-display.init {
    display: block;
}

.round-countdown-display .title {
    font-weight: bold;
}

.mobile .round-countdown-display {
    background: none;
    font-size: .8em;
}

.round-icon {
    background-image: url(../images/game/events/round-icon-sprite.png);
    background-size: 100% auto;
    max-width: 47px;
}

.round-icon > div {
    padding-bottom: 100%;
}

.round-countdown-display .round-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4.7em;
}

.mobile .round-icon {
    background-position: 0 -100%;
}

.extra-dev-tools {
	background: rgba(0, 0, 0, 0.45);
	position: relative;
	display: block;
	padding: 1em;
	margin: 2em auto;
	max-width: 280px;
	border-radius: .5em;
}