body {
    background: url(/css/images/whole-bg.jpg) top repeat-x #4d4b34;
    margin: 0;
    padding: 0;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    position: relative;
}

body:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: url(/css/images/header-background-repeat.jpg) top repeat-x;
    background-size: 100% 176.5px;
    height: 176.5px;
    z-index: -1;
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    body:before {
        background: url(/css/images/header-background-repeat-2x.jpg) top repeat-x;
        background-size: 100% 176.5px;
    }
}

body.tricked {
    animation: trick 7s infinite linear;
}

@keyframes trick {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-7deg) scale(1.05); }
    35%  { transform: rotate(-2deg); }
    50%  { transform: rotate(3deg); }
    65%  { transform: rotate(6deg); }
    80%  { transform: rotate(1deg) scale(0.95); }
    90%  { transform: rotate(-2deg); }
    100%  { transform: rotate(0deg); }
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
}

h1 {
    color: #96926f;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    background: #434234;
    width: 100%;
    box-sizing: border-box;
    height: 27px;
    padding: 6px 0px 4px 15px;
    margin: 8px 0 8px 0;
    font-size: 12px;
}

h1 img {
    align-self: center;
    margin-top: -3px;
    margin-right: 3px;
}

img {
    border: none;
    margin: 0;
}

/* Links */
a {
    outline-style: none;
    text-decoration: none;
    color: #cdc6a2;
}

a:visited {
    color: #cdc6a2;
}

a:hover,
a:active {
    color: #ffcc66;
}

fieldset {
    border: 1px solid #434234;
}

/* Whole Container */
#whole-container {
    width: 997px;
    height: auto;
    overflow: auto;
    margin: 0 auto;
    padding: 0;
}

/* Header */
#header-image {
    width: 100%;
    height: 198px;
    background: url(images/header-image.jpg) no-repeat center;
}

body.halloween #header-image {
    background: url(images/header-image-halloween.jpg) no-repeat center;
}

body.halloween .bar-wrapper .bar {
    filter: brightness(120%) contrast(100%) hue-rotate(35deg);
}

body.christmas #header-image {
    background: url(images/header-image-christmas.jpg) no-repeat center;
}

body.valentinesday #header-image {
    background: url(images/header-image-valentines.jpg) no-repeat center;
}

body.stpatricksday #header-image {
    background: url(images/header-image-stpatricksday.jpg) no-repeat center;
}

body.easter #header-image {
    background: url(images/header-image-easter.jpg) no-repeat center;
}

body.carnival #header-image {
    background: url(images/header-image-carnival.jpg) no-repeat center;
}

body.unclesam #header-image {
    background: url(images/header-image-unclesam.jpg) no-repeat center;
}

body.easter:before, body.christmas:before, body.halloween:before, body.valentinesday:before, body.stpatricksday:before, body.carnival:before, body.unclesam:before {
    background: none;
    display: none;
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    #header-image {
        background: url(images/header-image-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }

    body.halloween #header-image {
        background: url(images/header-image-halloween-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }

    body.christmas #header-image {
        background: url(images/header-image-christmas-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }

    body.valentinesday #header-image {
        background: url(images/header-image-valentines-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }

    body.stpatricksday #header-image {
        background: url(images/header-image-stpatricksday-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }

    body.easter #header-image {
        background: url(images/header-image-easter-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }

    body.carnival #header-image {
    background: url(images/header-image-carnival-2x.jpg) no-repeat center;
    background-size: 100% 100%;
    }

    body.unclesam #header-image {
        background: url(images/header-image-unclesam-2x.jpg) no-repeat center;
        background-size: 100% 100%;
    }
}

body.halloween .bottom-information img {
    filter: brightness(120%) contrast(100%) hue-rotate(35deg)
}

.ghostly-gifting {
    font-family: 'Creepster';
    background: white;
    color: black;
    font-size: 22px;
    padding: 10px 10px 10px 75px;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
.ghostly-gifting i {
    position: absolute;
    left: -12px;
    top: -12px;
    font-size: 80px;
    transform: rotate(25deg);
}

#header {
    width: 997px;
    height: 198px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#header .gameEventContainer {
    position: absolute;
    bottom: 35px;
    left: 250px;
    right: 0;
    text-align: left;
}

#header .gameEventContainer .gameEvent {
    display: inline;
    text-shadow: 0 0 2px #552c11;
    width: auto;
    font-size: 13px;
    color: #ddd092;
    box-shadow: 0 0 12px rgba(0,0,0,.5);
}

.energyEvent {
    position: relative;
    --text: "Double Energy";
}

.energyEvent img {
    animation: glow .75s ease-in-out infinite alternate;
    position: relative;
}

.energyEvent:before {
    content: var(--text);
    text-transform: uppercase;
    display: block;
    position: absolute;
    font-size: 11px;
    vertical-align: middle;
    letter-spacing: 1.2px;
    line-height: 13px;
    color: #ffffff;
    z-index: 1;
    text-align: center;
    width: 107px;
    height: 15px;
    left: 8px;
    top: 0;
    bottom: 3px;
    right: 0;
    opacity: 0.8;
    text-shadow: 0 0 2px black;
    animation: fadeInOut 1.5s ease-in-out infinite alternate;
}

@keyframes fadeInOut {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes glow {
    from {
        box-shadow: 0 0 2px lightblue;
        filter: hue-rotate(165deg);
    }
    to {
        box-shadow: 0 0 7px lightblue;
        filter: hue-rotate(205deg);
    }
}

#header .link-logo {
    position: relative;
    top: 50px;
    left: 48px;
    display: block;
    text-indent: -9999px;
    cursor: pointer;
    width: 287px;
    height: 82px;
    padding: 0;
}

#header .text {
    position: relative;
    top: 101px;
    right: 30px;
    float: right;
}

/* Wrapper */
#content {
    position: relative;
    width: 995px;
    height: auto;
    border-right: 1px solid #0d0c09;
    border-left: 1px solid #0d0c09;
    background: #676550;
    margin: 0 auto;
    overflow: auto;
    padding: 0;
}

/* Sidebar */
#sidebar {
    position: relative;
    float: left;
    left: 14px;
    top: -7px;
    width: 254px;
    height: auto;
    margin: 0;
    padding: 0;
}

/* Sidebar
	- Profile */
#profile {
    width: 254px;
    height: 196px;
    margin: 0;
    padding: 57px 0 0 0;
    background: url(images/profile-bg.jpg) no-repeat;
}

#profile .profile-icon-currency {
    color: #28271f;
    font-size: 14px;
}

#profile .top-information {
    width: auto;
    height: auto;
    padding: 0 0 0 28px;
    margin: 0;
    color: #141207;
    line-height: 15px;
    _line-height: 16px;
    display: flex;
    flex-direction: row;
}

#profile .top-information .profile-info {
    overflow: hidden;
}

#profile .top-information a.spendMerits, #profile .top-information a.spendMerits:visited {
    text-decoration: none;
    color: #141207;
}

#profile .top-information .profileAction {
    text-decoration: none;
}

#profile .top-information img {
    vertical-align: middle;
}

#profile .top-information a, #profile .top-information a:visited {
    color: #cdc6a2;
    font-weight: bold;
}

#profile .top-information a:hover {
    color: #fed872;
}

#profile .top-information .image-float {
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid #000;
}

#profile .top-information .usernameWrapper {
    white-space: nowrap;
    overflow: hidden;
}

#profile .bottom-information {
    width: 155px;
    height: auto;
    padding: 0;
    margin: 10px auto 0 auto;
    text-align: right;
    color: #141207;
    line-height: 15px;
    _line-height: 16px;
}

#profile .bottom-information img {
    vertical-align: middle;
    margin: 0 0 3px 8px;
}

#profile .btn {
    width: 151px;
    height: 19px;
    margin: 8px auto 0 auto;
    padding: 4px 0 0 0;
    color: #8f8d76;
    background: url(images/bottom-information-btn-bg.jpg) no-repeat;
}

#profile .btn a, #profile .btn a:visited {
    color: #8f8d76;
}

#profile .btn a:hover {
    color: #cdc6a2;
}

#profile .btn ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile .btn ul li {
    height: auto;
    float: left;
    text-align: center;
}

#profile .btn .preference {
    width: 87px;
}

#profile .btn .log {
    width: 64px;
}

/* Sidebar
	- menu */
#menu {
    width: 254px;
    height: auto;
    margin: 0;
    padding: 0;
    background: url(images/menu-bg.jpg) bottom no-repeat;
    padding: 0 0 35px 0;
}

#admin-menu, #mod-menu {
    border: 1px solid #434234;
    margin: 20px 20px 0 20px;
    background: #706e57;
}

#admin-menu .menu-header, #mod-menu .menu-header {
    background: #434234;
    padding: 6px 10px;
    color: #96926f;
}

#admin-menu ul, #mod-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#admin-menu ul li a, #mod-menu ul li a {
    display: block;
    border-bottom: 1px dotted black;
    padding: 5px 10px;
}

#admin-menu ul li a:hover, #mod-menu ul li a:hover {
    background: #525040;
}

#admin-menu ul li.staffHeading, #mod-menu ul li.staffHeading {
    font-weight: bold;
    padding: 5px 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-top: -1px;
}

#menu #title {
    background: url(images/menu-title.jpg) no-repeat;
    width: 254px;
    height: 47px;
    padding: 0;
    margin: 0;
}

#menu ul {
    padding: 0 0 0 20px;
    margin: 0;
    list-style: none;
    background: url(images/menu-list-bg.jpg) repeat-y;
}

#menu ul li a {
    display: flex;
    flex-direction: row;
    width: 193px;
    height: 17px;
    color: #141207;
    background: url(images/list-bullet-off.jpg) no-repeat;
    background-position: 10px 7px;
    padding: 5px 0 0 25px;
    margin: 0 0 2px 0;
    font-size: 12px;
    cursor: pointer;
}
#menu ul li img {
    margin-right: 2px;
}
#menu ul li i {
    width: 16px;
    height: 16px;
    margin-right: 2px;
    text-align: center;
    line-height: 15px;
    font-size: 14px;
}

#menu ul li a:hover {
    background: url(images/menu-list-bg-hover.jpg) no-repeat;
    color: #fed872;
}

#menu ul li a {
    color: #141207;
}

#menu ul li a.easter {
    color: #EE609D;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#menu ul li a.easter:hover {
    color: #f886b7;
}

/* Principal Content
	- Fixed */
#content-fidex {
    border: 1px solid #434234;
    border-bottom: none;
    float: left;
    width: 693px;
    height: auto;
    background: #706e57;
    margin: 0 0 0 25px;
}

#effects {
    border: 1px solid #434234;
    border-bottom: none;
    border-top: 0px none;
    float: left;
    width: 693px;
    height: auto;
    background: #706E57;
    padding-top: 5px;
    margin: 0 0 0 25px;
}

#effects .head {
    display: block;
    width: 40px;
    background: #28271f;
    padding-left: 10px;
    padding-right: 6px;
    color: #96926f;
    line-height: 32px;
    float: left;
}

#effects .content {
    display: flex;
    background: #434234;
    color: #96926f;
    align-items: center;
    padding-left: 0;
    font-size: 16px;
    max-height: 32px;
    min-height: 32px;
    height: 32px;
}

#effects .content span {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 5px;
    font-size: 11px;
}

#effects .content img, #effects .content i {
    padding: 5px 2px;
    margin-right: 2px;
    height: 22px;
}
#effects .content i {
    line-height: 22px;
    font-size: 16px;
}
#effects i.fa-virus, .playerStatuses i.fa-virus, .citySection a i.fa-virus {
    font-size: 18px;
    color: white;
    text-shadow: rgb(139, 0, 0) 4px 0px 0px, rgb(139, 0, 0) 3.875px 0.984375px 0px, rgb(139, 0, 0) 3.5px 1.90625px 0px, rgb(139, 0, 0) 2.921875px 2.71875px 0px, rgb(139, 0, 0) 2.15625px 3.359375px 0px, rgb(139, 0, 0) 1.25px 3.78125px 0px, rgb(139, 0, 0) 0.28125px 3.984375px 0px, rgb(139, 0, 0) -0.703125px 3.921875px 0px, rgb(139, 0, 0) -1.65625px 3.625px 0px, rgb(139, 0, 0) -2.5px 3.109375px 0px, rgb(139, 0, 0) -3.203125px 2.390625px 0px, rgb(139, 0, 0) -3.6875px 1.515625px 0px, rgb(139, 0, 0) -3.953125px 0.5625px 0px, rgb(139, 0, 0) -3.96875px -0.421875px 0px, rgb(139, 0, 0) -3.734375px -1.390625px 0px, rgb(139, 0, 0) -3.28125px -2.28125px 0px, rgb(139, 0, 0) -2.609375px -3.015625px 0px, rgb(139, 0, 0) -1.78125px -3.578125px 0px, rgb(139, 0, 0) -0.828125px -3.90625px 0px, rgb(139, 0, 0) 0.140625px -3.984375px 0px, rgb(139, 0, 0) 1.125px -3.828125px 0px, rgb(139, 0, 0) 2.046875px -3.421875px 0px, rgb(139, 0, 0) 2.828125px -2.8125px 0px, rgb(139, 0, 0) 3.4375px -2.03125px 0px, rgb(139, 0, 0) 3.828125px -1.109375px 0px, rgb(139, 0, 0) 3.984375px -0.125px 0px;
}

/* Principal Content
	- News */
#news {
    width: 693px;
    height: auto;
    min-height: 23px;
    border-bottom: 1px solid #434234;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: row;
    padding: 3px 8px;
    align-items: center;
    justify-items: space-between;
}
#news .newsAd {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 3px;
}
#news .newsAd b {
    margin-right: 4px;
}
#news .newsUsername {
    display: flex;
    flex-direction: row;
    align-items: center;
} 
#news a {
    color: #ccc7a1;
}

#news a:hover {
    color: #fed872;
}
#news.no-news {
    display: none;
}
#news .username {
    white-space: nowrap;
}

/* Principal Content
	- Sub menu */
#sub-menu {
    margin: 0;
    padding: 0;
    background: #434234;
}

/* Principal Content
	- Sub menu 1 */
.headerWidget {
    width: 100%;
    height: 88px;
    float: left;
    padding: 0;
    background: #28271f;
    text-align: center;
    position: relative;
}
.headerWidget .widgetContainer {
    float: left;
    position: relative;
}
.headerWidget .widgetTitle {
    width: 82px;
    height: 24px;
    background: #171613;
    color: #5B5A57;
    font-family: "Octin Prison Bold", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 24px;
    transform: rotate(270deg);
    position: absolute;
    left: -29px;
    top: 31px;
}

.headerWidget .bossWidget {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 88px;
    margin-left: 30px;
    color: #ACA590;
}
.headerWidget .bossWidget .bossWidgetImage {
    width: auto;
}
.headerWidget .bossWidget .bossWidgetImage img {
    width: auto;
    height: 100%;
    max-height: 82px;
}
.headerWidget .bossWidget .bossWidgetContent {
    padding: 8px 8px 8px 6px;
    box-sizing: border-box;
    width: 100%;
    height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.headerWidget .bossWidget .bossWidgetHeading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.headerWidget .bossWidget .bossWidgetHeading h3 {
    font-family: "Octin Prison Bold";
    font-weight: normal;
    text-align: left;
    font-size: 14px;
}
.headerWidget .bossWidget .bossWidgetHeading .bossWidgetReady {
    text-align: right;
}
.headerWidget .bossWidget .bossWidgetBody {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.headerWidget .bossWidget .bossWidgetBody .bossWidgetInfo {
    text-align: left;
}
.headerWidget .bossWidget .bossWidgetBody .bossWidgetInfo ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.headerWidget .bossWidget .bossWidgetBody .bossWidgetInfo ul li {
    line-height: 18px;
}
.headerWidget .bossWidget .bossWidgetBody .bossWidgetInfo ul li i {
    width: 12px;
    text-align: center;
}

.headerWidget .bossWidget.voteWidget {
    padding: 4px 0;
    box-sizing: border-box;
}
.headerWidget .bossWidget.voteWidget .votingButtons {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.headerWidget .bossWidget.voteWidget .votingButtons.alreadyVoted {
    pointer-events: none;
    opacity: 0.6;
}
.headerWidget .bossWidget .votingButtons a.button {
    font-family: "Octin Prison Bold", serif;
    font-weight: normal;
    font-size: 12px;
    color: #ACA590;
    height: 24px;
    padding: 0 7px;
    line-height: 24px;
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 2px;
}
.headerWidget .bossWidget .votingButtons a.button i:first-of-type {
    font-size: 12px;
}
.headerWidget .bossWidget .votingButtons a.button .votes {
    font-family: Tahoma, Helvetica, sans-serif;
    background: #28271F;
    border-radius: 5px;
    font-size: 10px;
    line-height: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
}
.headerWidget .bossWidget .votingButtons a.button .votes i {
    font-size: 11px;
}
.headerWidget .bossWidget .votingButtons a.button.voted {
    background: #ffcc66;
    color: black;
}
.headerWidget .bossWidget .votingButtons a.button.voted .votes {
    background: #bc9339;
    color: black;
}

.headerWidget .bossWidget.watchlistWidget {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7px 8px 7px 0;
    box-sizing: border-box;
}
.headerWidget .bossWidget.watchlistWidget .watchlistTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.headerWidget .bossWidget.watchlistWidget .watchlistTitle .currentWatchlist {
    padding-right: 22px;
    font-family: "Octin Prison Bold", serif;
    font-weight: normal;
    font-size: 12px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader {
    padding-top: 0;
    width: 100%;
    min-width: 210px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table {
    width: 100%;
    border-radius: 5px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr {
    height: 17px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td {
    border-bottom: 1px dashed #706E57;
    text-align: left;
    padding: 2px 4px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td.trophy {
    white-space: nowrap;
    padding-left: 0;
    padding-right: 4px;
    padding-top: 0;
    padding-bottom: 0;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td font[color="darkred"],
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td font[color="darkblue"]
{
    text-shadow: 0 0 5px #b7b4a0;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td.trophy .trophyContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 13px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td.trophy i {
    font-size: 12px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td.trophy span.youTrophy {
    font-family: "Octin Prison Bold", serif;
    font-size: 7px;
    line-height: 7px;
    font-weight: normal;
    padding-top: 3px;
    margin-right: 2px;
    opacity: 0.6;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td.rightAlign {
    padding-right: 0;
    text-align: right;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader table tr td .username img.imageName {
    max-height: 13px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistWinnersHeader .noWinners {
    padding-bottom: 8%;
}
.headerWidget .bossWidget.watchlistWidget .watchlistLoading {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 5px;
}
.headerWidget .bossWidget.watchlistWidget .watchlistLoading .loadingGhost {
    background: #3e3c31;
    border-radius: 5px;
    width: 100%;
    height: 15px;
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #3e3c31 8%, #48463b 18%, #3e3c31 33%);
    background-size: 1200px 100%;
}

body.hourlymadness #content {
    overflow: visible;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer {
    animation-duration: .75s;
    animation-name: goldGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    position: relative;
    z-index: 2;
}
body.hourlymadness #responsive-sidebar .responsive-sidebar-cta.responsive-sidebar-watchlist {
    animation-duration: .75s;
    animation-name: goldGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
body.hourlymadness #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .widgetContainer.watchlistVotingContainer {
    margin-bottom: 28px;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transform: translate(0, -100%);
    background: gold;
    color: black;
    padding: 4px 6px;

    animation-duration: .75s;
    animation-name: goldGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyHeading {
    display: flex;
    flex-direction: row;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyHeading .hourlyIcon {
    font-size: 15px;
    margin-right: 4px;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyHeading .hourlyText {
    font-size: 9px;
    text-transform: uppercase;
    line-height: 9px;
    text-align: justify;
    text-justify: inter-character;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyHeading div:first-child {
    letter-spacing: 1.2px;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyPoints {
    font-family: 'Octin Prison Bold', sans-serif;
    font-weight: normal;
    font-size: 19px;
    line-height: 19px;
    align-items: center;
    display: flex;
    flex-direction: row;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyPoints .hourlyWin {
    font-size: 24px;
}
body.hourlymadness .headerWidget .widgetContainer.watchlistWidgetContainer .hourlyMadness .hourlyPoints .hourlyRewards {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 11px;
    text-align: right;
}
body.hourlymadness #news {
    padding-left: 261px;
    height: auto;
}

.fire-sale {
    z-index: 10001;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: gold;
    color: black;
    padding: 4px 6px;
    animation-duration: .75s;
    animation-name: goldGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    cursor: pointer;
}
.fire-sale .fire-sale-title {
    font-family: "Octin Prison Bold", serif;
    font-weight: normal;
    font-size: 24px;
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}
#sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .watchlistClose {
    display: none;
}

#sub-menu {
    background: #28271F;
    height: 88px;
}
#sub-menu .topBarContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
}
#sub-menu.topBarEmpty {
    height: auto;
}
#sub-menu.topBarEmpty #navbar {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: auto;
    float: none;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    white-space: normal;
}
#sub-menu.topBarEmpty #navbar a {
    width: auto;
    height: 30px;
    float: none;
    margin: 0;
    text-align: center;
    padding: 0 0 0 45px;
    font-family: 'Octin Prison Bold', serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position: center left;
    background-size: 35px;
    word-break: break-word;
}

/* Principal Content
	- Sub menu 2 */
#navbar {
    margin-left: auto;
    order: 2;
    min-width: 177px;
    height: 88px;
    padding: 4px 8px;
    background: #434234;
    box-sizing: border-box;
    display: inline-grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    position: relative;
    z-index: 2;
    text-align: justify;
    white-space: nowrap;
    font-style: normal;
}


#navbar a:first-child, #navbar a:last-child {
    letter-spacing: 1px;
}

#navbar a, #navbar a:visited {
    color: #96926f;
}

#navbar a:hover {
    color: #fed872;
}

#navbar a {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    position: relative;
    text-align: right;
    padding-right: 0px;
    padding-left: 36px;
    font-family: "Octin Prison Bold", serif;
    font-weight: normal;
    font-size: 13px;
    letter-spacing: 0.5px;
}

#navbar .arrow {
    background: url(images/sub-menu-2-arrow.jpg) center left no-repeat;
    background-size: contain;
}

#navbar .head {
    background: url(images/sub-menu-2-head.jpg) center left no-repeat;
    background-size: contain;
}

#navbar .hart {
    background: url(images/sub-menu-2-hart.jpg) center left no-repeat;
    background-size: contain;
}

/* Principal Content
	- Variable */
#content-variable {
    width: 665px;
    margin: 0 0 20px 25px;
    float: left;
    height: auto;
    background: #706e57;
    border: 1px solid #434234;
    border-bottom: 19px solid #434234;
    border-top: none;
    padding: 0 14px 15px 14px;
    color: #141207;
    font-size: 12px;
}

#content-variable h1 {
    margin: 12px 0 0 0;
}

#content-variable ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #141207;
}

#content-variable .contentBox {
    padding: 14px 14px;
    width: 100%;
    box-sizing: border-box;
    line-height: 20px;
    overflow-x: auto;
}

#content-variable .contentBox.short {
    padding: 10px 20px;
}

#content-variable .contentBox > *:first-child {
    margin-top: 0;
}

.margen-mini {
    padding: 0 0 30px 18px;
    width: 111px;
    float: left;
    display: block;
    font-size: 12px;
}

.margen {
    padding: 0 0 30px 24px;
    width: 110px;
    float: left;
    display: block;
    font-size: 12px;
}

#content-variable ul li a, #content-variable ul li a:visited {
    color: #cdc6a2;
}

#content-variable ul li a:hover {
    color: #fed872;
}

/* Footer */
#footer {
    width: 953px;
    height: 76px;
    clear: both;
    margin: 0 auto 20px auto;
    padding: 10px 0 0 0;
    text-align: center;
    border: 1px solid #434234;
    background: #706e57;
    color: #141207;
}

#footer a, #footer a:visited {
    color: #cdc6a2;
}

#footer a:hover {
    color: #cdc6a2;
}

#footer .bottom {
    width: 943px;
    height: 16px;
    display: block;
    position: relative;
    bottom: -8px;
    text-align: left;
    margin: 10px 0 0 0;
    padding: 3px 0 0 10px;
    font-size: 10px;
    background: #434234;
    color: #141207;
}

#footer .bottom a {
    color: #141207;
}

.talking-ps{
    width:344px;
    height:88px;
    float:left;
    padding:0;
    font-size: 11px;
    line-height: 11px;
}

.talking-ps-1{
    background:#28271f url(../images/ballon/buble1.png) left no-repeat;
}

.talking-ps-0{
    background:#28271f url(../images/ballon/buble2.png) left no-repeat;
}

.talking-ps-1 div{
    padding: 5px 12px 10px 107px;
}

.talking-ps-0 div{
    padding: 5px 85px 10px 40px;
}

.darkred {
    color: darkred;
}

.darkgreen {
    color: darkgreen;
}

.golden {
    color: goldenrod;
}

table {
    border-collapse: collapse;
}
table tr th, table tr td {
    padding: 4px;
}

table.cleanTable {
    border-collapse: collapse;
    padding: 3px;
    width: 100%;
    margin: 8px 0;
}

table.cleanTable tr th {
    border-bottom: 1px solid #000000;
    font-weight: bold;
    padding: 5px;
}

table.cleanTable tr td {
    padding: 4px;
    text-align: center;
    border-bottom: 1px dotted #444444;
}

table.cleanTable tr td.noBorder {
    border: none;
}

table.cleanTable tr th:first-child,
table.cleanTable tr td:first-child {
    text-align: left;
}


table.formTable tr td {
    text-align: left;
}

table.formTable tr td:nth-child(1) {
    width: 25%;
    font-weight: bold;
}

table.formTable tr td:nth-child(2) input[type="text"], table.formTable tr td:nth-child(2) textarea, table.formTable tr td:nth-child(2) input[type="password"], table.formTable tr td:nth-child(2) input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

table.formTable tr td.smallInput input[type="text"], table.formTable tr td.smallInput input[type="password"] {
    width: 33%;
}

table.formTable tr:last-child td {
    text-align: right;
}
table.formTable tr .note {
    margin-top: 4px;
}

img.emoji {
    height: 15px;
    margin: 0 2px;
    display: inline;
}

/* FORUM */
.forum-content blockquote {
    padding: 12px 12px;
    background: rgba(0,0,0,0.4);
    border-left: 4px solid rgba(0,0,0,0.8);
    margin: 12px 0;
}
.forum-content blockquote cite {
    margin-right: 4px;
    font-weight: bold;
}
.forum-content blockquote:first-of-type {
    margin-top: 0;
}
.forum-content img, .forum-content iframe, .forum-content embed {
    max-width: 100%;
}
.forum-controls {
    right: 6px;
    bottom: 4px;
    float: right;
}
.forum-controls form {
    margin-left: 4px;
}
.forum-controls form button {
    width: 100%;
}
img.forum-avatar { max-width: 100px; }


input[type="button"],
input[type="reset"],
input[type="submit"],
button,
a.button {
    -webkit-appearance: none;
    box-sizing: border-box;
    border: 1px solid #28271f;
    background-color: #434234;
    color: white;
    font-size: 13px;
    line-height: 16px;
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: normal;
    margin: 0;
}

a.button.infection-button {
    font-weight: bold;
    background: darkred;
    color: white;
    border-radius: 5px;
    border: 0;
}
a.button.infection-button:hover {
    background: #4d0101;
}

input[type="button"].primary,
input[type="reset"].primary,
input[type="submit"].primary,
button.primary,
a.button.primary {
    font-weight: bold;
}

input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary,
button.secondary,
a.button.secondary {
    background: #313131;
}

input[type="button"] i,
input[type="reset"] i,
input[type="submit"] i,
button,
a.button i {
    margin-right: 4px;
}

a.button {
    display: inline-block;
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:hover,
a.button:hover {
    background-color: #2f2f28;
}

a.button img {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
}

input[type="button"].secondary:hover,
input[type="reset"].secondary:hover,
input[type="submit"].secondary:hover,
button.secondary:hover,
a.button.secondary:hover {
    background: #4c4c4c;
}

input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
button:disabled,
a.button.disabled {
    background: #525252;
    color: #a1a1a1;
    cursor: not-allowed;
}

button:disabled,
a.button.disabled {
    pointer-events: none;
}

input[type="text"] {
    -webkit-appearance: none;
    border: 0;
    font-size: 13px;
    padding: 8px 10px;
    min-width: 100px;
}

input[type="date"] {
    -webkit-appearance: none;
    border: 0;
    font-size: 13px;
    padding: 8px 10px;
}

input[type="datetime-local"] {
    -webkit-appearance: none;
    border: 0;
    font-size: 13px;
    padding: 8px 10px;
}

input[type="password"] {
    -webkit-appearance: none;
    border: 0;
    font-size: 13px;
    padding: 10px 10px;
}

input[type="number"] {
    -webkit-appearance: none;
    border: 0;
    width: 60px;
    margin-right: 4px;
    font-size: 13px;
    text-align: center;
    padding: 10px 10px;
}

textarea {
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-size: 13px;
    padding: 10px 10px;
    box-sizing: border-box;
}

select {
    font-size: 13px;
    height: 32px;
    line-height: 1.3;
    padding: .6em 2.4em .5em .8em;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-radius: 0px;
    appearance: none;
    background-color: white;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right .95em top 50%;
    background-size: .75em auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select[multiple] {
    height: auto;
    background-image: none;
    padding-right: .8em;
}

select::-ms-expand {
    display: none;
}

select option {
    font-weight: normal;
}


.message {
    margin: 10px 0px 0 0px;
    padding: 14px;
    width: calc(100%);
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    line-height: 20px;
    align-items: center;
    background: #292728;
    color: white;
}

.message.halloween {
    background: black;
    color: white;
}

.message.halloween .errorMessageText strong:first-child {
    color: #90da00;
    font-family: 'Creepster', cursive;
    font-weight: 400;
    font-size: 28px;
}

.message.christmas {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px #1e3e4c;
}
.message.christmas:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #2d5d73 url('../images/christmas/christmas-paper.jpg');
    background-size: 50%;
    z-index: -1;
    opacity: 0.2;
}

.message.valentines {
    background: pink;
    color: red;
}
.message.valentines strong {
    color: red;
}

.message strong {
    color: white;
}

.message > i:first-child {
    font-size: 36px;
    margin-right: 12px;
}

.errorMessage {
    background: #4f1f1f;
    color: white;
}

.errorMessage.halloween {
    background: #da4c00;
    color: black;
}
.errorMessage.halloween strong {
    color: black;
}

.successMessage {
    background: #1f4f24;
    color: white;
}

.successMessage.shady {
    background: #29213b;
    color: white;
}

.successMessage.halloween {
    background: #90da00;
    color: black;
}
.successMessage.halloween strong {
    color: black;
}
.message.halloween .errorMessageText strong:first-child {
    color: black;
}

.successMessage.golden {
    background: #D4AF37;
    color: #4c3d0d;
}
.successMessage.golden strong {
    color: #4c3d0d;
}

.message font {
    color: white!important;
    font-weight: bold;
}

#content-variable .message ul, #content-variable ul.discList {
    color: inherit;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.message ul li {

}

.suggestions {

}
.suggestions .suggestion {
    position: relative;
    background: #62624c;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 22px;
}
.suggestions .suggestion .title {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.suggestions .suggestion .title h3 {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 6px;
    max-width: 50%;
}
.suggestions .suggestion .title h3 a {
    color: #141207;
}
.suggestions .suggestion .score {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    position: absolute;
    top: 15px;
    right: 15px;
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #2f2e24;
}
.suggestions .suggestion .scoreNumber {
    font-size: 22px;
    line-height: 20px;
    text-transform: uppercase;
    color: #003900;
    margin-left: 6px;
}
.suggestions .suggestion .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}
.suggestions .suggestion .footer .voting a {
    margin-right: 12px;
    font-size: 24px;
}
.suggestions .suggestion .footer .voting a:first-child {
    color: #003900;
}
.suggestions .suggestion .footer .voting a:last-child {
    color: #4c0000;
}
.suggestions .suggestion .description .adminComment {
    background: #2f2e24;
    color: #a9a584;
    border-radius: 5px;
    padding: 12px 14px 14px 14px;
    margin-left: -6px;
    margin-right: -6px;
}
.suggestions .suggestion .description .adminComment p {
    margin-top: 4px;
    margin-bottom: 0;
}

.buttonActions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.buttonActions a {
    margin-right: 5px;
    margin-bottom: 5px;
}
.buttonActions a:last-child {
    margin-right: 0;
}

.paginator {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.paginator a {
    margin: 0 2px;
}

.dialog {
    border: 1px solid #434234;
    background: #706E57;
    position: absolute;
    font-size: 12px;
    box-shadow:  0 0 15px rgba(0,0,0,0.7);
}

.dialog .dialog_title {
    background: #434234;
    color: #96926F;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    cursor: move;
}

.dialog .dialog_title a.close {
    display: block;
    float: right;
    width: 30px;
    height: 10px;
}

.dialog .dialog_body {
    text-align: left;
    padding: 5px;
}

.small_button {
    font-size: 10px;
    border: 1px solid #28271f;
    color: white;
    background-color: #434234;
    cursor: pointer;
    padding: 2px;
    margin: 0;
}

.username {
    display: inline-flex;
    align-items: center;
}
.username .gangTag {
    margin-right: 3px;
}
.username img {
    vertical-align: inherit!important;
}
.username img.imageName, img.imageName {
    vertical-align: middle!important;
}

s.banned {
    position: relative;
}
s.banned:before {
    position: absolute;
    content: " ";
    display: block;
    height: 3px;
    background: darkred;
    top: 50%;
    left: 2%;
    right: 2%;
}

.button.bossFightJoin {
    margin-left: 5px;
    padding: 2px 6px;
    color: white!important;
    font-size: 11px;
}

.bossList{
    margin: auto;
}
.bossList td{
    text-align: center;
}
.bossAvatar{
    max-width: 180px;
    max-height: 180px;
    padding: 6px;
    margin-right: 20px;
}
.bossRoles{
    width: 100%;
}
.bossRoles .textRight{
    text-align: right;
}
.bossRedLight, .bossGreenLight{
    width: 10px;
    height: 10px;
    background: red;
    display: inline-block;
    border-radius: 50%;
}
.bossGreenLight{
    background: green;
}
.bossRoster{
    width: 100%;
}
.bossRoster td{
    padding: 10px;
}
.bossRoster .bossRosterDivider{
    border-left: solid black 1px;
}

.bossResultRow {
    text-align: center;
    margin: 20px;
}
.bossVs {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.bossVs .vs {
    margin: 0 20px;
    font-weight: bold;
    font-size: 22px;
}
.bossVs .group {
    max-width: 40%;
    text-align: center;
}
.bossVs .boss {
    text-align: center;
}
.bossVs .boss img {
    height: 100px;
}
.textRight{
    text-align: right;
}
.announcement-text {
    border-bottom: 1px dotted #444444;
    padding-top: 4px;
    padding-bottom: 16px;
}
.announcement-text img {
    max-width: 100%;
    height: auto;
}
#content-variable .announcement-text ul {
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
#content-variable ul.stockEvents {
    background: black;
    padding: 10px;
}
#content-variable  .stockEvents li {
    color: yellow;
    border-bottom: 1px solid #434343;
    padding-bottom: 6px;
    margin-bottom: 6px;
    font-family: 'VT323', monospace;
    font-size: 18px;
}
.profileSignature img {
    vertical-align: middle;
    max-width: 100%;
}
.bossLoot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}
.bossLoot .itemLoot {
    padding: 0 6px;
    text-align: center;
    margin: 6px 0;
}
.bossLoot .itemLoot .itemImage {
    position: relative;
    display: inline-block;
}
.bossLoot .itemLoot a {
    display: block;
}
.bossLoot .itemLoot.rare .itemImage::after {
    position: absolute;
    top: 5px;
    left: 10px;
    content: ' ';
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 14px);
    z-index: 1;
    animation-duration: .75s;
    animation-name: goldGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.bossLoot .itemLoot.rare .itemImage img {
    position: relative;
    z-index: 2;
}
@keyframes goldGlow {
    from {
        box-shadow: 0 0 5px gold;
    }

    to {
        box-shadow: 0 0 25px gold;
    }
}

.bossLoot .itemLoot.lost .itemImage::after {
    position: absolute;
    top: 5px;
    left: 10px;
    content: ' ';
    display: block;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    z-index: 1;
    animation-duration: .75s;
    animation-name: redGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes redGlow {
    from {
        box-shadow: 0 0 5px darkred;
    }

    to {
        box-shadow: 0 0 25px darkred;
    }
}
.bossLoot .itemLoot.lost .itemImage img {
    position: relative;
    z-index: 2;
    filter:hue-rotate(315deg);
}
.bossLoot .itemLoot.lost a {
    color: darkred;
}

.bossLoot .itemLoot.stolen .itemImage::after {
    position: absolute;
    top: 5px;
    left: 10px;
    content: ' ';
    display: block;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    z-index: 1;
    animation-duration: .75s;
    animation-name: greenGlow;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes greenGlow {
    from {
        box-shadow: 0 0 5px darkgreen;
    }

    to {
        box-shadow: 0 0 25px darkgreen;
    }
}
.bossLoot .itemLoot.stolen .itemImage img {
    position: relative;
    z-index: 2;
    filter:hue-rotate(55deg);
}
.bossLoot .itemLoot.stolen a {
    color: darkgreen;
}

.progress-bar {
    background-color: #1a1a1a;
    height: 35px;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    position: relative;
    margin-top: 10px;
}

.progress-bar span.bar {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;
    color: #db9090;
    line-height: 25px;
    text-align: center;
}
.progress-bar span.text {
    text-align: center;
    position: absolute;
    right: 15px;
    top: 0;
    line-height: 35px;
    bottom: 0;
    color: white;
    font-weight: bold;
    z-index: 2;
    text-transform: uppercase;
}
.red span.bar {
    background-color: #851515;
}

.inlineInputs {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.inlineInputs input, .inlineInputs select, .inlineInputs button {
    margin: 0 8px;
}

.inlineInputs *:first-child {
    margin-left: 0;
}

.inlineInputs *:last-child {
    margin-right: 0;
}

.cityGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.cityGrid .citySection {
    margin-bottom: 20px;
}
.cityGrid .citySection .cityHeading {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 4px;
}

.itemGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 20px 0;
}
.itemGrid .itemGridItem {
    text-align: center;
    padding-bottom: 20px;
}
.itemGuide .itemGrid {
    padding: 10px;
}
.itemGuide .itemGrid .itemGridItem {
    text-align: left;
}

.bar-wrapper {
    position: relative;
    font-size: 14px;
}
.bar-wrapper .bar {
    border: 2px solid black;
    position: relative;
    background-image: linear-gradient(128deg, rgba(0, 0, 0, 0.6037441498) 0%, #e6b600 0%, #e23000 100%);
    height: 20px;
    z-index: 1;
}
.bar-wrapper .bar:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 39.29%, #000000 39.29%, #000000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 89.29%, #000000 89.29%, #000000 100%);
    background-size: 28px 28px;
    z-index: 1;
}
.bar-wrapper .bar-overlay {
    background: black;
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 2;
}
.bar-wrapper .bar-text {
    position: absolute;
    top: 0;
    left: 6px;
    right: 4px;
    line-height: 24px;
    font-weight: bold;
    color: white;
    z-index: 3;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Responsive Defaults */
#responsive-sidebar, #responsive-header {
    display: none;
}
.modal-popup, .character-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    transition: visibility .25s linear, opacity .25s ease-in-out;
    opacity: 0;
    visibility: hidden;
}
.modal-popup.open, .character-popup.open {
    opacity: 1;
    visibility: visible;
}
.modal-popup .modal-popup-background, .character-popup .character-popup-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1;
}
.modal-popup .modal-popup-container, .character-popup .character-popup-container {
    background: #434234;
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    width: 80%;
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 0 22px rgba(0,0,0,0.5);
}
.character-popup .character-popup-container {
    width: 550px;
    background: #d7d7d7;
    overflow: visible;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
}
.character-popup.right-side .character-popup-container {
    flex-direction: row;
}
.character-popup.left-side .character-popup-container {
    flex-direction: row-reverse;
}
.character-popup .character-popup-container h2.character-popup-title {
    font-family: "Octin Prison Bold", sans-serif;
    font-weight: normal;
    font-size: 30px;
    line-height: 30px;
    color: #d7d7d7;
    top: 5px;
    transform: translateY(-100%);
    position: absolute;
    margin-left: 26px;
}
.character-popup .character-popup-container .character-popup-content {
    font-size: 14px;
    line-height: 22px;
    padding: 26px 45% 26px 26px;
    min-height: 250px;
}
.character-popup .character-popup-container .character-popup-content img.inline-character {
    display: none;
}
.character-popup .character-popup-container .character-popup-content p:first-of-type {
    margin-top: 0;
}
.character-popup .character-popup-container .character-popup-actions {
    margin-top: 20px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.character-popup .character-popup-container .character-popup-actions .button.secondary {
    background: #d7d7d7;
    color: #555555;
    border: 1px dotted #555555;
}
.character-popup .character-popup-container .character-popup-image {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-50%, -50%);
}
.character-popup.right-side .character-popup-container .character-popup-image {
    transform: scaleX(-1) translate(-35%, -20%);
}
.character-popup .character-popup-container .character-popup-image img {
    height: 550px;
    filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.2));
}
.modal-popup .modal-popup-container li a {
    border-bottom: 1px solid #24231b;
    display: block;
    padding: 14px 10px;
    font-weight: normal;
    font-size: 18px;
    font-family: 'Octin Prison Bold', serif;
}
.modal-popup .modal-popup-container li a:hover {
    background: #24231b;
}
.modal-popup .modal-popup-container li a i {
    font-size: 24px;
    min-width: 32px;
    text-align: center;
    padding-right: 4px;
}

.modal-popup .modal-popup-container#item-modal {
    background: #706e57;
    max-width: 350px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 6px;
}

.modal-popup .modal-popup-container#item-modal h2 {
    background: #434234;
    color: #cdc6a2;
    padding: 10px 28px 10px 14px;
    margin-bottom: 12px;
}
.modal-popup .modal-popup-container#item-modal .description {
    display: flex;
    flex-direction: row;
    padding: 0 14px;
}
.modal-popup .modal-popup-container#item-modal .description img {
    margin-right: 16px;
}
.modal-popup .modal-popup-container#item-modal h3 {
    margin-top: 12px;
}
.modal-popup .modal-popup-container#item-modal table {
    padding: 0;
    margin: 4px 0 0;
}
.modal-popup .modal-popup-container#item-modal td, .modal-popup .modal-popup-container#item-modal th {
    padding: 8px 14px;
    border-bottom: 1px dotted #434234;
}
.modal-popup .modal-popup-container#item-modal th {
    text-align: left;
}
.modal-popup .modal-popup-container#item-modal tr:last-child td,
.modal-popup .modal-popup-container#item-modal tr:last-child th {
    border-bottom: 0;
}
.modal-popup .close-modal {
    position: absolute;
    top: 6px;
    right: 12px;
    font-size: 22px;
}

.nameStars {
    display: grid;
    margin-left: 4px;
    grid-gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
}
.nameStars i {
    color: transparent;
    background: rgb(247,210,81);
    background: linear-gradient(147deg, rgba(247,210,81,1) 0%, rgba(244,195,51,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.05);
    font-size: 7px;
}
.nameStars.sl7, .nameStars.sl8 {
    grid-template-columns: repeat(4, 1fr);
}
.nameStars.sl10 {
    grid-template-columns: repeat(5, 1fr);
}
.nameStars img {
    width: 8px;
    height: 8px;
}
.nameStars.exampleStars {
    width: 26px;
    height: 17px;
}
.rebirthStars img{
    vertical-align: middle !important;
    padding-left: 2px;
    padding-right: 2px;
}

i.fa-jack-o-lantern {
    color: darkorange;
}

.keycard-enabled {
    display: inline-block;
    background: white;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 3px;
    padding: 2px 6px;
    margin-top: 6px;
}

.character {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.character .characterAvatar {
    width: 25%;
}
.character .characterAvatar img {
    width: 100%;
}
.character img.avatarMobile {
    display: none;
    float: left;
    width: 30%;
    padding-right: 6%;
    padding-bottom: 5px;
}
.character .characterContent {
    width: 75%;
    padding-left: 10px;
}
.character .characterContent p a {
    color: black;
    font-weight: bold;
}
.character .characterContent a.button {
    margin-bottom: 4px;
}
.speechBubble {
    margin: 10px 10px 10px 20px;
    position: relative;
    background: #d7d7d7;
    border-radius: 5px;
    padding: 14px 16px;
    color: black;
}
.speechBubble p:first-of-type {
    margin-top: 6px;
}
.speechBubble p:last-child {
    margin-bottom: 4px;
}
.speechBubble::after {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: #d7d7d7;
    border-left: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-left: -20px;
}
.speechBubble a:not(.button) {
    color: black;
    text-decoration: underline;
}
.character .characterContent p a.button {
    color: white;
    font-weight: normal;
}

.responsive-stats {
    display: none;
}

.adminLogin {
    background: black;
    font-size: 14px;
    text-align: center;
    padding: 8px 20px;
    color: white;
}

.infractionRules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}
.infractionRules .infractionsRule {
    position: relative;
    background: #62624c;
    border-radius: 5px;
    padding: 16px 20px 4px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.infractionRules .infractionsRule > i {
    font-size: 52px;
    margin-bottom: 12px;
    margin-right: 16px;
    margin-left: 6px;
}
.infractionRules .infractionsRule .ruleHeading {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
}
.infractionRules .infractionsRule .pointsTime {
    background: #535341;
    border-radius: 5px;
    padding: 6px 10px;
    line-height: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.infractionRules .infractionsRule .pointsTime i {
    font-size: 16px;
    margin-right: 6px;
    opacity: 0.8;
}
ul.enforcementList {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.enforcementList li {
    background: #62624c;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 5fr;
    align-items: stretch;
    margin-bottom: 10px;
    overflow: hidden;
}
ul.enforcementList li .enforcementPoints {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #535341;
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    min-width: 126px;
    text-align: center;
}
ul.enforcementList li .enforcementResult {
    padding: 12px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
ul.enforcementList li .enforcementResult i {
    margin-right: 6px;
    font-size: 18px;
    opacity: 0.6;
}
ul.enforcementList li .enforcementResult .additional {
    padding-left: 4px;
    font-style: italic;
    opacity: 0.7;
    color: #141207!important;
}

.contentBox .gridLinks {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    justify-content: space-between;
}

.contentBox .gridLinks a.button {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    padding: 10px 10px;
    max-width: 100%;
    word-wrap: break-word;
    white-space: break-spaces;
    text-align: left;
}

.contentBox .gridLinks a i {
    display: block;
    font-size: 18px;
    margin-left: 2px;
    margin-right: 12px;
}

.contentBox .gridLinks .boldText {
    font-weight: bold;
}

.sk-fading-circle {
    margin: 30px auto;
    width: 60px;
    height: 60px;
    position: relative;
}

.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #aa9967;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

.responsive-game-event {
    display: none;
}

.boxTop {
    background: #62624c;
    border-radius: 5px;
    padding: 10px 15px 6px;
    position: relative;
}
.boxTop h3 {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
}

.RPMessage {
    margin: 10px 0 0 0;
    padding: 14px 14px 12px 14px;
    width: calc(100%);
    box-sizing: border-box;
    border-radius: 5px;
    line-height: 20px;
    align-items: center;
    background: #D9D9D9;
    color: #000000;
}
.RPMessage h2 {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 22px;
    margin-bottom: 8px;
}

.RPMessage .listRP ul {
    list-style: none;
    font-family: Tahoma, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 26px;

    display: grid;
    grid-template-columns: 3fr 2fr;
}
.RPMessage .listRP ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.RPMessage .listRP ul li i {
    padding-right: 4px;
    opacity: 0.6;
    font-size: 16px;
    width: 20px;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

.tutorial-bars {
    float: left;
    width: 240px;
    margin: 20px 30px 20px 0;
}
.tutorial-menu {
    float: left;
    width: 240px;
    margin: 0 40px 20px 0;
}
.tutorial-mobile-menu {
    width: 100%;
    display: block;
}

.mobileTutorial {
    display: none;
}
a.button.viewMobile {
    display: inline-block;
}
a.button.viewDesktop {
    display: none;
}
@media only screen and (max-width: 820px) {
    .desktopTutorial {
        display: none;
    }
    .mobileTutorial {
        display: block;
    }
    a.button.viewMobile {
        display: none;
    }
    a.button.viewDesktop {
        display: inline-block;
    }
    .tutorial-menu {
        width: 30%;
    }
}

.halloween-event-banner {
    position: relative;
    background: black;
    padding: 0 10px;
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.halloween-event {
    position: relative;
}
.halloween-event-banner::before, .halloween-event::before, .halloween-game-event::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 20%;
    width: 28px;
    height: 10px;
    background: url('../images/misc/green-slime@2x.png');
    background-size: 100% auto;
}
.halloween-event-banner .halloween-logo {
    text-align: center;
    width: 40%;
}
#content-variable .halloween-event-banner h1, .halloween-game-event h1 {
    margin-top: 0;
    display: block;
    height: auto;
    background: none;
    font-family: 'Creepster', cursive;
    font-weight: 400;
    font-size: 60px;
    line-height: 60px;
    color: #90da00;
    text-align: center;
}
.halloween-event-banner h2, .halloween-game-event h2 {
    font-family: 'Another Danger Slanted';
    text-align: center;
    font-size: 16px;
    color: white;
    letter-spacing: 3px;
    margin-top: -20px;
    padding-bottom: 10px;
    text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.828125px 0.96875px 0px, rgb(0, 0, 0) 2.34375px 1.84375px 0px, rgb(0, 0, 0) 1.609375px 2.515625px 0px, rgb(0, 0, 0) 0.703125px 2.90625px 0px, rgb(0, 0, 0) -0.28125px 2.984375px 0px, rgb(0, 0, 0) -1.234375px 2.71875px 0px, rgb(0, 0, 0) -2.0625px 2.15625px 0px, rgb(0, 0, 0) -2.65625px 1.359375px 0px, rgb(0, 0, 0) -2.96875px 0.421875px 0px, rgb(0, 0, 0) -2.9375px -0.5625px 0px, rgb(0, 0, 0) -2.59375px -1.5px 0px, rgb(0, 0, 0) -1.953125px -2.265625px 0px, rgb(0, 0, 0) -1.109375px -2.78125px 0px, rgb(0, 0, 0) -0.125px -2.984375px 0px, rgb(0, 0, 0) 0.84375px -2.875px 0px, rgb(0, 0, 0) 1.734375px -2.4375px 0px, rgb(0, 0, 0) 2.4375px -1.734375px 0px, rgb(0, 0, 0) 2.875px -0.828125px 0px;
}
.halloween-game-event {
    position: relative;
    background: black;
    border-radius: 5px;
    color: white;
    padding: 20px;
}
#content-variable .halloween-game-event p {
    margin: 0;
}
#content-variable .halloween-game-event h1 {
    text-align: left;
    padding: 0;
    margin: 0;
    font-size: 50px;
    line-height: 40px;
}
#content-variable .halloween-game-event h2 {
    text-align: left;
    font-size: 12px;
    margin-top: -8px;
    margin-left: 16px;
}
.halloween-event-banner .date {
    text-align: right;
    font-family: 'Creepster', cursive;
    color: white;
    font-size: 22px;
    line-height: 22px;
}
.halloween-event-banner .halloween-more {
    text-align: right;
    width: 60%;
    padding-right: 12px;
}
.halloween-event-banner .halloween-more a {
    margin-top: 6px;
    display: inline-block;
    box-sizing: border-box;
    background: #90da00;
    border-radius: 5px;
    padding: 6px 14px;
    color: black;
    font-family: 'Creepster', cursive;
    font-size: 18px;
}

/* Variables */
#payment-methods {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-content: center;
}

form#payment-form {
    width: 30vw;
    min-width: 500px;
    align-self: center;
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
}

.hidden {
    display: none;
}

#payment-message {
    color: rgb(105, 115, 134);
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
}

#payment-element {
    margin-bottom: 24px;
}

/* Buttons and links */
button.payment-button {
    background: #5469d4;
    font-family: Arial, sans-serif;
    color: #ffffff;
    border-radius: 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
}
button.payment-button:hover {
    filter: contrast(115%);
}
button.payment-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.mailTable .messageText label {
    display: none;
}
.mailTable input[name="subject"], .mailTable textarea {
    width: 100%;
    box-sizing: border-box;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
    border-radius: 50%;
}
.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner:before,
.spinner:after {
    position: absolute;
    content: "";
}
.spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #5469d4;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #5469d4;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

table tr td.trophy {
    width: 10px;
    padding: 6px 8px 4px 8px;
    text-align: left;
}

table tr td.trophy .fa-trophy {
    font-size: 16px;
}

table tr td.trophy .fa-trophy.gold {
    color: #FFD700;
}

table tr td.trophy .fa-trophy.silver {
    color: #C0C0C0;
}

.danteList {
    list-style-type: disc !important;
    margin-left: 15px !important;
}

.danteList span.completed {
    font-weight: bold;
    color: darkgreen;
}
.danteList span.completed::after {
    content: "";
    display: inline-block;
    font-family: "Font Awesome 6 Pro", serif;
}

.danteList .contribution {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background: #bbbbbb;
    border-radius: 5px;
    padding: 6px 8px;
    margin: 4px 0 6px;
    box-sizing: border-box;
}

.danteList .contribution .playerContribution {
    display: flex;
    align-items: center;
}

.danteList .contribution .playerContribution a.gangTag, .danteList .contribution .playerContribution span.nameStars {
    display: none;
}

.danteList .contribution .playerContribution .contributionAmount {
    font-family: "Octin Prison Bold", serif;
    font-weight: normal;
    background: #909090;
    padding: 4px 8px;
    margin-left: 8px;
    font-size: 18px;
    border-radius: 5px;
}

.trophy .fa-trophy.bronze {
    color: #CD7F32;
}

.gangWar {
    background: #62624c;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 12px 10px;
}
.gangWar .gangWarDates {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gangWar .gangWarDates .gangWarDate {
    border-radius: 5px;
    padding: 3px 8px;
}
.gangWar .gangWarDates .gangWarDate.gangWarStart {
    text-align: right;
}
.gangWar .gangWarDates .gangWarDate.gangWarEnd {
    text-align: left;
}
.gangWar .gangWarDates i {
    margin: 0 8px;
}
.gangWar .gangWarProgress {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 6px 0 6px;
}
.gangWar .gangWarProgress .gangWarLeft, .gangWar .gangWarProgress .gangWarRight {
    flex: 1;
    text-align: center;
}
.gangWar .gangWarProgress .gangWarPoints {
    background: #706e57;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    font-size: 16px;
    display: inline-block;
}
.gangWar .gangWarProgress .gangWarPoints.winner {
    background: darkgreen;
    color: white;
    font-weight: bold;
}
.gangWar .gangWarProgress .gangWarPoints.loser {
    background: #5d0000;
    color: white;
}
.gangWar .gangWarProgress .vs {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 32px;
}
.gangWar .gangFlag {
    width: 150px;
    height: 70px;
    margin-bottom: 6px;
    border-radius: 5px;
}

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    background-color: #434234!important;
}

.changeLogType {
    display: inline-block;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 6px 6px;
    background: #62624c;
}
.changeLogType.feature {
    background: darkgreen;
    color: white;
}
.changeLogType.bug {
    background: darkred;
    color: white;
}
.changeLogType.improvement {
    background: #000064;
    color: white;
}
.changeLogType.balance {
    background: #29213b;
    color: white;
}
.changeLogNewLabel {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    color: darkred;
    margin-right: 2px;
    text-transform: uppercase;
    padding: 6px 0;
    font-weight: bold;
}
tr.changeLogNew td:nth-of-type(2) {

}


/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #28271f;
    color: #96926f;
    padding: 30px;
    border-radius: 5px;
    text-align: center;
    max-width: 500px;
    width: 90%;
}

.modal-content h2 {
    font-family: 'Octin Prison Bold', serif;
    font-weight: normal;
    font-size: 24px;
    margin-bottom: 15px;
}

.modal-content p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

#game-container {
    margin-top: 14px;
}
#game-container canvas {
    margin-top: 0!important;
    margin-bottom: 0!important;
    border-radius: 5px;
}
  

@media only screen and (max-width: 600px) {
    .gangWar .gangFlag {
        width: 100px;
    }
    #game-container {
        margin-bottom: 200px;
    }

    #news {
        position: relative;
    }
    #news .button.bossFightJoin {
        min-height: 0;
        line-height: 16px;
    }
    #news .newsAd {
        padding-top: 12px;
    }
    #news .newsUsername {
        position: absolute;
        top: 1px;
        left: -13px;
        transform: scale(0.75);
    }
    #news .newsDash {
        display: none;
    }
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 600px) {
    .halloween-event-banner {
        flex-direction: column;
    }
    .halloween-event-banner h2 {
        padding-bottom: 0;
    }
    .halloween-event-banner .halloween-logo {
        width: 100%;
    }
    .halloween-event-banner .halloween-more .date {
        margin-right: 12px;
        margin-top: 6px;
    }
    .halloween-event-banner .halloween-more {
        width: 100%;
        padding-right: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 14px;
    }
}

/* Size when original template starts to scroll */
@media only screen and (max-width: 997px) {
    body {
        background: none;
        background-color: #706e57;
    }
    select {
        width: 100%;
    }
    #whole-container {
        width: 100%;
        margin-bottom: 20px;
    }
    #header-image {
        background-size: cover;
    }
    #header-image #header {
        width: 100%;
    }
    .headerWidget {
        width: 100%;
    }
    #content {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-left: none;
        border-right: none;
    }
    #content ol li, #content ul li {
        line-height: 20px;
    }
    #content #content-wrapper {
        width: 100%;
        margin: 0 10px;
    }
    #content #content-wrapper .contentBox img {
        max-width: 100%;
        height: auto;
    }
    #content #sidebar {
        left: 0;
        width: 254px;
        margin-left: 10px;
    }
    #content #content-fidex {
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        float: none;
    }
    #content #content-fidex #news {
        width: 100%;
        box-sizing: border-box;
        min-height: 23px;
        height: auto;
    }
    #content #content-fidex #news.no-news {
        display: none;
    }
    #content #content-fidex #sub-menu #best-inmates {
        display: none;
    }
    #content {
        background: #706e57;
    }
    #content #content-variable {
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        padding: 0 10px 10px 10px;
        margin-bottom: 140px;
        min-height: calc(100vh - 260px);
        border: none;
    }
    #content #footer {
        display: none;
        width: 100%;
        height: auto;
    }

    #effects {
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }
    #effects .head {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        font-weight: bold;
    }

    .responsive-stats {
        background-color: #4d4b34;
        display: block;
        text-align: center;
        padding: 10px;
        font-family: 'Octin Prison Bold', serif;
        font-size: 14px;
    }
    .responsive-stats a {
        margin: 0 10px;
    }
}


@media only screen and (max-width: 940px) {
    #header-image, #header-image #header {
        height: 160px;
    }
}

@media only screen and (max-width: 820px) {
    input, select, textarea {
        font-size: 14px!important;
        box-sizing: border-box;
        min-height: 36px;
    }
    input[type="image"] {
        min-width: 22px;
        min-height: 22px;
        margin: 4px;
    }
    input[type="button"], input[type="reset"], input[type="submit"], button, a.button {
        font-size: 14px;
        padding: 0 16px;
        min-height: 34px;
        line-height: 34px;
    }
    .headerWidget .bossWidget .votingButtons a.button {
        min-height: auto;
    }
    #header-image {
        display: none;
    }
    .responsive-game-event {
        position: fixed;
        bottom: 115px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        margin: 0 auto;
        background: black;
        color: white;
        padding: 4px 8px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        border-radius: 5px;
        z-index: 102;
    }
    #responsive-header {
        background: url('../images/responsive-header-bg.jpg') repeat-x;
        background-size: 150%;
        position: relative;
        display: block;
        text-align: center;
    }
    #responsive-header .responsive-profile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        padding: 0 20px 0 0;
        color: white;
    }
    #responsive-header .responsive-bars {
        display: flex;
        flex-direction: row;
        position: relative;
    }
    #responsive-header .responsive-bars .bars-stats {
        position: absolute;
        left: 10%;
        width: 80%;
        top: 40px;
        z-index: 1001;
        background: #434234;
        font-size: 16px;
        line-height: 28px;
        padding: 10px 12px;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: 0 0 55px rgba(0,0,0,1);
        color: #cdc6a2;
        opacity: 0;
        visibility: hidden;
        transition: .1s ease-in-out;
        text-align: left;
    }
    #responsive-header .responsive-bars .bars-stats.open {
        opacity: 1;
        visibility: visible;
    }
    #responsive-header .responsive-bars .bars-stats:after {
        bottom: 100%;
        left: 50%;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border: 15px solid rgba(67, 66, 52, 0);
        border-bottom-color: #434234;
        margin-left: -15px;
    }
    #responsive-header .responsive-bars .bars-stats strong {
        min-width: 25%;
        font-family: 'Octin Prison Bold', serif;
        display: inline-block;
    }
    #responsive-header .responsive-bars .bar-wrapper {
        flex-basis: 20%;
    }
    #responsive-header:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(128deg, rgba(0,0,0,0.6037441497659906) 20%, rgba(0,0,0,0) 100%);
        z-index: 1;
    }
    #responsive-header #responsive-logo, #responsive-header #responsive-profile, #responsive-header #responsive-money, #responsive-header #responsive-points {
        z-index: 2;
    }
    #responsive-header #responsive-logo {
        position: relative;
    }
    #responsive-header #responsive-logo .responsive-time {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-60%);
        font-size: 10px;
        white-space: nowrap;
        background: #1d120b;
        border-radius: 5px;
        color: #c39475;
    }
    #responsive-header #responsive-header-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    #responsive-header #responsive-logo img {
        height: 50px;
        margin-top: -6px;
    }
    #responsive-header #responsive-profile {
        padding: 8px 0;
        white-space: nowrap;
        text-align: left;
    }
    #responsive-header #responsive-profile .profile-level {
        margin-top: 2px;
    }
    #responsive-header #responsive-assets {
        display: flex;
        flex-direction: row;
    }
    #responsive-header #responsive-assets #responsive-money {
        margin-right: 10px;
    }
    #responsive-header #responsive-assets #responsive-money .short-money {
        display: none;
    }
    #responsive-header .asset-wrapper {
        border-radius: 5px;
        background: rgba(0, 0, 0, .75);
        color: white;
        padding: 8px 12px;
        white-space: nowrap;
    }
    #responsive-header .asset-wrapper i {
        font-size: 20px;
        line-height: 20px;
        color: #DDD092;
        margin-right: 10px;
        float: left;
    }
    #content-variable {
        font-size: 14px;
    }
    #sidebar {
        display: none;
    }
    #content #content-wrapper {
        margin: 0;
    }
    #content-variable h1 {
        min-height: 27px;
        height: auto;
    }

    #responsive-sidebar {
        position: fixed;
        -webkit-backface-visibility: hidden;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        background: #706e57;
        color: #28271F;
        box-shadow: 0 0 45px rgba(0,0,0,0.75);
        z-index: 101;
        padding-bottom: env(safe-area-inset-bottom);
    }
    #responsive-sidebar .responsive-sidebar-cta {
        font-family: 'Octin Prison Bold', serif;
        font-weight: normal;
        font-size: 17px;
        text-shadow: 0 0 10px #96937a;
        background: #8b0000;
        color: white;
        border-bottom: 1px solid #580000;
        border-top: 1px solid #580000;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #responsive-sidebar .responsive-sidebar-cta:hover {
        background: #580000;
    }
    #responsive-sidebar .responsive-sidebar-cta.responsive-sidebar-watchlist {
        font-size: 16px;
        background: #28271F;
        color: #ACA590;
        border-bottom: 1px solid #28271F;
        border-top: 1px solid #28271F;
        text-shadow: none;
        display: inline-block;
        width: auto;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
        white-space: nowrap;
        padding: 7px 12px;
    }
    #responsive-sidebar .responsive-sidebar-cta.responsive-sidebar-watchlist i {
        font-size: 18px;
    }
    #responsive-sidebar .responsive-sidebar-cta.responsive-sidebar-watchlist:hover {
        background: #3a3930;
    }
    #responsive-sidebar .responsive-sidebar-cta i {
        font-size: 22px;
        margin-right: 10px;
    }
    #responsive-sidebar .responsive-sidebar-links a {
        color: #28271F;
    }
    #responsive-sidebar .responsive-sidebar-links {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
        border-bottom: 1px solid #28271F;
    }
    #responsive-sidebar .responsive-sidebar-links a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding: 0;

        flex: 1 1 0;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Octin Prison Bold', serif;
        font-weight: normal;
        font-size: 15px;
        text-shadow: 0 0 10px #96937a;
        border-right: 1px solid #28271F;
        line-height: 14px;
        height: 55px;
        max-height: 55px;
        overflow: hidden;
    }
    #responsive-sidebar .responsive-sidebar-links a:nth-child(-n+5) {
        border-bottom: 1px solid #28271F;
    }
    #responsive-sidebar .responsive-sidebar-links a:nth-child(5), #responsive-sidebar .responsive-sidebar-links a:nth-child(10) {
        border-right: 0;
    }
    #responsive-sidebar .responsive-sidebar-links a .boss-fight-count {
        white-space: nowrap;
    }
    #responsive-sidebar .responsive-sidebar-links a.highlight {
        color: #ffffff;
        text-shadow: 0 0 10px #b8b69c;
    }
    #responsive-sidebar .responsive-sidebar-links a.highlight span {
        color: #ffffff!important;
    }
    #responsive-sidebar .responsive-sidebar-links a:hover {
        color: #ffffff;
    }
    #responsive-sidebar .responsive-sidebar-links a.highlight:hover {
        text-shadow: 0 0 15px #ece3e3;
    }
    #responsive-sidebar .responsive-sidebar-links a i  {
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: 20px;
        display: block;
    }
    #responsive-sidebar .responsive-sidebar-links a img {
        margin: 4px auto;
        display: block;
        width: 20px;
        height: 20px;
    }
    #responsive-sidebar .responsive-sidebar-links a.no-icon i {
        display: none;
    }

    .cityGrid {
        grid-template-columns: repeat(3, 1fr);
    }
    table.inventoryTable tr:first-child {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    table.inventoryTable tr:first-child td {
        text-align: left;
        padding: 6px 10px;
        border-bottom: 1px solid #706e57;
        border-right: 1px solid #706e57;
    }
    #content-variable .contentBox {
        max-width: 100%;
        width: 100%;
        overflow-x: scroll;
    }
    #content #content-fidex {
        border: none;
    }
    .header-tutorial {
        background: #28271f;
    }
    .header-tutorial .talking-ps {
        float: none;
        margin: 0 auto;
    }
    .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
        background-color: #434234!important;
        bottom: 126px;
    }
}

@media only screen and (max-width: 750px) {
    .contentBox .gridLinks {
        grid-template-columns: repeat(3, 1fr);
    }
    .contentBox .gridLinks a.button {
        line-height: 22px;
        min-height: auto;
    }

}

@media only screen and (max-width: 660px) {
    body {
        font-size: 14px;
    }

    select {
        padding-right: 1.5em;
        background-position: right .6em top 50%;
    }

    .eventsHeadingTable tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .eventsHeadingTable tr td:last-child {
        display: flex;
        flex-basis: 100%;
        justify-content: space-between;
        padding: 6px 0 2px 0;
    }

    .paginator a {
        margin: 0 2px;
        padding: 0 8px;
        flex-grow: 1;
        text-align: center;
    }

    .responsive-stats {
        margin-bottom: 160px;
    }

    .character-popup .character-popup-container {
        width: calc(100% - 40px);
        align-items: center;
    }
    .character-popup .character-popup-container .character-popup-content {
        padding-right: 0;
    }
    .character-popup .character-popup-container .character-popup-image {
        position: relative;
        transform: none;
    }
    .character-popup .character-popup-container .character-popup-image {
        width: 100%;
        padding: 10px 20px;
    }
    .character-popup.right-side .character-popup-container .character-popup-image {
        transform: scaleX(-1);
    }
    .character-popup .character-popup-container .character-popup-image img {
        max-width: 100%;
        height: auto;
    }

    .infractionRules {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
    }

    #sub-menu .topBarContainer {
        flex-direction: column;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWidget .widgetContainer {

    }
    #content #content-fidex #sub-menu #navbar {
        width: 100%;
        height: auto;
        float: none;
        padding: 10px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        white-space: normal;
    }
    #content #content-fidex #sub-menu #navbar a {
        width: auto;
        height: 30px;
        float: none;
        margin: 0;
        text-align: center;
        padding: 0 0 0 45px;
        font-family: 'Octin Prison Bold', serif;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-position: center left;
        background-size: 35px;
        word-break: break-word;
    }


    #sub-menu {
        height: auto;
    }
    #sub-menu .topBarContainer.watchlistContainer {
        flex-direction: column-reverse;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget {
        display: flex;
        flex-direction: column-reverse;
        position: fixed;
        bottom: 111px;
        width: auto;
        background: transparent;
        transform: translate(-50%, 110%);
        visibility: hidden;
        left: 50%;
        height: auto;
        float: none;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        z-index: 101;
        transition: transform 0.5s ease-in-out;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget.noTransition {
        transition: none;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget.opened {
        visibility: visible;
        transform: translate(-50%);
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .widgetContainer {
        float: none;
        background: #28271f;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .widgetContainer.watchlistVotingContainer {
        border-bottom: 2px solid #171613;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .widgetContainer .widgetTitle {
        width: 88px;
        left: -32px;
        top: 32px;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .bossWidget.watchlistWidget .watchlistTitle {
        white-space: nowrap;
        padding: 0 6px;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .bossWidget.voteWidget .votingButtons {
        width: 100%;
        margin-right: 7px;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget {
        font-size: 11px;
    }
    #sub-menu .topBarContainer.watchlistContainer .headerWatchlistWidget .watchlistClose {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
        font-size: 13px;
        font-family: 'Octin Prison Bold', serif;
        border: 0;
        min-height: auto;
        line-height: 32px;
        height: 32px;
        padding-top: 1px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        color: #ACA590;
    }

    .mailTable input {
        width: 100%;
    }
    .mailTable tr td {
        display: block;
        clear: both;
        width: 100%;
    }
    .mailTable tr:first-child td:nth-child(1), .mailTable tr:first-child td:nth-child(2) {
        display: inline-block;
        width: auto;
    }
    .mailTable tr td:first-of-type {
        font-weight: bold;
    }

    .bossLoot {
        grid-template-columns: repeat(3, 1fr);
    }

    body.hourlymadness #news {
        padding-left: 8px;
    }
}

@media only screen and (max-width: 620px) {
    #responsive-header {
        background-size: 100%;
        font-size: 13px;
    }
    #responsive-header #responsive-logo img {
        height: 35px;
    }
    #responsive-header #responsive-logo .responsive-time {
        bottom: -6px;
    }
}

@media only screen and (max-width: 580px) {
    #responsive-sidebar .responsive-sidebar-links a {
        font-size: 13px;
        letter-spacing: -.5px;
    }
    #responsive-sidebar .responsive-sidebar-links a i {
        margin-bottom: 5px;
    }
    #content #content-fidex #sub-menu #navbar {
        padding: 6px 0;
        padding-right: 10px;
    }
    #content #content-fidex #sub-menu #navbar a {
        font-size: 13px;
        background-position: 10px;
    }
    table.statsTable tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-bottom: 0;
    }
    table.statsTable tr td:nth-child(1n) {
        width: 40%;
        box-sizing: border-box;
        font-weight: bold;
    }
    table.statsTable tr td:nth-child(2n) {
        width: 60%;
        padding-left: 5%;
        box-sizing: border-box;
        font-weight: normal;
    }
    .cityGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .itemGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .responsive-stats {
        font-size: 12px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .responsive-stats a {
        margin: 0;
    }
    .responsive-stats a:first-child {
        display: none;
    }
    .character img.avatarMobile {
        display: block;
    }
    .character .characterAvatar.avatarDesktop {
        display: none;
    }
    .character .characterContent {
        padding-left: 0;
        width: 100%;
    }
    .character .characterContent .speechBubble {
        margin: 0;
    }
    .character .characterContent .speechBubble:after {
        display: none;
    }
}

@media only screen and (max-width: 540px) {
    #responsive-header {
        background-size: 100%;
    }

    #responsive-header .responsive-profile {
        font-size: 12px;
        padding: 0 10px 0 5px;
    }

    #responsive-header #responsive-logo img {
        height: 30px;
    }

    #responsive-header #responsive-assets #responsive-money .asset-wrapper {
        display: flex;
        flex-direction: row;
    }

    #responsive-header #responsive-assets #responsive-money .long-money {
        display: none;
    }

    #responsive-header #responsive-assets #responsive-money .short-money {
        display: block;
    }

    #responsive-header .asset-wrapper {
        padding: 6px 8px 6px 16px;
        position: relative;
    }

    #responsive-header .asset-wrapper i {
        font-size: 22px;
        line-height: 16px;
        margin-right: 6px;
        position: absolute;
        color: white;
        left: 4px;
        z-index: -1;
    }

    #responsive-header #responsive-profile .username .gangTag {
        display: none;
    }

    table.cleanTable.eventsTable {
        margin-top: 0;
    }

    .eventsHeadingTable tr td:nth-child(1) {
        flex-basis: 20%;
    }

    .eventsHeadingTable tr td:nth-child(2), .eventsHeadingTable tr td:nth-child(3) {
        flex-basis: 25%;
    }

    .eventsHeadingTable tr td:nth-child(4) {
        flex-basis: 17%;
    }

    .eventsHeadingTable tr td:nth-child(4) input {
        width: 100%;
        padding: 0;
    }

    .paginator a.nextButton, .paginator a.prevButton {
        display: none;
    }

    .character-popup .character-popup-container .character-popup-content {
        padding-right: 26px;
    }
    .character-popup .character-popup-container .character-popup-content img.inline-character {
        display: block;
        float: left;
        width: 140px;
    }
    .character-popup.right-side .character-popup-container .character-popup-content img.inline-character {
        float: right;
        transform: scaleX(-1);
    }

    .character-popup .character-popup-container .character-popup-image {
        display: none;
    }
}

@media only screen and (max-width: 370px) {
    .character-popup .character-popup-container .character-popup-content img.inline-character {
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    #responsive-sidebar .responsive-sidebar-links a {
        font-size: 11px;
    }
    .itemGrid {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* Item Rarity Visual Indicators */
.rarity-green {
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.6), 0 0 20px rgba(76, 175, 80, 0.3) !important;
}

.rarity-blue {
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.6), 0 0 20px rgba(33, 150, 243, 0.3) !important;
}

.rarity-purple {
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.6), 0 0 20px rgba(156, 39, 176, 0.3) !important;
}

.rarity-gold {
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.6), 0 0 20px rgba(255, 193, 7, 0.3) !important;
}