html {
  background: #ffffee;
  color: #4f2700;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a {
  text-decoration: none;
}

summary {
  cursor: pointer;
}

.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:#f0f0f0;
}

.error {
  color: #dd0000;
}

div.mainError {
  text-align: center;
}

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

.formh1 {
  border-bottom: 1px solid #ccc;
  margin-bottom: 8px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 1.5em;
}

table.form th {
  text-align: left;
  padding: 0;
  white-space: nowrap;
}

table.form td {
  padding: 0;
  white-space: nowrap;
}

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

.deco,
.deco th,
.deco td {
  border: 1px solid #2f0000;
}

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

table.deco {
  border-collapse: collapse;
  margin-top: 1em;
  max-width: 600px;
}

table.deco th {
  background: #ffb871;
}
table.deco td {
  background: #fff;
}

#adminPage {
  background: #f0f0f0;
}

.adminPage div.ttl {
  font-weight: bold;
  color: #004080;
  border-bottom: 1px solid #004080;
  padding: 2px;
}

.adminPage p.err {
  color: #dd0000;
}

.adminPage p.msg {
  color: #006400;
}

.adminPage table.deco,
.adminPage table.deco th,
.adminPage table.deco td {
  border: 1px solid #8080C0;
}

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

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

.adminPage table.deco th {
  background: #DCDCED;
}

.adminPage table.deco td {
  background:#fff;
}

#adminMessageList {
  margin: 1em 0;
}

.adminMessageRow .message {
  position: relative;
  word-break: break-word;
}

hr {
  border-color: rgba(0,0,0,0.33);
}

#comment {
  max-width: 100%;
}

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

#participantList {
  word-break: break-word;
}

.memberName {
  display: inline-block;
}

.messageRow {
  word-break: break-word;
  overflow: hidden;
}

.ownNameHighlightText  {
  background-color: #ffff00;
  color: #000000;
}

.rankName {
  word-break: break-word;
}

.code {
  font-family: monospace;
}

.fontSize1 {
	font-size: 0.625em;
}

.fontSize2 {
	font-size: 0.8125em;
}

.fontSize3 {
	font-size: 1em;
}

.fontSize4 {
	font-size: 1.125em;
}

.fontSize5 {
	font-size: 1.5em;
}

/* .fontSize6 {
	font-size: 2em;
}

.fontSize7 {
	font-size: 3em;
} */

.rabienrose {
	background-color: #ffe6f9;
	color: #78376d;
	font-family: serif;
	font-weight: bold;
}

.partybus {
	font-family: "Comic Sans MS", cursive;
	font-size: 1.5em;
	text-shadow: 0.0625em 0.0625em 0 #000000a8;
}

.partybusColor1 {
	color: #ff00ff;
}

.partybusColor2 {
	color: #ffff80;
	position: relative;
	bottom: 0.125em;
}

.partybusColor3 {
	color: #00ff80;
}

.partybusColor4 {
	color: #80ffff;
	position: relative;
	top: 0.125em;
}

.partybusColor5 {
	color: #8080ff;
}

.partybusColor6 {
	color: #ff0080;
}

.partybusColor7 {
	color: #ff8040;
	position: relative;
	bottom: 0.125em;
}

.partybusColor8 {
	color: #0080ff;
}

.boku {
	font-weight: bold;
}

.bokuGreen {
	color: #489b67;
}

.bokuRed {
	color: #d30615;
}

#formAdditionalSettings {
  font-size: 0.8125em;
}

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

.alert {
	color: #dd0000;
}

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

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

.red {
  color: #cc0000;
}

.black {
  color: #000000;
}

.quoteWrapper {
	display: none;
	margin-left: 0.25em;
  font-size: 0.8125em;
}

.quoteLink {
	cursor: pointer;
	text-decoration: underline;
}

body.quoteEnabled .messageRow:hover .quoteWrapper,
body.quoteEnabled .messageRow:focus-within .quoteWrapper {
	display: inline;
}

.coloredQuoteText {
	color: #999999;
}

body.messageColorsDisabled .messageName,
body.messageColorsDisabled .messageComment {
	color: inherit !important;
}

/* Ignore list */
.messageIgnored,
.messageIgnoredRule {
	display: none;
}

.ignoredStub {
	cursor: pointer;
	font-style: italic;
	opacity: 0.6;
}

/* Editor: hide the form's own content so the active skin shows behind it */
body.ignoreEditorOpen > form,
body.ignoreEditorOpen > #formLinkSection {
	display: none;
}

.ignoreModal {
	max-width: 32em;
	margin: 0 auto;
	padding: 1em;
}

.ignoreModalHeader {
	border-bottom: 1px solid;
	padding-bottom: 0.25em;
	margin-bottom: 0.5em;
}

.ignoreModalClose {
	float: right;
}

.ignoreModalSection {
	margin-top: 0.75em;
}

.ignoreModalSubhead {
	font-weight: bold;
	border-bottom: 1px solid;
	margin-bottom: 0.25em;
	opacity: 0.75;
}

.ignoreListEntries,
.ignoreRecentPosters {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 12em;
	overflow-y: auto;
}

.ignoreListEntries li,
.ignoreRecentPosters li {
	padding: 0.125em 0;
	word-break: break-word;
}

.ignoreEmptyNote {
	font-style: italic;
	opacity: 0.7;
}

@media screen and (max-device-width: 480px) {
  #participantList {
    overflow-x: auto;
  }
}