html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

body {
  line-height: 1
}

ol, ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

/* CORE COMPONENTS */

body {
  font: small Verdana, arial, sans-serif;
  font-weight: normal;
  color: rgb(44, 151, 250);
  width: auto;
  text-align: left;
  letter-spacing: 0;
  line-height: 1.3em;
  background: #1a1a1a;
}

p, .embedded {
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgb(22, 22, 22);
  line-height: 1.4em;
}

textarea, input {
  font-family: inherit;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 1px;
  margin: 0;
}

input[readonly] {
  background-color: rgb(200, 200, 200);
  color: rgb(38, 38, 38);
}

input[disabled='disabled'] {
  background-color: rgb(200, 200, 200);
  color: rgb(38, 38, 38);
}

input[type="submit"], button {
  font-size: 12px;
  padding: 1px 4px;
  cursor: pointer;
}

h1, h2, h3, h4 {
  margin-bottom: 10px;
  padding: 0 0 3px;
  border-bottom-color: #1166dd;
  border-bottom-style: dotted;
  border-bottom-width: 3px;
  /*font-weight: bold;*/
  line-height: 1.25em;
  font-size: 2.0em;
  background-repeat: no-repeat;
}

h4 {
  font-size: 1.5em;
  border-bottom-width: 0;
}

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

a img {
  border: 0;
}

a:visited {
  text-decoration: none;
}

a:hover {
  color: #eeeeff;
  text-decoration: none;
}

.text-link {
  color: #cc9900;
  text-decoration: none;
}

.text-link:hover {
  color: #eeeeff;
}

#fullcontainer {
  padding: 15px 20px;
  margin-bottom: 10px;
  display: block;
  border: 2px solid rgb(20, 20, 20);
  border-radius: 8px;
  align-self: start;
  grid-column: span 2;

  background: #1a1a1a; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2a2a', endColorstr='#1a1a1a'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#1a1a1a)); /* for webkit browsers */
  background: -moz-linear-gradient(top, #2a2a2a, #1a1a1a); /* for firefox 3.6+ */
}

#leftcontainer {
  padding: 15px 20px;
  margin-bottom: 10px;
  display: block;
  border: 2px solid rgb(20, 20, 20);
  border-radius: 8px;
  align-self: start;

  background: #1a1a1a; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2a2a', endColorstr='#1a1a1a'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#1a1a1a)); /* for webkit browsers */
  background: -moz-linear-gradient(top, #2a2a2a, #1a1a1a); /* for firefox 3.6+ */
}

#rightcontainer {
  padding: 15px 20px;
  margin-bottom: 10px;
  border: 2px solid rgb(20, 20, 20);
  border-radius: 10px;
  align-self: start;

  background: #1a1a1a; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a1a', endColorstr='#2a2a2a'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#1a1a1a), to(#2a2a2a)); /* for webkit browsers */
  background: -moz-linear-gradient(top, #1a1a1a, #2a2a2a); /* for firefox 3.6+ */
}

#rightcontainer h3 {
  font-size: 1.8em;
}

.d-flex {
  display: flex;
}

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

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

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

/* --------------- */
/* CORE COMPONENTS */
/* --------------- */

.login {
  min-width: 250px;
  max-width: 394px;
  float: right;
  right: 0;
  padding: 4px;
  margin: 15px 0 15px 15px;
  border-radius: 8px;
  border: 2px solid rgb(20, 20, 20);
  background-color: rgb(26, 26, 26);
  height: 85px; /*105-4-4-4-4-2-2*/
  font-size: small;
}

.login p {
  margin: 10px;
  padding: 0;
  background-color: rgb(26, 26, 26);
}

.logintable table {
  width: 20%;
  border-spacing: 2px;
}

.loginfieldscell {
  width: 100px;
}

.loginbuttoncell {
  width: 100px;
}

.themeselect-wrapper {
  display: block;
  color: rgb(44, 151, 250);
  margin-top: 25px;
}

.themeselect-wrapper #themeselect{
  margin-left: 15px;
}

.component {
  margin-bottom: 20px;
  overflow: hidden;
}

#activeplayersbox {
  min-height: 25.0em;
  height: 25.0em;
  max-height: 25.0em;
  overflow-y: auto;
}

#usercompletedgamescomponent {
  max-height: 30.0em;
  overflow-y: auto;
}

#devstatsscrollpane {
  max-height: 25.0em;
  overflow-y: auto;
}

span.news {
  padding: 6px 10px 10px;
  /*border-radius: 8px; */
  /*background-color: rgb(22,22,22);*/
  text-align: justify;
  line-height: 1.35em;
  font-size: small;
  display: block;
}

.rightfloat {
  float: right;
}

.newsimage {
  float: right;
  /*display: block;*/
  padding-left: 10px;
}

.newsauthor {
  float: right;
  display: block;
  clear: both;
  color: #59f;
  text-align: right;
}

.newstext {
  /*color: #59f;*/
  color: rgb(238, 238, 255);
}

.shadowoutline {
  text-shadow: -1px -1px 0 #000000,
  1px -1px 0 #000000,
  -1px 1px 0 #000000,
  1px 1px 0 #000000;
}

td, tr, img {
  vertical-align: middle;
}

#topborder {
  margin: auto;
  text-align: right;
  padding-right: 10px;
  padding-left: 300px;
  /*padding-bottom: 10px;*/
  /*padding-top: 10px;*/
  /*background-color: #1a1a1a; */
  max-width: 688px;
}

#mainpage {
  padding: 25px 0;
  width: 980px;
  max-width: 100%;
  position: relative;
  margin: 0 auto;
  min-height: 450px;
  display: grid;
  grid-template-columns: 625px 340px;
  grid-column-gap: 15px;
}

#mainpage > .both {
  grid-column: span 2;
}

#title {
  margin: auto;
  padding: 15px 0 25px 0;
  width: 980px;
  max-width: 100%;
  position: relative;
}

#logocontainer {
  float: left;
  margin: 15px;
}

#logo > img {
  width: 535px;
  max-width: 100%;
}

.videocontainer {
  width: 300px;
  margin: auto;
}

.progressbar {
  height: 6px;
  width: 124px;
  font-size: 0.9em;
  background-color: rgb(32, 32, 32);
  border: 0 solid rgb(12, 12, 12);
  float: right;
  text-align: center;
}

.completion {
  height: 6px;
  width: inherit;
  background-color: rgb(11, 113, 193);
}

.completionhardcore {
  height: 6px;
  width: inherit;
  background-color: rgb(204, 153, 0);
  border-top: 0 solid;
}

.progressbar.allusers {
  height: 4px;
  width: 160px;
  font-size: smaller;
  line-height: 1.2em;
  float: right;
  margin-right: 6px;
  margin-top: 3em;
}

.completion.allusers {
  height: 4px;
  width: inherit;
  background-color: rgb(11, 113, 193);
}

.completionhardcore.allusers {
  height: 4px;
  width: inherit;
}

.progressbar.completedgames {
  width: 104px;
}

.gamescreenshots td {
  text-align: center;
  padding: 4px;
}

#warning {
  line-height: 110%;
  font-size: 16px;
  margin-bottom: 4px;
  margin-top: 4px;
  color: #dd0000;
  background: #292929;
  padding: 3px;
}

#warning a {
}

#status {
  line-height: 110%;
  font-size: 16px;
  text-align: center;
  margin-bottom: 4px;
  margin-top: 4px;
  color: #e0e0e0;
  position: sticky;
  top: 4px;
  background: #666666;
  padding: 3px;
  border-radius: 4px;
}

#status.success {
  background: #009900;
}

#status.failure {
  background: #990000;
}

.footer-wrapper {
  background-color: #151515;
}

#footer {
  padding: 25px 15px;
  max-width: 980px;
  color: #3a3a3a;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 auto;
  border-top-style: solid;
  border-top-color: #0066cc;
  clear: both;
  box-sizing: border-box;
}

#footer h4 {
  margin-top: 0;
}

#footer > div {
  margin-bottom: 10px;
}

@media (min-width: 700px) {
  #footer-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  #footer-flex > div {
    margin: 0;
  }
}

.feed_login {
  color: #666666;
}

.feed_won {
  color: #993311;
}

.feed_won a {
  color: #CC8800;
}

.feed_won a:hover {
  color: #FFCC00;
}

.feed_won_hc {
  color: #EE3322;
}

.feed_won_hc a {
  color: #DDAA00;
}

.feed_won_hc a:hover {
  color: #FFFF00;
}

.feed_dev1 {
  color: #00FF00;
}

.feed_dev1 a {
  color: #00CC66;
}

.feed_dev1 a:hover {
  color: #66EEFF;
}

.feed_dev2 {
  color: #009900;
}

.feed_dev2 a {
  color: #00AA66;
}

.feed_dev2 a:hover {
  color: #44CCDD;
}

.feed_startplay {
  color: #8844DD;
}

.feed_startplay a {
  color: #C077FF;
}

.feed_startplay a:hover {
  color: #CC5588;
}

.feed_comment {
  color: #009900;
}

.feed_completegame {
  color: #EEEEEE;
}

.feed_completegame a {
  color: #77AAEE;
}

.feed_completegame a:hover {
  color: #00EEFF;
}

#feed tr.feed_login {
  background-color: #202020;
}

#feed tr.feed_won {
  background-color: #400000;
}

#feed tr.feed_won_hc {
  background-color: #500000;
}

#feed tr.feed_startplay {
  background-color: #331144;
}

#feed tr.feed_dev1 {
  background-color: #112244;
}

#feed tr.feed_dev2 {
  background-color: #111530;
}

#feed tr.feed_comment:not(.system) {
  background-color: #151515;
}

#feed tr.feed_comment.system {
  color: grey;
  font-size: 9px;
}

#feed tr.feed_completegame {
  background-color: #003366;
}

#feed tr.feed_submitrecord {
  background-color: #001F00;
  color: #259900;
}

#feed tr.feed_submitrecord a {
  color: #88CC00;
}

#feed tr.feed_submitrecord a:hover {
  color: #DDDD00;
}

#feed tr.feed_updaterecord {
  background-color: #001F00;
  color: #259900;
}

#feed tr.feed_updaterecord a {
  color: #88CC00;
}

#feed tr.feed_updaterecord a:hover {
  color: #DDDD00;
}

.feeditem {
  width: 99%;
}

#feed table {
}

#feed td {
  vertical-align: middle;
  word-break: break-word;
}

#feed td.date {
}

#feed td.datepadded {
}

#feed td.icons {
  width: 80px;
  padding: 2px;
}

#feed td.icons img {
  float: right;
}

#feed td.iconscomment {
  padding: 2px;
}

#feed td.iconscommentsingle {
  padding: 2px;
  vertical-align: top;
}

#feed td.iconscomment img {
  float: right;
}

#feed td.iconscommentsingle img {
  float: right;
}

/*---------------------------------------------------------------*/
/* FORUM */
/*---------------------------------------------------------------*/
#forums {
  font-size: small;
  line-height: 1.2em;
  max-width: 100vw;
}

#forums a {
  color: #cc9900;
}

#forums a:visited {
  color: #cc9900;
  margin-bottom: 0;
  text-decoration: none; /* Removes underline from links */
}

#forums a:hover {
  color: #eeeeff;
  margin-bottom: 0;
  text-decoration: none; /* Removes underline from links */
}

#forums td.forum {
  width: 70%;
}

#forums td.lastpost {
  width: 20%;
}

#forums div.lastpost {
  overflow: hidden;
  width: 105px;
}

#forums div.author {
  overflow: hidden;
  width: 120px;
}

#forums div.rightlink {
  text-align: right;
}

.forumlink {
  padding-left: 2px;
  cursor: pointer;
}

.forumlink img:hover {
  filter:  brightness(0) invert(1);
}

.forumlink img:active {
  filter:  brightness(1);
}

.highlight {
  outline: 1px solid;
}

#topicpreview {
}

.navpath {
  line-height: 100%;
  font-size: 12px;
  background-color: #000000;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  clear: both;
}

/* Remove visited link col from navpath */
.navpath a {
  color: #cc9900;
}

.navpath a:visited {
  color: #cc9900;
  margin-bottom: 0;
  text-decoration: none; /* Removes underline from links */
}

.navpath a:hover {
  color: #eeeeff;
  margin-bottom: 0;
  text-decoration: none; /* Removes underline from links */
}

#innermenu {
  max-width: 100%;
  width: 980px;
  position: relative;
  font-size: x-small;
  margin: auto;
  /*overflow:hidden; this breaks the dropdown! :S*/
  clear: both;
  background-color: #111;
}

#innermenu li.divider {
  border-bottom: 1px solid #999;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#innermenu > ul > li > a {
  display: block;
  text-decoration: none;
  color: #eee;
  /*font-weight:bold;*/
  font-size: 110%;
  /*width:72px;*/
  height: 42px;
  line-height: 37px;
  text-align: center;
  border-bottom: 0;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
}

#innermenu > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-left: 8px;
}

#innermenu > ul > li {
  float: left;
  position: relative;
  height: 22px;
  line-height: 20px;
}

#innermenu > ul > li {
  height: 42px; /* Only for main menu elements for mobile to make tap space */
}

#innermenu > ul > li > div {
  display: none;
  position: absolute;
  top: 42px;
  left: 0;
  margin: 0;
  z-index: 100;
}

#innermenu > ul > li > div > ul > li:last-child {
  margin-bottom: 4px;
}

#innermenu > ul > li:hover > a {
  color: #000;
  background-color: #bebebe;
}

#innermenu > ul > li:hover > div {
  background-color: #bebebe;
}

@media all and (max-width: 549px) {
  #innermenu > ul > li:hover > div {
    display: block;
  }
}
@media all and (min-width: 550px) {
  #innermenu > ul > li:hover > div {
    display: flex;
  }
}

#innermenu > ul > li:hover > div > ul {
  margin: 0;
  padding: 0;
}

#innermenu > ul > li:hover > div > ul:not(:last-child) {
  border-right: 1px solid #888;
}

#innermenu > ul > li:hover > div > ul > li > a.hassub {
  color: #fff;
}

#innermenu > ul > li:hover > div > ul > li:hover > a.hassub {
  color: #fff;
  font-style: italic;
}

#innermenu > ul > li:hover > div > ul > li > ul {
  display: none;
}

#innermenu > ul > li > a > img {
  position: relative;
  top: 4px;
  left: 2px
}

#innermenu > ul > li:hover > div > ul > li > a {
  display: block;
  color: #000;
  line-height: 1.4em;
  width: 150px;
  text-align: left;
  margin: 0;
  padding: 4px 12px;
}

#innermenu > ul > li:hover > div > ul {
  padding: 0;
}

#innermenu > ul > li:hover > a.nosub {
  /*background-image:url('/Images/center_nosub.png')*/
}

#innermenu > ul > li:hover > a {
  position: relative;
}

#innermenu > ul > li:hover > div > ul > .selected {
  background-image: url('/Images/sub_active.png');
  margin-right: 1px;
}

#innermenu > ul > li:hover > div > ul > li > a:hover {
  color: #fff;
  background: #333;
}

#innermenu > ul > li:hover > div > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 105px;
  top: 0;
}

.dropdown-header {
  padding: 0 12px;
  text-align: center;
  color: #888;
}

.searchbox {
  float: right;
  padding: 10px;
}

.searchbox.longer {
  width: 100%;
  float: inherit;
}

#searchboxinput .longer {
  width: 80%;
}

.searchbox-top {
  float: right;
  border-left: 15px solid #1a1a1a;
  display: flex;
  justify-content: space-between;
  width: 340px;
}

.searchbox-top .searchboxinput{
  border: none;
  padding: 10px;
  background-color: transparent;
  color: #FFF;
  height: 42px;
  width: 100%;
  vertical-align: top;
}

.searchbox-top input[type="submit"]{
  border: none;
  background-color: transparent;
  color: #FFF;
  padding: 5px 15px;
  height: 42px;
  font-size: 16px;
}

#feedcontainer {
  height: 220px;
  /*width: 300px;*/
  overflow-x: hidden;
  overflow-y: auto;
  vertical-align: middle;
}

.feedcell {
  vertical-align: middle;
}

.feedcelldate {
  font-size: x-small;
  color: rgb(140, 140, 140);
}

.feedcellmessage {
  vertical-align: middle;
  /*color: rgb( 76, 146, 235 );*/
  /*color: rgb( 165, 242, 243 );*/
  overflow: hidden;
  max-width: 200px;
}

*.bb_inline {
  display: inline;
}

.TrueRatio {
  color: rgb(210, 210, 210);
  font-size: 90%;
}

.sortbyselector {
  padding: 1em 0em;
}

.achievemententryicon {
  float: left;
  padding: 0 4px;
}

@media only screen and (max-width: 980px) {
  .searchbox-top {
    border-left: none;
    border-top: 15px solid #1a1a1a;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .searchbox-top .searchboxinput{
    width: 100%;
  }
}

/* Table properties */

table {
  width: 100%;
}

tbody tr:nth-child(odd) {
  background-color: #323232;
}

td {
  padding: 2px;
}

th {
  padding: 2px 4px;
  /*background-color: #323232;*/
  /*font-size: 120%;*/
  /*background-image: -webkit-linear-gradient(left, #1a1a1a, #323232);*/
  /*font-style: italic;*/
  /*text-transform: uppercase;*/
  color: #D5D5D5;
  border-bottom: 3px solid #323232;
  margin-bottom: 5px;
  /*border-right: 2px solid #1a1a1a;*/
}

.clickablebutton, .buttoncollection, .morebutton {
  border-radius: 4px;
  background: black;
  display: inline-block;
  line-height: 1em;
  padding: .4em .6em;
  cursor: pointer;
}

.morebutton {
  float: right;
}

.buttoncollection {
  margin-top: 4px;
  margin-bottom: 4px;
}

.clickablebutton a {
  display: block;
  text-decoration: none;
  /* padding: 0 8px; */
}

.mottocontainer {
  padding: 8px 0;
}

.usermotto {
  border: 1px solid grey;
  border-radius: 1em;
  background: white;
  color: black;
  font-style: italic;
  padding: 5px;
  display: inline-block;
}

/* Comparison page */
.awardremote {
  vertical-align: middle;
}

.comparecenter {
  max-width: 250px;
}

.awardlocal {
  vertical-align: middle;
}

/* Forum */

.comment-textarea {
  padding: 4px;
  flex-grow: 1;
}

.comment-textarea::placeholder {
  font-size: 1.1em;
}

.commentpayload {
  padding: 6px 4px;
  vertical-align: top;
  word-break: break-word;
}

.comment-submit-button {
  background: none;
  border: none;
}

.comment-loading-indicator {
  display: none;
  padding: 6px;
}

.form-error {
  color: rgb(222, 0, 0);
  display: none;
}

.smalltext {
  font-size: x-small;
  color: rgb(140, 140, 140);
  line-height: 1.05em;
}

.smalldate {
  font-size: x-small;
  color: rgb(140, 140, 140);
  line-height: 1.1em;
  width: 75px;
}
span.smalldate {
  display: inline-block;
}

#objtooltip, #objtooltip.td, .fixedtooltipcolleft, .fixedtooltipcolright {
  background: white;
}

/* Usercard */
.usercard {
  background: white;
  color: black;
}

.usercardavatar {
  background: white;
  width: 128px;
  height: 128px;
}

.usercardusername {
  background: white;
  color: black;
  font-size: 150%;
  text-align: left;
  font-weight: bold;
}

.usercardaccounttype {
  background: white;
  color: black;
  font-size: 125%;
  text-align: right;
  text-decoration: underline;
}

.usercardbasictext {
  background: white;
  color: black;
  text-align: left;
}

.devbox {
  padding: 4px 0;
  /* for rendering spoilers within shortcode */
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.devbox span {
  border-bottom: 1px dashed;
  cursor: pointer;
}

.devbox > div, .codetags {
  border-style: solid;
  border-width: 1px;
  padding: 8px 12px;
  /*
  for rendering code tag within shortcode
  and making sure that trailing submit buttons in devboxes do not overflow when floating on the right
  */
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.devbox > .spoiler {
  display: none;
  border-style: dashed;
  margin-top: 0;
}

.leftfloat {
  float: left;
}

.rightfloat {
  float: right;
}

.rightalign {
  /* text-align: right; */
  float: right;
}

.fullwidth {
  width: 100%;
}

b, strong {
  font-weight: bold;
  /*font-size: 1.3em;*/
}

i {
  font-style: italic;
}

pre, code, .code {
  font-family: monospace;
  font-size: medium;
  word-break: break-word;
  white-space: pre-wrap;
}

.awardcount {
  float: right;
  margin-right: 10px;
  font-size: 0.65em;
  cursor: help;
}

.awardcount > * {
  vertical-align: middle;
}

.awardcount > .icon {
  display: inline-block;
  text-align: center;
  color: rgb(210, 210, 210);
}

.component#siteawards .awardcount > .icon {
  width: 22px;
}

.component:not(#siteawards) .awardcount > .icon {
  width: 25px;
  font-size: 0.65em;
}

.badgeimg {
  border: 2px solid transparent;
  padding: 0;
}

.badgeimglarge {
  border: 2px solid transparent;
  padding: 0;
}

.goldimage {
  border: 2px solid gold;
  padding: 0;
}

.goldimagebig {
  border: 2px solid gold;
  padding: 0;
}

.injectinlineimage {
  max-width: 100%;
  max-height: 300px;
}

#WzBoDy {
  /* Popup */
  border-radius: 10px;
}

#WzBoDy tr {
  background: none;
}

#carouselpages {
  width: 240px;
}

.unreadmsgtitle {
  /* Inbox */
  font-weight: bold;
  border-bottom: dashed 1px;
}

.recentforumposts td {
  overflow: hidden;
  word-wrap: break-word;
}

.forumtitle, .topictitle {
  max-width: 7em;
  word-wrap: break-word;
}

.commentavatar {
  vertical-align: top;
  background-image: -webkit-linear-gradient(#1a1a1a, #323232, #1a1a1a);
  border-right: solid 4px #1a1a1a;
}

.topiccommentsheader {
  border-bottom: solid 4px #1a1a1a;
}

small {
  font-size: x-small;
}

span.softcore {
  color: rgb(140, 140, 140);
  font-size: 90%;
}

.pointer {
  cursor: pointer;
}

div.rating {
  cursor: pointer;
  display: block;
  float: left;
  clear: left;
}

div.rating a {
  background: url('/Images/star_empty.png') no-repeat 0 0;
  width: 32px;
  height: 32px;
  display: block;
  background-position: 0 0;
  float: left;
  overflow: hidden;
  text-indent: -999em;
  cursor: pointer;
}

div.rating a.starhalf {
  background: url('/Images/star_half.png') no-repeat 0 0;
}

div.rating a.starlit {
  background: url('/Images/star_full.png') no-repeat 0 0;
}


a.setRequestLabel {
  cursor: pointer;
}

/*.patron {*/
/*    text-align: center;*/
/*    height: 37px;*/
/*    max-height: 37px;*/
/*}*/

/* bootstrap 4 polyfills */

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.p-0 {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.p-1 {
  padding-top: .5rem !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  padding-bottom: .5rem !important;
}

.px-1 {
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}

.p-2 {
  padding-top: .75rem !important;
  padding-left: .75rem !important;
  padding-right: .75rem !important;
  padding-bottom: .75rem !important;
}

.p-3 {
  padding-top: 1rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 1rem !important;
}

.mb-1 {
  margin-bottom: .5rem !important;
}

.mb-2 {
  margin-bottom: .75rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.download-flex {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: start;
}

/* --- MOBILE STYLES --- */
@media only screen and (max-width: 980px) {
  #mainpage {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
  }

  #logocontainer {
    float: none;
    text-align: center;
  }

  .login {
    float: none;
  }

  #topborder {
    max-width: inherit;
    min-width: inherit;
    padding: 0;
    margin: 0;
  }

  .topiccommenttext {
    max-width: 21em;
    word-wrap: break-word;
    font-size: small;
  }

  .gamescreenshots td {
    display: inline-block;
  }

  #forums div.lastpost {
    width: auto;
  }

  .topiccommentsheader th, .commentavatar, .commentpayload, .table-wrapper .fullwidth, .table-forum-history th, .table-forum-history td {
    display: block;
	max-width:100%;
	box-sizing: border-box;
  }
  .commentavatar{
	padding: 10px 5px;
  }

  .download-flex {
    flex-direction: column;
  }
}

/* Stops pie chart tooltip flickering */
svg > g > g:last-child { pointer-events: none }

/* Style the tab */
.tab {
  overflow: hidden;
  margin-bottom: -1px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid rgb(44, 151, 250);
  float: left;
  border-radius: 5px 5px 0px 0px;
  outline: none;
  cursor: pointer;
  padding: 10px 8px;
  color: rgb(44, 151, 250);
  font-size: 100%;
}

/* Change background color of buttons on hover */
.tab button:hover {
  border: 1px solid rgb(80, 80, 80);
}

.tab button:hover:not(.active) {
  border-bottom: 1px solid rgb(44, 151, 250);
}

/* Create an active/current tablink class */
.tab button.active {
  border: 1px solid rgb(44, 151, 250);
  border-bottom: 1px solid #1F1F1F;
  background-color: #1F1F1F;
}

/* Style the friends tab content */
.tabcontentfriendstab  {
  display: none;
  padding: 2px 2px 25px;
  border: 1px solid rgb(44, 151, 250);
}

/* Style the global tab content */
.tabcontentglobaltab  {
  display: none;
  padding: 2px 2px 25px;
  border: 1px solid rgb(44, 151, 250);
}

/* Style the high scores tab content */
.tabcontenthighscores  {
  display: none;
  padding: 2px 2px 25px;
  border: 1px solid rgb(44, 151, 250);
}

/* Style the latest masters tab content */
.tabcontentlatestmasters  {
  display: none;
  padding: 2px 2px 2px;
  border: 1px solid rgb(44, 151, 250);
}

/* Style the scores tab content */
.tabcontentscores  {
  display: none;
  padding: 2px 2px 2px;
  border: 1px solid rgb(44, 151, 250);
}

.tabcontentscores td {
  padding: 2px 5px;
}

.tabcontentscores td.rank {
  width: 15%;
}

.tabcontentscores td.user {
  width: 55%;
}

.tabcontentscores td.lastaward, .tabcontentscores td.points {
  width: 30%;
}

.tabcontentscores td.user span:first-of-type {
  margin-right: 6px;
}

.tabcontentscores td.user span:nth-of-type(2) {
  display: inline-block;
  width: 0;
}

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

.tabcontentscores .lastaward {
  font-size: 0.85em;
}

/* More info buttons */
.info-button{
  display:block;
  border: 1px solid #111;
  border-radius: 5px;
  margin: 5px 0;
  padding: 7px 15px;
  background-color: #222;
}

.info-button:hover{
  background-color: #2a2a2a;
}

.info-button span{
  margin-right: 15px;
}

.ticket-block {
  display: inline-block;
  border: 1px #1166dd;
  border-radius: 5px;
  border-style: solid;
  min-height: 32px;
  padding-right: 5px;
}

.ticket-block.open {
  border-color: #28a745;
}

.ticket-block.closed {
  border-color: #dc3545;
}

.ticket-block .badgeimg {
  min-width: 32px;
  min-height: 32px;
  display: inline-block;
}

.ticket-block .ticket-displayable-block {
  display: inline-block;
  margin-left: 5px;
}

.ticket-tooltip-state {
  font-weight: bold;
  padding: 5px;
}

.ticket-tooltip-info {
  padding: 5px;
}

.ticket-tooltip-info.open .tooltip-closer,
.ticket-tooltip-info.closed .tooltip-opened-date {
  display: none;
}

.table-wrapper {
  max-width:100%;
  overflow-x:auto;
}

#active-players-filter-options {
  margin-top: 3px;
}

#active-players-menu-button::before {
  content: '☰';
}

#active-players-menu-button.menuOpen::before {
  content: '✕';
}

.modal {
  background-color: #1a1a1a;
}

.text-danger { color: red; }
.text-right { text-align: right; }