:root {
  --bg-color: #3c3937;
  --text-color: #f0f0d0;
  --accent-color: #389c00;
  --panel-color: #1e1e1a;
  --table-border: #556b2f;
  --table-head-bg: #2c2c22;
  --error-color: #dd0000;
  --success-color: #00a000;
}

body,
td,
th {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Courier New", monospace;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

.bold {
  font-weight: bold;
}

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

.ta-c table {
  margin-left: auto;
  margin-right: auto;
}

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

.errorPage {
  background: #2c2c2c;
}

.error {
  color: var(--error-color);
}

div.mainError {
  text-align: center;
}

.rankingh1 {
  font-size: 150%;
  margin: 0;
}

.formh1 {
  border-bottom: 1px solid var(--accent-color);
  margin-bottom: 8px;
  font-size: 1.5em;
}

table.form th,
table.form td {
  text-align: left;
  padding: 2px 6px;
  white-space: nowrap;
}

td.color {
  text-align: center;
  font-size: 0.75em;
}

.deco,
.deco th,
.deco td {
  border: 1px solid var(--table-border);
}

.deco th,
.deco td {
  padding: 4px;
}

table.deco {
  border-collapse: collapse;
  margin-top: 1em;
}

table.deco th {
  background: var(--table-head-bg);
}

table.deco td {
  background: var(--panel-color);
}

.adminPage,
.adminPage td,
.adminPage th {
  background: var(--panel-color);
}

.adminPage div.ttl {
  font-weight: bold;
  color: var(--accent-color);
  border-bottom: 1px solid var(--accent-color);
  padding: 2px;
}

.adminPage p.err {
  color: var(--error-color);
}

.adminPage p.msg {
  color: var(--success-color);
}

.adminPage table.deco,
.adminPage table.deco th,
.adminPage table.deco td {
  border: 1px solid var(--accent-color);
}

.adminPage table.deco th,
.adminPage table.deco td {
  padding: 4px;
}

.adminPage table.deco {
  border-collapse: collapse;
  margin: 1em 0;
}

.adminPage table.deco th {
  background: var(--table-head-bg);
}

.adminPage table.deco td {
  background: var(--panel-color);
}

#adminMessageList {
  margin: 1em 0;
}

.adminMessageRow .message,
.messageRow,
.rankName,
#participantList {
  word-break: break-word;
}

hr {
  border-color: var(--accent-color);
}

#comment {
  max-width: 100%;
  width: calc(100% - 4em);
}

.emote,
.emojiImage {
  vertical-align: bottom;
}

.code {
  font-family: monospace;
}

.chatFormItem {
  display: inline-block;
  max-width: 100%;
}

.alert {
  color: var(--error-color);
}

#alert-notice-message {
  text-align: center;
}

/* Kuso dark mode font color hax */
*[style*="color:#000000"] {
  color: #cccccc !important;
}

*[style*="color:#000080"],
*[style*="color:#0000FF"]{
  color: #bbbbff !important;
}

*[style="color:#4444cc"] {
  color: #ddddff !important;
}

*[style*="color:#44cc44"] {
  color: #99ee99 !important;
}

*[style*="color:#cc9911"] {
  color: #eeee99 !important;
}

*[style*="color:#cc4444"] {
  color: #ee9999 !important;
}

*[style*="color:#cc6600"] {
  color: #ee9966 !important;
}

*[style*="color:#008040"] {
  color: #66dd99 !important;
}

*[style*="color:#33aaaa"] {
  color: #66eeee !important;
}

*[style*="color:#cc44cc"] {
  color: #ee99ee !important;
}

*[style*="color:#800000"] {
  color: #ee6666 !important;
}

*[style*="color:#4682b4"] {
  color: #ccddee !important;
}

*[style*="color:#b87333"] {
  color: #cc9966 !important;
}

*[style*="color:#FF80C0"] {
  color: #ee99cc !important;
}

*[style*="color:#DD0000"],
*[style*="color:red"],
*[style*="color:#ff0000"]{
  color: #ff9999 !important;
}