/* General Element Styles */
body {
  padding: 0;
  margin: 0;
  height: 100%;
  min-width: 600px;
  background-color: #000022;
  color: #fff;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

table,
thead,
tbody,
tr,
td {
  margin: 0;
  padding: 0; }

header .header-links-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.25em 0.5em; }

header .header-links-group div:last-child {
  display: flex;
  gap: 1em; }

header .header-links-network {
  background-color: #000022; }

header .header-links-elsewhere {
  background-color: #000022; }

header .title {
  background-image: url(/assets/bg_top-4c6c91b6264243d41b615924c584c192e73de99c31d068c7195f0a90e12d522a.jpg);
  border-bottom: 2px solid #af7a30;
  display: flex;
  height: 100px; }

header .title .title-left {
  display: grid;
  align-content: center;
  padding-left: 1em; }

header .title .title-right {
  display: flex;
  flex-grow: 1;
  flex-direction: row-reverse; }

header .title .title-right a {
  display: inline-block;
  padding: 0.25em 0.5em;
  border-radius: 0 0 5px 5px;
  font-weight: bold;
  font-size: 90%; }

header h1 {
  margin: 0;
  padding: 0;
  font-size: 40px; }

h1 a,
h2 a,
h3 a,
h4 a {
  text-decoration: none; }

h2.title {
  margin: 0 0 0 0; }

h3.subtitle {
  font-size: 75%;
  font-weight: normal;
  margin: 0 0 0.5rem 0; }

td.logo {
  width: 400px; }

#title {
  padding: 10px; }

#search {
  padding: 6px;
  background-color: black;
  border-bottom: 2px solid #af7a30; }

#search form {
  display: inline; }

#download {
  padding: 6px;
  background-color: black; }

#download-link {
  background-color: gold;
  color: #000022cf; }

main {
  display: grid;
  grid-template-columns: 155px auto; }

#nav {
  width: 150px;
  min-width: 150px;
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  border-right: 2px solid #af7a30; }

#nav input,
#nav select {
  max-width: 100%; }

#content {
  padding: 1em;
  background-color: #000022; }

#footer {
  font-size: 85%; }

form {
  margin: 0;
  padding: 3px; }

a {
  color: white; }

a:visited {
  color: white; }

span.block {
  display: block; }

span.title {
  font-size: 85%; }

table.char {
  width: 100%;
  font-size: 13px; }

td {
  vertical-align: top; }

table.char tbody td {
  padding: 2px 4px 2px 4px; }

table.char table.internal tbody td {
  padding: 0; }

table.char tbody.skills td.skill_icon {
  padding: 0px 0px 0px 4px; }

h2.title {
  margin: 0;
  color: gold; }

.character-header {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.character-header-server {
  font-variant: small-caps; }

.character-header-extra {
  display: flex;
  align-items: flex-start;
  justify-content: right;
  gap: 1em; }

.character-header-extra div {
  border: 1px solid #af7a30;
  background-color: #004000;
  border-radius: 3px; }

.character-header-extra div:hover {
  background-color: rgba(0, 64, 0, 0.8); }

.character-header-extra a {
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 0.25em 0.5em; }

#banner {
  background-color: gold;
  color: black;
  padding: 0.15em 0.25em;
  font-size: 90%;
  text-align: center; }

#links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px 5px;
  border-bottom: 2px solid #af7a30; }

#links:last-child {
  text-align: right; }

#links ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

#links li {
  display: inline-block;
  margin-right: 5px; }

header a {
  text-decoration: none;
  color: white; }

#nav a {
  text-decoration: none;
  color: #fff; }

#nav h2 {
  margin: 0;
  padding: 3px;
  font-size: 14px;
  background-color: #0f3c3e;
  background: linear-gradient(to right, #0f3c3e, #0f3c3e, black); }

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

#nav ul,
#nav form {
  margin-bottom: 0.5em; }

#nav ul li,
input.textsubmit {
  padding: 1px 3px;
  font-size: 14px; }

table.internal {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse; }

table.internal,
table.internal tr,
table.internal td,
table.internal span {
  margin: 0;
  padding: 0; }

.xplum {
  font-size: 85%; }

.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.twocol-onetwo {
  display: grid;
  grid-template-columns: 1fr 2fr; }

.xplum div:first-child {
  text-align: left; }

.xplum div:last-child {
  text-align: right; }

tr.line {
  border-bottom: 2px solid #af7a30; }

tr.colnames td {
  background-color: #222; }

td.level {
  width: 65px;
  border-left: 2px solid #af7a30;
  font-size: 85%; }

td.headerleft {
  background-color: #004000;
  background-color: rgba(0, 100, 0, 0.4); }

td.headerright {
  background-color: #000040;
  background-color: rgba(0, 0, 100, 0.4); }

table.char td.nameplate {
  padding: 0; }

tr.total-xp td span,
tr.xp-next-level td span {
  padding: 2px 4px; }

td.gold {
  color: gold; }

td.center {
  text-align: center; }

td.left {
  text-align: left; }

.right {
  text-align: right; }

td.vassal {
  font-size: 90%; }

td.skill_icon,
td.skill_name,
td.skill_base {
  padding: 0px; }

td.attribs_name {
  width: 150px; }

td.attribs_base {
  width: 90px; }

td.skill_icon {
  width: 10px; }

td.skill_name {
  width: 100px; }

td.skill_base {
  width: 50px; }

span.name {
  font-size: 110%; }

span.level {
  font-size: 200%;
  color: #fff27f;
  margin-top: 0; }

table.skills tbody td.specialized,
table.skills tbody td.trained {
  height: 20px; }

td.specialized {
  width: 300px;
  background-color: purple;
  background: linear-gradient(to right, #392067, #392067, black); }

td.trained {
  width: 300px;
  background-color: green;
  background: linear-gradient(to right, #0f3c3e, #0f3c3e, black); }

tbody.attributes span.title,
tbody.skills span.title {
  margin-bottom: 1em; }

span.creation {
  color: #ccc; }

div.last_updated {
  margin: 0 0 1.5em 0;
  padding: 0;
  font-size: 80%; }

div.last_updated,
div.last_updated a,
div.last_updated a:visited {
  color: #ccc; }

#chain {
  color: white;
  font-size: 14px; }

#tree svg {
  background-color: black;
  border: 2px solid #af7a30; }

span.overlaytext {
  margin: 5px;
  font-size: 11px;
  color: #ccc; }

.overlay {
  fill: none;
  pointer-events: all; }

.servergraph {
  float: left;
  margin-right: 1em; }

.current_title a {
  color: #00ff00; }

.title_list_item a {
  text-decoration: none; }

/* Tab functionality */
.tabcontainer {
  display: block;
  float: left;
  width: 320px;
  height: 400px;
  margin: 0 1.5em 3em 0; }

.tabcontainer.chain {
  width: 1002px;
  height: 660px; }

.tabcontainer.chain .box {
  overflow: visible;
  height: 660px;
  max-height: 660px; }

.tabbar {
  height: 30px; }

.box {
  background-color: black;
  color: white;
  border: 2px solid #af7a30;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto; }

.tab {
  float: left;
  display: block;
  padding: 5px 5px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  cursor: pointer; }

.tab.active {
  border-top: 2px solid #af7a30;
  border-right: 2px solid #af7a30;
  border-left: 2px solid #af7a30;
  border-bottom: none;
  background-color: #004000;
  background-color: rgba(0, 100, 0, 0.4); }

.tab.inactive {
  border-top: 2px solid #000022;
  border-right: 2px solid #000022;
  border-left: 2px solid #000022; }

.box.active {
  display: block; }

.box.inactive {
  display: none; }

.box > span {
  font-size: 85%;
  margin: 5px; }

.textsubmit {
  background: none;
  border: none;
  color: white;
  cursor: pointer; }

/* Listings */
table.listing {
  width: 600px; }

table.listing.auto {
  width: auto; }

table.listing thead tr {
  border-bottom: 2px solid #af7a30; }

table.listing th,
table.listing td {
  padding: 3px; }

table.listing th {
  background-color: #392067; }

/* Definition List Tables */
table.deflist {
  width: auto;
  margin: 0.5rem 0 1.5rem 0;
  border-left: 2px solid #af7a30; }

table.deflist td {
  padding: 3px 5px; }

table.deflist td:first-child {
  background-color: #0f3c3e; }

/* Dashboards */
#dashboards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em; }

table.dashboard {
  display: inline-table;
  min-width: 300px;
  max-width: 360px;
  font-size: 90%; }

table.wide {
  width: 350px; }

table.dashboard a {
  color: #f1f7cb; }

table.dashboard th,
table.dashboard td {
  padding: 5px 3px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden; }

table.dashboard thead th {
  border-bottom: 2px solid #89682b; }

.dashboard th:first-child,
.dashboard td:first-child,
.gold {
  color: gold; }

/* Account view */
table.account {
  width: auto; }

table.account td {
  padding: 0.5em; }

table.account td.field {
  min-width: 100px; }

/* Account fields */
form.account-fields {
  margin-bottom: 1.5em; }

table.account-fields {
  width: auto; }

table.account-fields th {
  background-color: #0f3c3e; }

table.account-fields thead tr {
  border-bottom: #af7a30 solid 2px; }

table.account-fields td {
  padding: 0.25em 0.25em; }

table.account-fields td.group {
  font-weight: bold;
  background-color: #0f3c3e; }

/* Tablesort CSS
   https://github.com/tristen/tablesort
*/
th[role="columnheader"]:not(.no-sort) {
  cursor: pointer; }

th[role="columnheader"]:not(.no-sort):after {
  content: "";
  float: right;
  margin-top: 7px;
  visibility: hidden;
  opacity: 0; }

th[aria-sort="ascending"]:not(.no-sort):after {
  border-bottom: none;
  border-width: 4px 4px 0; }

th[aria-sort]:not(.no-sort):after {
  visibility: visible;
  opacity: 0.4; }

th[role="columnheader"]:not(.no-sort):hover:after {
  visibility: visible;
  opacity: 1; }

/* Dashboard Stat Charts CSS */
.statchart {
  background-color: black; }

.statchart svg {
  font-size: 80%; }

.statchart .axis path,
.statchart .axis line {
  fill: none;
  stroke: #fff;
  shape-rendering: smoothEdges; }

.statchart .axis text {
  fill: #fff;
  shape-rendering: smoothEdges; }

.statchart .line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px; }

/* tags */
div.tag {
  display: inline-block;
  height: 20px; }

div.tag img {
  width: 15px;
  height: 15px; }

span.tag-level,
span.tag-attribute,
span.tag-skill {
  display: inline-block;
  padding: 2px 4px;
  font-family: monospace;
  font-size: 80%;
  text-align: center; }

span.tag-level {
  background-color: #0f3c3e;
  color: white; }

span.tag-attribute {
  background-color: #392067;
  color: white; }

span.tag-skill {
  padding: 2px 0px;
  vertical-align: middle;
  height: 17px;
  width: 17px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: 50% 50%;
  background-color: transparent; }

/* Tooltips */
.tippy {
  cursor: pointer;
  opacity: 0.75;
  padding: 0 0.25rem; }

.tippy:hover {
  opacity: 1; }

.notice {
  color: gold; }

pre {
  background-color: rgba(212, 212, 212, 0.2);
  padding: 0.5em; }

.pagination-controls {
  display: inline-flex;
  gap: 0.5em;
  background-color: rgba(220, 220, 220, 0.2);
  border-radius: 0.25em;
  padding: 0.25em 0.5em; }