/* Classic board colors. The default does not follow the operating system.
   html[data-theme="dark"] switches to the dark preview below. The page does
   not set that attribute. --link and --visited are set only on pages that
   already chose a link color. --link-dark is the readable forum color. */

:root {
	--page: #ffffff;
	--text: #000000;
	--panel: #FFF5E3;
	--mini: #666666;
}

body {
	background-color: var(--page);
	color: var(--text);
}

a:link {
	color: var(--link);
}

a:visited {
	color: var(--visited);
}

td[bgcolor="#FFF5E3"],
td[bgcolor="#fff5e3"],
td[bgcolor="fff5e3"],
table[bgcolor="#FFF5E3"],
table[bgcolor="#fff5e3"],
table[bgcolor="fff5e3"] {
	background-color: var(--panel);
}

/* Dark preview. Active only while html has data-theme="dark".
   Classic values above stay in effect otherwise. */
html[data-theme="dark"] {
	color-scheme: dark;
	--page: #1b1d21;
	--text: #d8d9dd;
	--panel: #2e2b26;
	--visited: #d7a4d0;
	--mini: #b0b0b0;
	--link: var(--link-dark);
	--field: #2a2d33;
	--line: #5c616b;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] button {
	background-color: var(--field);
	color: var(--text);
	border-color: var(--line);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="image"],
html[data-theme="dark"] button[style*="background:transparent"],
html[data-theme="dark"] input[style*="background:transparent"] {
	background-color: transparent;
}

html[data-theme="dark"] tr[bgcolor="#ffffff"],
html[data-theme="dark"] tr[bgcolor="#FFFFFF"],
html[data-theme="dark"] td[bgcolor="#ffffff"],
html[data-theme="dark"] td[bgcolor="#FFFFFF"] {
	background-color: var(--page);
}

html[data-theme="dark"] font[color="#000000"],
html[data-theme="dark"] font[color="#000"] {
	color: var(--text);
}

html[data-theme="dark"] a[style*="color:#0000ff"] {
	color: #8ab4ff !important;
}

html[data-theme="dark"] a[style*="color: #000066"],
html[data-theme="dark"] a[style*="color:#000066"] {
	color: #a9bfff !important;
}

html[data-theme="dark"] a[style*="color: blue"] {
	color: #8ab4ff !important;
}

html[data-theme="dark"] button[style*="color:#0000ff"] {
	color: #8ab4ff !important;
}

html[data-theme="dark"] button[style*="color:#000000"] {
	color: var(--text) !important;
}

html[data-theme="dark"] .dropbtn {
	color: #a9bfff;
}

html[data-theme="dark"] .dropdown-content {
	background-color: var(--field);
}

html[data-theme="dark"] .dropdown-content a {
	color: var(--text);
}

html[data-theme="dark"] .dropdown-content a:hover {
	background-color: #3a3e46;
}

html[data-theme="dark"] span[style*="background:#fff"],
html[data-theme="dark"] #xoxo-search-panel {
	background: var(--field) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}

html[data-theme="dark"] #xoxo-search input,
html[data-theme="dark"] #xoxo-search select {
	color: var(--text);
}

html[data-theme="dark"] #xoxo-search input::placeholder {
	color: #9a9da3;
}

html[data-theme="dark"] .xoxo-invites {
	background: #243044;
	color: #c5d4f5;
}

html[data-theme="dark"] #xoxo-tip {
	background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .xoxo-tip-box {
	background: var(--page);
	color: var(--text);
	border-color: var(--line);
}

html[data-theme="dark"] .xoxo-tip-coin {
	background: var(--field);
	color: var(--text);
	border-color: var(--line);
}

html[data-theme="dark"] .rnv2 {
	color: var(--text);
	background-color: #4a4524;
}

html[data-theme="dark"] table[bgcolor="CCCC66"] {
	background-color: #3d3a22;
}