@font-face {
  font-family: 'Cinzel';
  font-style: bold;
  font-weight: 400;
  src: local('Cinzel Regular'), local('Cinzel-Regular'), url(/assets/images/Cinzel.woff2) format('woff2'),
  url(/assets/images/Cinzel.eot?#iefix) format('embedded-opentype'),
  url(/assets/images/Cinzel.woff) format('woff'),
  url(/assets/images/Cinzel.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 /* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(/assets/images/Lato-Hairline-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(/assets/images/Lato-Hairline.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(/assets/images/Lato-Light-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(/assets/images/Lato-Light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(/assets/images/Lato-Bold-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(/assets/images/Lato-Bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine Regular'), local('Tangerine-Regular'), url(/assets/images/Tangerine.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral SC';
  font-style: italic;
  font-weight: 500;
  src: local('Spectral SC Medium Italic'), local('SpectralSC-MediumItalic'), url(/assets/images/SpectralSC-Ital.woff2) format('woff2')
  url(/assets/images/SpectralSC-Ital.eot?#iefix) format('embedded-opentype'),
  url(/assets/images/SpectralSC-MediumItalic.woff) format('woff'),
  url(/assets/images/SpectralSC-MediumItalic.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral SC';
  font-style: normal;
  font-weight: 500;
  src: local('Spectral SC Medium'), local('SpectralSC-Medium'), url(/assets/images/SpectralSC.woff2) format('woff2')
  url(/assets/images/SpectralSC.eot?#iefix) format('embedded-opentype'),
  url(/assets/images/SpectralSC-Medium.woff) format('woff'),
  url(/assets/images/SpectralSC-Medium.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Theme 1
  --header-color: #249cff;
  --font-color: #335566;
  --highlight-color: #96CEFD;
  --accent-color: #E9F5FF;
  --header-font: #FFFFFF;
  --header-accent-color: #addeff;
  --page-background-color: #ffffff;
  --skills-primary-color: #ffffff;
  --skills-secondary-color: #E9F5FF;
  */
  --containerAlpha: .6;
  --hue: 130;
  --secondary-hue: 140;
  --complementary-hue: 175;
  --complementary-secondary-hue: 320;
  --invalid-hue: 0;
  --header-color: hsl(135, 65%, 38%);
  --header-color-hover: hsl(134, 68%, 45%);
  --orig-font-color: hsl(var(--hue), 33%, 30%);
  --font-color: hsl(var(--hue), 33%, 25%);
  --login-font-color: hsl(var(--hue), 33%, 20%);
  --login-input-border: hsl(var(--hue), 33%, 14%);
  --login-input-height: 32px;
  --icon-fill-transparent: hsla(var(--hue), 33%, 30%, .7);
  --bonus-color: hsl(var(--hue), 0%, 46%);
  --modalListSurfaceTextColor: hsl(var(--hue), 0%, 46%);
  --spellbook-line-color: hsla(var(--hue), 33%, 30%, 20%);
  --spellbook-color: hsl(var(--hue), 3%, 90%);
  --color-gradient-start: hsl(var(--complementary-hue), 20%, 90%);
  --color-gradient-end: hsl(var(--hue), 30%, 90%);
  --highlight-color: hsl(var(--hue), 37%, 80%);
  --button-wave-color: hsl(var(--hue), 15%, 100%);
  --icon-tab-wave-color: hsl(var(--hue), 25%, 95%);
  --tab-icon-border-color: hsl(var(--hue), 50%, 33%);
  --accent-color: hsl(var(--hue), 41%, 92%);
  --tab-icon-color: hsl(var(--hue), 41%, 92%);
  --tab-icon-selected: hsl(var(--hue), 56%, 80%);
  --invalid-accent-color: hsl(var(--invalid-hue), 41%, 92%);
  --invalid-highlight-color: hsl(var(--invalid-hue), 37%, 75%);
  --damage-color: hsl(var(--invalid-hue), 37%, 37%);
  --button-hover: hsl(var(--hue), 41%, 90%);
  --button-active: hsl(var(--hue), 41%, 88%);
  --grid-bg-color: hsla(var(--hue), 41%, 98%, 70%);
  --sub-header-color: hsla(var(--hue), 41%, 90%, 30%);
  --combat-tabs-color: hsla(var(--hue), 41%, 98%);
  --combat-tabs-color-selected: hsl(var(--hue), 37%, 75%);
  --skills-bg-color: hsl(var(--hue), 41%, 96%);
  --icon-color: hsl(var(--hue), 39%, 79%);
  --equipment-icon-color: hsl(var(--hue), 39%, 30%);
  --equipment-icon-color-selected: hsl(var(--hue), 39%, 30%);
  --shade-icon-disabled: hsl(var(--hue), 0%, 85%);
  --shade-icon-color: hsl(var(--hue), 0%, 79%);
  --header-font: hsl(0, 0%, 95%);
  --header-accent-color: hsl(var(--hue), 100%, 84%);
  --page-background-color: hsla(var(--complementary-hue), 5%, 90%, 40%);
  --input-background-color: hsla(var(--complementary-hue), 8%, 90%, 90%);
  --page-background-color-no-transparency: hsl(var(--complementary-hue), 40%, 90%);
  --filter-input-font: hsl(var(--hue), 33%, 30%);
  --filter-input-color: hsl(0, 0%, 90%);
  --skills-primary-color: hsla(var(--complementary-hue), 40%, 85%, 70%);
  --modal-background-color: hsl(var(--hue), 30%, 95%);
  --modal-background-color-autosize: hsla(var(--hue), 30%, 95%);
  --modal-border-color: hsl(var(--hue), 37%, 75%);
  --skills-secondary-color: hsla(var(--hue), 41%, 92%, 70%);
  --bold-placeholder-color: hsl(var(--hue), 39%, 79%);
  --deep-shadow: hsl(var(--hue), 12%, 80%);
  --nav-shadow: hsl(var(--hue), 12%, 50%);
  --deep-shade: hsl(var(--hue), 12%, 92%);
  --section15HeaderBG: hsl(var(--hue), 12%, 92%);
  --deep-shade-transparent: hsla(var(--hue), 12%, 92%, 30%);
  --deeper-shade: hsl(var(--hue), 12%, 88%);
  --deeper-shade-transparent: hsla(var(--hue), 12%, 88%, 30%);
  --deepest-shade: hsl(var(--hue), 12%, 85%);
  --light-shade: hsl(var(--hue), 12%, 97%);
  --section15BG: hsl(var(--hue), 12%, 97%);
  --light-shade-transparent: hsla(var(--hue), 12%, 97%, 30%);
  --no-shade: hsl(var(--hue), 12%, 100%);
  --magical-shine-color: #76a8ff;
  --card-glow-color: var(--accent-color);
  --bold-label-border: 1px solid hsl(var(--hue), 12%, 43%);
  --bold-label-shadow: 2px 2px 8px hsl(var(--hue), 12%, 50%);
  --input-border: hsl(var(--hue), 12%, 60%);
  --warning-color: hsl(52, 75%, 50%);
  --login-drop-down-color: hsl(var(--hue), 4%, 92%);
  --modal-unit-border: hsl(var(--hue), 12%, 97%);
  --modal-unit-border-hover: hsl(var(--hue), 12%, 80%);
  --card-selection-list-bg: hsla(var(--hue), 6%, 10%, 95%);



  --abjuration-hue: 222;
  --conjuration-hue: 125;
  --divination-hue: 36;
  --enchantment-hue: 343;
  --evocation-hue: 21;
  --illusion-hue: 273;
  --necromancy-hue: 174;
  --universal-hue: 43;
  --transmutation-hue: 45;
  --melee-hue: 0;


  --spacing: 10px;
  --font-size: 16px;
  --skills-font-size: 12px;
  --input-padding: 5px;
  --grid-height: 62px;
  --label-height: 20px;
  --label-margin: 4px;
  --input-height: 37px; /* 62px = 20px + 4px + 2px (border) = 36px for the input */
  --input-font-size: 18px;


  --skills-width: calc(var(--gridSize) * 6);
  --nav-width: calc(var(--gridSize) * 14);
  --content-width: 970px;
  --effects-button-fill: hsl(var(--hue), 100%, 95%);
  --skills-tab-color: var(--accent-color);
  --login-light-input-border: hsl(var(--hue), 37%, 75%);
  --login-light-accent-color: hsl(var(--hue), 41%, 92%);
}

.dark,
.type-dark
{
  /* background-image: url("black-paper.png"); */
  /* background-blend-mode: soft-light; */
  --containerAlpha: .75;
  --hue: 130;
  --secondary-hue: 140;
  --header-color: hsl(var(--secondary-hue), 21%, 25%);
  --header-color-hover: hsl(var(--hue), 68%, 45%);
  --orig-font-color: hsl(var(--hue), 33%, 70%);
  --font-color: hsl(var(--hue), 15%, 70%);
  --icon-fill-transparent: hsla(var(--hue), 15%, 70%, .7);
  --bonus-color: hsl(var(--hue), 0%, 54%);
  --modalListSurfaceTextColor: hsl(var(--hue), 0%, 72%);
  --spellbook-line-color: hsla(var(--hue), 33%, 70%, 30%);
  --spellbook-color: hsl(var(--hue), 2%, 20%);
  --highlight-color: hsl(var(--hue), 7%, 22%);
  --button-wave-color: hsl(var(--hue), 15%, 60%);
  --accent-color: hsl(var(--hue), 3%, 15%);
  --tab-icon-border-color: hsl(var(--hue), 14%, 7%);
  --tab-icon-color: hsl(var(--hue), 41%, 30%);
  --tab-icon-selected: hsl(var(--hue), 41%, 38%);
  --invalid-accent-color: hsl(var(--invalid-hue), 41%, 18%);
  --invalid-highlight-color: hsl(var(--invalid-hue), 37%, 75%);
  --damage-color: hsl(var(--invalid-hue), 37%, 75%);
  --button-hover: hsl(var(--hue), 41%, 33%);
  --button-active: hsl(var(--hue), 41%, 25%);
  --grid-bg-color: hsla(169, 24%, 19%, 70%);
  --sub-header-color: hsla(var(--secondary-hue), 18%, 30%, 48%);
  --combat-tabs-color: hsla(var(--hue), 18%, 18%);
  --combat-tabs-color-selected: hsla(var(--hue), 22%, 32%);
  --skills-bg-color: hsl(var(--hue), 18%, 18%, 70%);
  --icon-color: hsl(var(--hue), 39%, 79%);
  --equipment-icon-color: hsl(var(--hue), 19%, 4%);
  --equipment-icon-color-selected: hsl(var(--hue), 39%, 4%);
  --shade-icon-disabled: hsl(var(--hue), 0%, 85%);
  --shade-icon-color: hsl(var(--hue), 0%, 79%);
  --header-font: hsl(var(--secondary-hue), 20%, 95%, 90%);
  --header-accent-color: hsl(var(--hue), 100%, 84%);
  --input-background-color: hsl(195, 26%, 24%);
  --page-background-color: hsl(var(--complementary-hue), 7%, 16%);
  --color-gradient-start: hsl(var(--complementary-hue), 7%, 16%);
  --color-gradient-end: hsl(var(--hue), 7%, 16%);
  --page-background-color-no-transparency: hsl(var(--complementary-hue), 7%, 16%);
  --filter-input-color: hsl(0, 0%, 90%);
  --filter-input-font: hsl(var(--hue), 33%, 30%);
  --skills-primary-color: hsla(var(--hue),10%, 25%, 40%);
  --modal-background-color: hsla(var(--hue), 0%, 15%);
  --modal-background-color-autosize: hsla(var(--hue), 2%, 19%);
  --modal-border-color: hsl(var(--hue), 10%, 40%);
  --skills-secondary-color: hsla(var(--hue), 0%, 16%, 20%);
  --bold-placeholder-color: hsl(var(--hue), 39%, 79%);
  --deep-shadow: hsl(var(--hue), 12%, 15%);
  --nav-shadow: hsl(var(--hue), 12%, 10%);
  --deep-shade: hsl(var(--hue), 2%, 15%);
  --section15BG: hsl(var(--hue), 12%, 10%);
  --deep-shade-transparent: hsla(var(--hue), 12%, 36%, 40%);
  --deeper-shade: hsl(var(--hue), 2%, 15%);
  --deeper-shade-transparent: hsla(var(--hue), 12%, 33%, 40%);
  --deepest-shade: hsl(var(--hue), 2%, 15%);
  --light-shade: hsl(var(--hue), 0%, 15%);
  --modal-list-header-color: hsl(var(--secondary-hue), 21%, 20%);
  --section15HeaderBG: hsl(var(--hue), 12%, 15%);
  --light-shade-transparent: hsla(var(--hue), 12%, 30%, 40%);
  --no-shade: hsl(var(--hue), 12%, 100%);
  --warning-color: hsl(52, 96%, 19%);
  --magical-shine-color: #76a8ff;
  --abjuration-hue: 196;
  --conjuration-hue: 129;
  --divination-hue: 42;
  --enchantment-hue: 1;
  --evocation-hue: 23;
  --illusion-hue: 276;
  --necromancy-hue: 164;
  --universal-hue: 158;
  --transmutation-hue: 29;
  --effects-button-fill: hsl(var(--hue), 100%, 95%);
  --skills-tab-color: var(--accent-color);
  --card-glow-color: var(--font-color);
  --bold-label-border: 1px solid hsl(var(--hue), 12%, 15%);
  --bold-label-shadow: 2px 2px 8px hsl(var(--hue), 12%, 10%);
  --input-border: var(--modal-border-color);
  --login-light-input-border: hsl(var(--hue), 37%, 75%);
  --login-light-accent-color: hsl(var(--hue), 41%, 92%);
  --modal-unit-border: hsl(var(--hue), 12%, 30%);
  --modal-unit-hover: hsl(var(--hue), 12%, 23%);
}

.synthwave
{
  --hue: 196;
  --secondary-hue: 175;
  --complementary-hue: 306;
  --complementary-secondary-hue: 309;
  --header-font: hsl(var(--secondary-hue), 100%, 20%);
  --header-color: hsl(var(--hue), 100%, 70%);
  --header-accent-color: hsl(var(--complementary-hue), 100%, 60%);
  --page-background-color: hsl(var(--hue), 7%, 16%);
  --page-background-color-no-transparency: hsl(var(--completmentary-hue), 7%, 16%);
  --font-color: hsl(var(--hue), 60%, 70%);
  --border-color: hsl(var(--complementary-hue), 60%, 70%);
}

html, body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

body
{
  /* background-image: url("redox-01.png");  */
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	font-weight: 300;
	line-height: 21px;
  overflow-y: auto;
  height: auto;
  margin: 0px;
  color: var(--font-color);
  background-color: var(--page-background-color);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

.fixed
{
  position: fixed;
}

.bgGradient
{
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/images/pathcompanion_bg_day_4K.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dark .bgGradient
{
  background-image: url(/assets/images/pathcompanion_bg_night_4K.png);
}

.splashPageContent.dark .bgGradient
{
  background-image: url(/assets/images/pathcompanion_bg_day_4K.png);
}

.dark .modal,
.dark .headerConnectDialog
{
  --input-background-color: var(--accent-color);
}

header
{
	position: fixed;
	width: calc(var(--gridSize) * 20);
	background-color: var(--header-color);
	color: var(--header-font);
	line-height: 20px;
  top: 0px;
  z-index: 800;
}

.errorBanner
{
  position: fixed;
  height: 2em;
  background-color: var(--invalid-accent-color);
  font-size: 1.8em;
  text-align: center;
  width:100%;
  z-index: 10000;
  line-height:2em;
  cursor: pointer;
  top: 0px;
}

main
{
  position: relative;
  justify-content: center;
  display: flex;
  margin: 0px 0px 0px var(--spacing);
}

.open main
{
  margin-left: 0px;
  padding-left: var(--spacing);
  -webkit-backdrop-filter: brightness(.2);
}

footer
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

button:focus,
div:focus
{
  outline: 0;
}

.skillsHidden,
.effectsHidden
{
  width: 0px;
  box-shadow: unset;
}

.newLine
{
  grid-column-start: 1;
}

.pointer
{
  cursor: pointer;
}

.effectsButtonContainer
{
  display: "inline-block";
}

.inlineText
{
  font-size: 1.6em;
  height: var(--grid-height);
  white-space: nowrap;
}

.skillText
{
  display: flex;
  height: var(--grid-height);
}

.skillText > .inputContainer
{
  margin-top: calc(calc(var(--label-height) - 1px) * -1);
}

.skillText > .inputContainer * label
{
  font-size: 1rem;
  font-weight: 300;
}

.skillText > input[type=checkbox]
{
  margin-right: 10px;
  width: auto;

}

.skillText > div:not(.inputContainer)
{
  line-height: var(--input-height);
  text-align:center;
  font-size: 1rem;
}

.skillText > div
{
  width: 100%;
}

.skillSit
{
  padding-left: calc(var(--gridSize) + 2 * var(--spacing));
  margin-right: var(--spacing);
}

.dark .skillSit
{
  background-color: var(--highlight-color);
}

.inlineText > .standaloneText
{
  margin-left: 4px;
}

.inlineSelect
{
  margin-top:4px;
}

.skillsRow
{
  display:flex;
  outline-width: 0;
  justify-content: space-between;
  white-space: nowrap;
}

.skillsRow:nth-child(even)
{
  background-color: var(--skills-primary-color);
}


.skillsRow:nth-child(odd)
{
  background-color: var(--skills-secondary-color);
}

.skillsName
{
  padding: 6px;
}

.dark .skillsName
{
  font-weight: bold;
}

.skillsName div::not(.rollbtn)
{
  max-width: calc(var(--skills-width) - 60px);
}

.skillsNameInner
{
  display: inline-block;
}

.skillsVal
{
  text-align:right;
  padding: 6px;
  padding-right: 1rem;
}

.skillsRollBtn
{
  width: 2em;
  display: inline-block;
  line-height: 1em;
  vertical-align: top;
  position: relative;
}

.rollbtn
{
  background-image: url(/assets/images/pc_logo_noglow.png);
  background-size: contain;
  filter: grayscale(80%);
  width: 2em;
  height: 2em;
  position: absolute;
  cursor: pointer;
  filter: brightness(1.3);
}

.dark .rollbtn
{
  filter: brightness(1);
}

.rollbtn:hover, .rollbtn:focus
{
  filter: grayscale(20%);
}

.rollbtn:active
{
  filter: grayscale(20%);
}

.dark .skillsVal
{
  font-weight: bold;
}

#effectsList
{
  width: var(--skills-width);
  padding-right: 0px;
  border-collapse: collapse;
  font-size: var(--skills-font-size);
  line-height: 1.7;
}

.effectsListTable
{
  width: 100%;
}

.effectsListTable td
{
  line-height: 2em;
  font-size: 1em;
  border-bottom: 1px solid var(--input-border);
  padding: 0px 8px;
  height: 3em;
  vertical-align: middle;
  transition: filter ease-in-out .2s;
  cursor: pointer;

}

.effectsListTable td:first-child:hover
{
  filter: brightness(.95);
  backdrop-filter: brightness(.95);

}

.effectsListTable td:first-child span
{
  border-bottom: 1px solid transparent;
  transition: all ease-in-out .2s;
}

.effectsListTable td:first-child span:hover
{
  border-bottom: 1px solid var(--font-color);
}

.dark .effectsListTable td:first-child:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1);
}

.skillsRow
{
  transition: filter ease-in-out .2s;
  cursor: pointer;

}

.skillsRow:hover
{
  filter: brightness(.9);
  backdrop-filter: brightness(.9);
}

.dark .skillsRow:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1);
}

.skillsNameInner
{
  border-bottom: 1px solid transparent;
  transition: all ease-in-out .2s;
}

.skillsNameInner:hover
{
  border-bottom: 1px solid var(--font-color);
}

.elapsedDuration
{
  font-size: .7em;
  filter: brightness(.7);
  line-height: .7em;
}

#effectsList
{
  background-color: var(--page-background-color-no-transparency);
}
.effectsListTable tr
{
  background-color: var(--skills-primary-color);
}

.effectsListTable tr:nth-child(even)
{
  background-color: var(--skills-secondary-color);
}

.dark .effectsListTable td
{
  border-bottom: 1px solid var(--accent-color);
}

.effectsListTable td:last-child
{
  border-left: 1px solid hsl(var(--invalid-hue), 40%, 85%);
  text-align: center;
  color: hsl(var(--invalid-hue), 40%, 60%);
  background-color: hsl(var(--invalid-hue), 40%, 90%);
  cursor: pointer;
}
.effectsListTable td:last-child:hover
{
  filter: brightness(.8);
}


.dark .effectsListTable td:last-child
{
  border-left: 1px solid hsl(var(--invalid-hue), 40%, 10%);
  background-color: hsl(var(--invalid-hue), 40%, 15%);
}

.dark .effectsListTable td:last-child:hover
{
  filter: brightness(1.2);
}

.effectsListContent,
.partyListContent
{
  margin-top: 40px;
  background-color: var(--skills-secondary-color);
  overflow: auto;
  height: calc(100% - 40px);
}

.diceHistory
{
  padding: 0px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.button.effectsButton
{
  position: fixed;
  right: var(--spacing);
  bottom: var(--spacing);
  background-color: var(--header-color);
  z-index: 889;
}

.underRoundButton
{
  position: absolute;
  text-align: center;
  bottom: -1.6em;
  color: var(--font-color);
}

.effectsList:is(.effectsHidden) ~ .effectsButtonContainer .underRoundButton
{
  color: var(--accent-color);
}
.dark .effectsList:is(.effectsHidden) ~ .effectsButtonContainer .underRoundButton,
.dark .underRoundButton
{
  color: var(--font-color);
}

.button.diceButton
{
  position: fixed;
  left: var(--spacing);
  bottom: var(--spacing);
  background-color: var(--header-color);
  z-index: 889;
}

.button.effectsButton.advanceTimeButton
{
  right: calc(var(--input-height) + 2 * var(--spacing));
}

.button.effectsButton .effectsButtonText
{
  color: var(--header-accent-color);
}

.effectCount
{
  font-size: 0.6rem;
  border-radius: 50%;
  background-color: hsl(0, 81%, 58%);
  color: white;
  width: 1rem;
  line-height: 1rem;
  position: absolute;
  bottom: -.1rem;
  right: -.4rem;
}


.effectsButton svg,
.diceButton svg
{
  padding: .4em;
  stroke: var(--effects-button-fill);
  fill: var(--effects-button-fill);
}

.diceButton:hover svg
{
  /*animate spin while hovered */
  animation: spin 1.5s linear infinite;
}

.diceRoller
{
  display: inline-block;
}

.diceRoller #diceButton
{
  transition: margin ease-out .15s;
}

.diceRoller.diceRollerOpen #diceButton
{
  margin-left: calc(var(--skills-width) + var(--spacing));
}

@keyframes spin
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}

.effectsModalCLInput
{
  display: table;
  position: absolute;
  right: 10px;
  top: 48px;
}

.effectsModalCLInput .smallContainerInputLabel
{
  padding-right: 4px;
  padding-left: 4px;
}


.button.round.editButton
{
  top: -2px;
  right: 0px;
  position: absolute;
  background-color: transparent;
  transition: all ease-in-out .4s;
  transform: rotate(0deg);
  border-color: var(--font-color);
}

.button.round.editButton.editing
{
  border-color: var(--font-color);
  transform: rotate(270deg);
}

.editButton svg
{
  padding: 4px;
  height: 26px;
  fill: var(--font-color);
  opacity: .4;
}

.editButton.editing svg
{
  fill: var(--font-color);
  opacity: 1;
}

hr
{
  border: 0;
  height: 1px;
  background: var(--highlight-color);
}

.planContainer
{
  display: flex;
  gap: 1rem;
  max-width: 80vw;
  align-items: center;
  justify-content: center;
  margin: 0 10vw;
}

.plan
{
  flex: 1;
  min-height: 100%;
  max-height: 100%;
  border: 1px solid var(--accent-color);
  border-radius: 20px;
  background-color: var(--modal-background-color-autosize);
  /*make it go to the top of the flex container*/
  align-self: flex-start;
  cursor: pointer;
}

.monthlyYearlyInfo
{
  text-align: center;
  font-size: 0.8rem;
  color: var(--font-color);
  filter: brightness(.7);
}

.plan:hover
{
  background-color: var(--modal-background-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.planHeader
{
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
  margin: 1rem;
}

.planToggle
{
  text-align: center;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.planName
{
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  width: 100%;
  padding-top: .4rem;
  padding-bottom: .4rem;
}

.planPrice
{
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: 1rem;
  margin-top: 1rem;
  line-height: 1.2rem;
  vertical-align: top;
}

.planPriceSmall
{
  font-size: 0.8rem;
  color: var(--font-color);
  filter: brightness(.8);
}

.planFeatures
{
  font-size: 0.8rem;
  padding: 1rem;
}





/* Firefox */ .skillsList, .cardTextIcon, .cardSelectionList
{
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: #9f9993 rgb(0 0 0 / 0%);
  transition: background-color ease-out .15s
}
/* Chrome, Edge, and Safari */
.skillsList::-webkit-scrollbar,
.cardTextIcon::-webkit-scrollbar,
.cardSelectionList::-webkit-scrollbar {
  width: 6px; height: 6px;
 }

 .cardTextIcon::-webkit-scrollbar {
  width: 3px; height: 3px;
 }
.skillsList::-webkit-scrollbar-track,
.cardTextIcon::-webkit-scrollbar-track,
.cardSelectionList::-webkit-scrollbar-track
{
  background-color: rgb(0 0 0 / 0%);
  transition: background-color ease-out .15s
}
.skillsList::-webkit-scrollbar-thumb,
.cardTextIcon::-webkit-scrollbar-thumb,
.cardSelectionList::-webkit-scrollbar-thumb
{
  background-color: #9f9993;
  border-radius: 5px;
  transition: background-color ease-out .15s
}

/* .skillsList.scrollHide::-webkit-scrollbar { background-color: transparent } */
/* .skillsList.scrollHide::-webkit-scrollbar:hover { width: 8px; height: 8px; } */
.skillsList.scrollHide,
.cardTextIcon.scrollHide,
.cardSelectionList.scrollHide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */}

.skillsList.scrollHide::-webkit-scrollbar-track,
.skillsList.scrollHide::-webkit-scrollbar-thumb,
.cardTextIcon.scrollHide::-webkit-scrollbar-track,
.cardTextIcon.scrollHide::-webkit-scrollbar-thumb,
.cardSelectionList.scrollHide::-webkit-scrollbar-track,
.cardSelectionList.scrollHide::-webkit-scrollbar-thumb
{
  background-color: inherit;
}

.skillsScrollHoverMarker,
.cardInfoScrollHoverMarker,
.cardSelectionListHoverMarker
{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 8px;
  height: 100%;
}

.skillsScrollHoverMarker:hover,
.cardInfoScrollHoverMarker:hover,
.cardSelectionListHoverMarker
{
  display: none;
}

aside
{
  width: var(--skills-width);
  position: fixed;
  overflow: visible;
  top: 64px;
  height: calc(100svh - 64px);
  transition: width ease-out .15s;
  border-right: 1px solid var(--accent-color);
  z-index: 797;
  box-shadow: 0px 0px 10px 1px var(--nav-shadow);
  background-color: var(--page-background-color-no-transparency);
  touch-action: pan-y; /* Allow vertical scrolling but prevent horizontal */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

#skillsTooltipPositioner
{
  position: absolute;
  z-index: 10000;
}

.skillsList
{
  height: 100%;
  overflow-y: overlay;
}

.dark aside
{
  /* background-image: url("black-paper.png"); */
}

aside.effectsList
{
  right: 0px;
  border-right: 0px;
  overflow-x: visible;
  overflow-y: auto;
  border-left: 1px solid var(--accent-color);
}

#skills,
#abilityChecks
{
  width: var(--skills-width);
  padding-left: 0px;
  border-collapse: collapse;
  font-size: var(--skills-font-size);
}

.skillCheckHeader
{
  margin-left: 4px;
  width: calc(100% - 4px);
  border-bottom: 1px solid var(--font-color);
  background-color: var(--skills-primary-color);
}

.sectionDivider
{
  height: 40px;
  clear: both;
}

.g1
{
  grid-column-end: span 1;
}

.g2
{
  grid-column-end: span 2;
}

.g3
{
  grid-column-end: span 3;
}

.g4
{
  grid-column-end: span 4;
}

.g5
{
  grid-column-end: span 5;
}

.g6
{
  grid-column-end: span 6;
}

.g7
{
  grid-column-end: span 7;
}

.g8
{
  grid-column-end: span 8;
}

.g9
{
  grid-column-end: span 9;
}

.g10
{
  grid-column-end: span 10;
}

.g11
{
  grid-column-end: span 11;
}

.g12
{
  grid-column-end: span 12;
}

.g13
{
  grid-column-end: span 13;
}

.g14
{
  grid-column-end: span 14;
}
.g15
{
  grid-column-end: span 15;
}
.g16
{
  grid-column-end: span 16;
}
.g17
{
  grid-column-end: span 17;
}
.g18
{
  grid-column-end: span 18;
}
.g19
{
  grid-column-end: span 19;
}

.g20
{
  grid-column-end: span 20;
}

.grow
{
  grid-column-end: 21;
}

.growsub1
{
  grid-column-end: 20;
}

.h1
{
  grid-row-end: span 1;
}

.h2
{
  grid-row-end: span 2;
}
.h3
{
  grid-row-end: span 3;
}
.h4
{
  grid-row-end: span 4;
}
.h5
{
  grid-row-end: span 5;
}
.h6
{
  grid-row-end: span 6;
}
.h7
{
  grid-row-end: span 7;
}
.h8
{
  grid-row-end: span 8;
}

/*
* The fixed <main> margins gives us a total portrait width of 1010px, which allows us on ipad to have 20 columns of 50.5 pixels a piece.
*/

@media only screen
and (orientation : landscape) {
  :root {
    --skills-width: calc(var(--gridSize) * 4);
    --nav-width: calc(var(--gridSize) * 16);
  }
}

/*
* The fixed <main> margins gives us a total portrait width of 760px, which allows us on ipad to have 20 columns of 38 pixels a piece.
*/
@media only screen
and (orientation : portrait) {
  :root {
    --spacing: 8px;
    --skills-font-size: 21px;
  }
}

.loginCentered
{
  display: flex;
  justify-content: center;
}

.loginDiv
{
  display:inline-flex;
  flex-direction: column;
}

.loginButton
{
  margin: var(--spacing) 0px 0px 0px;
  font-weight: 300;
  height: var(--input-height);
}

.button.loginButton div
{
  font-size: 1.2rem;
}

.loginError
{
  background-color: var(--invalid-accent-color);
  border: 1px solid var(--invalid-highlight-color);
  border-radius: 4px;
  padding: 2px;
  margin-top: var(--spacing);
  text-align: center;
}

input.invalid
{
  background-color: var(--invalid-accent-color);
  border: 1px solid var(--invalid-highlight-color);
}

input.invalid:focus
{
  border: 1px solid var(--highlight-color);
  background-color: var(--input-background-color);
}

.footer label,
.standalone label
{
  line-height: 2.3em;
  vertical-align: top;
}

.footer input.standalone[type=checkbox]
{
  width: 1.4rem;
  margin: 4px var(--spacing) 4px 4px;
}

.characterInfo
{
  float:right;
  text-align: right;
  overflow: hidden;
  cursor: pointer;
  margin-right: var(--spacing);
}

.characterInfoList
{
  right: 0px;
  text-align: right;
  cursor: pointer;
  padding: 0px 0px 2px 0px;
  list-style: none;
  background-color: var(--accent-color);
  color: var(--font-color);
  position: fixed;
  margin: 0px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid var(--highlight-color);
  border-top: none;
}

.dark .characterInfoList
{
  border: 1px solid hsl(0, 0%, 40%);
  color: hsl(0, 0%, 65%);
}

.characterInfoList li
{
  padding: .5rem .8rem;
  border-top: 1px solid var(--highlight-color);

}

.dark .characterInfoList li
{
  border-top: 1px solid hsl(0, 0%, 40%);
}

.characterInfoList li:hover
{
  filter: brightness(.6);
}

.dark .characterInfoList li:hover
{
  filter: brightness(1.2);
}

#HPVal
{
  margin-left: 4px;
  margin-right: var(--spacing);
}

#ACVal
{
  margin-right: calc(var(--spacing) * 2);
}

.headerMod
{
  color: var(--header-accent-color);
  margin-left: 4px;
}

.abilityValue
{
	font-weight: 700;
}

.abilityName
{
  margin-left: var(--spacing);
}

#navigation
{
  padding-left: 0px;
  left: 0px;
  top: 20px;
  position: fixed;
  font-size:0px;
  z-index: 798;
  width: calc(var(--gridSize) * 20);
  background-color: var(--accent-color);
  border-bottom: 8px solid var(--highlight-color);
  box-shadow: 0px 0px 8px 2px var(--nav-shadow);
  opacity: .9;
  transition: opacity ease-in-out .2s;
  white-space: nowrap;
}

#navigation.solidHeader
{
  opacity: 1;
}

.skillsHeader
{
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  position: relative;
}

#tabContainer
{
  display: inline-block;
  width: var(--nav-width);
  white-space: nowrap;
  overflow-x: auto;
  height: 36px;
  overflow-y: hidden;
  vertical-align: top;
}

.navButton
{
  position:relative;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  border-left: 1px solid var(--highlight-color);
  width: auto;
  vertical-align: bottom;
}

.navButton.noBorder
{
  padding: 0px 6px;
  border-left: 0px;
}

.navButton.noBorder + .navButton
{
  border-left: 0px;
}

.navButton.noBorder + .navButton > .navTab
{
  padding-left: 0px;
}

.navButton.noBorder.noLeftPadding
{
  padding: 0px 6px 0px 0px;
}

.navButton.noLeftPadding
{
  border-left: 0px;
}

.navButton.noBorder:last-child
{
  padding: 0px 0px 0px 6px;
}


.navTab
{
  padding: 0px 13px;
  font-size: 22px;
  text-align: center;
  height: 36px;
  width: auto;

}

.companionNav .navTab,
.actionsTabContainer .navTab,
.spellLevelsNav .navTab,
.modalNav .navTab
{
  background-color: var(--accent-color);
}

.actionsTabContainer .navButton:last-child .navTab
{
  border-right: 1px solid var(--highlight-color);
}

.navTabLabel
{
  top: 6px;
  position: relative;
}

.navTabLabel.editingTab
{
  border: 1px solid var(--input-border);
  cursor: text;
}

.navTab.selected
{
  background-color: var(--highlight-color);
  border-bottom: 0px;
  font-weight: 400px;
  border-bottom-left-radius: 5px / 4px;
  border-bottom-right-radius: 5px / 4px;
}

.dark .companionNav .navTab.selected,
.dark .spellLevelsNav .navTab.selected,
.dark .modalNav .navTab.selected,
.dark .actionsTabContainer .navTab.selected
{
  background-color: var(--header-color);
}

/* .navTabBefore,.navTabAfter
{
  content:'';
  width:9px;
  height:8px;
  position:absolute;
  z-index:1001;
  bottom:0;
  background: var(--highlight-color);
} */

/* .actionsTabContainer .navTab.selected:before, .actionsTabContainer .navTab.selected:after,
.companionNav .navTab.selected:before, .companionNav .navTab.selected:after
{
  z-index: 997;
} */

.actionsTabContainer .navTab:first-child,
.companionNav .navTab:first-child,
.spellLevelsNav .navTab:first-child,
.modalNav .navTab:first-child
{
  border-left: 0px;
}

.modalNav .navButton.noBorder + .navButton > .navTab
{
  padding-left: 6px;
}
.modalNav .navButton,
.modalNav .navButton.noBorder.noLeftPadding.noRightPadding
{
  padding: 0px
}

.navTabBefore
{
  left: -8px;
}

.navTabAfter
{
  right: -8px;
}
.navTabRadiusBefore, .navTabRadiusAfter
{
  content: '';
  width:9px;
  height:36px;
  position:absolute;
  bottom:-1px;;
  background: var(--accent-color);
  overflow:hidden;
  border-bottom:1px solid var(--highlight-color);
  background-clip: padding-box;
}

.modalNav .navTabRadiusAfter
{
  display: none;
}

/* .actionsTabContainer .navTab.selected > .navTabLabel:before, .actionsTabContainer .navTab.selected > .navTabLabel:after,
.companionNav .navTab.selected > .navTabLabel:before, .companionNav .navTab.selected > .navTabLabel:after
{
  background: var(--accent-color);
  z-index: 998;
} */

.navTabRadiusBefore
{
  left: 0px;
  border-bottom-right-radius:8px;
  -webkit-border-bottom-right-radius:8px;
  -moz-border-radius-bottomright:8px;
  border-right:1px solid var(--highlight-color);
}

.navTabRadiusAfter
{
  right: 0px;
  border-bottom-left-radius:8px;
  -webkit-border-bottom-left-radius:8px;
  -moz-border-radius-bottomleft:8px;
  border-left:1px solid var(--highlight-color);
}

.companionTab
{
  display: inline-block;
  font-size: 1rem;
  padding: var(--spacing);
  border-top: 1px solid var(--highlight-color);
  border-left: 1px solid var(--highlight-color);
  background-color: var(--page-background-color)
}

.companionTab.selected
{
  font-weight: bold;
  background-color: var(--accent-color);
}

.companionTab:last-child
{
  border-right: 1px solid var(--highlight-color);
}

aside .companionNav
{
  background-color: var(--skills-primary-color)
}

aside .companionTab.selected
{
  background-color: var(--skills-secondary-color)
}

.navBackIcon {
  position: fixed;
  font-size: 2rem;
  background-color: hsla(0, 0%, 50%, .3);
  line-height: 1.8rem;
  height: 1.8rem;
  width: 1.8rem;
  border-radius: 50%;
  right: 10px;
  top: 76px;
  color: var(--font-color);
  opacity: .8;
  text-align: center;
  padding: 2px;
  cursor: pointer;
}

.alwaysSelected
{
  background-color: var(--page-background-color);
}

#skillsTab
{
  width: var(--skills-width);
  padding: 0px;
  line-height: 36px;
  background-color: var(--skills-tab-color);
  border-right: none;
  cursor: pointer;
}

.callout
{
  position: fixed;
  top: 64px;
  height: 30px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, .8);
  padding: 6px 4px;
  font-size: 15px;
  width: 15px;
  background-color: hsla(0, 0%, 40%, .2);
  font-weight: bold;
  z-index: 3;
  cursor: pointer;
}

.callout:hover

.skillsCallout
{
  left: 0px;
}

.skillsCallout.skillsCalloutOpen
{
  left: var(--skills-width);
}

.effectsCallout
{
  right: 0px;
}

.effectsCallout.effectsCalloutOpen
{
  right: var(--skills-width);
}

section
{
  display: block;
  position: relative;
  top: 44px;
  margin-top: 30px;
  overflow-y: hidden;
  margin-left: var(--spacing);
  width: var(--content-width);
  left: 0px;
  transition: left ease-out .15s;
  padding: 0px 50px 200px 50px; /*for any react-selects that are too long*/
}

.withSidebar
{
  left: var(--skills-width);
}

h2
{
  margin-bottom: 10px;
  user-select: none;
}

h3
{
  margin-bottom: 10px;
  user-select: none;
}

h4
{
  margin-bottom: 0px;
  margin-top: 4px;
  user-select: none;
}

.indent1
{
  margin-left:6px;
}

.indent2
{
  margin-left:12px;
}

.indent3
{
  margin-left:18px;
}

.indent4
{
  margin-left:24px;
}

.indent5
{
  margin-left:24px;
}

.underlined
{
  text-decoration: underline;
}

select
{
  height: 38px;
  font-size: var(--input-font-size);
  border-radius: 0px;
  border: 1px solid var(--highlight-color);
  text-align: center;
  color: inherit;
}

select[readonly]
{
  background-color: var(--accent-color);
}

.dark select[readonly]
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal select[readonly]
{
  background-color: var(--accent-color);
}

input,
textarea
{
  width: 100%;
  height: var(--input-height);
  font-size: var(--input-font-size);
  font-weight: 300;
  padding: var(--input-padding);
  border: 1px solid var(--input-border);
  text-align: center;
  margin: 0;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  box-sizing: border-box;
  color: var(--font-color);
  background-color: var(--input-background-color);
}

textarea
{
  font-family: Lato;
  width: 100%;
  text-align: left;
  height: 100%;
  font-weight: 400;
}

input:focus, select:focus, textarea:focus
{
  outline: 0;
  box-shadow:   inset 0 0 5px var(--highlight-color), 0 0 8px var(--accent-color);
}

.dark input:focus, .dark select:focus, .dark textarea:focus
{
  box-shadow:   inset 0 0 5px var(--highlight-color), 0 0 8px hsl(195, 26%, 18%);
}

*[contentEditable]:focus
{
  outline: 0
}

.descriptionContentPre,
.encounterDescription
{
  font-family: Lato;
  margin: 0;
  white-space: pre-wrap;
  padding: 4px;
}

.customSpellPre
{
  font-family: Lato;
  margin: 0;
  white-space: pre-wrap;
  border: 1px solid var(--highlight-color);
  border-radius: 4px;
  padding: 4px;

}

input[type=checkbox]:focus, input[type=radio]:focus
{
  box-shadow: unset;
}

.inputLabelContainer {
  white-space: nowrap;
  line-height: var(--input-height);
  font-size: 1rem;
  padding: 1rem;
}

.inputLabelContainer.standalone
{
  width: 1px;
}

.promptInputs
{
  display: table;
}

.promptInputContainer
{
  display: table-row;
}

.promptInputContainer > div
{
  display: table-cell;
  white-space: nowrap;
  max-width: 200px;
}

.promptInputLabel
{
  width: 1px;
}

.promptCheckbox
{
  width: 20px;
  vertical-align: middle;
}

.promptCheckboxLabel
{
  padding-left: var(--spacing);
  vertical-align: middle;
}

.checkboxLabelContainer {
  white-space: nowrap;
  padding: 1rem;
  position: relative;
}

.checkboxLabelContainer input
{
  float: left;
  width: auto;
  height: auto;
}

.checkboxLabelContainer label
{
  margin-left: var(--spacing);
}

input[readonly]
{
  background-color: var(--accent-color);
}

.dark input[readonly]
{
  background-color: hsl(195, 26%, 18%);
}

div.smallInputContainerInput,
.restButton,
.companionDismissButton
{
  background-color: var(--accent-color);
  color: var(--font-color);
  text-transform: capitalize;
}

.dark div.smallInputContainerInput,
.dark .restButton,
.dark .companionDismissButton
{
  background-color: hsl(195, 26%, 18%);
}

.dark .restButton,
.dark .modal .restButton,
.dark .modal .companionDismissButton,
.dark .companionDismissButton
{
  border: 1px solid var(--modal-border-color);
}

.restButton:hover,
.companionDismissButton:hover
{
  filter: brightness(1.2);
}

.dark .modal div.smallInputContainerInput,

.dark .headerConnectDialog div.smallInputContainerInput
{
  background-color: var(--highlight-color);
}

.dark .modal div.smallInputContainerInput.warning,
.dark .headerConnectDialog div.smallInputContainerInput,
.dark .modal div.smallInputContainerInput.highlighted
{
  background-color: var(--font-color);
}

.companionDismissButton:hover
{
  filter: brightness(1.2);
}

input.smallInputContainerInput.warning
{
  background-color: var(--invalid-highlight-color);
}

input.smallInputContainerInput[readOnly],
div.smallInputContainerInput.warning,
div.smallInputContainerInput.highlighted
{
  background-color: var(--font-color);
  color: var(--accent-color);
}


input[type=checkbox].smallInputContainerInput
{
  vertical-align: middle;
}

div.smallInputContainerInput.warning
{
  position: relative;
}

div.smallInputContainerInput.warning:after
{
  top: -.3rem;
}

div.smallInputContainerInput.invalid,
.addLevelBtn.invalid
{
  background-color: var(--invalid-accent-color);
}

.addLevelBtn.invalid
{
  background-color: var(--invalid-accent-color);
  border-color: var(--invalid-highlight-color);
}

div.smallInputContainerInput.pointer,
.restButton,
.companionDismissButton
{
  width: 1px;
  white-space: nowrap;
  padding: 6px var(--spacing);
  border: 1px solid var(--highlight-color);
}

.promptModal div.smallInputContainerInput.pointer,
.manualBonusContent div.smallInputContainerInput.pointer
{
  width: auto;
}

.dark div.smallInputContainerInput.pointer
{
  border: 1px solid var(--light-shade);
}

.smallContainerInputUnder
{
  display: table-cell;
  position: relative;
  width: 40px;
}

.smallContainerInputUnder.count .smallInputContainerInput
{
  border-radius: 0px;
  text-align: center;
  border: 0px;
}

.smallNumberDecrement,
.smallNumberIncrement,
.effectNumberDecrement,
.effectNumberIncrement,
.currentBurnIncrement,
.currentBurnDecrement
{
  cursor: pointer;
  height: calc(var(--input-height) - 2px);
  width: calc(var(--spacing) * 2 + 1em);
  font-size: 1.2rem;
  text-align: center;
  line-height: var(--input-height);
  background-color: var(--highlight-color);
  display: inline-block;
}

.smallNumberDecrement:hover,
.smallNumberIncrement:hover,
.effectNumberDecrement:hover,
.effectNumberIncrement:hover,
.currentBurnIncrement:hover,
.currentBurnDecrement:hover
{
  filter: brightness(1.2);
}

.effectNumberDecrement
{
  margin-left: calc(-1 * var(--spacing));
}

.effectNumberIncrement
{
  margin-right: 4px;
}

.smallContainerInputRightLabel
{
  display: inline-block;
  position: relative;
  margin-left: 4px;
  white-space: nowrap;
}

.effectNumberCount
{
  display: inline-block;
  margin: 0px 4px;
  vertical-align: top;
  line-height: 35px;
}

.smallContainerInputRightLabel input.singleDigit
{
  width: 40px;
  text-align: center;
  height: 26px;
}

.smallContainerInputRightLabel .smallContainerInputLabel
{
  margin-left: 4px;
  display: inline-block;
}

.characterWizard
{
  padding: var(--spacing);
  height: 100%;
  overflow: visible;
}

.wizardHeader
{
  display: flex;
}

.wizardPage
{
  overflow: hidden;
}

.wizardPageContent
{
  display: flex;
  padding: 10px;
  position: relative;
  max-height: calc(100vh - 245px);
  overflow: auto;
}

.characterWizardInstructions
{
  width: 30%;
  padding: var(--spacing);
  border-right: 4px solid var(--highlight-color);
  z-index: 1;
}

.characterWizardInstructions.w40
{
  width: 40%;
}

.wizardPageDescHeader
{
  /* white-space: nowrap; */
  font-weight: bold;
  font-size: 2em;
  line-height: 1.4em;
}

.wizardPageDescriptionContent
{
  padding-top: 10px;
  z-index: 2;
}

.wizardPageContentText
{
  padding-top: 20px;
}

.wizardTab
{
  width: 100%;
  background-color: var(--accent-color);
  color: var(--highlight-color);
  font-size: 1.2rem;
  font-weight: bold;
  padding: var(--spacing);
}

.wizardTab.selected
{
  color: var(--font-color);
  border-bottom: 4px solid var(--highlight-color);
}

.onwardButton
{
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: var(--highlight-color);
  padding: var(--spacing);
  border: 1px solid var(--highlight-color);
  border-radius: 10px;
  background-color: var(--page-background-color);
}

.onwardButton.enabled
{
  color: var(--highlight-color);
  border: 1px solid var(--highlight-color);
  background-color: var(--font-color);
}

.onwardButton.enabled:hover
{
  filter: brightness(85%);
}

.fullW
{
  width: 100%;
  display: flex;
}

.fullW .smallContainerInputUnder
{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.fullW > div
{
  padding: var(--spacing);
  width: 100%;
}

.characterWizard .smallContainerInputUnder .smallInputContainerInput
{
  width: 100%;
}

.characterWizard .smallContainerInputUnder .smallContainerInputLabel
{
  padding-bottom: 0px;
  width: auto;
  position: relative;
  bottom: 0px;
}

.characterWizard .smallContainerInputLabel
{
  font-size: 1rem;
}

.smallContainerInputUnder .smallInputContainerInput
{
  width: 40px;
}

.smallContainerInputUnder .smallContainerInputLabel
{
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: -30px;
}

.smallContainerInputUnder.count .smallContainerInputLabel
{
  margin-left: calc(calc(var(--spacing) * 2 + 1em) * -1);
  width: calc(100% + calc(var(--spacing) * 4 + 2em));
}

label
{
  font-size: 1rem;
  line-height: 1rem;
  height: var(--label-height);
  text-align: center;
  text-transform: capitalize;
  margin: 0;
  cursor: default;
  width: 100%;
  font-weight: 300;
}

.under * label
{
  font-size: .8rem;
  margin-top: var(--label-margin)
}

.smallContainerInputLabel.over
{
  display: block;
}

.placeholder
{
  clear: both;
  display: none;
}

.inputContainer.full
{
  width: calc(100% - calc(var(--spacing) + 2));
}

.inputContainer.full > input
{
  text-align: left;
}

.inputContainer.alignLeft * input {
  text-align: left;
}

.characterInfoBlock .invalid,
.modalFooter .invalid,
.characterRace.invalid
{
  color: hsl(var(--invalid-hue), 41%, 54%);
}

.modalFooter .invalid
{
  float:right;
  margin-right: var(--spacing);
  line-height: 2.4rem;
  font-size: 1rem;
}


.modalSideInfo
{
  display: none;
}

.autoSize.modalSideInfo
{
  position: fixed;
  display: block;
  right: 0px;
  top: 0px;
  height: 100%;
  padding: var(--spacing);
  overflow-y: auto;
  background-color: var(--modal-background-color);
  border: var(--modal-border-color);
  max-width: 300px;
}

.maintenanceSelect.modalSideInfo
{
  position: fixed;
  display: block;
  left: 0px;
  top: 60px;
  height: calc(100% - 80px);
  padding: var(--spacing);
  overflow-y: auto;
  background-color: var(--modal-background-color);
  border: var(--modal-border-color);
  width: var(--skills-width);
}

.invalid .inputContainerInput
{
  background-color: var(--invalid-accent-color);
  box-shadow: unset;
  box-shadow: inset 0 0 5px var(--invalid-highlight-color), 0 0 8px var(--invalid-accent-color);
  border: 1px solid var(--invalid-highlight-color);
}

/*This goes just above an input and container two buttong for incrementing and decrementing the value*/
.inputContainerIncrementAbove
{
  position: absolute;
  top: -22px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inputContainerIncrementAbove.includesTrailingText
{
  width: calc(100% - 1.2rem);
}

.inputContainerIncrementAboveButton,
.inputContainerIncrementBelowButton
{
  background-color: var(--font-color);
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  text-align: center;
  width: 100%;
}

.inputContainerIncrementAboveButton:hover,
.inputContainerIncrementBelowButton:hover
{
  filter: brightness(85%);
}

.dark .inputContainerIncrementAboveButton:hover,
.dark .inputContainerIncrementBelowButton:hover
{
  filter: brightness(125%);
}

.smaller
{
  width: 38px;
}

input.boldEditableText
{
  background-color: var(--header-color);
  color: var(--header-font);
  box-shadow: 0;
  border: 0;
  width: calc(100% - var(--spacing));
  font-size: 22px;
}

input.boldEditableText::placeholder
{
  color: var(--bold-placeholder-color);
}

.inputContainer div.standalone,
.buttonSelect.standalone > div
{
  padding: 1rem;
}

.inputContainer div.footer
{
  padding: 0px;
  display: block;
}

.inputContainer.footer
{
  float: right;
}

.footer input.standalone
{
  width: var(--gridSize);
  margin: 4px;
  height: calc(var(--input-height) - 8px);
  padding-left: var(--spacing);
}

.buttonSelect.standalone
{
  width: 100%;
}

input.standalone
{
  width: var(--gridSize);
}

input[type=text].standalone
{
  width: 100%;
}

.inputContainer
{
  display: flex;
  position: relative;
}

.inputContainer > div
{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inputContainer.under > div
{
  flex-direction: column-reverse;
}

.warning:after
{
  box-sizing: border-box;
  content: '\26A0';
  position: absolute;
  right: 0px;
  top: 1rem;
  color: var(--font-color);
  padding: 2px;
  text-shadow: 1px 0px 1px var(--warning-color), -1px 0px 1px var(--warning-color), 0px 1px 1px var(--warning-color), 0px -1px 1px var(--warning-color);
}

.warningBlock
{
  background-color: var(--warning-color);
  color: var(--font-color);
  padding: 4px;
  border-radius: 4px;
  margin-top: var(--spacing);

}

.classChoiceButton.warning:after{
  top: -.2rem;
}

.classChoiceButton.empty {
  background-color: var(--font-color);
  color: var(--accent-color);
}

.dark .classChoiceButton.empty {
  background-color: var(--font-color);
  color: var(--accent-color);
}

.column
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.column.left
{
  align-items: flex-start;
  justify-content: flex-start;
}

.addBtn
{
  float: left;
}

.collapseBtn .flusher
{
  margin-left: 0px;
}

.collapseBtn:hover, .addBtn:hover
{
  text-decoration: underline;
}

.collapsibleSectionHeader
{
  margin-bottom: var(--spacing);
  text-transform: capitalize;
}

.collapsibleSectionHeader, .addRows
{
  clear:both;
}

.collapsibleSectionHeader > *, .addRows > *
{
  display: inline-block;
  margin-right: 4px;
}

.collapsibleSectionHeader > h3
{
  font-size: 26px;
}

.subHeader,
.beastHeader
{
  font-size: 1.4rem;
  border-bottom: 1px solid var(--highlight-color);
  padding: 4px;
  background-color: var(--highlight-color);
}

.dark .subHeader,
.dark .beastHeader
{
  color: hsl(var(--hue), 23%, 75%);
  background-color: var(--header-color);
  border-bottom: 1px solid var(--header-color);
}

.levelHeader
{
  font-size: 1.4rem;
  border-bottom: 1px solid var(--highlight-color);
  padding: 4px;
  background-color: var(--highlight-color);
}

.dark .levelHeader
{
  color: hsl(var(--hue), 23%, 75%);
  background-color: var(--header-color);
}

.subHeader.noSpacing
{
  margin-top: 0px;
}

.topSpacing,
.fill .subHeader,
.poolsHeader .subHeader
{
  margin-top: var(--spacing);
}

.grid
{
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: var(--grid-height);
  gap: calc(var(--spacing) * 2) var(--spacing);
  margin-right: var(--spacing);
  margin-top: var(--spacing);
  grid-auto-rows: var(--grid-height);
}

.grid.spaceBetween
{
  margin-bottom: var(--grid-height);
}


.grid.dense
{
  grid-auto-flow: dense;
  grid-auto-rows: max-content;
  grid-template-rows: 0px;
}

.grid.dense.inputTop
{
  grid-template-rows: auto;
}

.grid.inner18
{
  grid-column: 3 / 21;
  grid-template-columns: repeat(18, 1fr);
}

.grid.inner18 .grow
{
  grid-column-end: 19;

}

.fill
{
  background-color: var(--grid-bg-color);
  border: 1px solid var(--highlight-color);
  padding: 10px 10px 20px 10px;
  margin-top: 10px;
}

.level
{
  background-color: var(--grid-bg-color);
  border: 1px solid var(--highlight-color);
  margin-bottom: 80px;
}

.levelContentHeader
{
  font-size: 4.5rem;
  line-height: 5.5rem;
  text-align: center;
  font-family: 'Cinzel', monospace;
}

.synthwave .levelContentHeader
{
  font-family: "Neonderthaw", cursive;
}

.grid.skill
{
  padding: calc(var(--label-height) + var(--spacing)) var(--spacing) calc(var(--spacing) * 2) var(--spacing);
  background-color: var(--page-background-color-no-transparency);
}


.dark .grid.skill
{
  background-color: var(--highlight-color);
}

.skill.odd,
.dark .skill.odd
{
  background-color: var(--skills-bg-color);
}

.boldLabel
{
  background-color: var(--header-color);
  text-align: center;
  text-transform: capitalize;
  cursor: default;
  box-shadow: var(--bold-label-shadow);
  border: var(--bold-label-border);
}

.feat,
.classFeature
{
  background-color: var(--accent-color);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  height: var(--input-height);
  border: 1px solid var(--highlight-color);
  box-shadow: 2px 2px 5px var(--highlight-color);
}

.dark .feat,
.dark .classFeature
{
  background-color: hsl(195, 26%, 18%);
}

.restButton
.companionDismissButton
{
  height: var(--input-height);
  color: var(--font-color);
  line-height: var(--input-height);
  font-size: var(--font-size);
  padding: 0px 10px;
  text-transform: capitalize;
}

.poolsHeader
{
  margin-top: var(--spacing);
}

.charge
{
  border: 1px solid var(--highlight-color);
  height: 1rem;
  width: 1rem;
  margin-right: var(--spacing);
  display: inline-block;
  cursor: pointer;
}

.dark .charge
{
  border-color: var(--modal-border-color);
}

.chargeContainer
{
  display: none;
}

.cardChargeRoom .chargeContainer,
.columCardWrapper .chargeContainer,
.chargeContainer.show,
.ammoContainer
{
  display: block;
  margin-top: 4px;
  height: 3.5rem;
}

.columCardWrapper .chargeContainer
{
  margin-top: calc(var(--spacing) * 2);
}

.ammoContainer
{
  height: auto;
}

.chargesContainerValue
{
  display: block;
  width: 100%;
  text-align: center;
  height: var(--input-height);
  line-height: var(--input-height);
  font-size: 1.2rem;
}

.grid .ammoContainer
{
  margin-top: 6px;
  height: 4em;
}

.grid .ammoContainerDecrement,
.grid .ammoContainerIncrement
{
  margin-top: 7px;
}

.chargeWrapper.show,
.ammoContainer
{
  background-color: var(--grid-bg-color);
  border: 1px solid var(--highlight-color);
  border-radius: 4px;
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.dark .chargeWrapper.show,
.dark .ammoContainer
{
  border-color: var(--modal-border-color);
}

.ammoContainerIncrement,
.ammoContainerDecrement
{
  cursor: pointer;
  height: calc(var(--input-height) - 2px);
  width: calc(var(--spacing) * 2 + 1em);
  font-size: 1.2rem;
  text-align: center;
  line-height: var(--input-height);
  background-color: var(--highlight-color);
  display: inline-block;
  position: absolute;
  top: 2px;
}
.ammoContainerIncrement:hover,
.ammoContainerDecrement:hover
{
  filter: brightness(1.2);
}

.ammoContainerDecrement
{
  left: -20px;
}

.ammoContainerIncrement
{
  right: -28px;
}

.ammoContainer
{
  width: 160px;
  margin-left: 12px;
}


div.smallInputContainerInput.pointer.ammoSelect
{
  width: calc(100% - 26px);
  white-space: nowrap;
  display: block;
}

.overSelectLabel
{
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.chargeLabel
{
  font-weight: bold;
}

.cardCharges
{
  line-height: 1rem;
}

.chargeText
{
  display: inline-block;
  vertical-align: top;
}

.penaltyBonusContainer
{
  display: flex;
}

.penaltyBonusContainer .inputContainer div.standalone
{
  padding: 1rem 4px;
}

.penaltyBonusContainer .standalone label
{
  line-height: 1rem;
}
.actionsTabContainer
{
  z-index: 1;
  background-color: var(--accent-color);
  margin-top: var(--spacing);
}

.actionsTabContainer,
.companionNav,
.spellLevelsNav,
.modalNav
{
  width: 100;
  border-bottom: 6px solid var(--highlight-color);
  position: relative;
}

.dark .companionNav,
.dark .spellLevelsNav,
.dark .modalNav,
.dark .actionsTabContainer
{
  border-bottom: 6px solid var(--header-color);
}

.companionNav,
.dark .companionNav
{
  border-bottom: 2px solid var(--highlight-color);;
}

.chargeDisabled
{
  opacity: .4;
}

.chargeFilled
{
  background-color: var(--magical-shine-color);
  margin: 2px;
  height: calc(100% - 4px);
  width: calc(100% - 4px);
}

.button
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--accent-color);
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  border: 1px solid var(--highlight-color);
  color: var(--font-color);
  align-items: center;
  box-sizing: border-box;
}

.dark .button
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal .button
{
  background-color: var(--accent-color);
}


.button.over
{
  margin-top: var(--label-height);
}

.inputHeight
{
  height: var(--input-height);
}

.button.round > div
{
  color: var(--font-color);
  font-size: 2rem;
}

.button > div
{
  font-size: 1.5rem;
}

.button > label
{
  color: var(--font-color);
  font-size: .8em;
}

.button.g1.standalone
{
  width: var(--input-height);

}

.button.under.standalone
{
  margin-top: 1rem;
}

.boldLabel > div
{
  color: var(--header-font);
  line-height: 36px;
  font-size: 22px;
  margin-bottom: -6px;
  margin-top: 6px;
}

.boldLabel.h2 > div
{
  margin-top: calc(var(--grid-height) - var(--spacing));
}

.boldLabel > label
{
  color: var(--header-font);
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  white-space: nowrap;
}

#abilities > .inputContainer
{
  width: 71px;
}

.small
{
  width: 60px;
}

.standaloneText
{
  line-height: 36px;
  font-size: 21px;
  margin-left: 7px;
}

/**
* react-select overrides
*/
.buttonSelect .reactSelectOverride__control,
.buttonSelect .editSelectOverride__control,
.abilitySelectOverride .abilitySelectOverride__control
{
  border: 0px;
  background-color: var(--accent-color);
  border: 1px solid var(--input-border);
  box-shadow: unset;
  border-radius: 0px;
  height: var(--input-height);
  text-align: center;
  transition:   border linear 0.2s, box-shadow linear 0.2s;
  text-transform: capitalize;
}

.dark .buttonSelect .reactSelectOverride__control,
.dark .buttonSelect .editSelectOverride__control,
.dark .abilitySelectOverride .abilitySelectOverride__control
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal .buttonSelect .reactSelectOverride__control,
.dark .modal .buttonSelect .editSelectOverride__control,
.dark .modal .abilitySelectOverride .abilitySelectOverride__control
{
  background-color: var(--accent-color);
}

.button.round,
.buttonSelect.round * div.reactSelectOverride__control
{
  border-radius: 50%;
}

.reactSelectOverride__value-container--is-multi
{
  overflow: auto;
}

.button:hover
{
  border-color: var(--highlight-color);
  box-shadow: inset 0 0 5px var(--highlight-color), 0 0 8px var(--accent-color);
  cursor: pointer;
}

.dark .button:hover
{
  border-color: hsl(195, 26%, 18%);
  box-shadow: inset 0 0 5px hsl(195, 26%, 18%), 0 0 8px hsl(195, 26%, 18%);
}
.dark .modal .button:hover
{
  border-color: var(--highlight-color);
  box-shadow: inset 0 0 5px var(--highlight-color), 0 0 8px var(--accent-color);
}

.button:hover,
.smallInputContainerInput.pointer:hover,
.classChoiceButton:hover,
.navTab:hover,
.newLoadoutButtonText:hover,
.newEffectButtonText:hover,
.tabIcon:hover,
.weaponsTab:hover,
.charge:hover,
.splashContentLoginButton:hover,
.modalListItem:hover
{
  backdrop-filter: brightness(.95);
  filter: brightness(.95);
  z-index: 1;
}

.dark .button:hover,
.dark .smallInputContainerInput.pointer:hover,
.dark .classChoiceButton:hover,
.dark .navTab:hover,
.dark .newLoadoutButtonText:hover,
.dark .newEffectButtonText:hover,
.dark .tabIcon:hover,
.dark .weaponsTab:hover,
.dark .charge:hover,
.dark .splashContentLoginButton:hover,
.dark .modalListItem:hover
{
  backdrop-filter: brightness(1.2);
  filter: brightness(1.2);
}

.button:active
{
  background-color: var(--button-active);
}

.button.round.inputHeight
{
  min-width: var(--input-height);
  width: var(--input-height);
}

.button.round.effectsButton,
.button.round.diceButton
{
  min-width: calc(var(--input-height) * 1.2);
  min-height: calc(var(--input-height) * 1.2);
  width: calc(var(--input-height) * 1.2);
  height: calc(var(--input-height) * 1.2);
}

div.reactSelectOverride__control:hover,
div.editSelectOverride__control:hover,
div.abilitySelectOverride__control:hover
{
  border-color: var(--highlight-color);
  box-shadow: inset 0 0 5px var(--highlight-color), 0 0 8px var(--accent-color);
}

.dark div.reactSelectOverride__control:hover,
.dark div.editSelectOverride__control:hover,
.dark div.abilitySelectOverride__control:hover
{
  box-shadow: inset 0 0 5px var(--highlight-color), 0 0 8px hsl(195, 26%, 18%);
}

.dark .modal div.reactSelectOverride__control:hover,
.dark .modal div.editSelectOverride__control:hover,
.dark .modal div.abilitySelectOverride__control:hover
{
  box-shadow: inset 0 0 5px var(--highlight-color), 0 0 8px var(--accent-color);
}

div.reactSelectOverride__indicators,
div.editSelectOverride__indicators,
div.abilitySelectOverride__indicators
{
  display: none;
}

div.reactSelectOverride__menu,
div.editSelectOverride__menu,
div.abilitySelectOverride__menu
{
  width: auto;
  margin-top: 0;
  border-radius: 0px;
  top: var(--input-height);
  box-shadow: unset;
  border: 1px solid var(--highlight-color);
  white-space: nowrap;
}

div.editSelectOverride__menu
{
  width: 100%;
}

.buttonSelect.grow * .reactSelectOverride__menu
{
  left: -100%;
}

.boldLabel > svg
{
  margin: var(--spacing);
  fill: var(--icon-color);
  height: var(--grid-height);
}

div.reactSelectOverride__value-container,
div.editSelectOverride__value-container,
div.abilitySelectOverride__value-container
{
  border: 0px;
  margin-top: -4px;
  padding: 0px;
  height: 100%;

}

div.reactSelectOverride__value-container > input,
div.editSelectOverride__value-container > input,
div.abilitySelectOverride__value-container > input
{
  width: 1px;
}

div.reactSelectOverride__multi-value
{
  background-color: var(--accent-color);
  border: 1px solid var(--highlight-color);
}

.dark div.reactSelectOverride__multi-value
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal div.reactSelectOverride__multi-value
{
  background-color: var(--accent-color);
}

div.reactSelectOverride__multi-value__label
{
  color: var(--font-color);
}

div.reactSelectOverride__multi-value__remove
{
  visibility: hidden;
}

div.reactSelectOverride__multi-value__remove
{
  visibility: visible;
}

div.reactSelectOverride__single-value,
div.editSelectOverride__single-value
{
  color: var(--font-color);
  font-size: var(--font-size);
  width: calc(100% - calc(var(--input-padding) * 2));
  margin-left: 5px;
  text-align: center;
}

div.reactSelectOverride__placeholder,
div.editSelectOverride__placeholder,
div.abilitySelectOverride__placeholder
{
  color: var(--font-color);
  font-size: var(--font-size);
  width: calc(100% - calc(var(--input-padding) * 2));
  margin-left: 5px;
  white-space: nowrap;
}

.buttonSelect.round * .reactSelectOverride__placeholder
{
  font-weight: 700;
  font-size: 2rem;

}

div.reactSelectOverride__option,
div.editSelectOverride__option,
div.abilitySelectOverride__option,
div.hidden__option
{
  background-color: var(--accent-color);
  color: var(--font-color);
  border-bottom: 1px solid var(--highlight-color);
}

.dark div.reactSelectOverride__option,
.dark div.editSelectOverride__option,
.dark div.abilitySelectOverride__option,
.dark div.hidden__option
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal div.reactSelectOverride__option,
.dark .modal div.editSelectOverride__option,
.dark .modal div.abilitySelectOverride__option,
.dark .modal div.hidden__option
{
  background-color: var(--accent-color);
}

div.reactSelectOverride__option:last-child,
div.editSelectOverride__option:last-child,
div.abilitySelectOverride__option:last-child,
div.hidden__option:last-child
{
  border-bottom: 0px;
}

div.reactSelectOverride__option:hover,
div.editSelectOverride__option:hover,
div.abilitySelectOverride__option:hover,
div.hidden__option:hover
{
  background-color: var(--highlight-color);
}

div.reactSelectOverride__menu-list,
div.editSelectOverride__menu-list,
div.abilitySelectOverride__menu-list,
div.smallerSelect__menu-list
{
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: 0px;
}

div.hidden__menu-list
{
  padding-top: 0px;
  padding-bottom: 0px;
}

div.reactSelectOverride__option--is-selected,
div.editSelectOverride__option--is-selected,
div.abilitySelectOverride__option--is-selected,
div.hidden__option--is-selected
{
  color: var(--font-color);
  font-weight: bold;
}

.abilitySelectOverride
{
  overflow: visible;
}

.abilitySelectOverride.trailingGridText
{
  margin-top: 0px;
}

.inputGridText
{
  margin-top: var(--label-height);
}

.abilitySelectOverride > .standaloneText
{
  display: inline-block;
  vertical-align: top;
  margin-top: -1px;
}

.icon {
  fill: var(--header-font);
}

.noScroll
{
  overflow: hidden;
}

#reactEmbed,
.splashPageContent.dark #reactEmbed
{
  position: relative;
  min-height: 100vh;
  display: flow-root;
}


#reactEmbed.open
{
  filter: brightness(0.2);
  /* -webkit-backdrop-filter: brightness(.2); */
  backdrop-filter: brightness(1);
  pointer-events: none;
  position: relative;
}

.animateModal-enter
{
  transform: scale(0);
  opacity: 0;
}

.animateModal-enter-active
{
  transition: opacity 150ms ease-in, transform 150ms ease-in;
  transform: scale(1);
  opacity: 1;
}

.animateModal-exit {
  opacity: 1;
  transform: scale(1);
}

.animateModal-exit-active
{
  transform: scale(0);
  opacity: 0;
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}

.modal {
  position: fixed;
  background-color: var(--modal-background-color);
  border: 1px solid var(--modal-border-color);
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  top: 0;
  z-index: 1001;
  border-radius: 10px;

}

.enemyPrepView
{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  top: 0;
  z-index: 1001;
  border-radius: 10px;
  display: flex;
  overflow: auto;
  background-color: transparent;
  margin-top: 60px;
}

.modal.autoSize {
  max-width: 80vw;
  min-width: 500px;
  width: auto;
  height: auto;
  min-height: 100px;
  max-height: calc(100vh - 200px);
  background-color: var(--modal-background-color-autosize);
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  border: none;
  overflow: visible;

}

.threePartSelection,
.modalContentSection
{
  display: flex;
  height: calc(calc(100% - 6em) - 3px); /*header and footer are each 3 em, plus borders of each*/
  /* min-height: calc(calc(500px - 6em) - 3px); */
}

.modalContentSection
{
  flex-direction: column;
}

.threePartSelection.filter
{
  flex-direction: column;
}

.modalFilter
{
  height: 8em;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--modal-border-color)
}

.flexWrap
{
  flex-wrap: wrap;
}

.modalFilter.filterRow1
{
  height: 3em;
}

.filterRow1 .modalFilterFormLabel
{
  display: inline-block;
  width: auto;
}

.modalFilterSelectWrapper
{
  display: inline-block;
  white-space: nowrap;
}

.modalFilterSelectWrapper > div
{
  display: inline-block;
}

.modalFilterFormInput.integer
{
  width: 2rem;
}

.modalFilterFormInput.integer6
{
  width: 6rem;
}

.modalFilterFormLabel.disabled
{
  opacity: .5;
}

.modalFilterFormInput:disabled
{
  opacity: .3;
}

.modalFilterInputWrapper.max
{
  margin-left: 0px;
  padding-right: 4px;
  border-right: 1px solid;
}

.modalFilterInputWrapper.min:after
{
  content: "-";
}

.modalContainerWithFilter
{
  display: flex;
  height: calc(100% - 8em);
}

.modalContainerWithFilter.filterRow1
{
  display: flex;
  height: calc(100% - 3em);
}

.modalListHeaderButton
{
  height: 1.5rem;
  line-height: 1.5rem;
  margin: 0.2rem;
  font-size: .7rem;
  padding: 0px;
  border-radius: 4px;
  border: 1px solid var(--header-color);
  text-align: left;
  padding-left: 0.4rem;
  width: auto;
  margin-right: 0.4rem;
  font-weight: normal;
  position: relative;
  cursor: pointer;
  background-color: var(--header-color);
  z-index: 1;
}

.modalListHeaderButton.disableSourceBooks
{
  background-color: var(--invalid-highlight-color);
  color: var(--invalid-accent-color);
  border: 1px solid var(--invalid-accent-color);
}

.enableDisableSourcebooksButton
{
  position: absolute;
  right: 0px;
  top: 0px;
  padding-right: 4px;
}

.autoSize .threePartSelection,
.autoSize .modalContentSection,
.autosizeModalSection
{
  height: calc(calc(100% - 3em) - 1px); /*header is hidden. Footer is still 3 em, plus border top only*/
  min-height: calc(calc(100px - 3em) - 1px);
  padding: 0px var(--spacing);
}

.autosizeModalSection
{
  overflow-y: auto;
}

.modalList
{
  min-width: 25%;
  border-right: 1px solid var(--modal-border-color);
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: all .15s linear;
}

.modalList.w15
{
  min-width: 15%;
}

.modalList.auto
{
  min-width: 0%;
  width: 100%;
}

.modalListItems
{
  overflow: auto;
}

.modalListItem
{
  cursor: pointer;
  padding: 10px;
  font-size: 1.1em;
  transition: background-color linear .3s;
  background-color: inherit;
  text-transform: capitalize;
}

.modalListItem input
{
  width: auto;
  margin-right: var(--spacing);
  height: auto;
}

.input-spacing
{
  margin-right: var(--spacing);
}

.modalListItem.selected
{
  font-style: italic;
  font-weight: bold;
  background-color: var(--deepest-shade);
  /* box-shadow: 0px 0px 6px var(--deep-shadow); */
}

.dark .modalListItem.selected
{
  background-color: var(--modal-list-header-color);
}

.dark .modalListItem.listSectionHeader
{
  background-color: var(--modal-list-header-color);
}

.dark .deepShade .modalListItem.listSectionHeader
{
  color: hsl(var(--hue), 23%, 75%);
}

.lightShade .modalListItem.listSectionHeader
{
  background-color: var(--modal-list-header-color);
  filter: brightness(1.2);
}

.dark .lightShade .modalListItem.listSectionHeader
{
  color: hsl(var(--hue), 23%, 75%);
}

.modalListItems.slayerCheck .modalListItem.selected:after {
  content: "Slayer";
  color: var(--font-color);
  font-weight: 400;
  padding-left: calc(var(--spacing) * 2);
  display: block;
}

.modalListItemRightInfo
{
  float: right;
  right: var(--spacing);
}

.modalListItemSurfaceText
{
  font-size: .6rem;
  font-style: italic;
  font-weight: 400;
  color: var(--modalListSurfaceTextColor);
  text-transform: initial;
}

.modalListSurfaceTextHighlight
{
  color: var(--header-color);
}

.dark .modalListSurfaceTextHighlight
{
  color: var(--modal-border-color);
}

.roman
{
  font-family: "Spectral SC";
}

.dark .modalInfoContainer
{
  overflow: auto;
  --accent-color: var(--input-background-color);
}

.modalInfoContainer.m25,
.modalList.m25
{
  min-width:25%;
  width: 25%;
}

.modalInfoContainer.m10,
.modalList.m10
{
  min-width: 10%;
  width:10%;
}

.modalInfoContainer.m100
{
  width:100%;
}

.modalInfoContainer h1
{
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.lightShade
{
  background-color: var(--light-shade);
  box-shadow: inset 0px 0px 12px var(--deep-shadow);
}

.dark .lightShade
{
  color: hsl(var(--hue), 23%, 75%);
}

.deepShade
{
  background-color: var(--deep-shade);
  box-shadow: inset 0px 0px 12px var(--deep-shadow);
}

.dark .deepShade
{
  color: hsl(var(--hue), 23%, 75%);
}

.deeperShade
{
  background-color: var(--deeper-shade);
  box-shadow: inset 0px 0px 12px var(--deep-shadow);
}

.dark .deeperShade
{
  color: hsl(var(--hue), 23%, 75%);
}

.l10
{
  width: 10%;
}

.l20
{
  width: 20%;
}

.l30
{
  width: 30%;
}

.noShade
{
  background-color: var(--no-shade);
}

.listInvalid
{
  opacity: .5;
}

.modalContent
{
  margin-bottom: .5rem;
}

.modalContent table,
.modalContent th,
.modalContent td,
.cheatSheet table,
.cheatSheet th,
.cheatSheet td
{
  border-collapse: collapse;
  border: 1px solid;
  text-align: center;
}

.gmSheet
{
  display: flex;
}

.gmSheet section
{
  background-color: var(--modal-background-color);
  border-radius: 10px;
}

.cheatSheet
{
  display: inline-block;
  padding: var(--spacing);
  vertical-align: top;
  width: 30%;
}

sup .inlineSpell
{
  margin-left: 4px;
  font-weight: bold;
}

.modalContent th
{
  font-weight: bold;
}

.spellInfo,
.featInfo,
.modalInfo
{
  overflow: auto;
  padding: var(--spacing);
  height: calc(100% - var(--spacing) * 3);
}

.modalInfo > .spellInfo,
.modalInfo > .featInfo
{
  height: unset;
}

.spellInfo table,
.featInfo table,
.modalInfo table
{
  border-collapse: collapse;
}

.spellInfo table th,
.spellInfo table td,
.featInfo table th,
.featInfo table td,
.modalInfo table th,
.modalInfo table td
{
  border: 1px solid var(--font-color);
  padding: 2px 4px;
  text-align: center;
}

.modalInfo
{
  font-size: 1.2em;
  line-height: 1.6em;
}

.spellName,
.featName,
.raceName,
.raceAbilityName,
.modalInfoHeader
{
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
  line-height: 1.8rem;
}

.characterWizard .modalInfoHeader
{
  margin-top: 0px;
}

.modalSubheader
{
  font-weight: bold;
  font-size: 1rem;
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

.spellSchool
{
  text-transform: capitalize;
}


.castingInfo
{
  margin-top: var(--spacing);
}

.castingInfo .textLabel
{
  font-weight: bold;
}

.modalHeader
{
  height: 3em;
  background-color: var(--accent-color);
  border-bottom: 1px solid var(--modal-border-color);
  line-height: 2em;
}

.autoSize .modalHeader
{
  height: 0px;
  background-color: var(--page-background-color-no-transparency);
  border: 0px;
  overflow: hidden;
}

.autoSize .modalContentSection
{
  margin-top: 2rem;
}

.autoSize span.dismissModal
{
  border-radius: 33%;
  position: absolute;
  right: 0px;
  height: 2em;
  width: 2em;
  top: calc(2em * -1.1);
  color: var(--deepest-shade);
  background-color: hsla(0, 100%, 100%, .1);

}

.dark .autoSize span.dismissModal
{
  background-color: var(--modal-background-color-autosize);
  color: hsl(0, 0%, 65%);
}

.modalListHeader
{
  line-height: 1.9rem;
  min-height: 3.8rem;
  display: flex;
  flex-direction: column;
  font-size: 1.3em;
  font-weight: bold;
  border-bottom: 1px solid var(--modal-border-color);
  text-transform: capitalize;
  padding-left: var(--spacing);
  background-color: var(--light-shade);
  position: relative;
}

.dark .modalListHeader
{
  color: hsl(var(--hue), 57%, 92%);
  background-color: var(--modal-list-header-color);
}

.modalList.collapsed
{
  width: 20px;
  min-width: 20px;
}

.collapsed .modalListHeader
{
  height: 100%;
}

.collapsed .modalListHeaderLabel
{
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-left: .8rem;
  margin-top: 30px;
}

.collapsed .modalListItems
{
  width: 10px;
}

.collapse
{
  transition: transform .15s linear;
  position: absolute;
  right: 10px;
  top: 4px;
  line-height: 1rem;
  width: 1rem;
  transform: rotate(.25turn);
}

.collapse:hover
{
  background-color: var(--button-wave-color);
}

.modalList.collapsed:hover
{
  background-color: var(--button-wave-color);
}

.modalList.collapsed:hover .modalListHeader
{
  background-color: var(--button-wave-color);
}

.collapsed .collapse
{
  transform: rotate(-.25turn);
  left: 1px;
  top: 6px;
}

.modalListHeaderSearch
{
  height: 1.5rem;
  line-height: 1.5rem;
  margin: .2rem;
  font-size: .7rem;
  padding: 0px;
  border-radius: 10px;
  border: 1px solid var(--highlight-color);
  background-color: var(--grid-bg-color);
  text-align: left;
  padding-left: .4rem;
  width: auto;
  margin-right: .4rem;
  position: relative;
}

.dark .modalListHeaderSearch
{
  background-color: var(--accent-color);
  border: 1px solid var(--highlight-color);
}

.modalTitle
{
  display: inline-block;
  font-weight: bold;
  font-size: 1.5em;
  margin-left: var(--spacing);
  vertical-align: middle;
  line-height: 2em;
}

.dismissModal
{
  float: right;
  height: 100%;
  line-height: 2em;
  font-size: 1.4em;
  box-sizing: border-box;
  padding: 0px var(--spacing);
  font-weight: bold;
  background-color: var(--highlight-color);
  cursor: pointer;
}

.dark .dismissModal
{
  background-color: var(--modal-list-header-color);
  color: var(--font-color);
}

.modalFooter
{
  background-color: var(--accent-color);
  border-top: 1px solid var(--modal-border-color);
  height: 3em;
}

.autoSize .modalFooter
{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


.modalFooter .button
{
  float: right;
  background-color: var(--highlight-color);
  padding: 0px var(--spacing);
  height: calc(var(--input-height) - 1px);
}

.autoSize .modalFooter .button
{
  border-bottom-right-radius: 10px;
}

.modalFooter .button:not(:first-child)
{
  margin-right: var(--spacing);
}

.modalFooter .button:last-child:not(:first-child)
{
  border-bottom-right-radius: 0px;
}


.requestItemButton
{
  bottom: 1px;
  position: absolute;
  left: 1px;
  background-color: var(--highlight-color);
  padding: 4px;
  height: 1.5em;
  margin-bottom: .75em;
  line-height: .6em;
}

.requestItemButton > div
{
  font-size: 1.25em;
}

.spellbookLine.spellbookLineSectionHeader
{
  margin-top: 2.5rem;
}

.spellbookLine.bold
{
  font-size: 1.6em;
}

.spellbookLine
{
  font-family: Lato;
  font-size: 1.2em;
  padding-bottom: .4em;
  line-height: 1.2em;
  border-bottom: 1px solid var(--spellbook-line-color);
  display: flex;
  align-items: flex-end;
  margin-top: 1rem;
}

.spellbookLine.bold .spellbookSpellName
{
  margin-left: 0px;
}

.spellbookSpellName
{
  margin-left: var(--spacing);
  cursor: pointer;
  display: inline-block;
  line-height: .8em;
  margin-bottom: -3px;
  text-transform: capitalize;
}

.deleteSpellX,
.addSpell
{
  cursor: pointer;
  margin-right: 4px;
  display: inline-block;
  line-height: .8em;
  margin-left: auto;
  margin-bottom: -3px;
}

.card
{
  box-shadow: unset;
  border: 2px solid black;
  padding: calc(var(--spacing) * 2) 12px;
  border-radius: 10px;
  position: relative;
  height: calc(calc(var(--grid-height) * 4) + var(--spacing));
  transition: transform linear .15s;
  left: 0;
  top: 0;
}

.cardOverlay
{
  width: 100%;
  position: absolute;
  justify-content: center;
  height: 100%;
  display: flex;
  flex-direction: row;
  top: -4px;
  left: -4px;
  border-radius: 10px;
  border: 4px solid transparent;
  z-index: 3;
  top: calc(var(--grid-height) * -3.3);
}

.card:hover,
.card.highlighted:hover
{
  z-index: 4;
}

.card:not(.disabled):hover
{
  filter: brightness(.95);
  cursor: pointer;

}

.dark .card:not(.disabled):hover
{
  filter: brightness(1.2);
}

.cardOverlayMobile
{
  display: none;
}

.card.disabled
{
  opacity: .5;
}

.card.activate
{
  top: calc(50% - calc(var(--grid-height) * 2));
  left:50%;
  position: fixed;
  z-index: 3;
  transform: scale(1.3);
}

.cardOverlayButton,
.activateOnOthersAll
{
  color: var(--orig-font-color);
  font-size: .8rem;
  line-height: 1.5rem;
  padding: 4px;
  background-color: var(--highlight-color);
  border-radius: 4px;
  border: 1px solid var(--accent-color);
  align-self: center;
  max-width: 60%;
  text-align: center;
  height: auto;
  margin-left: var(--spacing);
  animation: activateButtonGlow 1500ms infinite;
}

.dark .cardOverlayButton,
.dark .activateOnOthersAll
{
  background-color: hsl(195, 26%, 18%);
}

.inDialogButton
{
  color: var(--orig-font-color);
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding: 4px;
  background-color: var(--highlight-color);
  border-radius: 4px;
  border: 1px solid var(--accent-color);
  align-self: center;
  max-width: 60%;
  text-align: center;
  height: auto;
  margin-left: var(--spacing);
}

.inDialogButton:first-child
{
  margin-left: 0px;
}

.confirmText
{
  font-size: 1rem;
  padding: var(--spacing);
}

/* .cardOverlayButton:nth-child(2)
{

} */

@keyframes glowing {
  00% { box-shadow: 0 0 20px var(--magical-shine-color); transform: scale(1.0) }
  40% { box-shadow: 0 0 40px var(--magical-shine-color); transform: scale(1.03) }
  100% { box-shadow: 0 0 20px var(--magical-shine-color); transform: scale(1.0) }
}

@keyframes glowingActivated {
  00% { box-shadow: 0 0 20px var(--magical-shine-color)}
  40% { box-shadow: 0 0 40px var(--magical-shine-color)}
  100% { box-shadow: 0 0 20px var(--magical-shine-color)}
}

@keyframes activateButtonGlow {
  00% { box-shadow: 0 0 20px var(--card-glow-color); transform: scale(1.0) }
  40% { box-shadow: 0 0 40px var(--card-glow-color); transform: scale(1.03) }
  100% { box-shadow: 0 0 20px var(--card-glow-color); transform: scale(1.0) }
}


@keyframes rollDiceThrob {
  00% { transform: scale(1.0) }
  40% { transform: scale(1.03) }
  100% { transform: scale(1.0) }
}


.card.highlighted
{
  position: relative;
  z-index: 1;
  box-shadow: 0 0 20px var(--magical-shine-color)
}

.conjuration,
.maneuver,
.card,
.psychoportation
{
  --card-text-bg: hsl(var(--conjuration-hue), 25%, 96%);
  --card-font-color: hsl(var(--conjuration-hue), 25%, 20%);
  --card-font-color-on-card: hsl(var(--conjuration-hue), 25%, 20%);
  background-image: url(/assets/images/Conjuration_Light.jpg);
  background-size: cover;
  color: var(--card-font-color-on-card);
}

.cardItemInfoText
{
  line-height: 1rem;
}

.dark .conjuration,
.dark .maneuver,
.dark .card,
.dark .psychoportation
{
  --card-text-bg: hsl(var(--conjuration-hue), 31%, 4%);
  background-image: url(/assets/images/Conjuration_Dark.jpg);
  background-size: cover;
  --card-font-color: hsl(var(--conjuration-hue), 25%, 65%);
  --card-font-color-on-card: hsl(var(--conjuration-hue), 25%, 65%);
}

.abjuration
{
  --card-text-bg: hsl(var(--abjuration-hue), 50%, 96%);
  --card-font-color: hsl(var(--abjuration-hue), 50%, 30%);
  --card-font-color-on-card: hsl(var(--abjuration-hue), 50%, 30%);
  background-image: url(/assets/images/Abjuration_Light.jpg);
  background-size: cover;

}

.dark .abjuration
{
  background-image: url(/assets/images/Abjuration_Dark.jpg);
  background-size: cover;
  --card-text-bg: hsl(var(--abjuration-hue), 87%, 6%);
  --card-font-color: hsl(var(--abjuration-hue), 35%, 67%);
  --card-font-color-on-card: hsl(var(--abjuration-hue), 35%, 74%);

}

.necromancy
{
  --card-text-bg: hsl(var(--necromancy-hue), 61%, 96%);
  --card-font-color: hsl(var(--necromancy-hue), 69%, 20%);
  --card-font-color-on-card: hsl(var(--necromancy-hue), 69%, 20%);
  background-image: url(/assets/images/Necromancy_Light.jpg);
  background-size: cover;
}

.dark .necromancy
{
  --card-text-bg: hsl(var(--necromancy-hue), 56%, 6%);
  --card-font-color: hsl(var(--necromancy-hue), 58%, 65%);
  --card-font-color-on-card: hsl(var(--necromancy-hue), 58%, 65%);
  background-image: url(/assets/images/Necromancy_Dark.jpg);
  background-size: cover;
}

.enchantment,
.telepathy
{
  --card-text-bg: hsl(var(--enchantment-hue), 100%, 96%);
  --card-font-color: hsl(var(--enchantment-hue), 39%, 30%);
  --card-font-color-on-card: hsl(var(--enchantment-hue), 39%, 30%);
  background-image: url(/assets/images/Enchantment_Light.jpg);
  background-size: cover;
}

.dark .enchantment,
.dark .telepathy
{
  --card-text-bg: hsl(var(--enchantment-hue), 100%, 2%);
  --card-font-color: hsl(var(--enchantment-hue), 69%, 72%);
  --card-font-color-on-card: hsl(var(--enchantment-hue), 69%, 72%);
  background-image: url(/assets/images/Enchantment_Dark.jpg);
  background-size: cover;
}

.transmutation,
.psychometabolism
{
  --card-text-bg: hsl(var(--transmutation-hue), 63%, 96%);
  --card-font-color: hsl(var(--transmutation-hue), 63%, 25%);
  --card-font-color-on-card: hsl(var(--transmutation-hue), 63%, 25%);
  background-image: url(/assets/images/Transmutation_Light.jpg);
  background-size: cover;
}

.dark .transmutation,
.dark .psychometabolism
{
  --card-text-bg: hsl(var(--transmutation-hue), 41%, 6%);
  --card-font-color: hsl(var(--transmutation-hue), 35%, 61%);
  --card-font-color-on-card: hsl(var(--transmutation-hue), 35%, 61%);
  background-image: url(/assets/images/Transmutation_Dark.jpg);
  background-size: cover;
}

.divination,
.yellow,
.clairsentience
{

  --card-text-bg: hsl(var(--divination-hue), 40%, 96%);
  --card-font-color: hsl(var(--divination-hue), 40%, 30%);
  --card-font-color-on-card: hsl(var(--divination-hue), 40%, 30%);
  background-image: url(/assets/images/Divination_Light.jpg);
  background-size: cover;
}

.dark .divination,
.dark .yellow,
.dark .clairsentience
{
  --card-text-bg: hsl(var(--divination-hue), 40%, 6%);
  --card-font-color: hsl(var(--divination-hue), 35%, 65%);
  --card-font-color-on-card: hsl(var(--divination-hue), 35%, 65%);
  background-image: url(/assets/images/Divination_Dark.jpg);
  background-size: cover;
}

.melee,
.ranged,
.fullRoundAttack
{
  --card-bg1: hsl(var(--melee-hue), 0%, 98%);
  --card-bg2: hsl(var(--melee-hue), 0%, 80%);
  --card-text-bg: hsl(var(--melee-hue), 0%, 96%);
  --card-font-color: hsl(var(--melee-hue), 0%, 40%);
  --card-font-color-on-card: hsl(var(--melee-hue), 0%, 40%);
  background-image: radial-gradient( circle at center, var(--card-bg1) 0%, var(--card-bg2) 80%);
  background-image: url(/assets/images/asfalt-dark.png), radial-gradient( circle at center, var(--card-bg1) 0%, var(--card-bg2) 80%);
}

.dark .melee,
.dark .ranged,
.dark .fullRoundAttack
{
  --card-bg1: hsl(var(--melee-hue), 0%, 57%);
  --card-bg2: hsl(var(--melee-hue), 0%, 31%);
  --card-text-bg: hsl(var(--melee-hue), 0%, 12%);
  --card-font-color: hsl(var(--melee-hue), 0%, 69%);
  --card-font-color-on-card: hsl(var(--melee-hue), 0%, 4%);
  background-image: radial-gradient( circle at center, var(--card-bg1) 0%, var(--card-bg2) 80%);
  background-image: url(/assets/images/asfalt-dark.png), radial-gradient( circle at center, var(--card-bg1) 0%, var(--card-bg2) 80%);
}

.universal,
.universalist,
.psychoportation
{
  --card-text-bg: hsl(var(--universal-hue), 42%, 96%);
  --card-font-color: hsl(var(--universal-hue), 42%, 31%);
  --card-font-color-on-card: hsl(var(--universal-hue), 42%, 31%);
  background-image: url(/assets/images/Universal_Light.jpg);
  background-size: cover;
}

.dark .universal,
.dark .universalist,
.dark .psychoportation
{
  --card-text-bg: hsl(var(--universal-hue), 53%, 6%);
  --card-font-color: hsl(var(--universal-hue), 35%, 65%);
  --card-font-color-on-card: hsl(var(--universal-hue), 35%, 65%);
  background-image: url(/assets/images/Universal_Dark.jpg);
  background-size: cover;
}

.evocation,
.red,
.psychokinesis
{
  --card-text-bg: hsl(var(--evocation-hue), 70%, 96%);
  --card-font-color: hsl(var(--evocation-hue), 70%, 30%);
  --card-font-color-on-card: hsl(var(--evocation-hue), 70%, 30%);
  background-image: url(/assets/images/Evocation_Light.jpg);
  background-size: cover;
}

.dark .evocation,
.dark .red,
.dark .psychokinesis
{
  --card-text-bg: hsl(var(--evocation-hue), 64%, 6%);
  --card-font-color: hsl(var(--evocation-hue), 62%, 70%);
  --card-font-color-on-card: hsl(var(--evocation-hue), 72%, 63%);
  background-image: url(/assets/images/Evocation_Dark.jpg);
  background-size: cover;
}

.illusion
{
  --card-text-bg: hsl(var(--illusion-hue), 36%, 96%);
  --card-font-color: hsl(var(--illusion-hue), 36%, 36%);
  --card-font-color-on-card: hsl(var(--illusion-hue), 36%, 36%);
  background-image: url(/assets/images/Illusion_Light.jpg);
  background-size: cover;
}

.dark .illusion
{
  --card-text-bg: hsl(var(--illusion-hue), 67%, 6%);
  --card-font-color: hsl(var(--illusion-hue), 35%, 75%);
  --card-font-color-on-card: hsl(var(--illusion-hue), 35%, 68%);
  background-image: url(/assets/images/Illusion_Dark.jpg);
  background-size: cover;
}

.spellNameBonus
{
  color: var(--bonus-color);
  font-size: .7rem;
  margin-left: 4px;
}

.snillusion
{
  color: hsl(var(--illusion-hue), 41%, 30%);
}

.dark .snillusion
{
  color: hsl(var(--illusion-hue), 41%, 70%);
}

.snconjuration,
.snmetacreativity
{
  color: hsl(var(--conjuration-hue), 41%, 30%);
}

.dark .snconjuration,
.dark .snmetacreativity
{
  color: hsl(var(--conjuration-hue), 41%, 70%);
}

.sntransmutation,
.snpsychometabolism
{
  color: hsl(var(--transmutation-hue), 41%, 41%);
}

.dark .sntransmutation,
.dark .snpsychometabolism
{
  color: hsl(var(--transmutation-hue), 41%, 41%);
}

.snabjuration
{
  color: hsl(var(--abjuration-hue), 41%, 30%);
}

.dark .snabjuration
{
  color: hsl(var(--abjuration-hue), 41%, 70%);
}

.snuniversal,
.snpsychoportation
{
  color: hsl(var(--universal-hue), 41%, 30%);
}

.dark .snuniversal,
.dark .snpsychoportation
{
  color: hsl(var(--universal-hue), 41%, 70%);
}

.snnecromancy
{
  color: hsl(var(--necromancy-hue), 41%, 30%);
}

.dark .snnecromancy
{
  color: hsl(var(--necromancy-hue), 41%, 70%);
}

.snevocation,
.snpsychokinesis
{
  color: hsl(var(--evocation-hue), 41%, 30%);
}

.dark .snevocation,
.dark .snpsychokinesis
{
  color: hsl(var(--evocation-hue), 41%, 70%);
}

.sndivination,
.snclairsentience
{
  color: hsl(var(--divination-hue), 41%, 30%);
}

.dark .sndivination,
.dark .snclairsentience
{
  color: hsl(var(--divination-hue), 41%, 70%);
}

.snechantment,
.sntelepathy
{
  color: hsl(var(--echantment-hue), 41%, 30%);
}

.dark .snechantment,
.dark .sntelepathy
{
  color: hsl(var(--echantment-hue), 41%, 70%);
}

.cardContent
{
  width: 100%;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  color: var(--card-font-color-on-card);
}

.cardTitle
{
  font-size: 1.3rem;
  text-align: center;
  font-family: Cinzel, monospace;
  font-weight: 400;
  white-space: nowrap;
  text-transform: capitalize;
}

.cardTitleSuperscript
{
  position: absolute;
  right: 6px;
  margin-top: -2px;
}

.cardInfoBtn
{
  position: absolute;
  top: 2px;
  left: 9px;
  cursor: pointer;
  height: 1rem;
  padding: 1.5px;
  border-radius: 2px;
  fill: var(--card-font-color-on-card);
  box-shadow: 0px 0px 1px inset var(--card-font-color-on-card);
}

.cardInfoBtn:hover
{
  filter: brightness(.9);
  backdrop-filter: brightness(.9);
}

.dark .cardInfoBtn:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1.2);
}

.customCardEditButton
{
  position: absolute;
  top: -28px;
  right: 2px;
  cursor: pointer;
  height: 1rem;
  padding: 1px;
  z-index: 100;
}

.autoSize .modalContentSection.editCardModal
{
  width: 800px;
  /* height: 400px; */
}

.editCardLeftPanel
{
  width: calc(800px - 250px);
  padding: var(--spacing);
  /* padding-bottom: 300px; */
  /* height: 200px; */
  overflow-y: auto;
}

.editCardLeftPanel input
{
  width: 100%;
}

.editCardLeftPanel .inputContainer
{
  padding-bottom: calc(var(--spacing) * 2);
}

.editCardRightPanel
{
  position: fixed;
  right: 10px;
  width: 200px;
  display: flex;
  flex-direction: column;
  padding-left: 40px;
  padding-top: 10px;
  text-align: center;
  max-height: 400px;
}

.customOptionLabel
{
  margin-left: calc(50% - 15px);
  margin-top: 0px;
}
.customOption,
.customOptionIcon
{
  width: 40px;
  margin-left: calc(50% - 15px);
  margin-top: -12px;
}

.customOptionIconValue
{
  width: 30px;
  margin-left: calc(50% - 15px);
  margin-top: -30px;
}

.cardAction
{
  position: absolute;
  top: 2px;
  right: 6px;
  text-align: center;
  color: var(--card-font-color-on-card);
}

.cardSubTitle,
.spellCardDescriptor
{
  display:block;
  text-transform: capitalize;
  font-style: italic;
  text-align: center;
  line-height: 1em;
  font-size: .8em;
}

.featContent,
.featContent div
{
  margin-top: var(--spacing);
}

.textLabel
{
  font-weight: bold;
}

.featDescription
{
  font-style: italic;
}

.featBenefit > div:first-child,
.specialRender > div:first-child,
.completionBenefitRender > div:first-child,
.featBenefit > div:first-child > p:first-child,
.specialRender > div:first-child > p:first-child,
.completionBenefitRender > div:first-child > p:first-child
{
  display: inline;
}


.cardArt
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--grid-height);
  margin-top: .2em;
  border: 1px solid var(--card-font-color-on-card);
  position: relative;
  height: var(--grid-height);
}

.cardIcon
{
  display: flex;
  flex-direction: column;
  padding: .5em;
  background-color: var(--card-text-bg);
  fill: var(--card-font-color);
  stroke: var(--card-font-color);
}

.cardIcon.fontColor
{
  fill: var(--font-color);
  stroke: var(--font-color);

}

.cardBand
{
  height: 1.6rem;
  font-size: .7em;
  line-height: 1rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
  white-space: nowrap;
  overflow-x: hidden;
}

.fakeBand
{
  height: .4rem;
}

.cardSavingThrow
{
  float: left;
}

.attackCardRangeValue
{
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.cardResistance,
.attackCardAttackBonus
{
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fullBand
{
  width: 100%;
}

.attackCardAttackBonus.fullBand
{
  text-align: right;
}

.cardBandSpacer
{
  width: 2%;
}

.cardText,
.cardTextIcon
{
  border: 1px solid var(--card-font-color-on-card);
  height: 100%;
  width: 100%;
  text-align: justify;
  font-size: .85em;
  line-height: 1rem;
  padding: .5em;
  background-color: var(--card-text-bg);
  color: var(--card-font-color);
  box-sizing: border-box;
}

.cardTextIcon
{
  overflow: overlay;
}

.bold
{
  font-weight:bold;
}

.italic
{
  font-style: italic;
}

.normal
{
  font-weight: normal;
}

.capitalize
{
  text-transform: capitalize;
}

.preTextItem
{
  display: inline-block;
}

.cardSpecialText
{
  text-align: left;
}

.spellCardComponents
{
  display: flex;
  margin-left: 2px;
  flex-direction: column;
  position: absolute;
  align-items: flex-start;
  margin-top: 1px;
  line-height: .7rem;
  font-size: .5rem;
}

.casterLevel
{
  position: absolute;
  margin-top: 1px;
  right: 0px;
  line-height: .7rem;
  font-size: .5rem;
  border-radius: 4px;
  padding: 0px 2px;
}

.spellCardComponent
{
  margin-top: 1px;
  padding: 0px 2px;
}

.cardLocationToggleMargin
{
  margin-top: var(--grid-height);
}

.cardChargeRoom .cardWrapper
{
  grid-row-start: span 5;
}

.cardWrapper
{
  grid-column-start: span 4;
  grid-row-start: span 4;
  position: relative;
}

  .mobileStyle .cardWrapper
  {
    grid-column-start: span 20;
    grid-row-start: unset;
  }

  .mobileStyle .cardText, .mobileStyle .cardTextIcon
  {
    font-size: 1em;
    line-height: 1.4em;
    padding: 0px;
  }

  .mobileStyle .cardBand
  {
    font-size: 1em;
    line-height: 1.2em;
    display: block;
    height: auto;
    white-space: nowrap;
    line-height: 1.6em;
  }

  .mobileStyle .attackCardRangeValue,
  .mobileStyle .attackCardAttackBonus
  {
    font-weight: normal;
  }

  .mobileStyle .cardBand
  {
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid var(--highlight-color);
  }

  .mobileStyle .cardBandSpacer
  {
    display: none;
  }

  .mobileStyle .cardTitle > span
  {
    font-size: 1em !important;
  }

  .mobileStyle .cardSubTitle
  {
    width: 100%;
    font-size: 1.2em;
    text-align: center;
    filter: brightness(.5);
  }

  .mobileStyle .attackCardAttackBonus.fullBand
  {
    text-align: left;
  }

  .mobileStyle .card:not(.blastCard),
  .mobileStyle .dark .card:not(.blastCard)
  {
    --card-font-color: var(--font-color);
    --card-font-color-on-card: var(--font-color);
    background-image: unset !important;
    background-color: unset !important;
    border: none;
    height: auto;
    padding: 0px;
  }

  .mobileStyle .cardTitle:not(.blastCard)
  {
    text-align: left;
    margin-left: 20px;
    margin-right: 30px;
    white-space: break-spaces;
  }

  .mobileStyle .cardInfoBtn:not(.blastCard),
  .mobileStyle .cardAction:not(.blastCard)
  {
    top: 0px;
  }

  .mobileStyle .cardInfoBtn:not(.blastCard)
  {
    left: 0px;
  }

  .mobileStyle .cardTextIcon:not(.blastCard)
  {
    background-color: unset;
    border-radius: unset;
    border: unset;
    padding: 0px;
  }
  .mobileStyle .cardContent:not(.blastCard)
  {
    align-items: start;
  }

  .mobileStyle .combat .grid:not(.dense)
  {
    display: block;
  }

  .mobileStyle .cardWrapper:not(:last-child),
  .mobileStyle .columCardWrapper:not(:last-child)
  {
    border-bottom: 1px solid var(--font-color);
    padding-bottom: 20px;
  }

  .mobileStyle .grid
  {
    display: block;
  }

  .mobileStyle .cardArt:not(.blastCard)
  {
    display: none;
  }
  .mobileStyle .cardOverlay
  {
    display: block;
    right: 20px;
    width: auto;
    left: unset;
    top: 0%;
  }

  .mobileStyle .cardOverlayButton
  {
    margin: 4px 10px;
  }

.spellToggle
{
  display: flex;
  justify-content: space-evenly;
}

.spellToggleRadioAndLabel
{
  display: flex;
  flex-direction: column;
  width: 100%;
}

input.centeredRadio
{
  width: 25%;
  align-self: center;
}

.circleInputContainer
{
  display: flex;
  flex-direction: column;
  grid-column-start: span 10;
  width: 100%;
  position: relative;
}

.circleInputContainer.left
{
  grid-column: 1 / 11;
}

.circleInputContainer.right
{
  grid-column: 11 / 21;
}

.circleInput
{
  border: 1px solid;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  z-index: 2;
  position: relative;
  background-color: var(--accent-color);
  border-color: var(--font-color);
}

.dark .circleInput
{
  background-color: hsl(195, 26%, 18%);
}

.circleInput.end
{
  margin-left: -1.5em;
}

.circleInputTopRightRoundEnd
{
  border-top-right-radius: 1em;
}

.circleInputRoundEnd
{
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

.circleInputBannerContainer
{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.circleInputBanner
{
  font-size: var(--input-font-size);
  font-weight: 400;
  padding: var(--spacing) 3rem;
  padding-left: 3rem;
  margin-left: -1.5rem;
  z-index: 1;
  background-color: var(--header-color);
  border: 1px solid var(--font-color);
  color: var(--header-font);
  width: 100%;
  text-transform: capitalize;
}

.circleInputDrawer
{
  z-index: 1;
  border: 1px solid var(--font-color);
  display: block;
  margin-left: 2.5rem;
  margin-top: calc(calc(var(--spacing) * -.5) - 2px);
  width: calc(100% - 2.5rem);
  box-sizing: border-box;
  padding: 2px;
  background-color: var(--grid-bg-color);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.circleInputDrawer.noContent
{
  padding: 0px;
  border: 0px;
}

.circleInputDrawer.withEndInput
{
  width: calc(100% - 5.5rem);
}

.circleInputDrawerItem
{
  line-height: 1em;
}

.circleInputDrawerItemName
{
  display: inline;
  font-weight: 700;
  font-size: .6rem;
  text-transform: capitalize;
}

.circleInputDrawerItemValue
{
  display: inline;
  font-weight: 400;
  font-size: .6rem;
}

.circleInputDrawerContainer
{
  display: flex;
  align-items: flex-start;
}

.circleInputEnd
{
  margin-left: -1.5em;
}

.circleInputMid
{
  position: absolute;
  right: calc(4.5em + var(--spacing));
}

.circleInputEndLabel,
.circleInputMidLabel
{
  margin-left: var(--spacing);
}

.incrementCircleInput
{
  position: absolute;
  overflow: hidden;
  height: 94px;
  width: 94px;
  top: -20px;
  left: -20px;
  background-color: var(--page-background-color-no-transparency);
  border-radius: 50%;
  border: 1px solid var(--font-color);
  z-index: 2;
  cursor: pointer;
}

.incrementCircleInputTop,
.incrementCircleInputBottom
{
  position: absolute;
  height: 50%;
  width: 100%;
  text-align: center;
  background: var(--page-background-color-no-transparency);
  transition: all 0.15s;
}

.incrementCircleInputTop
{
  background-color: var(--highlight-color);
}

.incrementCircleInputTop:hover,
.incrementCircleInputBottom:hover
{
  filter: brightness(.95);
  backdrop-filter: brightness(.95);
}

.dark .incrementCircleInputTop:hover,
.dark .incrementCircleInputBottom:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1.2);
}

.incrementCircleInputTop
{
  top: 0;
}

.incrementCircleInputBottom
{
  bottom: 0;
  line-height: 64px;
  color: var(--damage-color);
}

.incrementCircleInput::after
{
  width: 96px;
  border: 1px solid var(--font-color);
  position: absolute;
  content: '';
  top: 50%;
}

.extraInfoTopContainer
{
  display: flex;
  justify-content: space-evenly;
}

.extraInfoOffensive,
.extraInfoSenses,
.extraInfoSpeeds,
.extraInfoSizeAndReach
{
  margin: 4px;
  max-width: 25%;
  width: 25%;
}

.extraInfoHeader
{
  font-size: 1rem;
  border-bottom: 1px solid var(--font-color);
  width: 100%;
  margin-bottom: 4px
}
.encumbranceHeader
{
  border-bottom: 1px solid var(--font-color);
  font-size: 1rem;
  margin-bottom: 4px;
  height: 1.5rem;
}

.encumbranceTitle
{
  float: left;
}

.encumbranceWeight
{
  float: right;
}

.encumbranceCheck
{
  height: 4rem;
  justify-content: space-evenly;
}

.box.encumbranceBox
{
  box-shadow: unset;
}

.box.encumbranceBox .box-inner
{
  padding-bottom: 0px;
}

.goldValueOfItems
{
  font-weight: bold;
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

.box {
  margin-top: var(--spacing);
  position:relative;
  padding: 4px;
  background-color: var(--grid-bg-color);
  width: 100%;
  border: 1px solid var(--font-color);
  box-shadow: 0px 0px 20px black;
  box-sizing: border-box;
}

.print .box
{
  box-shadow: unset;
  font-size: .8em;
}
.print .extraInfoHeader
{
  font-size: 1.2em;
}
.box:before, .box:after {
    content: "✷";
    position: absolute;
    width: 12px;
    height: 12px;
    font-size: 10px;
    color: var(--font-color);
    border: 1px solid var(--font-color);
    line-height: 10px;
    top: 4px;
  }
.box:before {
    padding-left: 2px;
    border-bottom-right-radius: 100%;
    left: 4px;
  }
.box:after {
  padding-right: 2px;
    border-bottom-left-radius: 100%;
    right: 4px;
    text-align: right;
  }
.box-inner {
    position: relative;
    border: 1px solid var(--font-color);
    padding: calc(2 * var(--spacing));
}
.box-inner:before, .box-inner:after {
      padding: var(--spacing);
      content: "✷";
      position: absolute;
      width: 12px;
      height: 12px;
      font-size: 10px;
      color: var(--font-color);
      border: 1px solid var(--font-color);
      line-height: 12px;
      bottom: -1px;
    }
.box-inner:before {
    padding: 0px;
    padding-left: 2px;
    border-top-right-radius: 100%;
      left: -1px;
    }
.box-inner:after {
  padding: 0px;
    padding-right: 2px;
    border-top-left-radius: 100%;
      right: -1px;
      text-align: right;
  }

.section15
{
  background-color: var(--section15BG);
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  padding: 0px;
  top: -0px;
  margin-top: var(--spacing);
}

a
{
  color: inherit;
}

.section15Text
{
  padding: var(--spacing);
}

.section15Header
{
  font-weight: bold;
  padding-left: 4px;
  border-bottom: 1px solid var(--font-color);
  background-color: var(--section15HeaderBG);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.characterInfoBlock
{
  border: 1px solid var(--deeper-shade);
  background-color: var(--light-shade-transparent);
  transition: box-shadow linear 0.2s, background-color linear 0.2s;
  margin: var(--spacing);
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  transition: height linear 0.2s;
}

.characterInfoBlock:hover
{
  box-shadow: 0px 2px 4px var(--deeper-shade);
  background-color: var(--deep-shade-transparent);
}

.dark .characterInfoBlock:hover
{
  color: hsl(var(--hue), 57%, 92%);
}

.characterInfoBlock:active
{
  background-color: var(--deeper-shade-transparent);
}

.dark .characterInfoBlock:active
{
  color: hsl(var(--hue), 57%, 92%);
}

.origCharacterInfo
{
  display: flex;
}

.splashOrigCharacterInfo
{
  text-align: left;
  position: relative;
}

.characterInfoContent
{
  position: relative;
  /* background-color: hsl(140, 11%, 30%); */
  margin-left: 90px;
  height: 32px;
  line-height: 32px;
}

.characterInfoContent:nth-child(1)
{
  margin-left: 0px;
}

.characterInfoName
{
  font-size: 20px;
  font-weight: 700;
  width: 300px;
  display: inline-block;
  font-family: "Cinzel", mono;
}

.characterInfoName__newCharacter
{
  text-align: center;
  position: relative;
  top: calc(50% - .5em);
}

.characterInfoBlock .characterBookList
{
  display: inline-block;
  padding: 4px;
  width: 16px;
  margin-left: var(--spacing);
  border: 1px solid var(--light-shade);
  border-radius: 1px;

}

.characterInfoBlock:hover .characterBookList
{
  border: 1px solid var(--deep-shade);
}

.dark .characterInfoBlock:hover .characterBookList
{
  color: hsl(var(--hue), 57%, 92%);
}

.characterInfoBlock:hover .characterBookList:hover
{
  background-color: var(--light-shade);
  border: 1px solid var(--deeper-shade);
}

.dark .characterInfoBlock:hover .characterBookList:hover
{
  color: hsl(var(--hue), 57%, 92%);
}

.characterInfoBlock:active .characterBookList
{
  border: 1px solid var(--deeper-shade);
}

.characterBookList:active
{
  background-color: var(--deeper-shade);
}

.dark .characterBookList:active
{
  color: hsl(var(--hue), 57%, 92%);
}

.booksIcon
{
  height: 14px;
  width: 14px;
  padding: 1px 2px 1px 1px;
}

.characterLevel
{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 300;
  width: 300px;
  line-height: 24px;
  margin-left: 90px;
  display: inline-block;
  text-overflow: ellipsis;
}

.characterLevel:nth-child(2)
{
  width: 400px;
  margin-left: 0px;
}

.characterClasses
{
  display: block;
  font-size: 16px;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.characterLevel:nth-child(2) .characterClasses
{
  width: 400px;
}

.copyText
{
  font-weight: 300;
  font-size: .8rem;
  padding: 4px;
  vertical-align: top;
  display: inline-block;
}

.characterBookList.copyCharacterButton
{
  font-weight: 300;
  font-size: .8rem;
  border: 1px solid var(--light-shade);
  width: auto;
  vertical-align: top;
}

.characterDeleteIcon
{
  flex-grow: 0;
  opacity: 0;
  transition: opacity linear 0.2s;
  font-size: 4em;
  line-height: 1em;
  background-color: var(--light-shade);
  border-radius: 4px;
  border: 1px solid var(--deeper-shade);
  padding: 4px;
  color: var(--deep-shade);

}

.dark .characterDeleteIcon
{
  color: hsl(var(--hue), 57%, 92%);
}

.characterInfoBlock:hover .characterDeleteIcon
{
  opacity: .5;
  color: var(--shade-icon-disabled);
}

.characterInfoBlock:hover .characterDeleteIcon:hover
{
  background-color: var(--invalid-accent-color);
  border: 1px solid var(--invalid-highlight-color);
  color: var(--shade-icon-color);
  opacity: 1;
}

.hidden
{
  display: none;
}

.deleteConfirmDrawer
{
  display:none;
}

.deleteConfirmDrawer.open
{
  display:block;
}

.deleteConfirmButton
{
  background-color: var(--accent-color);
  padding: 2px;
  margin: 2px 4px 0px 0px;
}

.dark .deleteConfirmButton
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal .deleteConfirmButton
{
  background-color: var(--accent-color);
}

.deleteConfirmButton:hover
{
  background-color: var(--button-hover);
}

.deleteConfirmButton:active
{
  background-color: var(--button-active);
}

.classInfo
{
  padding: 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  overflow: auto;
  height: 100%;
}

.classInfoText
{
  margin-bottom: 1em;
}

.classInfoTable
{
  border: 1px solid var(--modal-border-color);
  border-spacing: 0px 0px;
  border-collapse: collapse;
}

.classInfoTable .classLevelsRow.tableHeader
{
  background-color: var(--header-color);
  color: var(--header-font);
}

.classInfoTable .classLevelsRow:nth-child(even)
{
  background-color: var(--page-background-color);
}

.classInfoTable .classLevelsRow:nth-child(even)
{
  background-color: var(--accent-color);
}

.classInfoTable .classLevelsCell
{
  border: 1px solid var(--modal-border-color);
  padding: 4px;
  text-align:center;
}

.dark .classInfoTable .classLevelsRow.tableHeader
{
  background-color: var(--modal-list-header-color);
}

.classInfoTable  .classLevelsCell.classFeaturesCell
{
  text-align: left;
}

.classFeatureInfo
{
  margin-top: var(--spacing);
}

.classFeatureHeader
{
  font-size: 1.5em;
  font-weight: 700;
}

.classFeatureContent div
{
  margin-top: var(--spacing);
}

.favoredClassTooltip
{
  white-space: normal;
  text-transform: none;
}

.spinner
{
  margin-top: var(--spacing);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity ease-out .15s;
}

.mainLoading section
{
  font-family: "Cinzel", monospace;
}

main > section > .spinner > .lds-ring
{
  margin-top: 40px;
}

.spinner.smallSpinner
{
  display: inline;
  vertical-align: top;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 128px;
  height: 128px;
  margin-top: var(--spacing);
}

.smallSpinner .lds-ring
{
  width: 1rem;
  height: 1rem;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 102px;
  height: 102px;
  margin: 6px;
  border: 2px solid var(--header-color);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--header-color) transparent transparent transparent;
}

.smallSpinner .lds-ring div {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
  margin-top: -3px;
}

.progressBar
{
  background-color: var(--deep-shadow);
  margin: 0 auto;
  height: 2rem;
  border-radius: 1rem;
  width: 400px;
  overflow: visible;
  position: relative;
}

.progressBarText
{
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  white-space: nowrap;
  color: var(--login-font-color);
  font-weight: bold;
  text-align: center;
  position: absolute;
  width: 100%;
}

.dark .progressBarText
{
  color: var(--font-color);
  font-weight: normal;
}

.progressBarInner
{
  transition: width .5s ease-in;
  background-color: var(--header-color);
  border-radius: 1rem;
  height: 2rem;
  line-height: 2rem;
  font-weight: bold;
  overflow: visible;
  white-space: nowrap;

}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.themeIcon {
  height: 16px;
  width: 16px;
}

.mainThemeWrapper
{
  float:right;
  margin-right: 10px;
}

.headerThemeIcon
{
  height: .8rem;
  width: .8rem;
  margin-right: .5rem;
}

.headerThemeIconWrapper
{
  float: right;
  margin-top: 2px;
  height: 1px;
  width: 16px;
  margin-right: 4px;
}

.wizardTheme
{
  position: absolute;
  top: 0px;
  right: var(--spacing);
}

.wizardTheme .headerThemeIconWrapper
{
  margin-left: 4px;
}

.borderTopBottom
{
  border-top: 1px solid var(--font-color);
  border-bottom: 1px solid var(--font-color);
  text-transform: uppercase;
  margin: 4px 0px;
}

.nobull {
  list-style-type: none;
  padding-left: var(--spacing);
  margin: 0px;
 }

 .card li
 {
   padding-bottom: .3rem;
 }

 .card ul
 {
   padding-left: 0px;
   margin: .3rem 0rem;
 }

 .equipmentNav
 {
   width: 100%;
   display: flex;
   height: 3rem;
   margin-top: 20px;

 }

 .searchSection
 {
  position: absolute;
  right: 100px;
  z-index: 100;
  margin-top: 10px;
 }

 .searchItemList
 {
  position: absolute;
  border-radius: 4px;
  border-top: 1px solid var(--font-color);
  border-right: 1px solid var(--font-color);
  border-left: 1px solid var(--font-color);
 }

 .searchItem
 {
  padding: 4px;
  background-color: var(--accent-color);
  border-bottom: 1px solid var(--font-color);
  cursor: pointer;
 }

 .searchItemOptionType
 {
  filter: brightness(.7);
  font-size: .8em;
  margin-left: 4px;
 }

 .searchItemLabel
 {
  vertical-align: middle;
 }

 .searchItemOptionUnimplemented
 {
  font-size: .8em;
  margin-left: 4px;
  color: var(--invalid-highlight-color);
 }

 .searchItem:hover
 {
  background-color: var(--highlight-color);
 }

 .tabIcon
 {
   fill: var(--equipment-icon-color);
   stroke: var(--equipment-icon-color);
   cursor: pointer;
 }

 .tabIcon.selected
 {

   fill: var(--equipment-icon-color-selected);
   stroke: var(--equipment-icon-color-selected);
 }

 .tabIconContainer,
 .metakinesisOption
 {
   width: 100%;
   border: 1px solid var(--tab-icon-border-color);
   padding: 2px;
   overflow: hidden;
   position: relative;
   background-color: var(--tab-icon-color);
   display: inline-block;
 }

 .tabIconContainer.selected,
 .metakinesisOption.selected
 {
   background-color: var(--tab-icon-selected)
 }

 .weapon,
 .armor,
 .item
 {
   display: flex;
   box-sizing: border-box;
 }

 .dragEnd
 {
   height: 40px;
   width: 100%;
 }

 .weapon.dragOver,
 .armor.dragOver,
 .item.dragOver,
 .dragEnd.dragOver
 {
  border-top: 1px solid var(--warning-color);
 }

 .dragOver_right::after
 {
  position:absolute;
  content: "";
  right: calc(calc(var(--spacing) / 2) * -1);
  height: calc(calc(var(--grid-height) * 4) + var(--spacing));
  border-right: 2px solid var(--warning-color);
 }


 .dragOver_bottom .card::after
 {
  position:absolute;
  content: "";
  width: 100%;
  left: 0px;
  bottom: calc(calc(var(--spacing) * -1) + 2px);
  border-bottom: 2px solid var(--warning-color);
 }

 .dragOver_left::after
 {
  position:absolute;
  content: "";
  left: calc(calc(var(--spacing) / 2) * -1);
  height: calc(calc(var(--grid-height) * 4) + var(--spacing));
  border-left: 2px solid var(--warning-color);
 }

 .cardDropHandle_right
 {
   position: absolute;
   left: 0px;
   width: 45px;
   height: calc(calc(var(--grid-height) * 4) + calc(var(--spacing) * 5));
 }

 .cardDropHandle_right.extraHeight
 {
  margin-top: 72px;
 }

 .cardDropHandle_bottom
 {
   position: absolute;
   top: -20px;
   width: 100%;
   height: 20px;
 }

 .cardDropHandle_right.dragOver
 {
   border-right: 2px solid var(--warning-color);
 }

 .cardDropHandle_bottom.dragOver
 {
   border-bottom: 2px solid var(--warning-color);
 }

 .weaponHandedness,
 .armorEquipped,
 .itemEquipped
 {
   width: 15%;
   display: flex;
   justify-content: space-evenly;
 }

 .itemEquipped
 {
  display: table;
  border-spacing: 0px 2em;
  margin-top: calc(-1em + -2px);
 }

 .itemEquipped .handednessCheckContainer
 {
  display: table-row;
 }

 .itemEquipped .handednessCheckboxWrapper
 {
  justify-content: center;
 }

 .itemEquipped .handednessLabel
 {
  display: block;
 }

.weaponHandedness.specialInputs
{
  width: 5%;
}

.weaponHandedness.hasSpecial
{
  width: 10%;
}

 .itemListHeader
 {
   font-weight: bold;
   font-size: 1.2rem;
   text-transform: capitalize;
   margin: var(--spacing) 0px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--highlight-color);
   position: relative;
 }

 .dark .itemListHeader
 {
  border-color: var(--modal-border-color);
 }

 .handednessCheckContainer
 {
   display: flex;
   flex-direction: column;
   font-size: .8rem;
 }

 .handednessCheckContainer.centered
 {
  margin-top: var(--spacing);
 }

 .handednessCheckboxWrapper
 {
   display: flex;
   justify-content: space-evenly;
 }

 .handednessCheckbox
 {
   width: 1rem;
 }

 .weaponWrapper
 {
   width: 85%;
 }

 .handednessLabel
 {
  font-size: .7rem;
 }

 .handednessCheckContainer .disabled,
 .handednessCheckContainer input:disabled
 {
   opacity: .4;
 }

 .weaponsTab
 {
  filter: opacity(.4);
  transition: all .15 ease-in;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
 }

 .weaponsTab.selected
 {
  filter: opacity(1);
 }

 .weaponHeader
 {
   background-color: var(--header-color);
   color: var(--header-font);
   border-bottom: 1px solid var(--highlight-color);
 }

 .canDrag
 {
  cursor: move;
 }

.weaponHeaderContent
{
  margin: 0px .7rem;
  text-transform: capitalize;
}

 .weaponWrapper
 {
  border: 1px solid var(--highlight-color);
  border-radius: 4px;
  margin-top: var(--spacing);
  transition: background-color .4s ease-in;
  background-color: var(--grid-bg-color);
 }

 .borderContainer
 {
  border: 1px solid var(--highlight-color);
  background-color: var(--grid-bg-color);
  border-radius: 4px;
  padding: var(--spacing);
 }

 .dark .borderContainer
 {
  border-color: var(--modal-border-color);
 }

 .weaponWrapper.flash
{
  transition: background-color 0s ease-in;
  background-color: var(--highlight-color);
}

 .weaponText
 {
   display: inline-block;
 }

 .weaponEditButton
 {
   display: inline-block;
   fill: var(--header-font);
   margin-left: var(--spacing);
   width: 1rem;
  vertical-align: top;
  margin-top: 2px;
  opacity: .5;
 }

 .weaponDeleteButton,
 .traitButton
 {
   float: right;
   fill: var(--header-font);
   width: 1rem;
   vertical-align: top;
   margin-top: 2px;
   opacity: .5;
   color: var(--header-font);
 }

 .weaponEditButton.open
 {
   opacity: 1;
 }

.weaponContent
{

  margin: .7rem;
}

.weaponEditForm,
.smallContainerInputForm
{
  background-color: transparent;
  border-bottom: 1px solid var(--highlight-color);
  padding-bottom: var(--spacing);
  display: table;
  border-spacing: var(--spacing);
  width: 100%;
}

.dark .weaponEditForm,
.dark .smallContainerInputForm
{
  border-color: var(--modal-border-color);
}

.maintenanceEvolutionContainer
{
  border: 1px solid var(--highlight-color);
  border-radius: 10px;
  padding: 10px;
}

.smallContainerInputForm
{
  padding-bottom: 0px;
  border-bottom: 0px;
  width: auto;
}

.smallContainerInputForm.squish
{
  border-spacing: 4px;
}

.classContainer
{
  display: flex;
  gap: var(--spacing);
  margin: var(--spacing);
}

.classChoiceButton
{
  width: 50%;
  background-color: var(--accent-color);
  color: var(--font-color);
  font-size: 1.2rem;
  line-height: 2rem;
  vertical-align: middle;
  display: inline-block;
  height: 2rem;
  border-radius: 4px;
  position: relative;
  padding-left: var(--spacing);
  border: 1px solid var(--highlight-color);
  cursor: pointer;
}

.dark .classChoiceButton
{
  background-color: hsl(195, 26%, 18%);
}

.characterWizard .classChoiceButton
{
  width: 100%;
}

.characterWizard .classChoiceButton::after
{
  display: none;
}

input.weaponEditFormInput,
input.smallInputContainerInput,
div.smallInputContainerInput,
.restButton,
.companionDismissButton
{
  width: auto;
  height: calc(.8rem + 8px); /*4px padding twice */
  line-height: calc(.8rem + 8px); /*4px padding twice */
  font-size: .8rem;
  font-weight: 300;
  font-family: 'Lato';
  text-align: left;
}

input.smallInputContainerInput
{
  padding: 6px var(--spacing);
  height: 35px;
}

div.smallInputContainerInput,
input.smallInputContainerInput,
.restButton,
.companionDismissButton
{
  border-radius: 4px;
}

input.smallInputContainerInput.trulyReadOnly,
div.smallInputContainerInput.trulyReadOnly
{
  background-color: var(--accent-color);
  color: var(--font-color);
}

.dark input.smallInputContainerInput.trulyReadOnly,
.dark div.smallInputContainerInput.trulyReadOnly
{
  background-color: hsl(195, 26%, 18%);
}

.dark .modal input.smallInputContainerInput.trulyReadOnly,
.dark .modal div.smallInputContainerInput.trulyReadOnly
{
  background-color: var(--accent-color);
}

input.weaponEditFormInput::placeholder,
input.smallInputContainerInput::placeholder
{
  color: var(--font-color);
  opacity: .5;
}

input.modalFilterFormInput
{
  line-height: 1.2rem;
  height: 1.2rem;
  font-size: .8rem;
  border-color: var(--accent-color);
  background-color: var(--filter-input-color);
  color: var(--filter-input-font);
  border-radius: 4px;
  width: 100%;
  text-align: left;
}

.modalFilterInputWrapper,
.modalFilterSelectWrapper
{
  margin-top: 4px;
  margin-left: 6px;
  white-space: nowrap;
}

.flexBreak
{
  height: 0px;
  width: 100%;
}

.weaponEditFormInputLabel,
.smallContainerInputFormLabel
{
  font-size: .8rem;
  line-height: .8rem;
  display: table-row;
}

.smallContainerInputFormLabel.inline
{
  display: inline-block;
}

.smallContainerInputLabel.inline
{
  display: inline;
}

.weaponEditFormInputLabel input[type=checkbox]
{
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: bottom;
}

.weaponEditFormLabel,
.smallContainerInputLabel
{
  white-space: nowrap;
  display: table-cell;
  width: 1px;
  text-align: right;
  padding: 6px 0px;
  text-transform: capitalize;
}

.spellbookValueBlock
{
  float: right;
  display: block;
}

.spellbookValueLabel
{
  padding-right: 4px;
  display: inline-block;
  font-weight: bold;
}

.smallContainerInputLabel.under.select
{
  width: auto;
  padding-bottom: 0px;
}

.flexColumn div.smallInputContainerInput
{
  width: calc(100% - calc(var(--spacing) * 2));
}

.dark .smallInputContainerInput
{
  border: 1px solid var(--input-border);
}

.modalFilterFormLabel.select
{
  margin-top: 4px;
}

.modalFilterFormLabel.min
{
  overflow: show;
}

.modalFilterFormLabel
{
  height: 1.2rem;
  margin-right: 4px;
}

.modalFilterFormLabel.integer.min
{
  width: 2rem;
}

.modalFilterFormLabel.sm
{
  font-size: .6rem;
}

.modalFilterInputWrapper.max
{
  margin-left: 0px;
}

.modalFilterFormLabel.standalone
{
  line-height: 2rem;
  vertical-align: middle;
  margin-left: 4px;
}

.weaponEditFormInputFake
{
  height: .8rem;
  font-size: .8rem;
  border: 1px solid var(--highlight-color);
  color: var(--accent-color);
  padding: 4px;
  border-radius: 4px;
  background-color: var(--font-color);
  width: auto;
  display: inline-block;
  white-space: nowrap;
}

.weaponEditFormInputFake.spellbookValueSell
{
  line-height: 1.2em;
  cursor: pointer;
}

.dark .open .weaponEditFormInputFake
{
  background-color: var(--input-background-color);
  color: var(--font-color);
}

.weaponEditFormInput,
.smallInputContainerInput,
.smallInputText
{
  display: table-cell;
  position: relative;
  overflow: hidden;
}

.smallInputContainerInput.overSelect
{
  overflow: visible;
}

.smallInputContainerInput.inline
{
  display: inline;
}

.featChoiceContent
{
  display: flex;
  padding: 10px;
}

.featRow
{
  display: table-row;
}

.featRowDivider
{
  margin: 0px;
  border-top: 1px dashed var(--highlight-color);
  border-bottom: 0px;
  width: 100%;
}

.dark .featRowDivider
{
  border-color: var(--font-color);
}

.featRow100
{
  display: table-row;
}

.featRow100>div
{
  display: table-cell;
  white-space: nowrap;
}

.featRow100Colspan>div
{
  width: 1px;
}

.featRow100Colspan>div>div,
.posRel
{
  position: relative;
}

.panoplyBondText
{
  font-size: 1rem;
  margin-top: 30px;
}

.levelHeaderText
{
  white-space: nowrap;
  padding: 10px;
  border-bottom: 1px dashed var(--highlight-color);
  background-color: var(--accent-color);
}

.dark .levelHeaderText
{
  color: hsl(var(--hue), 23%, 75%);
  background-color: var(--header-color);
}

.weaponEditFormCheckbox
{
  height: 1.2rem;
  width: 1.2rem;
  vertical-align: middle;
  display: inline-block;
}

.modalFilterFormCheckbox
{
  height: 1rem;
  width: 1rem;
  margin-top: 2px;
}

input.modalFilterFormCheckbox.standalone
{
  width: 1rem;
  height: 1rem;
  line-height: 2rem;
  margin-top: 8px;
  vertical-align: middle;
}

.modalFilterFormLabel
{
  margin-top: 4px;
}

.modalFilterSelectWrapper.modalFilterFormLabel,
.modalFilterInputWrapper.modalFilterFormLabel
{
  margin-top: 0px;
}

.hiddenSelectContainer
{
  width: 100%;

}

.smallerSelect__placeholder
{
  position: relative !important;
  margin: -12px 0px 0px 0px !important;
  line-height: 1.2rem;
  padding: 0px 4px;
  background-color: var(--page-background-color);
  text-transform: capitalize !important;
  color: var(--font-color) !important;
  -webkit-transform: unset !important;
  transform: unset !important;
  -ms-transform: unset !important;
  border: 1px solid var(--highlight-color) !important;
  border-radius: 4px;
}

.weaponEditSelectOverride__placeholder
{
  position: relative !important;
  margin: 0px !important;
  top: 0px !important;
  line-height: .8rem;

  padding: 4px;
  border-radius: 4px;
  background-color: var(--font-color);
  text-transform: capitalize !important;
  color: var(--accent-color) !important;
  -webkit-transform: unset !important;
  transform: unset !important;
  -ms-transform: unset !important;
  border: 1px solid var(--highlight-color) !important;
}

.dark .open .weaponEditSelectOverride__placeholder
{
  background-color: var(--input-background-color);
  color: var(--font-color);
}

.weaponEditSelectOverride__indicators,
.smallerSelect__indicators
{
  display: none !important;
}

.weaponEditFormSelect
{
  width: auto;
  margin-top: -2px;
  display: table-cell;
}

/* .weaponEditFormSelect > div
{
  padding-left: 0px;
  margin: 0px;
} */

.hidden__control
{
  display: none !important;
}

.weaponEditSelectOverride__control,
.smallerSelect__control
{
  background-color: transparent !important;
  border: 0px !important;
  height: .8rem !important;
  min-height: .8rem !important;
  margin-top: -12px;
  display: inline-block !important;
}

.smallerSelect__control
{
  display: inline-block !important;
}

.weaponEditSelectOverride__control--is-focused,
.smallerSelect__control--is-focused
{
  border: 0px !important;
  box-shadow: unset !important;
}

.weaponEditSelectOverride__input
{
  display: inline !important;
  height: 0px !important;
  margin: 0px !important;
}

.weaponEditSelectOverride__input input,
.smallerSelect__input input
{
  opacity: 0 !important;
}

.weaponEditSelectOverride__menu,
.smallerSelect__menu,
.hidden__menu
{
  background-color: var(--page-background-color-no-transparency) !important;
  width: auto !important;
  min-width: 400px !important;
  z-index: 3 !important;
}

.weaponEditSelectOverride__option,
.hidden__option
{
  height: 2rem !important;
  line-height: 1rem !important;
}

.smallerSelect__option
{
  height: 1.2rem !important;
  line-height: 1.2rem !important;
  padding-top: 0px !important;
}

.weaponEditSelectOverride__option--is-focused,
.smallerSelect__option--is-focused,
.hidden__option--is-focused
{
  background-color: var(--highlight-color) !important;
}

.weaponDescriptionSection
{
  border: 1px solid var(--highlight-color);
  border-radius: 4px;
  padding: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 1.3rem;
  transition: height .15s ease-in;
  width: 100%;
}

.dark .weaponDescriptionSection
{
  border-color: var(--modal-border-color);
}

.weaponDescriptionSection.open
{
  height: 10rem;
  overflow-y: auto;
  white-space: unset;
}

.weaponDescriptionContainerFlusher
{
  display: flex;
}

.descriptionLabel
{
  padding: 4px;
}

.weaponFlusher
{
  transition: transform .15s linear;
  transform: rotate(.25turn);
  height: 1rem;
  margin-left: 4px;
  color: var(--font-color);
}
.flusher
{
  display: inline-block;
  transition: transform .15s linear;
  transform: rotate(-.25turn);
  height: 1rem;
  margin-left: 4px;

}

.dark .flusher.pageBackground
{
  filter: brightness(.5);
}

.flusher.pageBackground
{
  color: var(--font-color);
}

.weaponFlusher.open,
.flusher.open
{
  transform: rotate(0turn)
}

.weaponDamageSection
{
  padding-bottom: var(--spacing);
}

.weaponEditSelectOverride__value-container,
.smallerSelect__value-container
{
  padding: 0px !important;
  height: 1.5rem;
  overflow: visible !important;
}

.weaponEditSelectOverride__value-container > div
{
  height: 1.5rem;
  margin-top: -2px;
}

.traitHeader
{
  margin-top: 4px;
  font-size:.6rem;
}

.traitHeader.disabled
{
  opacity: .5;
  text-decoration: line-through;
}

.traitHeader.spellHeader
{
  margin-top: var(--spacing);
  font-size: 1rem;
  font-weight: bold;

}

.modalInfo .traitHeader .traitLabel
{
  font-size: 1.2rem;
  font-weight: bold;
}

.spellHeader .traitLabel
{
  margin-left: var(--spacing);
  font-size: 1rem;
}

.traitContent
{
  background-color: var(--grid-bg-color);
  border-radius: 4px;
  border: 1px solid var(--highlight-color);
  padding: var(--spacing);
  margin-left: var(--spacing);
  margin-top: 4px;
}

.dark .traitContent
{
  border-color: var(--input-background-color);
}

.traitLabel
{
  margin-left: 4px;

  font-size: .8rem;
}


.traitLabel.end
{
  text-align: right;
}

.traitLabelEndSpan
{
  margin-right: 4px;
}

.abilityScoreCost
{
  font-size: .8rem;
  line-height: 1rem;
  cursor: default;
  margin-top: 1rem;
}

.abilityScoreCostWiz
{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
}

.dark .svgIconPageBackground
{
  fill: var(--header-font);
  color: var(--header-font);
}

.svgIconPageBackground
{
  color: var(--font-color);
  fill: var(--font-color);
}

.addLevelBtn,
.deleteLevelBtn
{
  width: 25%;
}

.addLevelBtn
{
  float: left;
}

.deleteLevelBtn
{
  float: right;
  background-color: var(--invalid-accent-color);
  border-color: var(--invalid-highlight-color);
}

.beastHeader
{
  text-transform: capitalize;
  display: flex;
  justify-content: space-between;
}

.beastInfo
{
  width: 100%;
}

.inlineSpell
{
  text-decoration: underline;
  text-decoration-style: dotted;
  font-style: italic;
  display: inline-block;
  margin-right: 4px;
}

.inlineTagHover
{
  overflow: hidden;
}

.inlineTagHover .tagHoverDisplay
{
  z-index: 2;
}

.inlineSpell .spellHoverDisplay,
.inlineTagHover .tagHoverDisplay
{
  text-decoration: initial;
  font-style: initial;
  text-decoration-style: initial;
  max-width: 400px;
  width: 400px;
  z-index: 4;
  min-height: 100px;
  height: auto;
}

.inlineSpell .__react_component_tooltip,
.inlineSpell .react-tooltip,
.inlineTagHover .__react_component_tooltip,
.inlineTagHover .react-tooltip,
.skillsRow .react-tooltip
{
  max-height: 400px;
  height: 400px;
  overflow-y: auto;
  pointer-events: all !important;
  min-height: 100px;
  height: auto;
}

.iconFillTransparent
{
  fill: var(--icon-fill-transparent);
}

.ink {
	display: block; position: absolute;
	background: var(--highlight-color);
	border-radius: 100%;
	transform: scale(0);
}

.buttonWave {
	display: block; position: absolute;
	background: var(--button-wave-color);
	border-radius: 100%;
	transform: scale(0);
}

.iconTabWave {
	display: block; position: absolute;
	background: var(--icon-tab-wave-color);
	border-radius: 100%;
	transform: scale(0);
}

.ink.animate, .buttonWave.animate, .iconTabWave.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {opacity: 0; transform: scale(2.5)}
}

.offenseSpacer
{
  height: 200px;
}

.verticalSpacer
{
  height: 1rem;
}

.restButton,
.companionDismissButton
{
  display: inline-block;
  width: fit-content;
  height: auto;
  margin: 10px 10px 0 0;
}

.featInfoAddendum
{
  padding: var(--spacing);
  border: 1px solid var(--highlight-color);
  border-radius: var(--spacing);
}

.featInfoAddendum .featName
{
  font-size: 1rem;
}

.passwordResetForm
{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.resetPasswordInfo
{
  font-size: 1.2rem;
}

.passwordBox
{
  background-color: var(--grid-bg-color);
  padding: var(--spacing);
  border: 1px solid var(--highlight-color);
  border-radius: 4px;
  margin-top: var(--spacing);
  display: flex;
  flex-direction: column;
  width: 250px;
}
.passwordBox .spinner
{
  display: flex;
}

.splashPageContent
{
  background-color: hsl(140, 21%, 8%);
  background-blend-mode: soft-light;
}

.splashPageHeader
{
  background-color: hsla(0, 0%, 0%, .8);
  padding: var(--spacing) 0;
  font-weight: 400;
  font-size: 1rem;
  height: 30px;
  color: hsl(0, 0%, 65%);
  position: fixed;
  z-index: 10;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  transition: background-color linear 0.2s;
}

.splashPageHeader.solidHeader
{
  background-color: black;
}

.batteryReload
{
  cursor: pointer;
  text-align:center;
}

.topLogo
{
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-top: -4px;
  margin-left: -8px;
  background-size: cover;
  cursor: pointer;
  background-image: url(/assets/images/pc_logo_noglow.png);
}

.topLogo:hover
{
  filter: brightness(1.2);
}

.splashTab.rel.logo
{
  width: auto;
}

.appTitle
{
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  vertical-align: top;
  cursor: pointer;
}

.splashLogo
{
  align-content: center;
  margin: auto;
  margin-top: 20px;
  width: 20vh;
  height: 20vh;
  background-size: cover;
  background-image: url(/assets/images/pc_logo_glow.png);
  transition: all linear .5s;
}

.splashLogo.loggingIn
{
  height: 100px;
  width: 100px;
  animation: spin 1.5s linear infinite;
}

.splashTagList
{
  justify-content: center;
  display: flex;
  margin: auto;
  max-width: 80vw;
  flex-wrap: wrap;
}

.headerContainer
{
  display: flex;
}

.accountMainPage
{
  margin-top: calc(calc(var(--spacing) / 2) + calc(-1 * var(--spacing)));
  float: right;
  padding: 0 var(--spacing);
  height: 40px;
  vertical-align: middle;
  cursor: pointer;
}

.accountMainPage:hover
{
  filter: brightness(1.2);
}

.accountMainPageWelcome
{
  line-height: 40px;
}

.loginDropDown,
.accountDropDown
{
  clear: both;
  float: right;
  margin-top: 4px;
  padding-bottom: 6px;
  width: 300px;
  /* background-color: black; */
  border: 1px solid var(--highlight-color);
  background-color: var(--accent-color);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  color: hsl(0, 0%, 65%);
  z-index: 2;
  height: fit-content;
  list-style-type: none;
  padding: 0px;
}

.accountDropDown
{
  float: unset;
  right: 0px;
  position: absolute;
  top: 40px;
}

.accountDropDown li
{
  border-bottom: 1px solid hsl(0, 0%, 65%);
  vertical-align: top;
  line-height: 16px;
  padding: 0px 0px;
  cursor: pointer;
  padding: var(--spacing);
}

.accountDropDown li:hover
{
  background-color: hsl(0, 0%, 10%);
  filter: brightness(1.2);
}

.charEtcMenu
{
  background-color: var(--accent-color);
  list-style-type: none;
  border: 1px solid var(--highlight-color);
  padding: 0;
  cursor: pointer;
}

.accountDropDown li:last-child,
.charEtcMenu li:last-child
{
  border-bottom: 0;
}

.charEtcMenu li
{
  border-bottom: 1px solid var(--highlight-color);
  line-height: 20px;
  height: 20px;
  padding: var(--spacing);
}

.charEtcMenu li:hover
{
  filter: brightness(1.2);
}

.loginInputContainerFlex
{
  display: flex;
  margin-top: var(--spacing);
}

.inputContainerFlex
{
  display: flex;
  margin-top: var(--spacing);
  width: 100%;
}

.inputContainerFlexSpace
{
  margin-left: var(--spacing);
}

.spaceBetween
{
  justify-content: space-between;
}

.loginInputContainer
{
  display: flex;
  flex-direction: column-reverse;
  margin-top: var(--spacing);
  width: 135px;
  margin: 0px var(--spacing);
}

.loginInputContainer .loginInputContainerLabel
{
  font-style: italic;
  font-size: .8rem;
  text-align: left;
}

.loginDropDown .userNameInput,
.loginDropDown .passwordInput
{
  background-color: var(--login-drop-down-color);
  border: 1px solid var(--login-input-border);
  height: var(--login-input-height);
  width: 100%;
  padding: var(--input-padding);
  margin: 0;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: unset;
  text-align: left;
  color: var(--login-font-color);
  font-size: .8rem;
}

.loginDropDown .userNameInput:focus,
.loginDropDown .passwordInput:focus
{
  outline: 0;
  box-shadow: inset 0 0 6px var(--login-light-input-border), 0 0 3px var(--login-light-accent-color);
}

.loginContainerButtons
{
  padding: 0px var(--spacing);
}

.loginDropDownCreateAccount
{
  font-style: italic;
  font-size: 1rem;
  float: left;
}

.loginDropDownSubmit
{
  float: right;
}

.loginContainerButtons .spinner
{
  float: right;
  margin-top: -5px;
  margin-bottom: 0px;
  margin-right: 10px;
}

.splashCharacterInfoBlock,
.backupItem
{
  display: inline-block;
  width: 400px;
  height: 80px;
  border-radius: 10px;
  background-color: var(--accent-color);
  margin: var(--spacing);
  padding: var(--spacing);
  transition: box-shadow linear 0.2s, background-color linear 0.2s, brightness linear .5s;
  cursor: pointer;
}

.backupItem
{
  height: auto;
  font-size: 1rem;
  text-align: center;
}

.dark .splashCharacterInfoBlock,
.dark .backupItem
{
  background-color: hsla(140, 8%, 36%, 40%);
  color: hsl(var(--hue), 15%, 70%);
}

.splashCharacterInfoBlock.highlight
{
  background-color: var(--highlight-color);
}

.dark .splashCharacterInfoBlock.highlight
{
  background-color: hsla(140, 8%, 36%, 40%);
  filter: brightness(1.2);
  backdrop-filter: brightness(1.2);
}

.splashCharacterInfoBlock:hover,
.backupItem:hover
{
  filter: brightness(.9);
  backdrop-filter: brightness(.9);
  box-shadow: 0px 2px 4px hsl(140, 12%, 33%);
}

.dark .splashCharacterInfoBlock:hover,
.dark .backupItem:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1.2);
}

.dark .splashCharacterInfoBlock:active,
.dark .backupItem:active
{
  background-color: hsla(140, 12%, 36%, 40%);
}

.splashPageContainer
{
  overflow: hidden;
  padding-bottom: 200px;
}

main,
.pageContentContainer
{
  width: 80vw;
  padding: 20px;
  align-items: center;
  margin: auto;
  border-radius: 10px;
  background-color: hsl(130, 34%, 80%, var(--containerAlpha));
  margin-top: 100px;
  min-width: 1070px;
}

.dark main,
.pageContentContainer
{
  background-color: hsl(0, 0%, 15%, var(--containerAlpha));
}

.pageContentContainer
{
  background-color: hsl(0, 0%, 15%, .9);
}

.splashEtcMenu
{
  font-size: 32px;
  top: -8px;
  right: 10px;
  position: absolute;
  color: hsl(140, 21%, 45%);
  align-self: end;
}

.splashEtcMenu:hover
{
  color: hsl(140, 21%, 70%);
}

.splashEtcMenu:active
{
  filter: brightness(1.2);
}

.splashCharacterInfoBlock .characterLevel,
.splashCharacterInfoBlock .characterInfoName
{
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.charEtcMenu
{
  position: absolute;
  border-radius: 4px;
  display: inline-block;
  color: hsl(0, 0%, 65%);
  margin-top: 4px;
  padding-bottom: 0px;
  z-index: 4;
}

.splashPageCharactersContainer
{
  background-color: hsla(0, 0%, 0%, .2);
  box-shadow: inset 0px 0px 12px 10px hsla(0, 0%, 0%, .4);
  flex-direction: column;
  align-items: center;
  padding: 4px;
  width: calc(100% - 72px);
  position: relative;
  margin-left: 32px;
  overflow-x: visible;
}

.splashPageUnderTitle
{
  padding: 4px;
}

.splashPageTitle .homepageCharactersTab
{
  padding-right: 20px;
  cursor: pointer;
  filter: brightness(.8);
  white-space: nowrap;
}

.splashPageTitle .homepageCharactersTab.selected
{
  filter: brightness(1.2);
}

.splashPageTitle .homepageCharactersTab:hover
{
  text-shadow: 0px 0px 1px;
}

.splashPageTitle.shared
{
  margin-top: 40px;
}

/* .characterList
{
  position: relative;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

.characterList.expandedCharacters
{
  height: 100%;
  overflow-x: hidden;
  white-space: unset;
  display: block;
} */

.scrollCharacters
{
  position: absolute;
  color: hsla(0, 0%, 80%, .8);
  padding: 0px 10px;
  font-size: 20px;
  height: 100%;
  background-color: hsla(0, 0%, 40%, .2);
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 3;
  display: flex;
  align-items: center;
}
.scrollLeftCharacters
{
  top: 0px;
  left: -30px;
}

.scrollRightCharacters
{
  right: -30px;
  top: 0px;
}

.expandCharacters
{
  bottom: 0px;
  width: 200px;
  height: 10px;
  left: calc(50% - 100px);
  flex-direction: column;
  padding: 10px 0px;
  line-height: 0px;
}

.caret
{
  transition: all .3s ease-out;
}

.caret.expandedCharacters
{
  transform: rotate(180deg);
  margin-top: 10px;
}

.scrollCharacters:hover
{
  background-color: hsla(0, 0%, 40%, .4);
  color: hsl(0, 0%, 90%, .9);
}

.scrollCharacters:active
{
  background-color: hsla(0, 0%, 40%, .5);
  color: hsl(0, 0%, 95%);
}
.splashPageTitle
{
  color: hsla(0, 0%, 75%);
  background-color: hsl(140, 11%, 22%);
  height: 2rem;
  line-height: 2rem;
  font-size: 1.2rem;
  padding: 0px 10px;
  overflow: auto;
}

.splashPageBanner
{
  box-shadow: 0px 0px 20px black;
  fill: hsl(0, 0%, 65%);
  /* margin: 10px; */
  /* border-top: 10px solid; */
  /* border-bottom: 10px solid; */
  /* padding: 24px 200px 10px 200px; */
  background: rgba(0, 0, 0, .7) url(/assets/images/pathcomapnionHeroImage.png);
  background-size: cover;
  background-blend-mode: darken;
  /* padding: 40px 0px; */
  text-align: center;
  font-size: 10rem;
  font-family: 'Cinzel';
  /*background: url("/css/pathcomapnionHeroImage.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 200px;
  display: block;
  position: relative; */
}

.splashPageBanner svg
{
  width: 95%;
  padding: 5rem 0px;
  align-self: center;
}


.floatingLogo
{
  background: url(/assets/images/pc_logo_glow.png);
  background-size: cover;
  position: absolute;
  left: calc(50% - 100px);
  height: 200px;
  width: 200px;
  background-blend-mode: soft-light;
  top: -70px;
  z-index: 1000;
}

.splashTab
{
  float: left;
  margin-top: calc(calc(var(--spacing) / 2) + calc(-1 * var(--spacing)));
  border-bottom: 2px solid hsl(0, 0%, 65%);
  margin: 0 var(--spacing);
  height: 40px;
  vertical-align: middle;
  transition: filter linear .2s;
  line-height: 40px;
}

.splashTab.noBorder,
.splashTab.noBorder:hover
{
  border-bottom: none;
}

.appTitle
{
  transition: filter linear .2s;
}

.splashTab:hover,
.appTitle:hover
{
  filter: brightness(1.5);
  border-bottom: 4px solid hsl(0, 0%, 65%);
}

.splashTab.logo:hover
{
  filter: none;
  border-bottom: none;
}

.newCharacterButton,
.newSharedCharacterButton
{
  margin-left: 20px;
  line-height: 1.4rem;
  position: relative;
  font-size: 1.4rem;
  margin-top: 5px;
  display: block;
  color: hsl(var(--hue), 15%, 50%);
  cursor: pointer;
}

.newCharacterButton:hover,
.newSharedCharacterButton:hover
{
  text-shadow: 0px 0px 1px;
  filter: brightness(1.2);
}

.deleteModal.autoSize.modal,
.accountModal.autoSize.modal
{
  color: hsl(0, 0%, 65%);
  border: 1px solid hsla(140, 21%, 30%, 12%);
  background-color: var(--page-background-color-no-transparency);
}

.deleteModal .modalHeader,
.accountModal .modalHeader
{
  height: 40px;
  min-height: 40px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.deleteModal .loginButton,
.accountModal .loginButton
{
  display: block;
  margin-bottom: 10px;
  margin-right: 10px;
  float: right;
  line-height: 32px;
}

.deleteModal .deleteButton
{
  background-color: var(--invalid-accent-color);
  border: 1px solid var(--invalid-highlight-color);
  color: var(--invalid-highlight-color);
}

.deleteModal .deleteNameMatch,
.accountModal .displayNameInputLabel,
.accountModal .userNameInputLabel,
.accountModal .passwordInputLabel
{
  margin-top: 10px;
}

.spellNotOnSpellList
{
  color: hsl(var(--invalid-hue), 37%, 75%)
}

.spellNoCompletionNeeded
{
  color: hsl(135, 80%, 52%);;
}
.spellOnSpellList
{
  color: hsl(52, 75%, 50%);
}

.loadingEtc ul
{
  position:absolute;
  top: 3em;
  right: 0px;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}

.loadingEtc li
{
  list-style:none;
  width:5px;
  margin-left: 3px;
  height:5px;
  border-radius:50%;
  animation:loadEtcGlow 1.2s ease-in-out infinite;
  background:hsla(0, 0%, 20%);
}

@keyframes loadEtcGlow
{
  0% , 40% , 100%
  {
      background:hsla(0, 0%, 80%);
  }
  20%{
      background:hsla(0, 0%, 20%);

  }
}

ul li:nth-child(1){
  animation-delay:-1.2s;


}
ul li:nth-child(2){
  animation-delay:-1s;

}
ul li:nth-child(3){
  animation-delay:-.8s;

}

.referencedFeature
{
  margin: 0px 20px;
  border: 1px solid var(--font-color);
  padding: 0 10px 10px 10px;
  border-radius: 10px;
}

.referencedFeature .modalInfoHeader
{
  font-size: 1rem;
  font-style: italic;
}

.cardTextCasterLevel
{
  float: right;
}

.cardTextCharges
{
  float: left;
}

.cardMainText,
.caerdPreText
{
  clear: both;
}

.cardMainText ul
{
  margin-left: 20px;
}

.weaponDescriptionSection p:first-child
{
  margin-top: 0px;
}

.featBenefit .featBenefitContent div:first-child,
.featBenefit .featBenefitContent div:first-child > p:first-child
{
  display: inline;
}

.combatColumns
{
  display: flex;
}

.combatColumn
{
  width: 25%;
  margin: 0px var(--spacing);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.combatColumn .subHeader
{
  width: 100%;
  font-size: 1rem;
  text-align: center;
  z-index: 2;

}

.smallSubHeader
{
  font-size: 1rem;
  z-index: 2;
}

.combat .itemListHeader
{
  z-index: 100;
}

.combat .weaponsTab
{
  margin-top: 4px;
}

.combatColumnGrid
{
  position: relative;
  width: calc(80% + var(--spacing));
  margin-right: var(--spacing);
  margin-top: var(--spacing);
}

.combatColumnBorder
{
  width: 1px;
  border-left: 1px solid var(--highlight-color);
  margin: 0px 2.75px;
}

.dark .combatColumnBorder
{
  border-color: var(--modal-border-color);
}

.columnCardWrapper
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: var(--grid-height);
  gap: calc(var(--spacing) * 2) var(--spacing);
  grid-auto-rows: var(--grid-height);
}

.combatColumnGrid .cardWrapper:not(:first-of-type)
{
  margin-top: var(--spacing);
}

.form
{
  margin: 10px;
}

.form label
{
  margin-left: 4px;
}

.form input[type=checkbox], .form input[type=radio]
{
  width: auto;
  height: auto;
}

input[type=file]
{
  display: none !important;
}

.classFeatureUnit,
.spellPreparation,
.spellBook
{
  border: 1px solid var(--modal-unit-border);
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 10px;
  transition: background-color ease-out .15s;
  position: relative;
}

.spellBook
{
  border: unset;
  filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.5));
  position: relative;
}

.spellBookContentBox
{
  height: auto;
  overflow: hidden;
  padding: 40px;
  padding-bottom: 100px;
  background: var(--spellbook-color);

}

.classFeatureUnit.invalid
{
  border: 1px solid var(--invalid-accent-color);
  color: var(--invalid-accent-color);
  background-color: var(--invalid-highlight-color);
}

.classFeatureUnit:hover
{
  background-color: var(--accent-color);
}

.dark .classFeatureUnit:hover
{
  filter: brightness(1.2);
}

.classFeatureUnit.invalid:hover
{
  background-color: var(--invalid-highlight-color);
}

.manualBonus
{
  line-height: 2.5rem;
}

.manualBonus:not(.indent1):hover
{
  cursor: pointer;
  text-shadow: 0px 0px 1px;
  filter: brightness(1.2);
}

.manualBonusDeleteIcon,
.addEquipmentButton,
.itemDeleteIcon,
.newEffectButton,
.newLoadoutButton,
.newTabButton,
.addButton
{
  background-color: var(--grid-bg-color);
  border: 1px solid var(--deepest-shade);
  display: inline;
  margin-left: 4px;
  width: 1px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 50%;
  text-align: center;
}

.dark .manualBonusDeleteIcon,
.dark .addEquipmentButton,
.dark .itemDeleteIcon,
.dark .newEffectButton,
.dark .newLoadoutButton,
.dark .newTabButton,
.dark .addButton
{
  border: 1px solid var(--modal-border-color);
}

.itemDeleteIconCell
{
  display: table-cell;
}


.manualBonusDeleteIcon:hover,
.manualBonusChildHover:hover span
{
  background-color: var(--button-hover);
}

.dark .manualBonusDeleteIcon:hover,
.dark .manualBonusChildHover:hover span
{
  border: 1px solid var(--light-shade);
}

.deleteBonus
{
  position: absolute;
  top: 4px;
  right: 10px;
  color: var(--invalid-highlight-color);
  font-size: 1.5em;
}

.deleteBonus:hover
{
  background-color: var(--button-hover);
}

.addEquipmentButtonText,
.newEffectButtonText,
.newLoadoutButtonText,
.addButtonText
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  margin-left: var(--spacing);
}

.newSection
{
  display: inline-block;
  border-left: 1px solid var(--highlight-color);
  line-height: 3em;
  font-weight: bold;
}

.newEffectButtonText
{
  text-align: center;
}

.addEquipmentButton,
.newEffectButton,
.newLoadoutButton,
.newSectionButton,
.newTabButton
{
  font-weight: normal;
  display: inline-block;
  width: 13px;
  font-size: 1.2em;
}

.newSectionButton
{
  border-radius: 50%;
  width: 2em;
  height: 2em;
  line-height: 2em;
  margin-left: 4px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid var(--highlight-color);
}

.newLoadoutButtonText
{
  font-weight: normal;
  margin: 4px;
  margin-top: 0px;
}

.newEffectButtonText
{
  margin-top: 0px;
  width: calc(100% - 8px);
  background-color: var(--highlight-color);
  padding: 4px 8px;
  padding-right: 0px;
  border-bottom: 1px solid var(--accent-color);
  margin-left: 0px;
}


.visibilityHidden
{
  visibility: hidden;
}

.editHidden
{
  opacity: .4;
}

.editHidden:hover,
.editShow:hover
{
  opacity: .6;
}


.editHidden:active,
.editShow:active
{
  opacity: .8;
}

.editHidden::after,
.editShow::after
{
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -10%;
  font-size: 2em;
  line-height: 17em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
  pointer-events: none;
  text-shadow: 0px 0px 2px black;
}

.dark .editShow::after,
.dark .editHidden::after
{
  text-shadow: 0px 0px 2px white;
}

.editHidden
{
  filter: brightness(0.5);
}

.dark .editHidden
{
  filter: unset;
}

.editHidden:after
{
  content: "Click to Show";
  color: hsla(0, 0%, 0%, 1);
  background-image: url(/df40115597c069e8.svg);
}

.editShow:after
{
  content: "Click to Hide";
  color: hsla(0, 0%, 0%, .4);;
  background-image: url(/d4d303bf8852a5c3.svg);
}

.dark .editHidden:after
{
  color: var(--font-color);
  -webkit-text-stroke: 1px black;
  font-weight: bold;
  background-image: url(/0383302e7ae3610d.svg);
}

.dark  .editShow:after
{
  color: var(--font-color);
  -webkit-text-stroke: 1px black;
  font-weight: bold;
  background-image: url(/e0ee5651477d4edc.svg);
}

.cardChargeRoom .editHidden::after,
.cardChargeRoom .editShow::after
{
  top: 0px;
  line-height: 20em;
}

.cardEditingBadge
{
    z-index: 1;
    border-radius: 6px;
    padding: 2px;
    opacity: 0.7;
    stroke: none;
    fill: white;
    background-color: black;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 20px;
    width: 20px;
}

.evolution,
.bubble
{
  padding: 4px 6px;
  border-radius: 2em;
  line-height: 1em;
  display: inline-block;
  background-color: var(--font-color);
  color: var(--accent-color);
  position: relative;
  border: 1px solid var(--accent-color)
}

.bubble
{
  display: inline;
}

.evolution:not(first-child),
.bubble:not(first-child)
{
  margin-left: 8px;
}

.evolution:hover::after,
.bubble:hover::after
{
  content: "×";
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  line-height: 1em;
  font-size: 1em;
  font-weight: bold;
  color: var(--invalid-accent-color);
  text-align: center;
  background-color: var(--invalid-highlight-color);
  border: 1px solid var(--invalid-accent-color);
}

.evolution.noDelete:hover::after,
.bubble.noDelete:hover::after
{
  display: none;
}

.evolution.free:hover::after,
.bubble.free:hover::after
{
  display: none;
}

.evolutionsList
{
  background-color: var(--light-shade);
  border-bottom: 1px solid var(--deepest-shade);
  width: 100%;
  padding-bottom: 10px;
}

.dark .evolutionsList
{
  color: hsl(var(--hue), 57%, 92%);
}

.evolutionListHeader,
.evolutionPointsRemaining
{
  font-size: 1.5em;
  padding: 10px;
}

.selectPadding
{
  padding-bottom: 400px;
}

.noNowrap
{
  white-space: normal;
}

.nowrap
{
  white-space: nowrap;
}

.paddingTop0
{
  padding-top: 0px;
}

.splashTab.rel
{
  position: relative;
  width: 40px;
}

.logo
{
  height: 100%;
  position: absolute;
}

.logoText
{
  position: absolute;
  top: 5px;
  left: 3px;
  transform: rotate(344deg) scale(.2);
}

.patreon
{
  width: 38px;
  height: 100%;
  cursor: pointer;
  background-image: url(/assets/images/Digital-Patreon-Logo_FieryCoral.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.discordTab,
.patreonTab
{
  height: 60px;
  width: 60px;
  cursor: pointer;
  text-align: center;
}

.splashPrivacyPolicy
{
  text-align: center;
  margin-top: 1em;
}

.discord
{
  width: 36px;
  padding: 0px 5px;
  height: 100%;
  cursor: pointer;
  background-image: url(/assets/images/discord-mark-blue.png);
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
}

.patreonNav
{
  width: 36px;
  height: 36px;
  cursor: pointer;
  background-image: url(/assets/images/Digital-Patreon-Logo_FieryCoral.png);
  background-size: contain;
  display: block;
  float: right;
  margin-right: 4px;
}

.splashPageLoginButtons
{
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

.splashContentLoginButton
{
  display: inline-block;
  background-color: hsl(140, 20%, 30%);
  padding: 10px;
  line-height: 20px;
  border: 1px solid hsl(140, 7%, 30%);
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
  width: 200px;
}

.splashContentLoginButton:not(:first-child)
{
  margin-left: 40px;
}

.About
{
  font-size: 1rem;
  color: hsl(0, 0%, 75%);
  padding: 10px;
  padding-top: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px hsl(0deg 0% 5%);
}

.About h1
{
  color: hsl(0, 0%, 75%);
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid hsl(0, 0%, 60%)
}

.About h3
{
  color: hsl(0, 0%, 75%);
}

.About p
{
  max-width: 400px;
}

.combatChoicesContent
{
  background-color: var(--grid-bg-color);
  border: 1px solid var(--highlight-color);
  position: relative;
  z-index: 3;
}

.portraitModeWarning
{
  position: fixed;
  z-index: 100000;
  height: 100vh;
  width: 100vw;
  background-color: var(--page-background-color-no-transparency);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 3rem;
}

.optionsSubText
{
  position: absolute;
  font-style: italic;
  opacity: .5;
  margin-left: 22px;
}

.inputContainerSubText
{
  font-style: italic;
  opacity: .5;
  position: absolute;
  top: -1.5rem;
  white-space: nowrap;

}

.releaseDate
{
  font-style: italic;
  float: right;
}

.flex
{
  display: flex;
}

.flexColumn
{
  flex-direction: column;
  align-items: center;
}

.flexColumnReverse
{
  flex-direction: column-reverse;
  align-items: center;
}

.alcoholicCheck
{
  width: 3.5em;
  display: flex;
  justify-content: center;
  height: .8em;
}

.alcoholicCheck input
{
  width: .8em;
  height: .8em;
}

.alcoholicLabel
{
  font-style: italic;
  filter: brightness(.8);
}

.minContent
{
  flex-basis: min-content;
}

.centered
{
  text-align: center;
}

.centered .smallContainerInputLabel,
.centered .smallInputContainerInput
{
  text-align: center;
}

.smallContainerInput.flexColumn .smallContainerInputLabel
{
  padding-bottom: 0px;
  width: 100%;
}

.mentalFocusLeft
{
  font-size: 1.2em;
}

.wizardNav
{
  position: absolute;
  color: hsla(0, 0%, 80%, .8);
  padding: 0px 10px;
  font-size: 20px;
  height: 100%;
  width: 60px;
  background-color: hsla(0, 0%, 40%, .2);
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 3;
  display: flex;
  font-size: 9em;
  align-items: center;
}

.wizardNav:hover
{
  background-color: hsla(0, 0%, 40%, .4);
  color: hsl(0, 0%, 90%, .9);
}

.callout
{
  background-color: var(--font-color);
}

.dark .callout
{
  background-color: var(--accent-color);
}

.callout:hover
{
  filter: brightness(1.2);
}

.dark .callout:hover
{
  filter: brightness(1.2);
}

.wizardNav:active,
.callout:active
{
  background-color: hsla(0, 0%, 40%, .5);
  color: hsl(0, 0%, 95%);
}

.wizardNavLeft
{
  top: 0px;
  left: -80px;
}

.wizardNavRight
{
  right: -80px;
  top: 0px;
}

.vBottom
{
  vertical-align: bottom;
}

.maintenanceSelect.modalSideInfo.wizardLeft
{
  width: 30%;
  padding-top: 0px;
  background-color: var(--modal-background-color);
  z-index: 2;
}

.domainsLabel
{
  display: inline-block;
  font-size: 1rem;
}

.deityDomainInfo
{
  display: inline-block;
  font-size: 1rem;
}

.wizardAbilityTooltip
{
  width: 250px;
}

.w33
{
  min-width: 33%;
}

.w100
{
  width: 100%;
}

.wd600
{
  width: 600px;
}

.fadeInComponent
{
  transition: opacity ease-in .4s;
  opacity: 0;
}

.fadeInComponent.show
{
  opacity: 1;
}

.yhidden
{
  overflow-y: hidden;
}

.flexrow
{
  display: flex;
  flex-direction: row;
}

.tAlignLeft
{
  text-align: left;
}

.fRight
{
  float: right;
}

#topDragScrollDiv,
#bottomDragScrollDiv
{
  z-index: 3;
}

.tagHeader,
.tagLoading,
.tagList
{
  display: inline-block;
}

.tagList.trickList
{
  z-index: 4;
  position: relative;
}

.splashPageUnderTitle .tagList
{
  display:  block;
  margin-top: var(--spacing);
}

.tagHeader
{
  font-size: 1rem;
  line-height: 1.5rem;
  margin-right: 4px;
}

.tagWrapper
{
  display: flex;
  align-items: center;
  margin-top: var(--spacing);
}

.tag
{
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid var(--font-color);
  border-radius: 5px;
  margin: 2px;
  cursor: pointer;
  font-size: 1rem;
  opacity: .4;
  line-height: 1.4rem;
  vertical-align: top;
  color: var(--font-color);
}

.tag:hover
{
  opacity: .6;
}

.tag.selected,
.tag.active
{
  opacity: 1;
}

.language,
.skillTag
{
  position: relative;
}

.language:hover::after,
.skillTag::after
{
  content: "×";
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  line-height: 1em;
  font-size: 1em;
  font-weight: bold;
  color: var(--invalid-accent-color);
  text-align: center;
  background-color: var(--invalid-highlight-color);
  border: 1px solid var(--invalid-accent-color);
}

.skillTag.skillTagDisabled
{
  opacity: .5;
  text-decoration: line-through;
}

.skillTag.skillTagDisabled::after
{
  content: "+"
}

.language.noHover::after
{
  content: "Bonus";
  position: absolute;
  top: 0px;
  right: 0px;
  height: .6em;
  font-weight: unset;
  width: auto;
  line-height: 1em;
  font-size: .6em;
  font-weight: italic;
  color: var(--bonus-color);
  text-align: right;
  background-color: unset;
  border: unset;
}

.newTabPointer
{
  display: inline-block;
}

.investedSpellCheckbox
{
  display: inline;
  float: left;
  top: -3px;
  left: -2px;
  width: 1rem;
  position: relative;
}

.investedSpellCheckbox::after
{
  content: 'invested';
    bottom: -3px;
    left: -0.7rem;
    position: absolute;
    font-size: .7rem;
    color: var(--bonus-color);
}

.benchpressingred
{
  color: red;
}

.dark .melee .benchpressingred,
.dark .ranged .benchpressingred
{
  color: darkred;
}

.benchpressingyellow
{
  color: orange;
}

.benchpressinggreen
{
  color: greenyellow;
}

.benchpressingblue
{
  color: blue;
}

.dark .benchpressingblue
{
  color: aqua;
}

.portraitErrorWrapper
{
  grid-column-end: span 8;
  grid-row-end: span 5;
  overflow: hidden;
  margin: 6px 0px;
  box-shadow: 2px 4px 6px black;
}

.portraitContainer
{
  position: relative;
  box-sizing: border-box;
  height: 100%;
}

.portraitContainer.noPortrait
{
  border: 1px dashed var(--font-color);
}

.portraitContainer:hover::after
{
  white-space: pre;
  content: '';
  position: absolute;
  display: inline-block;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 378px;
  width: 100%;
  font-size: 5em;
  background-color: hsla(0, 0%, 33%, .7);
  font-weight: bold;
}

.portraitContainer:hover::before
{
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  top: 50%;
  height: 100%;
  z-index: 3;
  content: 'Re-Upload';
  position: absolute;
}

.portraitContainer.noPortrait:hover::before
{
  content: '';
}

.portraitContainer.noPortrait:hover::after
{
  content: '';
}


.portrait
{
  position: absolute;
  width: 100%;
}

.noPortraitText,
.noPortraitText2,
.noPortraitTextPlus
{
  position: absolute;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 3em;
}

.noPortraitText
{
  top: 40%;
}
.noPortraitTextPlus
{
  top: 50%;
}
.noPortraitText2
{
  top: 60%;
  font-size: 2em;
}

.adventuringPortraitWrapper
{
  width: 150px;
  height: 150px;
  position: absolute;
  right: 60px;
  top: 0px;
}

.adventuringPortrait
{
  width: 100%;
  height: 100%;
  background-size: cover;
  filter: drop-shadow(2px 4px 6px black);
}

.splashPortrait
{
  position: absolute;
  left: 0px;
  width: 80px;
  height: 80px;
  background-size: cover;
  filter: drop-shadow(2px 4px 6px black);
}

.blastSelection
{
  display: flex;
  align-items: center;
  position: relative;
}

.blastCardHolder,
.infusionsChoice,
.boostCardHolder,
.admixtureCardHolder
{
  width: calc(25% - var(--spacing) * 2);
  display: inline-block;
  margin-right: calc(var(--spacing) * 2);
  position: relative;
}

.blastCardHolder .card,
.infusionsChoice .card,
.boostCardHolder .card,
.admixtureCardHolder .card
{
  width: 176px;
  height: 256px;
  background-size: 200px 296px;
}

.infusionsChoice
{
  display: flex;
  flex-direction: column;
}

.substanceInfusionCardHolder,
.formInfusionCardHolder
{
  width: 100%;
  display: inline-block;
  margin: var(--spacing) 0px;
  position: relative;
}

.cardPlaceholder
{
  box-shadow: unset;
  border: 1px dashed var(--font-color);
  padding: calc(var(--spacing) * 2) 12px;
  height: calc(calc(var(--grid-height) * 4) + var(--spacing));
  position: relative;
  border-radius: 10px;
  left: 0;
  top: 0;
  width: 80%;
}

.cardPlaceholder .cardIcon
{
  fill: var(--font-color);
  stroke: var(--font-color);
  opacity: .7;
  padding: 50px;
}

.cardPlaceholderText
{
  width: 100%;
  text-align: center;
  font-size: 2.5em;
  line-height: 1em;
  font-family: 'Cinzel', monospace;
  margin-top: -20px;
}

.substanceInfusionCardHolder::before
{
  border: 2px solid var(--font-color);
  transform: rotate(45deg);
  content: '';
  width: 0px;
  height: 50px;
  position: absolute;
  left: -20px;
  bottom: 0px;
}

.formInfusionCardHolder::before
{
  border: 2px solid var(--font-color);
  transform: rotate(-45deg);
  content: '';
  width: 0px;
  height: 50px;
  position: absolute;
  left: -20px;
  top: 0px;
}

.substanceInfusionCardHolder::after
{
  border: 2px solid var(--font-color);
  transform: rotate(-45deg);
  content: '';
  width: 0px;
  height: 50px;
  position: absolute;
  right: -4px;
  bottom: 0px;
}

.formInfusionCardHolder::after
{
  border: 2px solid var(--font-color);
  transform: rotate(45deg);
  content: '';
  width: 0px;
  height: 50px;
  position: absolute;
  right: -4px;
  top: 0px;
}

.boostCardHolder::after
{
  border: 2px solid var(--font-color);
  content: '';
  width: 36px;
  height: 0px;
  position: absolute;
  right: -20px;
  top: 50%;
}

.metakinesisSelection
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 204px;
}

.gatherPowerSection
{
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.internalBufferSection
{
  position: absolute;
  right: 0px;
  top: 0px;
}

.internalBufferContainer
{
  display: flex;
  white-space: nowrap;
  align-items: center;
}

.internalBufferLabel
{
  font-size: 1em;
  margin-right: 4px;
  margin-top: 3px;
}

.maxBurn,
.internalBufferContainer
{
  line-height: 40px;
}

.fireAway
{
  position: absolute;
  right: 0px;
  bottom: 0px;
  white-space: nowrap;
}

.fireAway .rollbtn
{
  margin-left: -26px;
  height: var(--input-height);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  cursor: pointer;
}

.fireAway .smallInputContainerInput.pointer
{
  width: auto;
}

.metakinesisTitle,
.blastCost,
.gatherPowerLabel
{
  font-size: 1.6rem;
  margin: 10px 0px;
}

.gatherPowerLabel
{
  display: inline-block
}

.metakinesisOption
{
  font-weight: bold;
  font-size: 1.6rem;
  color: var(--equipment-icon-color);
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
  width: 36px;
  height: 36px;
}

.metakinesisOption.selected
{
  color: var(--equipment-icon-color-selected);
}

.cardSelectionList
{
  padding: 10px;
  position: absolute;
  right: -200px;
  width: 204px;
  top: -110px;
  height: 500px;
  overflow-y: overlay;
  z-index: 3;
  border-radius: 10px;
  transform: scale(.1, .1);
  background-color: var(--card-selection-list-bg);
  border: 1px solid var(--highlight-color);
  box-shadow: 0px 0px 50px black;
  transition: all .15s ease-in-out;
}

.cardSelectionList.cardSelectionListLeft
{
  left: -200px;
  right: unset;
}

.cardSelectionList .cardWrapper
{
  margin-top: var(--spacing);
}

.currentBurn
{
  position: absolute;
  top: 0px;
  display: inline-block;
  right: 340px;
}

.currentBurnIncrement,
.currentBurnDecrement,
.currentBurnCount
{
  display: inline-block;
}

.currentBurnLabel
{
  font-size: 2em;
  margin: 10px 0px;
}

.currentBurnCount
{
  margin: 0px 10px;
  font-size: 2em;
}

.toggleContainer
{
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.toggle
{
  width: 60px;
}

.toggleLabel
{
  margin-top: 4px;
}

.toggle::before
{
  content: ' ';
  display: block;
  height: 10px;
  width: 38px;
  border: 1px solid var(--font-color);
  border-radius: 9px;
  position: absolute;
  top: -10px;
  left: 8px;
  background: var(--accent-color);
}

.toggle::after
{
  content: ' ';
  display: block;
  height: 20px;
  width: 20px;
  border: 1px solid var(--font-color);
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 26px;
  background-color: var(--font-color);
  transition: all 0.3s ease-in;
}

.manualBonus_disabled
{
  opacity: .4;
}

.toggle.toggle_deactivated::after
{
  left: 8px;
  transition: all 0.3s ease-in;
}

.manualBonusContent
{
  border: 1px solid var(--modal-unit-border);
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 4px;
  width: calc(100% - 18px);
  position: relative;
}

.container
{
  border: 1px solid var(--highlight-color);
  border-radius: 10px;
  margin-top: calc(var(--spacing) * 2);
  background-color: var(--grid-bg-color);
}

.dark .container
{
  border-color: var(--modal-border-color);
}

.containerTitle
{
  font-weight: bold;
  font-size: 1rem;
  width: calc(100% - var(--spacing) * 2 - 2px);
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: var(--spacing);
  border-bottom: 1px solid var(--highlight-color);

}

.dark .containerTitle
{
  border-color: var(--modal-border-color);
}

.containerWeight,
.containerName
{
  display: inline-block;
}

.spellbookPagesUsed
{
  font-size: 1.2em;
  font-weight: bold;
  margin-right: 10px;
}

.toStorage,
.containerListOption
{
  border: 1px solid var(--header-accent-color);
  border-radius: 2px;
  margin-right: 10px;
  margin-top: 2px;
  font-size: .8em;
  padding: 0px 4px;
  height: 16px;
  line-height: 16px;
  float: right;
  position: relative;
}

.toStorage:hover,
.containerListOption:hover
{
  background-color: var(--header-color);
  filter: brightness(1.1);
  z-index: 3;
}

.toStorage:active,
.containerListOption:active
{
  filter: brightness(1.2);
}

.ammoCountModalWrapper
{
  display: table;
  position: absolute;
  right: var(--spacing);
  border-collapse: separate;
  border-spacing: 4px var(--spacing);
  bottom: calc(3em + 2px);
}

.buttonInvalid
{
  color: hsl(var(--invalid-hue), 41%, 54%);
}

label.foregoneAbilityLabel,
label.tabooLabel
{
  width: auto;
  white-space: nowrap;
  margin-left: var(--spacing);
}

.tabooInfo
{
  margin-left: var(--spacing);
}

.mediumOption
{
  line-height: 3em;
}

input.foregoneAbilityCb,
input.TabooCb
{
  width: 1em;
  height: 1em;
  margin-left: var(--spacing);
}

b
{
  font-weight: bold;
}

.print
{
  background-color: white !important;
  color: black !important;
}

.exitPrint,
.printButton
{
  position: fixed;
  top: 10px;
  right: 10px;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  display: inline;
  font-size: 1.5em;
  color: var(--font-color);
  border-radius: 50%;
  cursor: pointer;

}

.print ~ .callout
{
  display: none !important;

}

.printButton
{
  top: calc(10px + 2em);
  line-height: 1.2em;
  width: 1.2em;
  height: 1.2em;
  padding: .4em;
  fill: black;
}

.exitPrint:hover,
.printButton:hover
{
  background-color: var(--accent-color);
}

.print .chargeContainer
{
  display: block;
  color: black;
}

.print .chargeWrapper
{
  border-color: black;
}

.print .charge
{
  border-color: lightgray;
}

.print .chargeFilled
{
  display: none;
}

.abilityDamageItem
{
  width: calc(16% - var(--spacing));
  margin-right: var(--spacing);
}

.abilityDamageLabel
{
  font-weight: bold;
  margin-top: 20px;
}

@media screen and (max-width: 1180) {
  main,
  .pageContentContainer
  {
    width: 90vw;
  }
}

@media screen and (max-width: 1023px) {
  :root
  {
    --skills-width: calc(100% - 3rem - 2 * var(--spacing));
    --nav-width: calc(100% - 3rem);
    --spacing: 5px;
    --input-height: 27px;
    --containerAlpha: .9;
  }

  :root .dark
  {
    --containerAlpha: .9;
  }

  #reactEmbed,
  .splashPageContent.dark #reactEmbed
  {
    overflow-x: hidden;
  }

  .abilityDamageItem
  {
    width: calc(33% - var(--spacing));
  }

  .abilityDamageItem .smallInputContainerInput
  {
    max-width: calc(100% - var(--spacing));
  }
  .dismissModal
  {
    text-align: center;
  }

  .appTitle,
  .welcomeText
  {
    display: none;
  }

  body
  {
    font-size: 10px;
  }
  #HPVal, #ACVal, .abilityName
  {
    display: none;
  }

  .subHeader
  {
    font-size: 1rem;
  }
  aside
  {
    width: var(--skills-width);
  }

  .adventuringPortraitContainer
  {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .adventuringPortraitWrapper
  {
    position: relative;
    right: unset;
    top: unset;
  }

  .skillsRow
  {
    width: 100%;
    font-size: 1.2em;
  }

  #skills, #abilityChecks
  {
    font-size: unset;
    width: 100%;
  }
  .skillsHoverText
  {
    width: 400px;
  }

  .skillsName div::not(.rollbtn)
  {
    max-width: calc(100% - 60px);
    left: 10px !important;
  }

  .levelContentHeader
  {
    font-size: 1.5rem;
  }

  .sectionDivider
  {
    height: 20px;
  }

  section
  {
    padding-left: 5px;
    padding-right: 5px;
  }

  section .navButton
  {
    display: block;
  }

  section .navTab
  {
    font-size: 1rem;
  }

  section .companionNav,
  section .modalNav,
  section .spellLevelsNav,
  section .actionsTabContainer
  {
    border-bottom: 0px;
  }

  .modal.autoSize
  {
    min-width: 80vw;
    max-height: calc(100vh - 60px);
  }

  .circleInputContainer,
  .circleInputContainer.left,
  .circleInputContainer.right
  {
    grid-column: 1 / 20;
  }

  .circleInputBanner
  {
    font-size: 1rem;
    padding-left: 2em;
  }

  .extraInfoTopContainer
  {
    display: block;
  }
  .extraInfoOffensive, .extraInfoSenses, .extraInfoSpeeds, .extraInfoSizeAndReach
  {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .cardWrapper
  {
    grid-column-start: span 20;
    grid-row-start: unset;
    background-color: var(--grid-bg-color);
  }

  .dark .cardWrapper
  {
    background-color: var(--accent-color);
  }

  .dark .cardSubTitle
  {
    color: var(--font-color);
    filter: brightness(1);
  }

  .cardText, .cardTextIcon
  {
    font-size: 1.4em;
    line-height: 1.6em;
    padding: 0px;
  }

  .cardBand
  {
    font-size: 1.4em;
    line-height: 1.4em;
    display: block;
    height: auto;
    white-space: nowrap;
    line-height: 1.6em;
  }

  .attackCardRangeValue,
  .attackCardAttackBonus
  {
    font-weight: normal;
  }

  .cardBand
  {
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid var(--highlight-color);
  }

  .cardBandSpacer
  {
    display: none;
  }

  .cardTitle > span
  {
    font-size: 1em !important;
  }

  .cardSubTitle
  {
    width: 100%;
    font-size: 1.2em;
    text-align: center;
    filter: brightness(.5);
  }

  .attackCardAttackBonus.fullBand
  {
    text-align: left;
  }

  .card:not(.blastCard),
  .dark .card:not(.blastCard)
  {
    --card-font-color: var(--font-color);
    --card-font-color-on-card: var(--font-color);
    background-image: unset !important;
    background-color: unset !important;
    border: none;
    height: auto;
  }

  .cardOverlay .cardRollBtn
  {
    display: none;
  }

  .cardBandWithRoll
  {
    position: relative;
    min-height: 40px;
    overflow: visible;
  }

  .cardOverlayMobile
  {
    display: inline-block;
    position: absolute;
    right: 0px;
    width: 40px;
    height: 40px;
    top: 0px;
  }

  .cardOverlayMobile .cardRollBtn
  {
    animation: unset;
    top: 0px;
  }

  .cardOverlayMobile .rollOptionsContainerInner
  {
    width: 100vw;
    position: absolute;
    margin-left: calc(-100vw + 7em);
  }

  .cardTitle:not(.blastCard)
  {
    text-align: left;
    margin-left: 20px;
  }

  .cardInfoBtn:not(.blastCard),
  .cardAction:not(.blastCard)
  {
    top: 10px;
  }

  .cardTextIcon:not(.blastCard)
  {
    background-color: unset;
    border: 1px solid var(--highlight-color);
    border-radius: 5px;
    padding: 10px;
  }
  .cardContent:not(.blastCard)
  {
    align-items: start;
  }

  .combat .grid:not(.dense)
  {
    display: block;
  }

  .cardWrapper:not(:last-child)
  {
    border-bottom: 1px solid var(--font-color);
  }

  .cardArt:not(.blastCard)
  {
    display: none;
  }
  .cardOverlay
  {
    display: block;
    right: 20px;
    width: auto;
    left: unset;
    top: 0%;
  }

  .cardOverlayButton
  {
    margin: 4px 10px;
  }

  .combatColumns
  {
    display: block;
    width: calc(100% - 10px);
  }

  .combatColumn
  {
    width: 100%;
  }

  .cheatSheet
  {
    width: 100%;
  }

  .combatColumnGrid
  {
    width: 100%;
  }
  .skillsHeader #skillsTab,
  #navigation #tabContainer .navTab
  {
    width: 3rem;
    padding: 0px 8px;
  }

  .button.round.effectsButton,
  .button.round.diceButton
  {
    width: 3rem;
    height: 3rem;
  }

  .button.effectsButton.advanceTimeButton
  {
    right: calc(3rem + 2 * var(--spacing));
  }

  .skillsHeader
  {
    text-align: center;
  }

  .diceRoller.diceRollerOpen #diceButton
  {
    display: none;
  }

  .diceRoller.sidebarOpen #diceButton,
  .effectsButtonContainer.sidebarOpen
  {
    display: none;
  }

  #navigation .navTab svg
  {
    width: 26px;
    fill: var(--font-color);
    stroke: var(--font-color);
    stroke-width: 3px;
  }


  #effectsList
  {
    font-size: unset;
    width: var(--skills-width);
  }

  .effectsListTable td
  {
    font-size: 1em;
    width: 100%;
  }

  /* .editButton
  {
    display: none;
  } */

  .planContainer
  {
    flex-direction: column;
  }

  .cardOverlayButton
  {
    margin: 4px 10px;
  }

  .cardOverlayButton
  {
    margin: 4px 10px;
  }
  .spellbookLine,
  .spellbookLine.bold
  {
    font-size: 1em;
  }

  .encumbranceBox,
  .encumbranceHeader
  {
    font-size: 1em;
  }

  label
  {
    font-size: 1em;
  }

  .navButton.noBorder.noLeftPadding,
  .navButton.noBorder
  {
    padding: 0px;
  }

  .navTabRadiusAfter,
  .navTabRadiusBefore
  {
    display: none;
  }

  .equipmentNav
  {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: 36px;
    gap: 4px;
    height: auto;
  }
  .gearSearch
  {
    position: relative;
    display: block;
  }

  .searchSection
  {
    position: relative;
    right: 0px;
  }

  .tabIconContainer .tabIcon
  {
    width: 26px;
    height: 32px;
  }

  .goldValueOfItems
  {
    padding-top: 10px;
  }

  .itemListHeader
  {
    font-size: 1.2em;
  }

  .weaponWrapper
  {
    margin-left: 10px;
    width: calc(85% - 20px);
    font-size: 1.4em;
  }

  .splashPageHeaderNavigation
  {
    display: flex;
    width: calc(100% - 20px);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: fit-content;
  }
  .splashPageHeader
  {
    height: 33px;
  }

  .weaponText
  {
    max-width: 60%;
  }

  .handednessCheckContainer
  {
    margin: 0px 2px;
  }

  .modalListHeaderLabel
  {
    font-size: .8em;
    font-weight: normal;
  }

  .collapse
  {
    right: 2px;
    background-color: unset;
  }

  .circleInputDrawer
  {
    padding: 4px;
  }

  .circleInputDrawerItem
  {
    line-height: 1.2em;
  }

  .circleInputBannerContainer .circleInput
  {
    width: 2.5rem;
    height: 2.5rem;
  }

  .infoLine
  {
    font-size: 1.4em;
  }

  .extraInfoResistances
  {
    line-height: 2.5em;
  }

  .classChoiceButton
  {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  .level
  {
    overflow-x: hidden;
  }

  input.weaponEditFormInput, input.smallInputContainerInput, div.smallInputContainerInput, .restButton, .companionDismissButton
  {
    font-size: 1em;
    display: block;
    width: auto !important;
  }

  .itemEquipped .smallInputContainerInput
  {
    width: calc(var(--spacing) * 2 + 3em) !important;
  }

  input.smallInputContainerInput
  {
    padding: 2px var(--spacing);
    height: 26px;
  }

  .modalInfoContainer.m10, .modalList.m10,
  .modalInfoContainer.w15, .modalList.w15
  {
    width: 20%;
    min-width: 20%;
  }

  .modalList.m10.collapsed,
  .modalList.w15.collapsed
  {
    width: 20px;
    min-width: 20px;
  }

  .modalInfoContainer h1
  {
    font-size: 1.2em;
  }

  .classInfo
  {
    font-size: 1.4em;
  }

  .addLevelBtn,
  .deleteLevelBtn
  {
    width: auto;
    font-size: 1em;
  }

  .addLevelBtn div,
  .deleteLevelBtn div
  {
    padding: 4px;
  }

  .button > div
  {
    font-size: 1.5em;
  }

  .level
  {
    margin-bottom: 40px;
  }

  .subHeader .fRight
  {
    display: block;
    float: unset;
  }

  .grid.skill
  {
    grid-template-columns: repeat(8, 1fr);
    position: relative;
    margin-top: 20px;
  }

  .grid.skill .grow
  {
    grid-column-end: 9;
  }

  .grid.skill .g1
  {
    display: none;
  }

  .grid.skill .button.g1
  {
    display: flex;
    z-index: 1;
  }

  .skillText.g3
  {
    position: absolute;
    top: 4px;
    left: 10px;
    width: calc(100% - 15px);
  }

  .skillText.g3 > input[type="checkbox"]::after
  {
    content: "(Class Skill)";
    font-size: .5em;
    display: inline-block;
    margin-left: 14px;
    filter: brightness(.5);
    font-weight: normal;
    white-space: nowrap;
  }

  .skillText.g3 .inputContainer
  {
    margin-top: 0px;
    margin-left: 50px;
  }

  .skillText.g3 .inputContainer.g2 div
  {
    flex-direction: row;
  }
  .skillText.g3 .inputContainer.g2 label
  {
    width: auto;
    margin-right: 4px;
  }
  .skillText.g3 .inputContainer.g2 input
  {
    margin-top: -2px;
    width: 100%;
  }

  .skill .inputContainerIncrementAbove
  {
    top: unset;
    bottom: 2px;
    justify-content: space-between;
  }



  .skill .inputContainerIncrementAboveButton,
  .skill .inputContainerIncrementBelowButton
  {
    background-color: var(--font-color);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    width: 20px;
  }

  .under * label
  {
    font-size: 1em;
  }


  main,
  .pageContentContainer
  {
    width: 90vw;
    min-width: unset;
  }

  .standaloneText,
  .abilitySelectOverride > .standaloneText
  {
    font-size: 1em;
    margin-top: 7px;
  }
  .characterSheet .grid
  {
    grid-template-columns: repeat(8, 1fr);
  }

  .characterSheet .boldLabel
  {
    grid-column-start: 1;
    grid-column-end: 9;
  }

  .characterSheet .grid .grow
  {
    grid-column-end: 9;
  }

  .portraitErrorWrapper
  {
    width: calc(100vw - 30px);
    max-width: calc(var(--grid-height) * 5);
    height: calc(100vw - 30px);
    max-height: calc(var(--grid-height) * 5);
    grid-column-end: span 8;
    grid-row-end: span 5;
    justify-self: center;
  }

  .characterSheet .g12
  {
    grid-column-end: span 8;
  }

  .scrollCharacters
  {
    display: none;
  }

  /* .characterList
  {
    height: 100%;
    overflow-x: hidden;
    white-space: unset;
    display: block;
  } */

  .splashCharacterInfoBlock
  {
    width: calc(100% - 20px);
  }

  .about
  {
    display: none;
  }

  .splashPageBanner
  {
    /* padding: 10px 0px 0px 0px; */
  }

  .progressBar
  {
    width: calc(100vw - 20px);
  }

  .callout
  {
    width: 2rem;
    text-align: center;
  }

  .skillsCalloutOpen
  {
    left: calc(100% - 3rem);
  }

  .effectsCalloutSkillsHidden,
  .skillsCalloutEffectsHidden
  {
    display: none;
  }

  .effectsCallout.effectsCalloutOpen
  {
    left: 0px;
    right: unset;
  }

  .skillsCallout.skillsCalloutOpen
  {
    right: 0px;
    left: unset;
  }

  .modal.autoSize
  {
    max-height: calc(100vh - 200px);
  }

  .ammoContainerDecrement
  {
    top: 6px;
    left: -2px;
  }

  .ammoContainerIncrement
  {
    top: 6px;
    right: -5px;
  }

  .ammoContainer
  {
    width: calc(100% - 35px);
    margin-left: 20px;
  }

  .substanceInfusionCardHolder:before,
  .substanceInfusionCardHolder:after,
  .formInfusionCardHolder:before,
  .formInfusionCardHolder:after,
  .boostCardHolder::after
  {
    display: none;
  }

  .blastContent .cardWrapper
  {
    width: 80%;
  }

  .blastCardHolder .card,
  .infusionsChoice .card,
  .boostCardHolder .card,
  .admixtureCardHolder .card
  {
    width: 100%;
    background-size: 100% 100%;
  }

  .blastSelection
  {
    display: block;
    margin-top: 200px;
  }

  .metakinesisSelection,
  .internalBufferSection
  {
    margin-top: -200px;
  }

  .metakinesisTitle,
  .gatherPowerLabel,
  .blastCost,
  .currentBurnLabel
  {
    font-size: 1.2rem;
  }

  .cardSelectionList, .cardSelectionListLeft{
    right: -100px;
    transform: scale(0.5);
  }


  .gatherPowerSection,
  .currentBurn
  {
    top: -100px;
  }

  .gatherPowerSection
  {
    bottom: unset;
  }

  .currentBurn
  {
    right: 0px;
  }

  .blastCardHolder, .infusionsChoice, .boostCardHolder, .admixtureCardHolder
  {
    width: 80%;
    display: block;
  }

  .flex.implementContainer
  {
    flex-direction: column;
  }

  .flex.implementContainer .smallContainerInput.centered
  {
    margin-left: 0px !important;
    width: 100% !important;
  }

  .wizardPageContent
  {
    flex-direction: column;
  }

  .characterWizardInstructions,
  .characterWizardInstructions.w40
  {
    width: calc(100% - 2 * var(--spacing));
    border-right: 0px;
  }

  .characterWizard
  {
    position: relative;
  }

  .abilityScoreCostWiz
  {
    top: 0px;
    right: 4px;
    font-size: .8rem;
  }

  .characterWizard .smallContainerInputLabel
  {
    font-size: .8rem;
  }

  .collapsibleSectionHeader > h3,
  .collapseBtn
  {
    font-size: 1.2rem;
  }
}

main.print
{
  flex-direction: column;
  --font-color: black;
}

.page1,
.page2
{
  display: flex;
}

.printPage
{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap: 1rem;
  page-break-after: always;
  min-height: 0;
  max-height: none;
  font-size: 1.2em;
  line-height: 2em;
  margin-left: 10px;

}

.printSize
{
  text-transform: capitalize;
}

.printPageSideColumn
{
  height: auto;
  min-height: 0;
  overflow: visible;
  width: 4.5in;
  /* page-break-after: always; */
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.printPageMainColumn
{
  height: auto;
  min-height: 0;
  overflow: visible;
  width: calc(3.5in - 20px);
  /* page-break-after: always; */
}

.printPageCharacterInfo,
.printAbilityContainer,
.printSkillMiscBonuses
{
  border: 1px solid var(--font-color);
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: space-between;
  font-size: .8rem;
}

.printPageDefenseInfo,
.printPageFeatsAndTraits
{
  border: 1px solid var(--font-color);
  margin: 10px;
  padding: 10px;
  padding-top: 0px;
}

.printPageDefenseInfo
{
  overflow: hidden;
}

.printRacialTrait,
.printTrait,
.printFeat,
.printClassFeature
{
  font-size: .8em;
}

.printPageDefenseInfo
{
  width: 75%;
  height: calc(11in - 50mm);
}

.printPageAttackInfo
{
  width: 75%;
}

.printPageFeatsAndTraits
{
  width: 25%;
}

.printSavesContainer,
.printCMDContainer,
.printHPContainer,
.printCurrencyContainer
{
  display: flex;
  flex-wrap: wrap;
}

.acSituationalBonusesContainer,
.savesSituationalBonusesContainer,
.cmdSituationalBonusesContainer
{
  margin-left: 20px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: .8em;
  border: 1px dotted;
  position: relative;
}

.acSituationalBonusesContainer:before,
.savesSituationalBonusesContainer:before,
.cmdSituationalBonusesContainer:before
{
  content: 'Situational Bonuses';
  position: absolute;
  top: -8px;
  left: 10px;
  font-size: .8em;
}

.printBonusSource
{
  line-height: 1.5em
}

.printBonus
{
  margin-bottom: 10px;
  display: block;
  width: 100%;
}

.printContentLabel
{
  font-weight: bold;
}

.printContentLabel:first-child
{
  width: 61px;
}

.printContentLabel:not(:first-child)
{
  margin-left: 10px;
}

.printInputContainer
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  margin-left: 10px;
}

.printInputContainerValue
{
  width: 3em;
  height: 1.5em;
  line-height: 1.5em;
  vertical-align: middle;
  border: 1px solid;
  padding: 4px;
  text-align: center;
}

.printInputCurrency
{
  width: 4.3em;
}

.printInputLabel
{
  text-align: center;
  font-size: .8em;
}

.printInventoryContainer
{
  display: table;
}

.printInventoryHeader
{
  display: table-header-group;
}

.printInventoryHeaderName,
.printInventoryHeaderWeight,
.printInventoryHeaderQuantity
{
  display: table-cell;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid;
}

.printInventoryHeaderName
{
  width: 80%;
}

.printInventoryHeaderWeight,
.printInventoryHeaderQuantity
{
  width: 10%;
}

.printInventoryRow
{
  display: table-row;
}

.printInventoryName,
.printInventoryWeight,
.printInventoryQuantity
{
  display: table-cell;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid;
}

.printSkillContainer
{
  border: 1px solid var(--font-color);
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px 0px 10px;
  padding: 10px 0px 0px 10px;
}

.printInput
{
  display: flex;
  margin-right: 10px;
  /* width: calc(50% - 20px); */
}

/* .printCharacterName,
.printClasses,
.printFavoredClasses,
.printLanguages,
.printHometown
{
  width: 100%;
} */

.printSize
{
  width: 10%;
  margin-right: 30px;
}

/* .printDeity
{
  width: calc(90% - 40px);
} */

.printInputValue
{
  border-bottom: 1px solid;
  width: 100%;
  margin-left: 4px;
}

.printPageRacialAbilities,
.printCombatInfo
{
  margin-top: -7px;
}

.printPageTitle
{
  background-color: var(--font-color);
  color: var(--page-background-color-no-transparency);
  margin-top: -10px;
  margin-left: -10px;
  margin-right: 0px;
  width: 50%;
  padding-left: 10px;
  position: relative;
  display: inline-block;
  padding: .24em .3em .25em;
  z-index: 1;
  height: 1em;
  font-size: .8em;
  line-height: 1em;
  font-style: italic;
  white-space: nowrap;
}

.printPageTitle::after
{
  position: absolute;
  z-index: -1;
  content: "";
  right: -10px;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: inherit;
  -webkit-transform: skewX(-10deg);
  -moz-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
}

.printSkillList
{
  display: table;
  width: calc(100% + 8px);
  height: calc(100% - 17px);
  font-size: .9em;
  line-height: 1.5em;
  margin-left: -10px;
}

.printSkillsRow
{
  display: table-row;
}

.printSkillsRow > span
{
  display: table-cell;
  text-align: center;
}

.printSkillsRow .printSkillName
{
  text-align: left;
}

.printSkillsRow
{
  white-space: nowrap;
  overflow: visible;
}

.printSkillHeaderRow
{
  font-weight: bold;
}

.printSkillsRow .printSkillClassSkillCB
{
  display: inline-block;
  width: 8px;
  height: 8px;
  line-height: 8px;
  font-size: 8px;
  margin-right: 2px;
  margin-left: 2px;
  border: 1px solid;
}

.printSkillsRow .printSkillClassSkillCBHeader
{
  display: inline-block;
}

.printSkillAbility
{
  position: relative;
}

.printSkillAbility .printAbilityLabel
{
  position: absolute;
  font-size: 7px;
  bottom: -5px;
  left: calc(50% - 6px);
  text-transform: uppercase;
  opacity: .7;
}

.printSkillsRow:nth-child(odd)
{
  background-color: transparent;
}

.printSkillsRow:nth-child(even)
{
  background-color: hsl(0, 0%, 83%);
}
.printSkillsRow:not(:first-child) .printSkillTotal
{
  border: 1px solid hsl(0, 0%, 0%, .2);
  border-bottom: 0px;
}

.printSkillHeaderRow .printSkillName
{
  text-align: center;
  position: relative;
}

.printSkillHeaderRow .printSkillName::before
{
  position: absolute;
  content: 'Class Skill';
  font-size: 8px;
  opacity: .7;
  left: -10px;
  bottom: -4px;
}

.printSkillHeaderRow .printSkillName::after
{
  position: absolute;
  content: '(* = Trained Only)';
  font-size: 8px;
  opacity: .7;
  right: 10px;
  bottom: 6px;
}

.printAbilityName
{
  margin-left: 4px;
  font-weight: bold;
}

.printAbilityTemp
{
  width: 20px;
  border-bottom: 1px solid var(--font-color);
}

@media print {

  :root {
    --font-color: black;
  }

  .callout
  {
    display: none !important;
  }

  #navigation, header {
    display: none !important;
  }
  .exitPrint
  {
    display: none !important;
  }
  @page
  {
    margin: 20mm;
    size: 8.5in 11in;
    background-color: white;
    color: black !important;
  }

  .page1,
  .page2
  {
    margin-top: 0px;
  }

  .page1
  {
    page-break-before: always;
  }

  .page2cont
  {
    height: auto;
  }

  .printPage
  {
    width: 100%;
  }

  .newPage
  {
    page-break-before: always;
    margin-left: 10px;
  }

  .printPageCharacterInfo,
  .printSkillMiscBonuses
  {
    margin: 0px;
    padding-left: 10px;
    padding-top: 0px;
  }

  .printSkillMiscBonuses
  {
    /* page-break-after: always; */
  }

  .printSkillContainer,
  .printAbilityContainer
  {
    margin: 0px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .printSkillMiscBonuses,
  .printAbilityContainer
  {
    margin-top: 10px;
  }

  .printAbilityContainer
  {
    padding-right: 0px;
  }

  .printPageTitle
  {
    background-color: black !important;
    color: white !important;
    margin-top: 0px;
    white-space: nowrap;
  }

  .bgGradient
  {
    display: none;
  }

  #effectsButton,
  #advanceTimeButton,
  .diceButton,
  .printButton
  {
    display: none;
  }

  aside
  {
    display: none;
  }

  /* Enhanced print styles */
  .printPage {
    page-break-after: always;
    break-after: page;
    height: auto;
    min-height: 0;
  }

  .printContentSection {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  /* Prevent orphaned content */
  .printPageTitle {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Allow breaks between major sections */
  .printPage:last-child {
    page-break-after: auto;
  }

  /* Better handling of long content */
  .printSkillList,
  .printInventoryContainer {
    page-break-inside: auto;
  }

  .printSkillsRow,
  .printInventoryRow {
    page-break-inside: avoid;
  }
}

.print .newPage
{
  page-break-before: always;
  margin-left: 10px;
}

.printContentSection
{
  max-width: 8.5in;
}

.print ~ .effectsButtonContainer,
.print ~ .diceRoller
{
  display: none !important;
}

.print .cardWrapper
{
  grid-column-start: span 20;
  grid-row-start: unset;
  page-break-inside: avoid;
}

.print .card
{
  --card-font-color: var(--font-color);
  --card-font-color-on-card: var(--font-color);
  background-image: unset !important;
  background-color: unset !important;
  border: none;
  height: auto;
}

.print .cardTitle
{
  text-align: left;
  margin-left: 20px;
}

.print .cardInfoBtn,
.print .cardAction
{
  top: 10px;
}

.print .cardTextIcon
{
  background-color: unset;
  border: none;
}
.print .cardContent
{
  align-items: start;
}

.print .cardWrapper:not(:last-child)
{
  border-bottom: 1px solid var(--font-color);
}

.print .cardArt
{
  display: none;
}

.print .cardInfoBtn
{
  display: none;
}

.print .cardBand
{
  justify-content: flex-start;
}

.print .attacksContainer .cardAction
{
  display: none;
}

.print .cardTitle
{
  font-size: 1.5em !important;
}

.dropDownForgotPassword
{
  float: left;
}

.loginDropDownError
{
  clear: both;
  color: var(--invalid-accent-color);
  margin-left: 10px;
  font-size: .8em;
  margin-bottom: 10px;
}

.splashPageCharactersContainer .spinner,
.splashPageCharactersContainer .spinner
{
  margin: 0px;
  opacity: .5;
  z-index: 1;
  height: 130px;
  margin-top: -6px;
}

.characterLoadText
{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.firstCharacterButton
{
  background-color: var(--highlight-color);
  padding: 10px;
  border-radius: 20px;
  font-size: 1.7em;
  line-height: 1em;
}

.firstCharacterButton:hover
{
  filter: brightness(1.1);
}

.firstCharacter
{
  position: relative;
  height: 122px;
}

.effectsButton:hover
{
  z-index: 798;
}

.advanceTimeButton:hover span
{
  animation: arrows 2s infinite;
}

#skillsTab .arrow
{
  position: static;
  display: inline-block;
  line-height: 36px;
  vertical-align: bottom;
  display: inline-block;
  line-height: 36px;
  vertical-align: bottom;
  margin-left: 10px;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: rotate(90deg);
  cursor: pointer;
}

.arrow span {
  display: block;
  width: .2em;
  height: .2em;
  border-bottom: 2px solid var(--effects-button-fill);
  border-right: 2px solid var(--effects-button-fill);
  filter: opacity(.6);
  transform: rotate(225deg);
  margin: -5px;
  margin-top: 4px;
  margin-right: 8px;
  margin-left: -12px;
}

.dark .arrow span {
  border-bottom: 2px solid var(--font-color);
  border-right: 2px solid var(--font-color);
  filter: unset;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes arrows {
  0% {
      opacity: 0;
      transform: rotate(225deg) translate(-5px, -5px);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      transform: rotate(225deg) translate(5px, 5px);
  }
}

.bouncyWrapper
{
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  opacity: .1;
  font-size: 100px;
  font-weight: bold;
  pointer-events: none;
  font-family: 'Cinzel';
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

.bouncyBallX
{
  animation: bounceX 12s linear infinite alternate;
}
.bouncyBallY
{
  animation: bounceY 10s linear infinite alternate;
}

.bouncyBall
{
  width: 100px;
  height: 100px;
}

@keyframes bounceX
{
  100%
  {
    transform: translateX(calc(100vw - 100px));
  }
}

@keyframes bounceY
{
  100%
  {
    transform: translateY(calc(100vh - 50px));
  }
}

.helpButton
{
  display: inline-block;
  border-radius: 50%;
  background-color: var(--highlight-color);
  border:1px solid var(--font-color);
  width: 1em;
  line-height: 1em;
  height: 1em;
  text-align: center;
  cursor: pointer;
  font-weight: unset;
}

.helpHeader .__react_component_tooltip
{
  font-weight: 300;

}

.mono
{
  font-family: 'Courier New', Courier, monospace
}

#diceBox
{
  position: fixed;
  top: 0px;
  left: 0px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

#diceBox canvas {
  width: 100%;
  height: 100%;
}


.diceResultsContainer
{
  position: fixed;
  top: 80px;
  right: 40px;
  background-color: var(--light-shade);
  border-radius: 10px;
  padding: var(--spacing);
  z-index: 10000;
  pointer-events: none;
  opacity: 1;
}

.diceResultsContainer.hiding
{
  transition: all ease-in 4650ms;
  opacity: 0;
}

.diceResultsContainer.hide
{
  display: none;
}

.diceResultRoll
{
  display: inline-block;
  margin-right: 4px;
}

.diceResultRoll.color,
.innerDiceResultRoll.color

{
  filter: brightness(0.7) saturate(.75);
}

.innerDiceResultRoll
{
  display: inline-block;
  margin-left: 2px;
}

.diceResultsContainer
{
  box-shadow: 0px 0px 10px var(--font-color);
}

.dark .diceResultsContainer
{
  box-shadow: 0px 0px 10px black;
}

.diceResultNew
{
  pointer-events: all;
}

.diceResultTotal
{
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: var(--spacing);
}

.diceResultName
{
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: var(--spacing)
}

.diceResultCharacterName
{
  font-size: .8rem;
  filter: brightness(.6);
}

.diceResultHeader
{
  font-weight: bold;
  font-size: 1rem;
}

.diceResultNew, .diceResultOld
{
  font-size: 1.5em;
}

.diceResultRolls
{
  margin-top: var(--spacing);
}

.diceResultBonuses
{
  margin-top: var(--spacing);
  line-height: 1.5em;
  font-size: .6em;
}

.diceResultOld
{
  padding: var(--spacing);
  border-bottom: 1px solid var(--highlight-color);
}

.diceResultOld:nth-child(odd)
{
  background-color: var(--skills-primary-color);
}

.diceResultOld:nth-child(even)
{
  background-color: var(--skills-secondary-color);
}
.diceResultBonus
{
  padding-top: 4px;
}

.diceResultBonus:first-child
{
  border-top: 1px solid var(--highlight-color);
}

.diceResultHideButton
{
  position: absolute;
  transition: all ease-in 150ms;
  top: 0px;
  right: 0px;
  border: 1px solid var(--font-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  box-shadow: 0px 0px 5px black;
  background-color: var(--accent-color);
  cursor: pointer;
}

.diceResultHideButton:hover
{
  transform: scale(1.1);
}

.savesRollBtn
{
  position: relative;
  height: var(--input-font-size);
  top: -.5em;
  float: right;
}

.cardRollBtn
{
  height: 40px;
  width: 40px;
  position: absolute;
  left: 0px;
  top: 50%;
  text-align: center;
  animation: rollDiceThrob 1500ms infinite;
}

.cardRollBtn .rollbtn
{
  height: 100%;
  width: 100%;
}

.rollbtn:hover
{
  /* make the button spin while hovered*/
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.cardBand .cardOverlay .cardRollBtn
{
  display: none;
}

.rollOptionsContainer
{
  position: relative;
  margin-left: -10px;
  z-index: 2;
}

.rollOptionsContainerInner
{
  position: absolute;
  top: -4em;
  width: 188px;
  height: 1.5em;
  z-index: 5;
}

.fireAway .rollOptionsContainerInner
{
  display: flex;
  flex-direction: column;
  margin-left: -95px;
  top: 3em;
}

.cardRollOption
{
  display: inline-block;
  color: var(--orig-font-color);
  font-size: .8rem;
  line-height: 1.5rem;
  padding: 4px;
  background-color: var(--highlight-color);
  border-radius: 4px;
  border: 1px solid var(--accent-color);
  align-self: center;
  text-align: center;
  height: auto;
  margin-left: var(--spacing);
  cursor: pointer;
  margin-top: 4px;
}

.containerList
{
  position: absolute;
  width: auto;
  z-index: 3;
}

.containerListOption
{
  background-color: var(--header-color);
  width: 100%;
  white-space: nowrap;
}

.headerConnectIcon
{
  float: right;
  fill: var(--header-font);
  stroke: var(--header-font);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  margin-right: 4px;
  cursor: pointer;
}

.headerConnectIcon.headerConnectIconConnected
{
  fill: var(--header-accent-color);
  stroke: var(--header-accent-color);
}

.headerConnectIcon.headerConnectIconError
{
  fill: var(--invalid-highlight-color);
  stroke: var(--invalid-highlight-color);
}

.headerConnectDialog
{
  position: absolute;
  padding: 10px;
  right: 0px;
  top: 30px;
  border: 1px solid var(--highlight-color);
  border-radius: 10px;
  width: 200px;
  background-color: var(--accent-color);
  display: table;
  text-align: center;
  color: var(--font-color);
}

.headerConnectDialog .smallContainerInputLabel
{
  text-align: center;
}


.connectButton
{
  display: flex;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

.dark .connectButton .smallInputContainerInput
{
  color: var(--accent-color);
}

.characterNameGM
{
  margin-right: 2px;
}

.partyListMemberWrapper
{
  border-bottom: 1px solid var(--modal-unit-border);
  padding: var(--spacing);
  padding-bottom: calc(var(--spacing) * 2);
  position: relative;
  overflow: hidden;
}

.partyListMember
{
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.PartyListMember:hover
{
  background-color: var(--modal-unit-hover);
}


.partyListCharacterName
{
  font-size: 1.5em;
  font-weight: bold;
  margin-right: 10px;
  line-height: 2em;
  cursor: pointer;
  display: inline;
}

.partyListBootWrapper
{
  line-height: 1.5em;
  height: 1.5em;
}

.partyListBoot
{
  display: inline;
  border: 1px solid var(--invalid-font-color);
  background-color: var(--invalid-highlight-color);
  color: hsl(var(--invalid-hue), 41%, 24%);
  position: absolute;
  bottom: 4px;
  right: 4px;

  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
}

.dark .partyListBoot
{
  border: 1px solid var(--invalid-accent-color);
  background-color: var(--invalid-highlight-color);
  color: var(--invalid-accent-color);
}

.partyListBooting
{
  display: inline;
  float: right;
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
}

.partyListBoot:hover
{
  filter: brightness(1.1);
}

.partyListBoot:active
{
  filter: brightness(1.2);
}

.PartyListComponent
{
  text-align: center;
}

.partyListACHP,
.partyListSaves
{
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.PartyListLabel
{
  font-weight: bold;
}

.encounterWrapper
{
  border: 1px solid var(--modal-unit-border);
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 10px;
  transition: background-color ease-out .15s;
  background-color: var(--modal-background-color);
  position: relative;
}

.encounterHeader
{
  font-weight: bold;
  font-size: 1.5em;
  background-color: var(--highlight-color);
  padding: 4px;
}

.encounterName
{
  cursor: text;
}

.encounterDescription,
.enemyNotes
{
  margin-top: 10px;
  opacity: .7;
  margin-bottom: 10px;
  cursor: text;
  font-style: italic;
}

.enemyNotes
{
  padding: 10px;
}

.encounterDelete
{
  right: 14px;
  top: 4px;
  cursor: pointer;
  position: absolute;
  border-radius: 50%;
  line-height: 1.5em;
  font-size: calc(1.5em + 8px);
  text-align: center;
  vertical-align: middle;
}

.encounterEnemies
{
  padding: 10px;
  border: 1px solid var(--highlight-color);
  border-radius: 10px;
}

.enemy
{
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--highlight-color);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: var(--grid-bg-color);
}

.enemyContent
{
  padding: 10px;
}

.enemy:hover
{
  filter: brightness(1.2);
}

.enemy:not(:first-child)
{
  border-top: 1px solid var(--highlight-color);
}

.addEnemyButton
{
  border-top: 1px solid var(--highlight-color);
}

.enemyName
{
  background-color: var(--highlight-color);
  font-size: 1.1em;
  padding-left: 4px;
}

.encounterDelete:hover
{
  filter: brightness(1.2);
}

.encounterPartyMembers
{
  display: table-row;
}

.encounterPartyMembers .smallInputContainerInput
{
  margin-left: 4px;
}


.enemyDelete,
.enemyRefresh
{
  position: absolute;
  top: 0px;
  right: 4px;
}

.encounterListItem
{
  border: 1px solid var(--modal-unit-border);
  border-radius: 10px;
  padding: 4px 10px;
  margin-top: 10px;
  cursor: pointer;
  display: inline-block;
}

.encounterListItem:hover
{
  filter: brightness(1.2);
}

.enemyRefresh
{
  top: -2px;
  font-size: 2em;
}

.enemyCopy
{
  position: absolute;
  top: 0px;
  right: 1rem;
  border: 1px solid var(--modal-border-color);
  padding: 0px 2px;
  border-radius: 4px;
  font-size: .9em;
  height: 19px;
  line-height: 19px;
}
.enemyCopy:hover
{
  filter: brightness(1.2);
}

.encounterEnemiesHeader
{
  font-weight: bold;
  font-size: 1.2em;
}

.launchEncounterButton.smallInputContainerInput.pointer
{
  position: absolute;
  right: 18px;
  bottom: 15px;
  width: auto;
  background-color: var(--highlight-color);
}

.partyMemberMenu
{
  position: absolute;
  bottom: 4px;
  left: 4px;
  background-color: var(--accent-color);
  border: 1px solid var(--modal-border-color);
  border-radius: 10px;
}

.diceRollResultButton
{
  background-color: var(--accent-color);
  border: 1px solid var(--modal-border-color);
  border-radius: 10px;
  padding: 4px;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  display: inline-block;
}

.dark .diceRollResultButton
{
  background-color: var(--modal-background-color);
  border: 1px solid var(--modal-border-color);
}

.dark .partyMemberMenu
{
  background-color: var(--modal-background-color);
  border: 1px solid var(--modal-border-color);
}

.partyMemberMenuOption:not(last-child)
{
  padding: 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--modal-unit-border);
}

.partyMemberMenuOption:first-child
{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.partyMemberMenuOption:last-child
{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.partyMemberCharacterName
{
  display: inline-block;
  margin-left: 40px;

}

.partyMemberCharacterName:hover
{
  filter: brightness(1.2);
  text-decoration: underline;
}

.partyMemberMenuIconsWrapper
{
  position: absolute;
  left: 10px;
}

.partyMemberMenuIcons
{
  display: flex;
  flex-direction: column;
  width: 40px;
  align-items: center;
}

.partyMemberMenuIcon
{
  cursor: pointer;
  width: 26px;
  height: 26px;
  fill: var(--font-color);
  border-bottom: 1px solid transparent;
  margin-bottom: 4px;
  display: inline-block;
  text-align: center;
  margin-right: 8px;
  background-color: var(--modal-background-color);
  border: 1px solid var(--modal-border-color);
  border-radius: 10px;
  padding:4px;

}

.partyMemberMenuIcon:hover
{
  filter: brightness(1.2);
}

.partyMemberMenuIcon.companionDismissButton
{
  vertical-align: bottom;
  margin-bottom: 0px;
}

.initiativeTracker
{
  position: fixed;
  left: 10vw;
  width: 200px;
  top: 160px;
  max-height: calc(100vh - 250px);
  overflow: auto;
  display: table;
  border-collapse: collapse;
  border: 1px solid;
  text-align: center;
  z-index: 3;
  color: hsl(0, 0%, 65%);
}


.initiativeHeader,
.initiativeEntry,
.initiativeFooter
{
  font-size: 1.2em;
  line-height: 2em;
  vertical-align: middle;
  display: table-row;
  border: 1px solid;
  text-align: left;
  padding: 10px;
  background-color: var(--page-background-color-no-transparency);
}

.initiativeFooter span:last-child
{
  min-width: 1em;
}

.initiativeEntry:hover
{
  filter: brightness(.9);
  backdrop-filter: brightness(.9);
}

.dark .initiativeEntry:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1.2);
  /* text-shadow: 0px 0px 2px var(--font-color); */
  cursor: pointer;
}

.initiativeEntry.highlighted
{
  background-color: var(--highlight-color);
}

.initOptions
{
  position: absolute;
  right: -100px;
  background-color: var(--modal-background-color);
  border: 1px solid var(--modal-border-color);
  width: 100px;
  border-collapse: collapse;
  z-index: 3;
  font-size: 1rem;
  line-height: 1.5rem;
}

.initOptionsHeader
{
  top: 0;
}

.initiativeEntry:hover .initOptions:not(.initOptionsHeader)
{
  filter: brightness(.823);
  right: -101px;
}

.initOptionsItem
{
  padding: 4px;
  cursor: pointer;
  border: 1px solid var(--modal-unit-border);
}


.initOptionsItem:hover
{
  background-color: var(--highlight-color);
}

.initiativeHeader,
.initiativeFooter
{
  font-weight: bold;
  text-align: center;
  font-size: 2em;
  line-height: 2em;
}

.initiativeFooter
{
  font-size: 1.5em;
  width: 100%;
}

.initiativeFooter span,
.initiativeHeader span
{
  display: table-cell;
}

.initiativeFooter span:first-child,
.initiativeHeader span:first-child
{
  padding-left: 1em;
}

.initiativeFooter:hover
{
  cursor: pointer;
  filter: brightness(.9);
  backdrop-filter: brightness(.9);

}

.dark .initiativeFooter:hover
{
  filter: brightness(1.2);
  backdrop-filter: brightness(1.2);
}

.initiativeEntryName,
.initiativeEntryValue
{
  display: table-cell;
  padding: 4px;
}

.initiativeEntryValue
{
  font-weight: bold;
}

.initiativePrev,
.initiativeNext
{
  position: absolute;
  top: .5em;
  font-size: 2em;
  cursor: pointer;
}

.initiativePrev:hover,
.initiativeNext:hover
{
  filter: brightness(1.2);
  text-shadow: 0px 0px 10px var(--font-color);
}

.initiativeEntry:hover .initOptionsItem,
.initiativeHeader:hover .initOptionsItem
{
  text-shadow: none;
  z-index: 4;
  background-color: var(--modal-background-color);
}

.initiativePrev
{
  left: -1em;
}

.initiativeNext
{
  right: -1em;
}

.flash
{
  background-color: var(--header-color);
  transition: background-color linear .5s;
}

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

.quickLink:hover
{
  filter: brightness(1.2);
}

.renderedEnemy
{
  margin-top: 40px;
  border: 1px solid var(--highlight-color);
  border-radius: 10px;
  padding: var(--spacing);
  background-color: var(--accent-color);
}


.activateOnOthersListItem
{
  border-top: 1px solid;
  white-space: nowrap;
}

.activateOnOthersButton.cardOverlayButton.open
{
  max-width: none;
  width: auto;
  animation: none;
  padding: 0px;
}

.activateOnOthersListItem
{
  padding: 4px 10px;
}

.activateOnOthersListItem:hover
{
cursor: pointer;
  text-shadow: 0px 0px 2px var(--font-color);
  filter: brightness(1.2);
}

.activateOnOthersButton.cardOverlayButton.open .activateCardButtonHeader
{
  font-weight: bold;
  font-size: 1.2em;
}

.activateOnOthersListItem.activateCheck
{
  line-height: 2em;
  vertical-align: top;
}

.activateOnOthersListItem.activateCheck:not(.activateChecked)::before
{
  content: '☐';
  font-size: 2em;
  margin-right: 10px;
}

.activateOnOthersListItem.activateCheck.activateChecked::before
{
  content: '☑';
  font-size: 2em;
  margin-right: 10px;
}

.activateOnOthersAll
{
  position: absolute;
  right: -40px;
  top: 100px;
  cursor: pointer;
  z-index: 10;
}

.beastInfoData
{
  width: 50%;
  margin-left: 20px;
  padding-right: 20px;
}

.beastInfoData > pre
{
  white-space: pre-wrap;
  height: calc(100% - 60px);
  background-color: var(--input-background-color);
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  font-size: 1em;
}

.statblockContainer
{
  width: 50%;
  height: calc(100% - 60px);
  overflow: auto;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid var(--modal-unit-border);
}

.groupIDButton
{
  padding: 0px 4px;
  display: table;
  width: calc(100% - 10px);
  background-color: var(--skills-primary-color);
}

.groupIDCopyText
{
  border-bottom: 1px solid var(--highlight-color);

}

.connectedPartyMembers
{
  background-color: var(--highlight-color);
  margin: 0px;
  padding: 4px;
}

.dark .connectedPartyMembers
{
  background-color: var(--header-color);
}

.hpSticky > .circleInput
{
  position: fixed;
  margin-left: -90px;
  top: 100px;
}

.hpSticky
{
  position: relative;
}

.hpSticky > .incrementCircleInput
{
  position: fixed;
  margin-left: unset;
  top: unset;
  top: 80px;
  left: unset;
  margin-left: -110px;
}

.hpSticky::before
{
  content: 'HP';
  position: fixed;
  margin-left: -110px;
  top: 80px;
  font-weight: bold;
}

.loot .searchSection
{
  margin-top: 0px;
}

.addLootButtons
{
  border-top: 1px solid var(--highlight-color);
}

.addLootButton
{
  display: inline-block;
  margin-right: 10px;
}

.moneyInfo
{
  display: flex;
  position: relative;
}

.sendMoney
{
  align-self: center;
  position: relative;
}

.sendMoney .containerList
{
  position: absolute;
  left: 130px;
  top: 0px;
}

.customClassBuilder
{
  position: relative;
  margin-top: 50px;
}

.addCustomClassButtonContainer
{
  position: fixed;
  top: 37px;
  width: 100%;
  background-color: var(--modal-background-color);
  border-bottom: 1px solid var(--modal-border-color);
  box-shadow: 0px 10px 10px black;
  margin-left: -10px;
  padding-top: 10px;
  border-top: 1px solid var(--modal-border-color);
}

.addCustomClassButton,
.updateClassButton,
.deleteCustomClassButton
{
  background-color: var(--highlight-color);
  padding: 4px;
  border-radius: 4px;
  width: auto;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 200px;
  cursor: pointer;
  text-align: center;
}
.updateClassButton,
.deleteCustomClassButton
{
  position: absolute;
  top: 50px;
  right: 10px;
  float: right;

}

.characterRace
{
  line-height: 1.2em;
}
.characterClasses
{
  line-height: 1em;
  height: 1em;
  font-size: .6em;
  filter: brightness(.7);
}

.updateClassButton
{
  right: 230px;
}

.deleteCustomClassButton
{
  background-color: var(--invalid-highlight-color);
  color: var(--invalid-accent-color);
}

@media (min-width: 0px) {
  .splashLoadingText
  {
    font-size: 16px;
  }
  /* .characterList
  {
    width: 80vw;
    padding: 20px;
    align-items: center;
    margin: auto;
    border-radius: 10px;
    background-color: hsl(0, 0%, 15%);
  } */
  .pitch-title h1
  {
    font-size: 2rem;
    line-height: 1.1;
    font-family: 'Cinzel', monospace;
  }

  .pitch-description
  {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }
  .pitch-container {
      max-width: 540px;
  }
  .pitch-left, .pitch-right
  {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .pitch-image
  {
    display: flex;
    align-self: center;
    height: 320px;
    width: 576px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--font-color);
    box-shadow: 0px 0px 10px 4px black;
    max-height: 100%;
    max-width: 100%;
  }

  .pitch-container-inner
  {
    padding: 40px;
  }

}


@media (min-width: 768px) {
  .pitch-container {
      max-width: 720px;
  }
  .pitch-title
  {
    font-size: 26px;
  }
}


@media (min-width: 992px) {
  .pitch-container {
      max-width: 960px;
  }
}

@media (max-width: 1199px)
{
  .pitch-container:nth-child(even) .pitch-container-inner
  {
    display: flex;
    flex-direction: column-reverse;
  }

  .pitch-container .pitch-description
  {
    text-align: left;
  }
}


@media (min-width: 1200px)
{
  .pitch-container
  {
    max-width: 1140px;

  }
  .pitch-left, .pitch-right
  {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .pitch-left .pitch-container
  {
    justify-content: left;
  }
  .pitch-right .pitch-container
  {
    justify-content: right;
  }
  .pitch-container
  {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bs-gutter-x, .75rem);
    padding-right: var(--bs-gutter-x, .75rem);
    width: 100%;
    margin-top: 40px;
  }

  .pitch-container-inner
  {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
  }

  .faqContainer
  {
    padding: 10px;
  }

  .faqLink
  {
    line-height: 2em;
    font-size: 16px;
  }

  .faqLink div
  {
    text-decoration: underline;
    cursor: pointer;
  }

  .faqLink div:hover
  {
    filter: brightness(1.2);
  }

  .faqContent
  {
    font-size: 16px;
    margin-left: 10px;
  }

  .faqItem.highlighted
  {
    background-color: var(--highlight-color);
  }
}

.googleLoginContainer
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 100%;
  margin: auto;
  margin-top: 10px;
}

.googleButton
{
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  display: flex
;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.createAccountLink
{
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#savedInfo
{
  float: right;
  margin-right: 10px;
}

.planTable
{
  border: 1px solid var(--font-color);
  border-collapse: collapse;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
  max-width: 100%;

}

.planTable th
{
  border: 1px solid var(--highlight-color);
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.planTable td
{
  border: 1px solid var(--highlight-color);
  font-size: 16px;
  padding: 4px;
  text-align:center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.planTable .featureCell
{
  text-align: left;
}

.featureTitle span
{
  cursor: pointer;
  margin-left: 10px;
}

.splashModalText
{
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 20px;
}

.planButtonContainer
{
  max-width: 80%;
  text-align: center;
  align-self: center;
  margin: auto;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: center;
}

.planButton,
.payButton
{
  background-color: var(--highlight-color);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 10px;
  width: auto;
}

.planButton.disabled
{
  background-color: var(--disabled-color);
  cursor: not-allowed;
  opacity: .5;
}

.payButton
{
  width: 100%;
}
.planButton:hover
{
  filter: brightness(1.2);
}

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

.pendingPlan
{
  font-size: .8rem;
  opacity: .8;
}

.companionView
{
  background-color: var(--modal-background-color);
  background-image: url(/assets/images/pathcompanion_bg_day_4K.png);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flow-root;

}

.dark .companionView
{
  background-image: url(/assets/images/pathcompanion_bg_night_4K.png);
}

.initiativeFakeCell
{
  stroke: var(--font-color);
  fill: var(--font-color);
  color: var(--font-color);

}

.initiativeHeader .initiativeHeaderEdit
{
  cursor: pointer;
  line-height: 2em;
  padding-right: 4px;
}

.initiativeHeader .initiativeHeaderEdit:hover
{
  filter: brightness(1.2);
}

.partyListHeader
{
  position: fixed;
  z-index: 1;
  display: flex;
  justify-content: left;
  align-items: start;
  width: 100%;
  padding-top: 8px;
  padding-left: 8px;
  background-color: var(--accent-color);
  border-bottom: 1px solid var(--highlight-color);
}

.partyListHeaderNav
{
  cursor: pointer;
  width: 20px;
  fill: var(--font-color);
  border-bottom: 1px solid transparent;
  margin-bottom: 4px;
  display: inline-block;
  text-align: center;
  margin-right: 8px;
}

.partyListHeaderNav:hover
{
  filter: brightness(1.2);
  border-bottom: 1px solid var(--font-color);
  text-shadow: 0px 0px 2px var(--font-color);
}

.partyListHeaderNavActive
{
  border-bottom: 1px solid var(--font-color);
  fill: var(--font-color);
  filter: brightness(1.5);
  background-color: var(--skills-secondary-color);
}

.diceHistory
{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

.tierInfo
{
  font-size: 1.5em;
  margin-bottom: 10px;
}

.patreonConnectButton
{
  display: inline-block;
  background-color: var(--accent-color);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .8em;
  border: 1px solid var(--highlight-color);
  /* font-size: 1.5em; */
  margin-top: 10px;
  margin-left: 10px;
}

.patreonConnectButton:hover
{
  filter: brightness(1.2);
}

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

.tierInfoText:hover
{
  filter: brightness(1.2);
}

.patreonAlert
{
  background-color: hsla(0, 0%, 0%, .8);
  font-weight: 400;
  font-size: 1rem;
  color: hsl(0, 0%, 65%);
  position: fixed;
  z-index: 10;
  padding: 10px;
  top: 10px;
  right: 10px;
  width: 200px;
  border-radius: 4px;
  border: 1px solid hsl(0, 0%, 65%);
  z-index: 10000;
}

.patreonAlert:hover
{
  filter: brightness(1.2);
}

.patreonAlert .supportLink
{
  color: var(--font-color);
  text-decoration: underline;
  cursor: pointer;
}

.patreonAlert .supportLink:hover
{
  filter: brightness(1.2);
}

.patreonAlert .patreonAlertClear
{
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  color: var(--font-color);
  font-size: 1.5em;
  border-radius: 50%;
  background-color: var(--highlight-color);
  padding: 0px 4px;
  border: 1px solid var(--highlight-color);
  transition: all 0.2s ease-in-out;
}

.patreonAlert .patreonAlertClear:hover
{
  transform: scale(1.2);
  filter: brightness(1.2);
}

.receivedDamageValue
{
  font-size: 1.2em;
  font-weight: bold;
}

.receivedDamageResistanceText
{
  font-size: .8em;
  opacity: .8;
}

.splashTab
{
  position: relative;
}

.headerNavIconText
{
  font-size: .7em;
  opacity: .8;
  position: absolute;
  bottom: -2px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navTabShadow
{
  font-size: .5em;
  opacity: .5;
  position: absolute;
  bottom: -5px;
  left: 0px;
  width: 100%;
  text-align: center;
}

.classFeatureDeleteButton,
.archetypeClassFeatureDeleteButton
{
  cursor: pointer;
  font-size: .8em;
  opacity: .5;
  float: right;
  border-radius: 50%;
  background-color: var(--invalid-accent-color);
  line-height: 1.2em;
  width: 1.2em;
  text-align: center;
  border: 1px solid var(--invalid-highlight-color);
  color: var(--invalid-font-color);
  transition: all 0.2s ease-in-out;
}

.classFeatureDeleteButton:hover,
.archetypeClassFeatureDeleteButton:hover
{
  transform: scale(1.2);
  filter: brightness(1.2);
}

.archetypeClassFeatureDeleteButton
{
  float: left;
}

.abilityDamageSection
{
  border-top: 1px solid var(--font-color);
  padding-top: var(--spacing);
}

.difficultyValue
{
  width: 100%;
  display: block;
  text-align: center;
}

.oglInfo
{
  margin-top: 10px;
  text-align:center;
}

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

.oglInfoLinkText:hover
{
  filter: brightness(1.2);
}

/* Sidebar drag feedback */
.sidebar-dragging {
  cursor: grabbing;
}

.sidebar-dragging aside {
  transition: none !important;
}

body.sidebar-dragging aside {
  touch-action: none;
}

/* Prevent touch actions on the main content when dragging */
body.sidebar-dragging main {
  touch-action: none;
}

.splashBookThirdPartyWarning {
  background-color: var(--warning-color);
  padding: var(--spacing);
  font-weight: bold;
}

.splashAppLinks
{
  margin-top: 10px;
}

.splashAppLink
{
  height: .3in;
  width: auto;
}