/* Fixes for PhpBB styling */

/* New Map Settings */
map-wrapper {
    display: inline-block;
    background: black;
    padding: 4px;
}

#map.map-container {
  position: relative; /* This enables child absolute positioning */
  display: grid;
  grid-template-columns: repeat(auto-fit, 24px);
  gap: 1px;
  background-color: #ddd;
  padding: 5px;
  justify-content: start;
  width: fit-content;
}

.tile, .coord {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 1px solid #999;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

.coord {
    background-color: black;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* Tooltip on hover */
.tile:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 3px 6px;
    font-size: 10px;
    white-space: nowrap;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

/* Overlay image on tile */
.tile img {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 5;
}

.overlay img {
  display: block;
}

/* Overlay text on tile */
.tile span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    z-index: 6;
    pointer-events: none;
}
/* End New Map Settings */

#regLink {
  color: #0A8ED0 !important;
}

#sitename {
  font-size: 2.4em;
  text-align: center;
}

.wrap {
    margin: 0;
    padding: 0 !important;
}
#site-description { width: 100%; }
.navbar {
    background-color: var(--dark) !important;
    color: #fff;
}
a.navbar:hover {
    background-color: var(--light) !important;
    color: #000;
}
.headerbar,
.forumbg,
.forabg {
    background-color: var(--dark) !important;
    background-image: none !important;
}

section.content {
    display: flex;
    grid-auto-flow: column dense;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    flex-wrap: wrap;
    align-content: start;
    align-items: start;
    box-sizing: border-box;
}

section.content > div {
    margin: 10px 30px;
    border: 8px solid var(--dark);
    background-color: var(--mid-light);
    padding: 0 30px;
    flex-basis: content;
}

section.content.centered { justify-content: center; }

section.content > * > h2 {
    text-align: center;
    margin: 0 auto;
}

.content h2 {
    font-size: 120%;
    border: none;
}

.content a { text-decoration: underline; }

.content p {
  font-size: 1em;
  line-height: 1.4em;
}

.fontArea, .llArea, .cadeArea, .portalArea, .wormArea, .corpseArea, .infusionArea, .moundArea, .lordArea, .charListArea,
.petListArea, .wendigoArea, .largeItemArea, .messageArea, .coeArea, .inviolateArea {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}


/*****************************************************************************/

/* CSS variables */

:root {
    --light: #F3F3F4;
    --mid-light: #E5E5E5;
    --mid-light-transparent: rgba(229, 229, 229, 0.9);
    --mid-dark: #C4C4C4;
    --dark: #58585A;
    --hp-light: #D8717B;
    --hp-dark: #CB414E;
    --hp-empty: var(--dark);
    --mp-light: #49A7DB;
    --mp-dark: #268AC1;
    --mp-empty: var(--dark);
    --mo-light: var(--light);
    --mo-dark: var(--dark);
    --mo-empty: var(--dark);
    --ap-light: #90A960;
    --ap-dark: #6F8448;
    --ap-empty: var(--dark);
    --cp-light: #DAB151;
    --cp-dark: #C4962A;
    --cp-empty: var(--dark);
    --primary: var(--dark);
    --primary-contrast: var(--light);
}

/* Basic styles */

html {
    background-color: var(--mid-dark);
    background-image: none !important;
    color: var(--dark);
    font-family: 'Lato', sans-serif;
    font-weight: lighter;
    margin: 0;
    max-height: 100vh;
    overflow: auto;
    padding: 0;
}

hr { color: var(--dark); }

td,
th { padding: 0.25em; }

th {
    font-size: 120%;
    font-weight: bold;
    text-align: left;
}

/* Header styles */

.triangle-wrap {
    height: 58px;
    width: 100%;
    position: absolute;
    overflow-y: hidden;
}
.triangle-tl {
    background-color: var(--dark);
    width: 150px;
    height: 280px;
    transform: rotate(33deg);
    position: absolute;
    left: -65px;
    top: -70px;
}

section.header.nc5 {
    position: relative;
    height: 58px;
    width: 100%;
    border-bottom: 4px solid var(--dark);
    background-color: var(--light)
}

section.header.nc5,
section.header.nc5 * {
    font-family: 'Lato', sans-serif !important;
    font-style: italic !important;
    font-weight: lighter !important;
    font-variant: none;
}

.nc5.header > h1,
.nc5.header > a > h1 {
    margin: 0;
    z-index: 3;
    position: absolute;
    font-size: 48px;
}

.nc5.header > h1 > span,
.nc5.header > a > h1 > span {
    color: var(--light);
    text-shadow:
        -1px -1px 0 var(--dark),
        1px -1px 0 var(--dark),
        -1px 1px 0 var(--dark),
        1px 1px 0 var(--dark);
}

/* Menu */

section.header.nc5 .toggle-mobile-menu { display: none; }

section.header.nc5 .menu-buttons > div:first-child { pointer-events: none; }

section.header.nc5 #menu-mobile { display: none; }

.nc5.header > .menu-buttons {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    left: 240px;
    margin: 0;
    padding-left: 10px;
    top: 0;
    right: 0;
    height: 57px;
    list-style: none;
    overflow: hidden;
}
.menu-buttons > * {
    display: inline-block;
    padding: 0 5px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 57px;
    height: 100%;
    text-decoration: none !important;
    color: var(--dark) !important;
    transition: 0.5s;
    font-size: 24px;
}
.menu-buttons > *:hover {
    color: var(--light) !important;
}
.menu-buttons > *:not(:first-child)::after {
    border-left: 5px solid var(--mid-light);
    background-color: var(--light);
    transition: 0.5s;
}
.menu-buttons > *:hover:not(:first-child)::after {
    border-left: 5px solid var(--dark);
    background-color: var(--dark);
}

.angled,
.menu-buttons > * {
    z-index: 1;
    position: relative;
}
.angled::after,
.menu-buttons > *::after {
    transform: skew(-33deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    z-index: -1;
}

/* Header/menu mobile */

@media only screen and (max-width: 800px) {
    section.header.nc5 .menu-buttons { display: none; }

    section.header.nc5 #menu-mobile:checked + .menu-buttons {
        top: 60px;
        display: flex;
        flex-wrap: wrap;
        z-index: 2;
        height: auto;
        position: absolute;
        left: 20%;
        overflow: hidden;
    }

    section.header.nc5 #menu-mobile:checked + .menu-buttons *::after {
        transform: none;
    }

    section.header.nc5 .toggle-mobile-menu {
        display: initial;
        float: right;
        height: 100%;
        vertical-align: middle;
        line-height: 60px;
        font-size: 32px;
        font-weight: lighter;
        cursor: pointer;
        color: var(--dark);
        transition: 0.5s;
        background-color: var(--light);
    }

    section.header.nc5 .toggle-mobile-menu:hover {
        color: var(--light);
        background-color: var(--dark);
    }

    section.header.nc5 .toggle-mobile-menu::after {
        left: -20%;
        transition: 0.5s;
        background-color: var(--light);
    }

    section.header.nc5 .toggle-mobile-menu:hover::after {
        background-color: var(--dark);
    }
}

/* Main */

#errorMsg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); border: 5px solid #FFFF00;
  padding: 10px; border: solid red 5px;
  padding: 10px;
  background-color: rgb(255,255,255);
  text-align: justify;
  font-size: 14px;
  width: 50%;
  visibility: visible;
  z-index: 1;
}

.content {
    overflow: visible;
    max-width: 1200px;
    margin: 0 auto;
}

#main {
    display: flex;
    flex-direction: row;
    overflow: visible;
}

#main-right,
#main-left {
    display: flex;
    flex-direction: column;
    margin: 0 .25em;
    padding: 0;
}

#main-left {
    width: 65%;
    min-width: 480px;
}
#main-left .panetitle { cursor: pointer; }
#main-left .panetitle label {
    color: inherit;
    cursor: pointer;
}
#main-left .panetitle + table { width: auto; }
#main-left .panetitle + table td { display: inline-block; }

/* Right sidebar */

#main-right {
    background-color: #fff;
    min-width: 350px;
    overflow: visible;
    padding: .25em;
    width: 35%;
}

#sidebar-menu { text-align: center; }
#sidebar-menu td { display: inline-block; }

#main-right table { width: 100%; }
#main-right td { padding: 0.1em; }

#main-right form[name="sidebar"] input[type="submit"],
#inventory input[type="submit"],
#main-right textarea {
    width: 100%;
}

/* Alchemy recipes */

#recipe-tracker ~ tr th { font-size: 1em; }
#recipe-tracker ~ tr:nth-child(2n) { background-color: var(--mid-light); }
#recipe-tracker ~ tr th input { width: 2em; }
ul.recipe-checklist {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.recipe-checklist li { display: flex; }
ul.recipe-checklist li::before {
    border: 2px solid var(--dark);
    background-color: #fff;
    margin: 0 1px 1px 0;
    height: 1em;
    min-width: 1em;
    width: calc(100% / 6);
    content: ' ';
}
ul.recipe-checklist li.missing::before { background-color: #999; }
ul.recipe-checklist li.inventory::before { background-color: #000; }
ul.recipe-checklist li span { display: none; }

ul.recipe-checklist li.uncommon::before { border: 2px solid #090 }
ul.recipe-checklist li.rare::before { border: 2px solid #707 }

ul.recipe-checklist.toggled { flex-direction: column; }
ul.recipe-checklist.toggled li::before { width: 1em; }
ul.recipe-checklist.toggled li span { display: inline; }

#adminpanel {
  margin: 1em;
}

/* Character stats */

#CharacterInfo { margin-bottom: .75em; }
#CharacterInfo table:first-of-type { margin-top: .5em; }

.flex-wrapper {
	display: flex;
	flex-flow: row nowrap;
}

.single-chart {
	height: 50px;
	width: 50px;
	justify-content: space-around ;
}

.circular-chart {
	display: block;
	margin: 0px auto;
	max-width: 100%;
	max-height: 100%;
}

.circle-bg {
	fill: none;
	stroke: var(--mid-dark);
	stroke-width: 3.8;
}

.circle {
	fill: none;
	stroke-width: 2.8;
	stroke-linecap: round;
}

.circular-chart.red .circle { stroke: red; }
.circular-chart.green .circle { stroke: #4CC790; }
.circular-chart.blue .circle { stroke: #3c9ee5; }
.circular-chart.black .circle { stroke: black; }

.percentage {
	fill: var(--dark);
	font-family: sans-serif;
	font-size: 0.7em;
	font-weight: bold;
	text-anchor: middle;
}

/* Stat bar colors */

.hp-light { stop-color: var(--hp-light); }
.hp-dark { stop-color: var(--hp-dark); }
.mp-light { stop-color: var(--mp-light); }
.mp-dark { stop-color: var(--mp-dark); }
.mo-light { stop-color: var(--mo-light); }
.mo-dark { stop-color: var(--mo-dark); }
.good .mo-dark { stop-color: var(--mid-dark); }
.ap-light { stop-color: var(--ap-light); }
.ap-dark { stop-color: var(--ap-dark); }
.cp-light { stop-color: var(--cp-light); }
.cp-dark { stop-color: var(--cp-dark); }

.hp-empty,
.mp-empty,
.mo-empty,
.ap-empty,
.cp-empty {
    stop-color: var(--dark);
}

/* Stat bars on character connection screen */

.stat-bar {
	background-repeat: no-repeat;
	background-position: left top;
    padding: 0.5em;
	text-align: center;
    width: auto;
}
.stat-bar.full {
	font-weight: bold;
}
.stat-bar.empty {
	color: #900;
	font-weight: bold;
}
.stat-bar.ap {
	background-image: url(/images/g/ap-bar.png);
}
.stat-bar.hp {
	background-image: url(/images/g/hp-bar.png);
}
.stat-bar.mp {
	background-image: url(/images/g/mp-bar.png);
}

/* Map */

#Map {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.Table{
	margin: auto;
	display: table;
	border-spacing: 0;
    height: 300px;
	width: 300px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
}
.TableRow { display: table-row; }
.TableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.TableCell,
.TableHead {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	padding: 0;
}
.TableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.TableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.TableBody { display: table-row-group; }

.TableCell .base {
	position: relative;
	top: 0;
	left: 0;
}
.TableCell .overlay {
	position: absolute;
	top: 0;
	left: 0;
}
#Map .TableCell {
    border: 1px outset #000;
    border-width: 0 1px 1px 0
}

#Map input.Move {
    opacity: 0.4;
}
#Map .TableCell:hover input.Move {
    opacity: 1;
}

/* Panes */

.panetitle {
    background-color: var(--dark);
    color: var(--light);
    font-size: 1.1em;
    padding: .25em .5em;
}
*:not(#CharacterInfo) + .panetitle {
    border-bottom: 1px solid var(--mid-dark);
}

.panecontent { margin: .5em; }

.panecontent.pane_messages {
    height: 100px;
    margin: 0;
    background-color: var(--light);
    resize: vertical;
    overflow: overlay;
    display: flex;
}

#Messages {
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column; /* Default: oldest at top, newest at bottom */
}

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

#Messages.newest-top {
    flex-direction: column-reverse; /* reverses order: newest at top */
    justify-content: flex-start; /* aligns to top */
}

.panecontent .message {
    margin-bottom: 1px;
}

.panecontent .message:before {
    margin-right: 3px;
    margin-left: 3px;
}

.panecontent > form {
    margin: 0 .5em .5em 0;
    -webkit-margin-collapse: collapse;
}

.panetitle input[type="image"] {
    float: right;
    margin-top: 3px;
}

.panetitle.paneclosed + .panecontent { display: none; }

/* Panes misc. */

span.superheavy {
    color: blue;
    text-decoration: underline;
}

/* Alchemy components */

option.alchemy-common {
    background-color: #ccc;
}
option.alchemy-uncommon {
    background-color: #090;
    color: #fff;
}
option.alchemy-rare {
    background-color: #707;
    color: #fff;
}

span.alchemy-common {
    font-weight: bold;
}
span.alchemy-uncommon {
    font-weight: bold;
    color: #090;
}
span.alchemy-rare {
    font-weight: bold;
    color: #707;
}

/* Character links */

a.faction,
a.ally,
a.friendly,
a.neutral,
a.hostile {
    text-decoration: underline;
}
a.faction { color: #7f00ff; }
a.ally { color: #00c600; }
a.friendly { color: #00c5c5; }
a.neutral { color: var(--dark); }
a.hostile { color: #c30303; }
a.enemy { color: #000000 }

/* Inventory */

input.item_use,
input.item_drop {
    border: 1px outset #000;
    color: #000;
    text-decoration: none;
    padding: 1px;
}
input.item_use { background: #ccc; }
input.item_use:hover {
    background: #339;
    color: #fff;
}
input.item_use[value^="Charge"]:hover {
    background: #819;
}
input.item_use[value^="Remove"]:hover {
    background: #b40;
}
input.item_use[value^="Wear"]:hover {
    background: #090;
}
input.item_drop {
    background: #ccc;
    color: #900;
}
input.item_drop:hover,
input.item_use[value^="Learn"]:hover {
    background: #900;
    color: #fff;
}

/* Edit Faction */
.popup-overlay {
  /*Hides pop-up when there is no "active" class*/
  visibility: hidden;
  position: absolute;
  background: #ffffff;
  border: 3px solid #666666;
  width: 50%;
  height: auto;
  top: 10%;
  left: 25%;
}

.popup-overlay.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
  text-align: center;
}

.popup-content {
  /*Hides pop-up content when there is no "active" class */
  visibility: hidden;
}

.popup-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility: visible;
}

#open_perms_button,#close_perms_button {
  display: inline-block;
  vertical-align: middle;
  border-radius: 30px;
  margin: .20rem;
  font-size: 1rem;
  color: #666666;
  background: #ffffff;
  border: 1px solid #666666;
  padding: 3px;
}

#open_perms_button:hover, #close_perms_button:hover {
  border: 1px solid #666666;
  background: #666666;
  color: #ffffff;
}

/* Credit Store */
.subbuttonwarn {
  background-color: #c70000;
  border-radius: 9px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 20px;
  line-height: 10px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 5px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.subbuttonwarn:hover,
.subbuttonwarn:focus {
  background-color: #990606;
}

.subbutton {
  background-color: #d6d6d6;
  border-radius: 9px;
  border-style: none;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 20px;
  line-height: 10px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 5px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.subbutton:hover,
.subbutton:focus {
  background-color: #7f7f7f;
}

/* Class avatar styles for character pages */

.avatar-advocate, .avatar-archon, .avatar-conduit, .avatar-corruptor, .avatar-darkoppressor, .avatar-defiler,
.avatar-exaltedharbinger, .avatar-doomhowler, .avatar-eternalsoldier, .avatar-holychampion, .avatar-infernalbehemoth,
.avatar-lich, .avatar-lightspeaker, .avatar-myrmidon, .avatar-nexuschampion, .avatar-paladin, .avatar-pariah, .avatar-revenant,
.avatar-seraph, .avatar-shepherd, .avatar-sorcerer, .avatar-voidwalker, .avatar-wizard, .avatar-wyrmmaster, .avatar-mortal, .avatar-elementalist,
.avatar-redeemed, .avatar-fallen
{
  max-height: 200px;
  max-width: 200px;
}

.avatar-conduit path, .avatar-eternalsoldier path, .avatar-lich path, .avatar-myrmidon path, .avatar-nexuschampion path, .avatar-revenant path, .avatar-sorcerer path,
.avatar-wizard path, .avatar-elementalist path
{
  fill: goldenrod;
}

.avatar-advocate path, .avatar-archon path, .avatar-exaltedharbinger path, .avatar-holychampion path, .avatar-lightspeaker path,
.avatar-paladin path, .avatar-seraph path, .avatar-shepherd path, .avatar-redeemed path
{
  fill: deepskyblue;
}

.avatar-corruptor path, .avatar-darkoppressor path, .avatar-defiler path, .avatar-doomhowler path, .avatar-infernalbehemoth path, .avatar-pariah path,
.avatar-voidwalker path, .avatar-wyrmmaster path, .avatar-fallen path
{
  fill: darkred;
}


/* Class icon avatar SVG style - in the main UI */

.avatar-icon-advocate, .avatar-icon-archon, .avatar-icon-conduit, .avatar-icon-corruptor, .avatar-icon-darkoppressor, .avatar-icon-defiler,
.avatar-icon-exaltedharbinger, .avatar-icon-doomhowler, .avatar-icon-eternalsoldier, .avatar-icon-holychampion, .avatar-icon-infernalbehemoth,
.avatar-icon-lich, .avatar-icon-lightspeaker, .avatar-icon-myrmidon, .avatar-icon-nexuschampion, .avatar-icon-paladin, .avatar-icon-pariah, .avatar-icon-revenant,
.avatar-icon-seraph, .avatar-icon-shepherd, .avatar-icon-sorcerer, .avatar-icon-voidwalker, .avatar-icon-wizard, .avatar-icon-wyrmmaster, .avatar-icon-mortal,
.avatar-icon-elementalist, .avatar-icon-redeemed, .avatar-icon-fallen
{
  max-height: 50px;
  max-width: 50px;
}

.avatar-icon-conduit path, .avatar-icon-eternalsoldier path, .avatar-icon-lich path, .avatar-icon-myrmidon path, .avatar-icon-nexuschampion path, .avatar-icon-revenant path, .avatar-icon-sorcerer path,
.avatar-icon-wizard path, .avatar-icon-elementalist path
{
  fill: goldenrod;
}

.avatar-icon-advocate path, .avatar-icon-archon path, .avatar-icon-exaltedharbinger path, .avatar-icon-holychampion path, .avatar-icon-lightspeaker path,
.avatar-icon-paladin path, .avatar-icon-seraph path, .avatar-icon-shepherd path, .avatar-icon-redeemed path
{
  fill: deepskyblue;
}

.avatar-icon-corruptor path, .avatar-icon-darkoppressor path, .avatar-icon-defiler path, .avatar-icon-doomhowler path, .avatar-icon-infernalbehemoth path, .avatar-icon-pariah path,
.avatar-icon-voidwalker path, .avatar-icon-wyrmmaster path, .avatar-icon-darkoppressor polygon, .avatar-icon-fallen path
{
  fill: darkred;
}

/* Sorry haliphax... - plscks */
/* Wiki update button */

.clr-alpha {
  display: none !important;
}

.clear_color {
  box-shadow:inset 0px 1px 0px 0px #f5978e;
  background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
  background-color:#f24537;
  border-radius:6px;
  border:1px solid #d02718;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-size:13px;
  font-weight:bold;
  padding:3px 5px;
  text-decoration:none;
  text-shadow:0px 1px 0px #810e05;
}

.clear_color:hover {
  background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
  background-color:#c62d1f;
}
.clear_color:active {
  position:relative;
  top:1px;
}

table.newspaper, table.leaderboard {
  color: #000000 !important;
}

#wikiButton {
  border: 2px #000000 solid;
  border-radius: 6px;
  padding: 3px 4px 2px;
  margin: 2px;
  font-weight: bold;
}

#wikiButton:hover {
  border: 2px #1fdb1f solid;
  border-radius: 6px;
  padding: 3px 4px 2px;
  margin: 2px;
  font-weight: bold;
}

table.faction_badge_table th {
  text-align: center;
}

.importButtonView {
  padding: 2px;
  margin: 2px;
}

.importMessage {
  align-content: center;
  color: #8B0000;
  text-align: center;
}

.accountImport {
  align-content: center;
}

.accountImport .container {
  padding: 4px;
  margin: 2px;
}

.access_log {
  color: #8B0000;
}

#extrainfocontainer {
  display: grid;
}

.petTable {
  text-align: center;
  width: 300px;
  border: 1px solid #000000
}

.summonsButtons {
  border-collapse: separate;
  border-spacing: 1px;
}

.petTitle {
  padding-top: 10px;
  border-bottom: 1px solid #0000004d;
}

.pbgt, .pbgt th {
  text-align: center
}

.errorMsg h2 {
  text-align: center;
  color: #FF0000;
}

.nexusTips {
  color: #0000ff;
}

.faction_quit {
  color: #FF0000;
  text-align: center;
}

/* text effects and animations, webkit only -N */

.rbc {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff6464), color-stop(0.18, #ffc896), color-stop(0.32, #ffff96), color-stop(0.48, #96ff96), color-stop(0.64, #96ffff),color-stop(0.82, #64c8ff), color-stop(1, #e1afe1) );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ultraviolet { -webkit-animation: ultraviolet 7s infinite; }
@-webkit-keyframes ultraviolet{
  0%{color: black;}
  45%{color: black;}
  50%{color: #4800ff;}
  70%{color: black;} }

.rapture { -webkit-animation: rapture 6s infinite; }
@-webkit-keyframes rapture{
  0%{color: #edc500;}
  40%{color: #fad200;}
  100%{color: #edc500;} }

.tainted { -webkit-animation: tainted 10s infinite; }
@-webkit-keyframes tainted{
  0%{color: #5e5e5e;}
  20%{color: #5e5e5e;}
  50%{color: #954F4F;}
  80%{color: #5e5e5e;}
  100%{color: #5e5e5e;} }

.chromatic {
    color: #000000;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: chromatic 3s infinite linear; }
@-webkit-keyframes chromatic {
    from { -webkit-filter: hue-rotate(0deg); }
    to { -webkit-filter: hue-rotate(360deg); } }

.chimeric {
    color: #000000;
    background: -webkit-linear-gradient( 92deg, #95d7e3, #eb76ff );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: chimeric 3s infinite linear alternate; }
@-webkit-keyframes chimeric {
  from { filter: hue-rotate(0deg); background-position-x: 0%; }
  to { filter: hue-rotate(360deg); background-position-x: 600vw; } }

.candle-text {
  color: rgba(145, 163, 176, 0.8); /* Blue tint color */
  animation: flicker 5s infinite alternate;
}

.vine-text {
	color: darkgreen;
	font-weight: 900;
	font-size: 1.1em;
}

@keyframes flicker {
  0%, 50%, 100% {
    opacity: 1;
    text-shadow: 0 0 1px rgba(100, 150, 255, 0.8),
                 0 0 5px rgba(100, 150, 255, 0.6),
                 0 0 15px rgba(100, 150, 255, 0.4);
  }
  10%, 60%, 75% {
    opacity: 0.2;
    text-shadow: none;
  }
}

.bullet-holes {
	color: #000000;
}

.shifting-ink {
  color: black;
  animation: 
    flicker-ink 10s infinite alternate;
}

@keyframes flicker-ink {
  0%, 50%, 100% {
	  opacity: 1;
	  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8),
				   0 0 2px rgba(0, 0, 0, 0.6),
				   0 0 3px rgba(0, 0, 0, 0.4);
  }
  20%, 24%, 55% {
	  opacity: 0.7;
  }
}

.arcane-glyphs {
	color: purple;
	text-shadow: 0px 0px 5px purple;
}

.old-text {
  font-family: "Garamond", serif;
  color: #5E3B22;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Class change background art */

.bg-Advocate, .bg-Archon, .bg-Conduit, .bg-Corruptor, .bg-Dark-Oppressor, .bg-Defiler,
.bg-Exalted-Harbinger, .bg-Doom-Howler, .bg-Eternal-Soldier, .bg-Holy-Champion, .bg-Infernal-Behemoth,
.bg-Lich, .bg-Lightspeaker, .bg-Myrmidon, .bg-Nexus-Champion, .bg-Paladin, .bg-Pariah, .bg-Revenant,
.bg-Seraph, .bg-Shepherd, .bg-Sorcerer, .bg-Void-Walker, .bg-Wizard, .bg-Wyrm-Master, .bg-Mortal, .bg-Redeemed, .bg-Fallen,
.bg-icon-Advocate, .bg-icon-Archon, .bg-icon-Conduit, .bg-icon-Corruptor, .bg-icon-Dark-Oppressor, .bg-icon-Defiler,
.bg-icon-Exalted-Harbinger, .bg-icon-Doom-Howler, .bg-icon-Eternal-Soldier, .bg-icon-Holy-Champion, .bg-icon-Infernal-Behemoth,
.bg-icon-Lich, .bg-icon-Lightspeaker, .bg-icon-Myrmidon, .bg-icon-Nexus-Champion, .bg-icon-Paladin, .bg-icon-Pariah, .bg-icon-Revenant,
.bg-icon-Seraph, .bg-icon-Shepherd, .bg-icon-Sorcerer, .bg-icon-Void-Walker, .bg-icon-Wizard, .bg-icon-Wyrm-Master, .bg-icon-Mortal,
.bg-icon-Redeemed, bg-icon-Fallen
{
  background-size:cover;
}

.bg-Mortal { background-image: url('/modules/Game/character_images/Mortal.png'); }

.bg-Advocate{background-image: url('/modules/Game/portrait/Advocate.jpg')}
.bg-Archon{background-image: url('/modules/Game/portrait/Archon.jpg')}
.bg-Conduit{background-image: url('/modules/Game/portrait/Conduit.jpg'); background-position:100% 0%}
.bg-Corruptor{background-image: url('/modules/Game/portrait/Corruptor.jpg')}
.bg-Dark-Oppressor{background-image: url('/modules/Game/portrait/Dark Oppressor.jpg')}
.bg-Defiler{background-image: url('/modules/Game/portrait/Defiler.jpg')}
.bg-Exalted-Harbinger{background-image: url('/modules/Game/portrait/Exalted_Harbinger.jpg')}
.bg-Doom-Howler{background-image: url('/modules/Game/portrait/Doom Howler.jpg')}
.bg-Eternal-Soldier{background-image: url('/modules/Game/portrait/Eternal Soldier.jpg')}
.bg-Holy-Champion{background-image: url('/modules/Game/portrait/Holy Champion.jpg')}
.bg-Infernal-Behemoth{background-image: url('/modules/Game/portrait/Infernal Behemoth.jpg')}
.bg-Lich{background-image: url('/modules/Game/portrait/Lich.jpg')}
.bg-Lightspeaker{background-image: url('/modules/Game/portrait/Lightspeaker.jpg')}
.bg-Myrmidon{background-image: url('/modules/Game/portrait/Myrmidon.jpg')}
.bg-Nexus-Champion{background-image: url('/modules/Game/portrait/Nexus Champion.jpg')}
.bg-Paladin{background-image: url('/modules/Game/portrait/Paladin.jpg')}
.bg-Pariah{background-image: url('/modules/Game/portrait/Pariah.jpg')}
.bg-Revenant{background-image: url('/modules/Game/portrait/Revenant.jpg')}
.bg-Seraph{background-image: url('/modules/Game/portrait/Seraph.jpg')}
.bg-Shepherd{background-image: url('/modules/Game/portrait/Shepherd.jpg')}
.bg-Sorcerer{background-image: url('/modules/Game/portrait/Sorcerer.jpg'); background-position:100% 0%}
.bg-Void-Walker{background-image: url('/modules/Game/portrait/Void Walker.jpg')}
.bg-Wizard{background-image: url('/modules/Game/portrait/Wizard.jpg')}
.bg-Wyrm-Master{background-image: url('/modules/Game/portrait/Wyrm Master.jpg')}
.bg-Redeemed{background-image: url('/modules/Game/portrait/Redeemed.jpg')}
.bg-Fallen{background-image: url('/modules/Game/portrait/Fallen.jpg')}

@media screen and (min-aspect-ratio: 4/3)
{
  .bg-Advocate{ }
  .bg-Archon{background-position:100% 40%}
  .bg-Conduit{}
  .bg-Corruptor{background-position:0% 20%}
  .bg-Dark-Oppressor{}
  .bg-Defiler{background-position:40% 20%}
  .bg-Exalted-Harbinger{background-position:0% 50%}
  .bg-Doom-Howler{}
  .bg-Eternal-Soldier{}
  .bg-Holy-Champion{background-position:0% 0%}
  .bg-Infernal-Behemoth{}
  .bg-Lich{}
  .bg-Lightspeaker{background-position:10% 40%}
  .bg-Myrmidon{background-position:20% 0%}
  .bg-Nexus-Champion{}
  .bg-Paladin{background-position:40% 20%}
  .bg-Pariah{background-position:20% 0%}
  .bg-Revenant{background-position:0% 0%}
  .bg-Seraph{background-position:100% 25%}
  .bg-Shepherd{background-position:50% 0%}
  .bg-Sorcerer{}
  .bg-Void-Walker{background-position:90% 70%}
  .bg-Wizard{background-position:50% 25%}
  .bg-Wyrm-Master{}
  .bg-Redeemed{}
  .bg-Fallen{}
}

@media screen and (max-aspect-ratio: 4/3)
{
  .bg-Advocate{ }
  .bg-Archon{background-position:80% 40%}
  .bg-Conduit{}
  .bg-Corruptor{background-position:15% 100%}
  .bg-Dark-Oppressor{}
  .bg-Defiler{background-position:40% 20%}
  .bg-bg-Exalted-Harbinger{}
  .bg-Doom-Howler{}
  .bg-Eternal-Soldier{background-position:20% 0%}
  .bg-Holy-Champion{background-position:20% 0%;background-size:200%;}
  .bg-Infernal-Behemoth{background-position:50% 0%}
  .bg-Lich{}
  .bg-Lightspeaker{background-position:60% 50%}
  .bg-Myrmidon{background-position:20% 0%}
  .bg-Nexus-Champion{background-position:80% 0%}
  .bg-Paladin{background-position:40% 10%}
  .bg-Pariah{background-position:0% 0%}
  .bg-Revenant{background-position:0% 0%}
  .bg-Seraph{background-position:50% 0%}
  .bg-Shepherd{background-position:50% 0%}
  .bg-Sorcerer{}
  .bg-Void-Walker{background-position:100% 100%}
  .bg-Wizard{background-position:70% 0%}
  .bg-Wyrm-Master{}
  .bg-Redeemed{}
  .bg-Fallen{}
}

@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/10)
{
  .bg-Holy-Champion{background-size:200%;background-position:10% 0%}
}

/* Charged Attack Icons */

.charged-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.chg-none{background-image:url(/images/charges/None.jpg);}
.chg-AirAffinity{background-image:url(/images/charges/Air_Affinity.jpg);}
.chg-AMArcane{background-image:url(/images/charges/Arcane_Marksman_Arcane.jpg);}
.chg-AMHoly{background-image:url(/images/charges/Arcane_Marksman_Holy.jpg);}
.chg-AMUnholy{background-image:url(/images/charges/Arcane_Marksman_Unholy.jpg);}
.chg-AMAcid{background-image:url(/images/charges/Arcane_Marksman_Acid.jpg);}
.chg-AMCold{background-image:url(/images/charges/Arcane_Marksman_Cold.jpg);}
.chg-AMDeath{background-image:url(/images/charges/Arcane_Marksman_Death.jpg);}
.chg-AMElectric{background-image:url(/images/charges/Arcane_Marksman_Electric.jpg);}
.chg-AMFire{background-image:url(/images/charges/Arcane_Marksman_Fire.jpg);}
.chg-AMImpact{background-image:url(/images/charges/Arcane_Marksman_Impact.jpg);}
.chg-AMPiercing{background-image:url(/images/charges/Arcane_Marksman_Piercing.jpg);}
.chg-AMSlashing{background-image:url(/images/charges/Arcane_Marksman_Slashing.jpg);}
.chg-EMArcane{background-image:url(/images/charges/Eldritch_Mixing_Arcane.jpg);}
.chg-EMHoly{background-image:url(/images/charges/Eldritch_Mixing_Holy.jpg);}
.chg-EMUnholy{background-image:url(/images/charges/Eldritch_Mixing_Unholy.jpg);}
.chg-EMAcid{background-image:url(/images/charges/Eldritch_Mixing_Acid.jpg);}
.chg-EMCold{background-image:url(/images/charges/Eldritch_Mixing_Cold.jpg);}
.chg-EMDeath{background-image:url(/images/charges/Eldritch_Mixing_Death.jpg);}
.chg-EMElectric{background-image:url(/images/charges/Eldritch_Mixing_Electric.jpg);}
.chg-EMFire{background-image:url(/images/charges/Eldritch_Mixing_Fire.jpg);}
.chg-EMImpact{background-image:url(/images/charges/Eldritch_Mixing_Impact.jpg);}
.chg-EMPiercing{background-image:url(/images/charges/Eldritch_Mixing_Piercing.jpg);}
.chg-EMSlashing{background-image:url(/images/charges/Eldritch_Mixing_Slashing.jpg);}
.chg-EldritchBlast{background-image:url(/images/charges/Eldritch_Blast.jpg);}
.chg-HolyBlast{background-image:url(/images/charges/Holy_Blast.jpg);}
.chg-UnholyBlast{background-image:url(/images/charges/Unholy_Blast.jpg);}
.chg-DestructiveBlow{background-image:url(/images/charges/Destructive_Blow.jpg);}
.chg-EarthAffinity{background-image:url(/images/charges/Earth_Affinity.jpg);}
.chg-Enervate{background-image:url(/images/charges/Enervate.jpg);}
.chg-FireAffinity{background-image:url(/images/charges/Fire_Affinity.jpg);}
.chg-FocusedAttack{background-image:url(/images/charges/Focused_Attack.jpg);}
.chg-SupernalVolley{background-image:url(/images/charges/Supernal_Volley.jpg);}
.chg-TattooOfTheNexalSpark{background-image:url(/images/charges/Tattoo_of_the_Nexal_Spark.jpg);}
.chg-GreaterSmite{background-image:url(/images/charges/Greater_Smite.jpg);}
.chg-Hellfire{background-image:url(/images/charges/Hellfire.jpg);}
.chg-PhantasmalTerror{background-image:url(/images/charges/Phantasmal_Terror.jpg);}
.chg-WeaponBreaker{background-image:url(/images/charges/Weapon_Breaker.jpg);}
.chg-FeastOnSuffering{background-image:url(/images/charges/Feast_on_Suffering.jpg);}
.chg-StrikeOfCain{background-image:url(/images/charges/Strike_of_Cain.jpg);}
.chg-HolyLight1{background-image:url(/images/charges/Word_of_the_Holy_Light_1.jpg);}
.chg-HolyLight2{background-image:url(/images/charges/Word_of_the_Holy_Light_2.jpg);}
.chg-HolyLight3{background-image:url(/images/charges/Word_of_the_Holy_Light_3.jpg);}
.chg-HolyLight4{background-image:url(/images/charges/Word_of_the_Holy_Light_4.jpg);}
.chg-LesserSmite{background-image:url(/images/charges/Lesser_Smite.jpg);}
.chg-HiddenArcane{background-image:url(/images/charges/Master_of_Hidden_Energy_Arcane.jpg);}
.chg-HiddenCold{background-image:url(/images/charges/Master_of_Hidden_Energy_Cold.jpg);}
.chg-HiddenElectricity{background-image:url(/images/charges/Master_of_Hidden_Energy_Electricity.jpg);}
.chg-HiddenFire{background-image:url(/images/charges/Master_of_Hidden_Energy_Fire.jpg);}
.chg-HiddenPiercing{background-image:url(/images/charges/Master_of_Hidden_Energy_Piercing.jpg);}
.chg-HiddenSlashing{background-image:url(/images/charges/Master_of_Hidden_Energy_Slashing.jpg);}
.chg-MorbidStrike{background-image:url(/images/charges/Morbid_Strike.jpg);}
.chg-PlagueOfDoubt{background-image:url(/images/charges/Plague_of_Doubt.jpg);}
.chg-Poison{background-image:url(/images/charges/Poison.jpg);}
.chg-LifeVampire{background-image:url(/images/charges/Life_Vampire.jpg);}
.chg-SoulVampire{background-image:url(/images/charges/Soul_Vampire.jpg);}
.chg-RageStrike{background-image:url(/images/charges/Rage_Strike.jpg);}
.chg-SanctifySpell{background-image:url(/images/charges/Sanctify_Spell.jpg);}
.chg-TaintSpell{background-image:url(/images/charges/Taint_Spell.jpg);}
.chg-Smite{background-image:url(/images/charges/Smite.jpg);}
.chg-SteelImpact{background-image:url(/images/charges/Cloak_of_Steel_Impact.jpg);}
.chg-SteelPierce{background-image:url(/images/charges/Cloak_of_Steel_Pierce.jpg);}
.chg-SteelSlash{background-image:url(/images/charges/Cloak_of_Steel_Slash.jpg);}
.chg-Sun-touchedStrike{background-image:url(/images/charges/Sun-touched_Strike.jpg);}
.chg-TargetSeeker{background-image:url(/images/charges/Target_Seeker.jpg);}
.chg-WaterAffinity{background-image:url(/images/charges/Water_Affinity.jpg);}
.chg-WayOfFire{background-image:url(/images/charges/Way_of_Fire.jpg);}
.chg-WrathfulSmite{background-image:url(/images/charges/Wrathful_Smite.jpg);}

.charged-selector input:active +.charged-icon{opacity: .9;}
.charged-selector input:checked +.charged-icon{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.charged-icon{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:32px;height:32px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.charged-icon:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.doorcharged-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.doorcharged-selector input:active +.doorcharged-icon{opacity: .9;}
.doorcharged-selector input:checked +.doorcharged-icon{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.doorcharged-icon{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:32px;height:32px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.doorcharged-icon:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Utility styles */

a.navbar {
    border: 1px solid #000;
    display: inline-block;
    height: auto;
    margin: .25em 0;
    padding: 0.25em;
}

.fade-hover {
    background-color: var(--mid-light-transparent) !important;
    transition: background-color 1s, opacity 1s;
}
.fade-hover:hover { background-color: var(--mid-light) !important; }

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

.debug { color: #6c5dff; }

/* character settings avatar mobile buttons */
.avatar-move-buttons {
  display: flex;
  flex-direction: column; /* Stack vertically */
  margin-left: 0.5rem;
}

.avatar-move-buttons button {
  font-size: 1.2rem;        /* Bigger icon */
  padding: 0.1rem;          /* Tap area */
  min-width: 30px;          /* Mobile min touch target width */
  min-height: 30px;         /* Mobile min touch target height */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 2px 0;            /* Space between buttons */
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;               /* Prevents text selection */
  -webkit-user-select: none;       /* Safari/iOS */
  -webkit-touch-callout: none;     /* Disables "copy/save" popup on iOS */
}

.avatar-move-buttons button:active {
  background-color: #ddd;   /* Tap feedback */
}

/* Optional: adjust spacing on smaller screens */
@media (max-width: 600px) {
  .avatar-move-buttons {
    flex-direction: row; /* Place side by side on mobile */
  }
  .avatar-move-buttons button {
    margin: 0 4px 0 0;
  }
}