:root {
  --game-background-color:    #1f1f1f;
  --primary-background-color: rgba(4, 46, 101, 0.75);
  --primary-text-color:       #ffffff;
  --primary-link-color:       #ffcc00;
  --primary-border-color:     #222222;
  --menu-background-color:    #000000;
  --menu-link-color:          #ffcc00;
  --row-even:                 #111111;
  --row-odd:                  #212121;
}

html {
  background:              var(--game-background-color);
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
}

body {
  min-width: 800px;
  max-width: 1000px;
  margin:    8px auto auto;
  font:      400 16px Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}

.userbar {
  background-color: #000000;
  border:           1px solid #444444;
  font-size:        12px;
  cursor:           pointer;
}

.userbar2 {
  background-color: #000000;
  border-left:      1px solid #444444;
  border-right:     1px solid #444444;
  border-bottom:    1px solid #444444;
  font-size:        12px;
}

input[type="text"], input[type="password"] {
  background-color: #1a1a1a;
  border:           1px solid #444444;
  color:            #ffffff;
}

input[type="text"]:hover, input[type="password"]:hover {
  background-color: #222222;
  border:           1px solid #555555;
  color:            #ffffff;
}

input[type="submit"] {
  background-color: #1a1a1a;
  border:           2px ridge #1a1a1a;
  color:            #ffffff;
}

input[type="submit"]:hover {
  background-color: #222222;
  border:           2px ridge #222222;
  color:            #ffffff;
}

textarea {
  background-color: #1a1a1a;
  border:           1px solid #444444;
  color:            #ffffff;
}

textarea:hover {
  background-color: #222222;
  border:           1px solid #555555;
  color:            #ffffff;
}

select {
  background-color: #1a1a1a;
  border:           1px solid #444444;
  color:            #ffffff;
}

a.popup {
  position: relative;
  z-index:  24;
}

a.popup:hover {
  z-index: 25;
  cursor:  pointer;
}

a.popup span {
  display: none;
}

a.popup:hover span {
  display:          block;
  position:         absolute;
  top:              2px;
  left:             80px;
  padding:          3px;
  width:            140px;
  border:           1px solid #333333;
  background-color: #111111;
  color:            #ffffff;
  text-align:       left;
  font-size:        11px;
}

.table {
  border-color: #444444;
  border-width: 0 0 1px 1px;
  border-style: solid;
}

.table th {
  background-color: #000000;
  border:           1px solid #222222;
  border-bottom:    0;
  padding:          5px;
  color:            #dddddd;
  font:             700 75% Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}

.table tr:nth-child(even) {
  background-color: #111111;
}

.table tr:nth-child(odd) {
  background-color: #212121;
}

.table td {
  border-left:  1px solid #222222;
  border-right: 1px solid #222222;
}

.top {
  width:            100%;
  margin:           0 auto;
  background-color: #222222;
  padding:          1px;
  color:            #888888;
  font-weight:      700;
  font-size:        10px;
  border:           #222222 solid thin;
}

.top a {
  text-decoration: none;
  color:           #888888;
}

.top a:hover {
  color:           #aaaaaa;
  text-decoration: none;
}

.content {
  width: 99.5%;
}

.contenthead {
  background-color: #000000;
  border:           1px solid var(--primary-background-color);
  padding:          5px;
  color:            #dddddd;
  font:             700 75% Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
  width:            165px;
  margin-left:      -1px;
  border-radius:    5px 5px 0 0;
}

.headbox {
  background-color: #000000;
  border:           1px solid #222222;
  padding:          5px;
  color:            #dddddd;
  display:          block;
  width:            164px;
  text-align:       left;
}

.contentcontent {
  background-color: #000000;
  border:           1px solid #222222;
  border-top:       0;
  padding:          6px;
  color:            #dddddd;
  font:             75% Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}

.contentspacer {
  padding: 3px;
}

.head, .headbox, a.leftmenu, a.topmenu {
  margin-left:     -1px;
  margin-top:      -2px;
  text-decoration: none;
  font:            700 70% Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
  font-size:       13px;
}

.mainbox, a.leftmenu:link, a.leftmenu:visited {
  background-color: #000000;
  border:           1px solid #222222;
  color:            #dddddd;
}

a.leftmenu:hover {
  background-color: #000000;
  color:            #ffffff;
  border:           1px solid #222222;
}

a.leftmenu:link, a.leftmenu:hover, a.leftmenu:visited {
  display:      block;
  border-style: solid;
  font-weight:  400;
  text-align:   left;
  border-width: 0 1px 1px;
  padding:      2px;
}

.space {
  margin-bottom: 5px;
}

.topbox {
  font-size:       12px;
  width:           100%;
  height:          150px;
  color:           #bbbbbb;
  background:      url(../images/mtbanner.png) no-repeat;
  background-size: 100% 100%;
}

@media (max-width: 1000px) {
  .resize {
    font-size: 90%;
  }

  .resizemobster {
    font-size: 75%;
  }
}

a {
  color:           #ffcc00;
  text-decoration: none;
}

a:hover {
  color: #ffff33;
}

.style1 {
  color: #bdbdbd;
}

.center {
  text-align: center;
}

.small {
  font-size: .8em;
}

#mttable {
  margin:           0 auto;
  background-color: var(--primary-background-color);
  text-align:       center;
  border-radius:    5px;
  padding:          3px;
}

#mttable th {
  background: rgba(0, 0, 0, .25);
  height:     15px;
  padding:    10px;
}

#mttable th:first-child {
  border-radius: 5px 0 0 5px;
}

#mttable th:last-child {
  border-radius: 0 5px 5px 0;
}

#mttable td:first-child {
  border-radius: 5px 0 0 5px;
}

#mttable td:last-child {
  border-radius: 0 5px 5px 0;
}

#mttable th:only-child {
  border-radius: 5px;
}

#mttable td:only-child {
  border-radius: 5px;
}

#mttable td {
  background: rgba(0, 0, 0, .125);
  height:     15px;
  padding:    10px;
}

.progress {
  width:              250px;
  max-width:          250px;
  padding:            4px;
  background:         rgba(0, 0, 0, 0.75);
  border-radius:      6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow:         inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px rgba(255, 255, 255, 0.08);
  margin:             0 auto 3px;
  overflow:           hidden;
}

.progress-bar {
  position:                    relative;
  max-width:                   250px;
  height:                      16px;
  border-radius:               4px;
  background:                  var(--primary-background-color);
  -webkit-transition:          .4s linear;
  -moz-transition:             .4s linear;
  -o-transition:               .4s linear;
  transition:                  .4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property:    width, background-color;
  -o-transition-property:      width, background-color;
  transition-property:         width, background-color;
  -webkit-box-shadow:          0 0 1px 1px rgba(0, 0, 0, 0.125), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow:                  0 0 1px 1px rgba(0, 0, 0, 0.125), inset 0 1px rgba(255, 255, 255, 0.1);
  white-space:                 nowrap;
  text-align:                  left;
  text-indent:                 2px;
  color:                       #ffffff;
}

.progress .progress-bar span {
  width:       55px;
  display:     inline-block;
  font-weight: 700;
  color:       var(--primary-link-color);
}

.progress-bar:before, .progress-bar:after {
  content:  "";
  position: absolute;
  top:      0;
  left:     0;
  right:    0;
}

.progress-bar:before {
  bottom:        0;
  background:    url(../images/stripes.png) 0 0 repeat;
  border-radius: 4px 4px 0 0;
}

.progress-bar:after {
  z-index:          2;
  bottom:           45%;
  border-radius:    4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

button {
  background-color: #1a1a1a;
  border:           2px ridge #1a1a1a;
  color:            #ffffff;
}

/* Achievements */
.achievements {
  display:    inline-block;
  overflow:   hidden;
  text-align: center;
  margin:     0 auto;
  width:      65px;
  height:     65px;
}

.achievement-level-25 {
  background-image: url("/cdn/images/achievements/level-25.png");
}

.achievement-level-100 {
  background-image: url("/cdn/images/achievements/level-100.png");
}

.achievement-level-300 {
  background-image: url("/cdn/images/achievements/level-300.png");
}

.achievement-level-500 {
  background-image: url("/cdn/images/achievements/level-500.png");
}

.achievement-crime-500 {
  background-image: url("/cdn/images/achievements/crimes-500.png");
}

.achievement-crime-1000 {
  background-image: url("/cdn/images/achievements/crimes-1000.png");
}

.achievement-crime-7500 {
  background-image: url("/cdn/images/achievements/crimes-7500.png");
}

.achievement-crime-15000 {
  background-image: url("/cdn/images/achievements/crimes-15000.png");
}

.achievement-crime-100000 {
  background-image: url("/cdn/images/achievements/crimes-100000.png");
}

.achievement-crime-500000 {
  background-image: url("/cdn/images/achievements/crimes-500000.png");
}

.achievement-crime-1000000 {
  background-image: url("/cdn/images/achievements/crimes-1000000.png");
}

.achievement-crime-5000000 {
  background-image: url("/cdn/images/achievements/crimes-5000000.png");
}

.achievement-battlew-500 {
  background-image: url("/cdn/images/achievements/battlew-500.png");
}

.achievement-battlew-2000 {
  background-image: url("/cdn/images/achievements/battlew-2000.png");
}

.achievement-battlew-10000 {
  background-image: url("/cdn/images/achievements/battlew-10000.png");
}

.achievement-battlew-25000 {
  background-image: url("/cdn/images/achievements/battlew-25000.png");
}

.achievement-battlel-500 {
  background-image: url("/cdn/images/achievements/battlel-500.png");
}

.achievement-battlel-2000 {
  background-image: url("/cdn/images/achievements/battlel-2000.png");
}

.achievement-battlel-10000 {
  background-image: url("/cdn/images/achievements/battlel-10000.png");
}

.achievement-battlel-25000 {
  background-image: url("/cdn/images/achievements/battlel-25000.png");
}

.achievement-bank-5000000 {
  background-image: url("/cdn/images/achievements/bank-5000000.png");
}

.achievement-bank-15000000 {
  background-image: url("/cdn/images/achievements/bank-15000000.png");
}

.achievement-bank-30000000 {
  background-image: url("/cdn/images/achievements/bank-30000000.png");
}

.achievement-bank-75000000 {
  background-image: url("/cdn/images/achievements/bank-75000000.png");
}

.achievement-missions-5 {
  background-image: url("/cdn/images/achievements/missions-5.png");
}

.achievement-missions-10 {
  background-image: url("/cdn/images/achievements/missions-10.png");
}

.achievement-missions-25 {
  background-image: url("/cdn/images/achievements/missions-25.png");
}

.achievement-missions-50 {
  background-image: url("/cdn/images/achievements/missions-50.png");
}

.achievement-missions-100 {
  background-image: url("/cdn/images/achievements/missions-100.png");
}

.achievement-missions-125 {
  background-image: url("/cdn/images/achievements/missions-125.png");
}

.achievement-missions-150 {
  background-image: url("/cdn/images/achievements/missions-150.png");
}

.achievement-missions-175 {
  background-image: url("/cdn/images/achievements/missions-175.png");
}

.achievement-missions-200 {
  background-image: url("/cdn/images/achievements/missions-200.png");
}

.achievement-missions-250 {
  background-image: url("/cdn/images/achievements/missions-250.png");
}

.achievement-missions-350 {
  background-image: url("/cdn/images/achievements/missions-350.png");
}

.achievement-missions-500 {
  background-image: url("/cdn/images/achievements/missions-500.png");
}

.green {
  color:       #00bb00;
  font-size:   9px;
  font-weight: 600;
}

.red {
  color:       #ff0000;
  font-size:   9px;
  font-weight: 600;
}

.rt {
  color:          #ffcc00;
  font-size:      8px;
  vertical-align: 3px;
  font-weight:    600;
}

.rt a {
  text-decoration: none;
  color:           #ffcc00;
}

.rt a:hover {
  color: #ffff00;
}

.new {
  color:      #f00f0f;
  font-style: italic;
}

/* ***** CITY ***** */
.city, .cityNot {
  collapse:         separate;
  border-spacing:   2px;
  display:          inline-block;
  text-align:       center;
  background-color: var(--primary-background-color);
  border-color:     #444444;
  border-width:     0 0 1px 1px;
  border-style:     solid;
  border-radius:    5px;
}

.cityHead, .citytop {
  background-color: var(--primary-background-color);
  border:           1px solid #222222;
  border-bottom:    0;
  padding:          5px;
  color:            #dddddd;
  font:             700 75% Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
  font-size:        14px;
  text-align:       center;
}

.city a {
  display: block;
  margin:  3px auto;
  padding: 1px 2px;
  width:   95%;
}

.city a:nth-child(even) {
  background-color: #111111;
}

.city a:nth-child(odd) {
  background-color: #212121;
}

.city a:hover:nth-child(even) {
  background-color: #212121;
}

.city a:hover:nth-child(odd) {
  background-color: #323232;
}

#crime, .crime {
  width:          24%;
  background:     #000000;
  display:        inline-block;
  margin:         3px .1%;
  border:         thin solid #222222;
  line-height:    20px;
  text-align:     center;
  border-radius:  5px;
  padding-bottom: 10px;
}

#crime .crime-name, .crime .crime-name {
  display:                 block;
  vertical-align:          top;
  width:                   100%;
  padding:                 3px 0;
  background-color:        var(--primary-background-color);
  border-top-left-radius:  5px;
  border-top-right-radius: 5px;
}

#crime .crime-cost, .crime .crime-cost {
  display: block;
  padding: 2px 0;
}

#crime .crime-action, .crime .crime-action {
  display: block;
}

#crime a, .crime a {
  display:     block;
  background:  rgba(0, 0, 0, .25);
  line-height: 25px;
  border-top:  thin solid #222222;
}

#crime a:hover, .crime a:hover {
  background: rgba(0, 0, 0, .5);
}

.success {
  background: #333333;
  color:      #ffcc00;
}

.error {
  background: #ed4747;
}

.info {
  background: #0099d2;
}

.warning {
  background: #fa8100;
}

.quote {
  color: #ffcc00;
}

.pagination {
  background:    #1c1c1c;
  padding:       20px;
  margin-bottom: 20px;
}

.page {
  display:         inline-block;
  padding:         0 9px;
  margin-right:    4px;
  border-radius:   3px;
  border:          solid 1px #000000;
  background:      #ffffff;
  box-shadow:      inset 0 1px 0 rgba(0, 0, 0, .8), 0 1px 3px rgba(255, 255, 255, .1);
  font-size:       .875em;
  font-weight:     700;
  text-decoration: none;
  color:           #000000;
  text-shadow:     0 1px 0 #ffffff;
}

.page:hover, .page.gradient:hover {
  background: #ffffff;
  background: -moz-linear-gradient(0% 0% 270deg, #fefefe, #f0f0f0);
}

.page.active {
  border:      none;
  background:  #616161;
  box-shadow:  inset 0 0 8px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .8);
  color:       #000000;
  text-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

.page.gradient {
  background: -moz-linear-gradient(0% 0% 270deg, #f8f8f8, #e9e9e9);
}

.small {
  font-size: 0.8em;
}

.quotemain {
  background:  #f9f9f9;
  border-left: 10px solid #cccccc;
  margin:      1.5em 10px;
  padding:     .5em 10px;
  quotes:      "\201C" "\201D" "\2018" "\2019";
  color:       #111111;
}

.quotemain:before {
  color:          #008000;
  content:        open-quote;
  font-size:      4em;
  line-height:    .1em;
  margin-right:   .25em;
  vertical-align: -.4em;
}

.quotemain p {
  display: inline;
}

.quotetop {
  display: none;
}

.wholescreen {
  background:      rgba(0, 0, 0, .75);
  border-spacing:  0;
  border-collapse: collapse;
}

.success, .error, .warning, .info {
  position:      relative;
  padding:       10px;
  margin:        0 0 10px 0;
  color:         #ffffff;
  border-radius: 4px;
}

.fdelete {
  position:      relative;
  padding:       0;
  margin:        0 0 10px 0;
  color:         #ffffff;
  border-radius: 10px;
}

p {
  margin: 5px 40px;

  i {
    position:    absolute;
    left:        0;
    top:         0;
    margin:      0 16px;
    font-size:   26px;
    line-height: 48px;
  }

  span {
    position:                absolute;
    top:                     0;
    right:                   0;
    height:                  100%;
    font-size:               20px;
    padding:                 0 16px;
    line-height:             48px;
    border-left:             1px solid rgba(255, 255, 255, 0.1);
    box-shadow:              -1px 0 0 0 rgba(0, 0, 0, 0.1);
    /* http://stackoverflow.com/a/4062032 */
    -webkit-background-clip: padding-box;
    /* for Safari */
    background-clip:         padding-box;

    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
      cursor:           pointer;
    }
  }
}

.menu {
  background-color: var(--menu-background-color);
  border-radius:    5px;
  display:          inline-block;
  border:           thin solid var(--primary-border-color);
  width:            175px;
  margin-bottom:    5px;
  padding:          2px;
}

.menu a {
  padding:         3px;
  margin:          3px 0;
  color:           var(--menu-link-color);
  background:      var(--row-even);
  display:         block;
  font-size:       12px;
  height:          17px;
  line-height:     17px;
  text-decoration: none;
  text-indent:     5px;
  border-bottom:   thin solid var(--primary-border-color);
}

.menu a:nth-child(odd) {
  background: var(--row-odd);
}

.menu .head {
  padding:          6px;
  color:            var(--primary-text-color);
  display:          block;
  font-size:        14px;
  height:           17px;
  line-height:      17px;
  text-decoration:  none;
  text-align:       center;
  border:           thin solid var(--primary-border-color);
  border-right:     0;
  background-color: var(--primary-background-color);
  border-radius:    5px 5px 0 0;
}

.menu a:before {
  content: " • ";
  color:   #ff0000;
}

.menu a:last-child {
  border: 0;
}

.menu a:hover {
  background: #222222;
}

.menu a:hover:nth-child(odd) {
  background: #323232;
}

.flexcont {
  display: flex;
}

.flexele {
  flex:       1;
  background: rgba(0, 0, 0, .25);
}

.flexelehead {
  height:      50px;
  line-height: 50px;
  font-size:   14px;
  background:  rgba(0, 0, 0, .25);
}

.flexelecontent {
  height:      100px;
  line-height: 100px;
  font-size:   66px;
  background:  rgba(0, 0, 0, .5);
}

.small {
  font-size: 0.8em;
}

.big {
  font-size: 1.3em;
}

.backdrop {
  font-size:     14px;
  background:    rgba(0, 0, 0, .25);
  border:        thin solid #303030;
  border-radius: 5px;
  padding:       10px;
  margin:        10px auto;
}

.flex_cont {
  display:     flex;
  align-items: center;
}

.flex_ele {
  flex:           1;
  padding-bottom: 7px;
}

.bottom-border {
  border:        0;
  border-bottom: thin solid #333333;
}

.right-border {
  border-right: thin solid #333333;
}

.avatar_image {
  max-width:  120px;
  max-height: 120px;
}

.backdrop span:hover {
  border-bottom: thin solid #bbbbbb;
}

.backdrop span {
  color: #bbbbbb;
}

.emojis-small {
  height: 18px;
  width:  18px;
}

.emojis-big {
  height: 64px;
  width:  64px;
}

.emojis-med {
  height: 32px;
  width:  32px;
}

.quote-backdrop {
  font-size:     14px;
  background:    rgba(0, 0, 0, .25);
  border:        thin solid #303030;
  border-radius: 5px;
  padding:       10px;
  margin:        10px auto;
  width:         90%;
}

.quote-backdrop .header {
  border-bottom:  thin solid #333333;
  padding-bottom: 8px;
}

.delete {
  background-color: #1a1a1a;
  border:           1px solid #444444;
}

.event_green {
  color:       #008000;
  font-weight: bold;
}

.event_red {
  color:       #ff0000;
  font-weight: bold;
}

.edit {
  display:    none;
  text-align: center;
}

#noti {
  background:    rgba(0, 0, 0, .25);
  width:         70%;
  border-radius: 10px;
  height:        35px;
  line-height:   35px;
  border:        thin solid #000000;
  text-align:    center;
}

.text-center {
  text-align: center;
}

.image-wrap img {
  display:    inline-block;
  max-width:  200px;
  max-height: 100px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-inline {
  display: inline;
}

.table-bg {
  background-color: var(--primary-background-color);
}

.w-100 {
  width: 100%;
}

.py-5 {
  padding-top:    5px;
  padding-bottom: 5px;
}

.gang-page-banner, .gang-list-banner {
  border:     none;
  max-width:  400px;
  max-height: 140px;
}

.menu-links {
  display:    none;
  height:     0;
  overflow:   hidden;
  transition: height 0.5s ease-in-out;
}

.is-visible {
  display: block;
  height:  auto;
}

.w-auto {
  width: auto;
}

.mt-2 {
  margin-top: 2px;
}

.mr-2, .me-2 {
  margin-right: 2px;
}

.mb-2 {
  margin-bottom: 2px;
}

.ml-2, .ms-2 {
  margin-left: 2px;
}

.mx-2 {
  margin-left:  2px;
  margin-right: 2px;
}

.my-2 {
  margin-top:    2px;
  margin-bottom: 2px;
}

.m-2 {
  margin: 2px;
}

.pt-2 {
  padding-top: 2px;
}

.pr-2, .pe-2 {
  padding-right: 2px;
}

.pb-2 {
  padding-bottom: 2px;
}

.pl-2, .ps-2 {
  padding-left: 2px;
}

.px-2 {
  padding-left:  2px;
  padding-right: 2px;
}

.py-2 {
  padding-top:    2px;
  padding-bottom: 2px;
}

.p-2 {
  padding: 2px;
}

.pet-thumb {
  width:  100px;
  height: 100px;
}

.d-flex {
  display: flex;
}

.row-wrap {
  flex-flow: row wrap;
}

.space-evenly {
  justify-content: space-evenly;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.align-content-center {
  align-content: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.f-right {
  float: right;
}

.v-top {
  vertical-align: top;
}

.image-username {
  width:  100px;
  height: 11px;
}

.py-1 {
  padding: 1em 0;
}

.py-2 {
  padding: 1em 0;
}