@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800&family=Gloria+Hallelujah&family=Grandstander&display=swap');

@font-face {
    font-family: 'open_sanscondensed_light';
    src: url('fonts/OpenSans-CondLight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

input:autofill {
  background: inherit;
}


/*
! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/


*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*stupid bottom margins on forms wtf */
form { margin-bottom: 0; }

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Ensure the default browser behavior of the `hidden` attribute.
*/

[hidden] {
  display: none;
}




/***************************************************************************************************\
*************************                                              ******************************
*************************                CUSTOM STUFF                  ******************************
*************************                                              ******************************
\***************************************************************************************************/






/*-----------------------*\
|       Index Page        |
\*-----------------------*/

.IndexBody{
  display: flex;
  flex-direction: column;
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  letter-spacing: 0.025em;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
}


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


.IndexShadow{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(55 65 81 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  background-color: rgb(255 255 255 / 0.45);
  background-clip: padding-box;
  
  
	 backdrop-filter:  blur(4px);
}


.LoginBox{
  display: flex;
  flex-direction: column;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(55 65 81 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  background-color: rgb(255 255 255 / 0.45);
  background-clip: padding-box;
  backdrop-filter:  blur(4px);
}



/*----------------------------*\
|       General Purpose        |
\*----------------------------*/


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

.block{
  display: block;
}

.inline{
  display: inline;
}

.Wrapper{
  display: flex;
  flex-wrap: wrap;
  width:100%;
}

.flex{
  display: flex;
}

.flex-wrap{
  flex-wrap: wrap;
}

.nowrap{
  white-space: nowrap;
}

.FlexCol{
  display: flex;
  flex-direction: column;
}

.FlexRow{
  display: flex;
  flex-direction: row;
}

.Grid{
  display: grid;
}

.hidden{
  display: none;
}

.flex-grow{
  flex-grow: 1;
}

.w-full{
  width: 100%;
}

.smallsvg{
  width: 18px;
  height: 18px;
}

.midsvg{
  width: 30px;
  height: 30px;
}

.largesvg{  
  width: 3rem;
  height: 3rem;
}

.w-fit{
  width: fit-content;
}

.w-half{
  width: 50%;
}

.h-full{
  height: 100%;
}

.pad-mid{
  padding: 20px;
}

.pad-sm{
  padding: 10px;
}

.pad-min{
  padding: 2px;
}

.pt-sm{
  padding-top: 10px;
}

.pr-sm{
  padding-right: 10px;
}

.py-sm{
  padding-left: 10px;
  padding-right: 10px;
}

.gap-large{
  gap: 40px;
}

.gap-mid{
  gap: 20px;
}

.gap-sm{
  gap: 10px;
}

.gap-min{
  gap: 2px;
}

.row-gap{
  row-gap: 20px;
}

.marg-mid{
  margin: 20px;
}

.marg-sm{
  margin: 10px;
}

.marg-min{
  margin: 2px;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-large{
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-mid{
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-sm{
  margin-top: 5px;
  margin-bottom: 5px;
}

.mt-large{
  margin-top: 40px;
}

.mt-mid{
  margin-top: 20px;
}

.mt-sm{
  margin-top: 5px;
}

.mb-large{
  margin-bottom: 40px;
}

.mb-mid{
  margin-bottom: 20px;
}

.mb-sm{
  margin-bottom: 10px;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.items-center{
  align-items: center;
}

.justify-left{
  justify-content: left;
}

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

.justify-evenly{
  justify-content: space-evenly;
}

.justify-between{
  justify-content: space-between;
}

.justify-start{
  justify-content: start;
}

.truecenter{
  align-items: center;
  justify-content: center;
}

.Top{
  top: 0px;
}

.Right{
  right: 0px;
}

.Bottom{
  bottom: 0px;
}

.Left{
  left: 0px;
}

.help{
	cursor: help;
}

.link:hover{
  color: #eeb676;
}

.overflow-x-scroll{
  overflow-x: scroll;
}

.overflow-y-hidden{
  overflow-y: hidden;
}

.overflow-y-auto{
  overflow-y: auto;
}

.abilcard_columns{
  columns:5 275px;
  column-gap: 20px;
}


.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-5{
  grid-column: span 5 / span 5;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-wait{
  cursor: wait;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

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

.text-justify{
  text-align: justify;
}

.break-inside-avoid{
  break-inside: avoid;
}

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

.blur{
	backdrop-filter:  blur(4px);
}

.narrow-center{
	justify-content:center;
	text-align:center;
}

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

.ClassIconDiv{
	width:100%;
}

@media (min-width: 768px){

	.narrow-center{
		justify-content:inherit;
		text-align:inherit;
	}

	.ClassLearnDiv{
		justify-content:inherit;
		flex-direction:row;
	}

	.ClassIconDiv{
		width: calc(100% - 367px);
	}
	
}



/*------------------------------*\
|       Various Size Misc        |
\*------------------------------*/
@media (min-width: 768px){
  .Mid50{
    width: 50%;
  }
}

@media (min-width: 1024px){
  .Large33{
    width: 33.333333%;
  }
  
  .LargeHide{
    display: none;
  }
}

.LargeHide:hover{
	color: white;
}



/*--------------------*\
|       Buttons        |
\*--------------------*/
.MainButtonColor_0, .MainButtonColor_1{
  background-color: #c58339;
  text-transform: uppercase;
}

.MainButtonColor_0:hover, .MainButtonColor_1:hover, .MainButtonActive{
  background-color: #915c2c;
}

.ButtonColor_0{
  background-color: #ddcbba;
}

.ButtonColor_1{
  background-color: #d1d5db;
}

.ButtonColor_0:hover, .ButtonColor_0.Active{
  background-color: #a58b76;
}

.ButtonColor_1:hover, .ButtonColor_1.Active{
  background-color: #8d9299;
}


.DropdownColor_0, .InputBoxColor_0{
  background-color:  #fffbf8;
}


.DropdownColor_1, .InputBoxColor_1{
  background-color:  #565c65;
}


.InputBoxColor_0{
  color: #00000080;
}

.InputBoxColor_1{
  color: #ffffff80;
}


.TabColor_0{
  background-color: #ebe0d4;
}

.TabColor_1{
  background-color: #d1d5db;
}

.TabColor_0:hover, .TabColor_0.Active{
  background-color: #c58339;
}

.TabColor_1:hover, .TabColor_1.Active{
  background-color: #c58339;
}

.BoxedTabColor_0{
  background-color: #ddcbba;
}

.BoxedTabColor_1{
  background-color: #d1d5db;
}

.BoxedTabColor_0:hover, .BoxedTabColor_0.Active{
  background-color: #a58b76;
}

.BoxedTabColor_1:hover, .BoxedTabColor_1.Active{
  background-color: #8d9299;
}

.rounded-full.ActiveButt{
	outline: 5px solid #c6833a;
}


.InputBox{
  height:fit-content;
  padding: 4px 14px;
  border: 3px solid black;
  font-family: 'Grandstander';
  font-size: 20px;
}

.SearchBox{
	font-style:italic;
	text-align:left;
}


.TabSelector{
  height:fit-content;
  color: black;
  align-items: center;
  padding: 3px 14px;
  border: 3px solid black;
  font-family: 'Grandstander';
  font-weight: 500;
  font-size: 20px;
  position: relative;
  cursor: pointer;
}
	

.TabSelectorRow{
	justify-content:center;
	max-width:1000px;
}

@media (min-width: 1500px){
	.TabSelectorRow{
		max-width:1400px;
	}
}

.LockedTab{
	-webkit-filter: brightness(0.60);
}


.GreyButton{
  height:fit-content;
  text-transform: uppercase;
  font-family: 'Grandstander';
  font-size: 20px;
  padding: 3px 14px;
  color: black;
  align-items: center;
  flex-direction: row;
  display: flex;
  border: 3px solid black;
  cursor: pointer;
  justify-content:center;
}


.GreyButton.Secondary{
  text-transform: inherit;
  font-size: 16px;
  width:122px;
}


.GreyButton.ToggleButton{
  text-transform: inherit;
}

.GreyButton.CaroselCircle{
  opacity: .7;
  border: 0px;
}

.GreyButton.Active{
  background-color: #c6833a;
}


.GreyButton.Void{
  opacity:.5;
}

.GreyButton.Void:hover{
  opacity:1;
}


.FakeButton{
  font-family: 'Grandstander';
  font-size: 20px;
  padding: 3px 14px;
  color: c58339;
  align-items: center;
  flex-direction: row;
  display: flex;
  cursor: pointer;
  justify-content:center;
  text-decoration: underline;
}

.FakeButton:hover{
  color: efb676;
}



.CaroselCircle:hover{
  opacity: 1;
  background-color: #c6833a;
  outline: 3px solid black;
}


.CaroselCircle.Active{
  opacity: 1;
  background-color: #c6833a;
  outline: 3px solid black;
}




.SecretButton{
  text-transform:inherit;
  opacity: 0;
  transition-property: opacity ;	
  transition-delay: 1000ms;	
  transition-duration: 1000ms;	
}


.SecretButton:hover{
  opacity: 1;
}


.ToggleButt{
  border-radius: 100%;
  border: 2px solid black;
  cursor: pointer;
  padding: 6px;
  color:black;
}

.ToggleButt.Active{
  padding: 4px;
}

.offsvg_small{
	margin: 4px -2px;
}

.onsvg_small{
	margin: 0px -1px;
}

.offsvg{
	margin: 4px -2px;
}

.onsvg{
	margin: 0px;
}



.MainButton{
  height:fit-content;
  background-color: #ebe0d4;
  color: black;
}


.CharCard{
	position:relative;
	padding: 30px;
	display: flex;
	flex-direction: column;
	width: 100%;
	width: 457px;
	background-repeat: repeat;
/*	background-image: url('images/cuties/Asset_17.png');*/
	background-size: 100%;
}

.MenuPopupButt{
  color: black;
  align-items: center;
  flex-direction: row;
  display: flex;
  border: 3px solid black;
  right:-3px;
  position:fixed;
  padding:4px 6px 4px 4px;
}


.DarkModeSwitch{ 
  top: 78px;
  position:fixed;
}

.TooltipsSwitch{
  top: 118px;
  position:fixed;
}

.NotesTab{
  top: 158px;
  position:fixed;
  z-index:99;
  backdrop-filter: blur(4px);
}

.ChartsTab{
  top: 198px;
  position:fixed;
  z-index:99;
  backdrop-filter: blur(4px);
}

.ObstaclesTab{
  top: 238px;
  position:fixed;
  z-index:99;
  backdrop-filter: blur(4px);
}

.RandomTab{
  top: 278px;
  position:fixed;
  z-index:99;
  backdrop-filter: blur(4px);
}

.CutiesEdit{
  top: calc(50% - 245px);
  left: calc(50% - 225px);
  z-index:50;
  position:fixed;
  backdrop-filter: blur(4px);
  width:450px;
  height:490px;
}

.Cutie{
  width:80px;
  height:80px;
  position:relative;
  background-color: rgb(255 255 255 / 0.50);
}


.PortraitEdit{
	cursor: pointer;
	position: absolute;
	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);  
	transition-duration: 75ms;  
	transition-property: all;
	opacity: 0;
	color: #c6833a;
	background-color: rgb(255 255 255 / 0.7);
	backdrop-filter:  blur(4px);
	border-radius: 100%;
	left: 12%;
  top: 12%;
  width: 77%;
  height: 77%;
}

.PortraitEdit:hover{
	opacity: 1;
}

/*------------------*\
|       Boxes        |
\*------------------*/



.SupplyCard{
  break-inside: avoid;
	width:min(335px, 90vw);
  border-image-source: url("images/Border_0.png");
}

.SupplyCardMain{
  padding: 20px;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  position:relative;
}


.SupplyCardHeader{
  background-color: #c6833a;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  width: 100%;
  break-inside: avoid;
  color: black;
  min-height: 95px;
}

.SupplyCardHeader_Locked{
  background-color: #c6833a;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  width: 100%;
  break-inside: avoid;
  color: black;
  min-height: 0px;
}


.SupplyCardHeader_LockedColor_0{
  background-color: #ddcbba;
}

.SupplyCardHeader_LockedColor_1{
  background-color: #d1d5db;
}


.SupplyCardSubHeader{
	margin-top:-25px;
	min-height: 0px;
}


.WideCard{
	width:min(690px, 90vw);
}

.RulesBox{
	width: calc(100% - 10px);
}

@media (min-width: 1000px){
	.RulesBox{
		width: calc(50% - 10px);
	}
}
@media (min-width: 1400px){
	.RulesBox{
		width: calc(33% - 10px);
	}
}

.RulesBox.PrintOut{
	width: 360px;
	font-size: 75%;
	background-color: white;
}


.AlertBox{
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
  border-color: #c6833a;
  border-width: 2px;
  align-items: center;
  flex-direction: row;
  display: flex;
}


.GreyBox{
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border-color: #c6833a;
  color: black;
  align-items: center;
  flex-direction: row;
  display: flex;
}

.NewContent{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 1.25rem;
	justify-content: center;
	align-items: center;
	min-width:18rem;
	border-image-slice: 33%;
	border-image-width: 4em;
	border-image-repeat: repeat repeat; 
	border-image-outset: 1px;
	border-style: solid;
	border-image-source: url("images/Border_Dashed.png");
}

.NewContent:hover{
	border-image-source: url("images/Border_Dashed_hover.png");
	color:#c6833a;
}

.HeaderBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin:.5rem;
	width:max-content;
	z-index:5;
	height:fit-content;
}


.ClassZoom{
	width:140px;
	white-space:nowrap;
	overflow: visible;
}


.ClassChoiceBox
{
  gap: 10px;
  width: 100%;
}

.ClassChoiceContain{
	display:flex;
	flex-direction:column;
}

.ClassChoiceLeft{
	width: 100%;
}

.ClassChoiceRight{
	width:275px;
}


@media (min-width: 700px){
	.ClassChoiceBox
	{
		width: 650px;
		  margin-left: auto;
		  margin-right: auto;
	}

	.ClassChoiceContain{
		flex-direction:row;
	}

	.ClassChoiceLeft{
		width: 170px;
	}

	.ClassChoiceRight{
		width:410px;
	}
}

/*--------------------*\
|       Borders        |
\*--------------------*/


.ThickOrangeBorder{
  outline: 4px solid #c6833a;
}


.oldOrangeBorder{
  border-width: 2px;
  border-color: #c6833a;
}

.OrangeBorder{ 
	border-image-slice: 33%;
	border-image-width: 5.5em;
	border-image-repeat: stretch stretch; 
	border-image-outset: 3px;
	border-style: solid;
	border-image-source: url("images/Border_Fancy.png");  
	padding: 1rem 3rem;
}

.Border_General{
	border-image-slice: 33%;
	border-image-width: 60px;
	border-image-repeat: stretch stretch; 
	border-image-outset: 3px;
	border-style: solid;
}

.Border_Bottom{
	border-image-slice: 33%;
	border-image-width: 0 0 3em 0;
	border-image-repeat: stretch stretch; 
	border-image-outset: 1px;
	border-style: solid;
	position:relative;
	z-index:3;
}

.Border_Top{
	border-image-slice: 33%;
	border-image-width: 3em 0 0 0;
	border-image-repeat: stretch stretch; 
	border-image-outset: 1px;
	border-style: solid;
	position:relative;
	z-index:3;
}


.Border_Fancy{ 
	border-image-source: url("images/Border_Fancy.png");  
	padding: 30px;
}

.Border_Front_Fancy {
    position: absolute;
    top: 0px;
    left: 0px;
	width:100%;
	height:100%;
	border-image-slice: 33%;
	border-image-width: 4em;
	border-image-repeat: stretch stretch; 
	border-image-outset: 2px;
	border-style: solid;
	border-image-source: url("images/Border_Fancy.png");  
}


.Border_Home_Base{ 
	border-image-source: url("images/Border_Fancy.png");  
}


.Border_PopUp{ 
	border-image-source: url("images/Border_PopUp.png");  
	padding: 30px 40px;
}


.Border_Bolts{ 
	border-image-source: url("images/Border_Bolts.png");  
	padding: 40px;
}

.Border_Black{ 
	border-image-source: url("images/Border_0.png");
	padding:20px;
}

.Border_0{ 
	border-image-source: url("images/Border_0.png"); 
}

.Border_1{ 
	border-image-source: url("images/Border_1.png"); 
}

.Border_White{ 
	border-image-source: url("images/Border_White.png"); 
}

.Border_Grey{ 
	border-image-source: url("images/Border_Grey.png"); 
}

.Border_Silver{ 
	border-image-source: url("images/Border_Silver.png"); 
}

.Border_Dashed_0{ 
	border-image-source: url("images/Border_Dashed_0.png"); 
}

.Border_Dashed_1{ 
	border-image-source: url("images/Border_Dashed_1.png"); 
}

.Border_Thick{ 
	border-image-source: url("images/Border_Thick.png"); 
	padding: 30px;
}


.ThickGreyBorder{
  outline-style: solid;
  outline-width: 6px;
  border-color: #d1d5db;
}


.GreyBorder{
  border: 2px solid #d1d5db;
}


.GreyBorder_0{
  border: 2px solid black;
}


.GreyBorder_1{
  border: 2px solid #d1d5db;
}


.ClearBorder{
  border-width: 2px;
  border-color: transparent;
}

.OrangeLine{
  border-bottom-width: 2px;
  border-color: #c6833a;
}


.CloseButton{
  float: left;
  left: 1.5rem;
  top: 1.25rem;
  width: 2rem;
  height: 2rem;
}


.CapsTitle{
  font-family: 'Grandstander';
  font-size: 1.875rem;
  line-height: 2.25rem;
  text-transform: uppercase;
}

.ChoiceSection{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}


.ChoiceScrollCol {
  display: flex;
  grid-column: span 3 / span 3;
  gap: 20px;
  padding: 5px 15px;
  overflow-y: hidden;
  overflow-x: auto;
  font-family: 'Grandstander';
  font-size: 1.25rem;
}

@media (min-width: 1024px){
	.ChoiceScrollCol {
	  font-size: 1.875rem;
	  height:80vh;
	  overflow-x: hidden;
	  overflow-y: auto;
      flex-direction: column;
	  grid-column: span 1 / span 1;
      gap: 30px;
	}
	
	.ChoiceCulture{
		height:1778px;
	}
	
	.ChoiceClass{
		height:1861px;
	}
}

.ChoiceScrollCol::-webkit-scrollbar {
  width:10px;
  height:10px;
}

.ChoiceScrollCol::-webkit-scrollbar-thumb {
  background-color: #c6833a;
}
	
.ChoiceScrollCol::-webkit-scrollbar-thumb:hover {
  background-color: #d9662e;
}

.ChoiceScrollCol::-webkit-scrollbar-track {
  background-color: rgb(255 255 255 / 0.20);
}

@supports (scrollbar-width: thin) {
	.ChoiceScrollCol {
	  scrollbar-color: #c6833a rgb(255 255 255 / 0.20);
	  scrollbar-width: thin;
	}
}

.DetailsCol {
  grid-column: span 3 / span 3;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}


@media (min-width: 1024px){
	.DetailsCol {
      min-height: 80vh;
	  overflow-x: hidden;
	  overflow-y: auto;
	  grid-column: span 2 / span 2;
	  border-image-outset: 0px 3px;
	}
}

.CreatureCol {
  grid-column: span 3 / span 3;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 4px;
}


@media (min-width: 1024px){
	.CreatureCol {
      min-height: 80vh;
	  overflow-x: hidden;
	  overflow-y: auto;
	  grid-column: span 2 / span 2;
	}
}


.CreatureChoiceScrollCol {
  display: flex;
}

@media (min-width: 1024px){
	.CreatureChoiceScrollCol {
	  height: calc(100vh - 342px);
	  overflow-x: auto;
	}
}

.CreatureChoiceScrollCol::-webkit-scrollbar {
  width:10px;
  height:10px;
}

.CreatureChoiceScrollCol::-webkit-scrollbar-thumb {
  background-color: #c6833a;
}
	
.CreatureChoiceScrollCol::-webkit-scrollbar-thumb:hover {
  background-color: #d9662e;
}

.CreatureChoiceScrollCol::-webkit-scrollbar-track {
  background-color: rgb(255 255 255 / 0.20);
}

@supports (scrollbar-width: thin) {
	.CreatureChoiceScrollCol {
	  scrollbar-color: #c6833a rgb(255 255 255 / 0.20);
	  scrollbar-width: thin;
	}
}

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

@media (min-width: 1100px){
	.CreatureAddCol{
		flex-direction:row;
		align-items:start;
	}
}


.Bubble{
	max-width:75vw;
	margin:auto;
	display:flex;
	position:relative;
	border-image-slice: 33%;
	border-image-width: 4em;
	border-image-repeat: stretch stretch; 
	border-image-outset: 4px;
	border-style: solid;
	border-radius:5rem;
	padding: 2rem 4rem;
}


/*-------------------------*\
|           News            |
\*-------------------------*/



.NewsSection{
	display:Flex;
	gap: 25px;
	margin-top: 50px;
	flex-direction:column;
	justify-content: center;
}


.MainNews{
  width:100%;
}

.NewsBrowseCol{
  width:100%;
}

@media (min-width: 1024px){
	.NewsSection{
		flex-direction:row;
	}
	
	.MainNews{
	  width: calc(100% - 350px);
	  max-width:750px;
	}
	
	.NewsBrowseCol{
	  width: 350px;
	}
}



/*-------------------------*\
|       Common Stuff        |
\*-------------------------*/

.Body{
  display: flex;
  flex-direction: column;
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  cursor: wait;
}

.OuterMain{
	align-items:center;
	flex-direction:column;
	flex: 1 0 auto;
}


.Footer{
  width:100%;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
  padding:10px;
  margin-top: 20px;
  z-index: 10;
  border-image-slice: 33%;
  border-image-width: 1em 0 0 0;
  border-image-repeat: repeat repeat;
  border-image-outset: 1px;
  border-style: solid;
  border-image-source: url("images/Border_Buttons.png");
  font-family: 'Grandstander';
  font-size:16px;
}

.Main{
	max-width: 1400px;
	display: flex;
	flex-direction:column;
	margin: 100px 50px 0px;
	position:relative;
	width: calc(100% - 100px);
}



.Footer2{
  position:absolute;
  bottom:0px;
  width:100%;
  padding: 2rem 0rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
}


.Footer3{
  position:fixed;
  bottom:0px;
  width:100%;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
  padding:10px;
  margin-top: 20px;
  z-index: 10;
  border-image-slice: 33%;
  border-image-width: 1em 0 0 0;
  border-image-repeat: repeat repeat;
  border-image-outset: 1px;
  border-style: solid;
  border-image-source: url("images/Border_Buttons.png");
  font-family: 'Grandstander';
  font-size:16px;
}

.HeaderBack{
	position:fixed;
	top:0px;
	width: 100%;
	display: flex;
	justify-content:center;
	z-index:10;
	
	border-image-slice: 33%;
	border-image-width: 0 0 1em 0;
	border-image-repeat: repeat repeat; 
	border-image-outset: 1px;
	border-style: solid;
	border-image-source: url("images/Border_Buttons.png"); 
}


.Header{
  height:70px;
  width: 1400px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5rem 1.25rem;
  align-items: center;
  line-height: 1.5rem;
  top: 0px;
  left: 0px;
  font-family: 'Grandstander';
  font-size: 1.25rem;
}

@media (min-width: 1024px){
  .Header{
    position: static;
  }
}



.NavBarWrap{
  display: flex;
  z-index: 50;
  position: absolute;
  left:0px;
  top:0px;
  width: 100%;
  justify-content: space-between;
}

@media (min-width: 1024px){
  .NavBarWrap{
	z-index: 20;
    gap:.1rem;
	z-index: 1;
	display: flex;
    position: static;
  }
}



.Logo{
  max-height: 65px;
  padding-left: 0.5rem;
}



.NavBar{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;	
}


@media (min-width: 1024px){
  .NavBar{
	gap:1rem;
    flex-direction: row;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}


.NavLink{
  cursor: pointer;
}

.NavLink:hover{
  color: #eeb676;
}

.NavActive{
  border-bottom-width: 3px;
  border-color: black;
}

.NavActive:hover{
  color: #eeb676;
  border-color: #eeb676;
}

@media (max-width: 1024px){
  .NavBarHidden{
	display: none;
  }
}

@media (min-width: 1024px){
  .NavBarHidden{
	height:60px;
  }
}



.ProfilePicDiv{
  display: flex;
  margin-right: 1rem;
  margin-left: 2rem;
  position: relative;
  cursor: pointer;
  width: 60px;
}
@media (min-width: 1024px){
  .ProfilePicDiv{
	margin-left: 0px;
  }
}


.ProfilePic{
  max-height: 7rem;
  left: 0px;
  top: 0px;
}


.PortraitEditButton{
	cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transition-duration: 75ms;
  background-color: rgb(255 255 255 / 0.80);
  border-radius: 100%;
  padding: 0.75rem;
  position: absolute;
  left: 15%;
  top: 11%;
  max-width: 7rem;
  max-height: 7rem;
  color: #c6833a;
	backdrop-filter:  blur(4px);
}



.PortraitEditButton:hover{
  opacity: 1;
}


.TabSection{
  width: calc(100vw - 100px);
  max-width: 1400px;
}


.TabSection.CreatureSect{
  gap: 1rem;
  display:flex;
  flex-direction:column;
}

@media (min-width: 1024px){
	.TabSection.CreatureSect{
	  flex-direction:row;
	}
}

@media (min-width: 1490px){
	.TabSection.MapSect{
	  width: 95vw;
	  max-width: none;    
	  position: absolute;
	  left: calc(-47.5vw + 700px);
	  top: 60px;
	  padding-bottom: 100px;
	}
}

.MapName:hover{
	filter: drop-shadow(0px 0px 3px #ffeeac) drop-shadow(0px 0px 3px #ffeeac);
}


.Banner{  
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding-left: 25px;
	padding-right: 25px;
	display:flex;
	z-index:1;
}

/*------------------*\
|       Icons        |
\*------------------*/

.MidTitleIcon
{
  width:33px;
  margin-top:-7px;
}



/*----------------------------*\
|       Dark/Light Mode        |
\*----------------------------*/

/*
color for system things
*/

.SystemColor_0 {
	color: black;
}

.SystemColor_1 {
	color: #bbbbc7;
}

.ErrorColor_0 {
  color: #d23803;
}

.ErrorColor_1 {
  color: #c6833a;
}

/*
font used for stuff that is auto filled in on the character sheet
*/
.CharSheetFont_0 {
  font-family: 'Gloria Hallelujah', cursive;
  color: #7f4b30;
  font-size: min(1.5vw, 21px);
  line-height: min(1.7vw, 23px);
  text-align: center;
}

.CharSheetFont_1 {
  font-family: 'Gloria Hallelujah', cursive;
  color: #7f4b30;
  font-size: min(1.5vw, 21px);
  line-height: min(1.7vw, 23px);
  text-align: center;
}

/*
blank card field
*/

.CharCard_0{
  background-color: white;
}


.CharCard_1{
  background-color: #202531;
}

.General_bg_0{
  background-color: #ebe0d4;
}


.General_bg_1{
  background-color: #202531;
}

/*
body background colors
*/
.Clouds_BG{
	position:fixed;
	bottom:0px;
	width:100%;
	z-index:-1;
}

.Stars_BG{
	position:fixed;
	bottom:0px;
	height:1324px;
	max-width:2648px;
	width:2648px;
	z-index:-1;
}


.bg_0{
  background-color: #ebe0d4;
}

.bg_1{
  background-color: #202531;
}

.menu_bg{
  background-color: #c6833a;
}


.bg_0_80_stickymenu{
  background-color: #fffdfb;
}

.bg_1_80_stickymenu{
  background-color: #3a4044;
}

.bg_0_dark{
  background-color:  #ddcbba;
}

.bg_1_dark{
  background-color: #4d515a;
}

.bg_0_80{
  background-color: rgb(254 244 231 / 0.85);
}

.bg_1_80{
  background-color: rgb(32 37 49 / .8);
}


.greyed_0{
  background-color: rgb(0 0 0 / 0.3);
}

.greyed_1{
  background-color: rgb(0 0 0 / 0.6);
}

/*
icon border colors
*/

.SystemBorder {
  border-color: #c6833a;
}

.SystemBorderSecondary {
  border-color: #c6833a;
}




/*------------------*\
|       Fonts        |
\*------------------*/

.LargeTitle{
  font-family: 'Grandstander';
  font-size: 40px;
}

.MidTitle{
  font-family: 'Grandstander';
  font-size: 25px;
  line-height:1.1;
  margin-top:10px;
  margin-bottom:10px;
}

.SmallTitle{
  font-family: 'Grandstander';
  font-size: 20px;
}

.lh-mid{
	line-height: 35px;
}


.lowercase
{
  text-transform: lowercase;
}

.uppercase{
  text-transform: uppercase;
}

.underline{
	text-decoration-line: underline;
}

/* tooltip fonttypes */
.AbilKey
{
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  text-transform: lowercase;
  font-weight: bold;
}

.ExpKey
{
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.2em;
  color: #5c849c;
}

.CondKey
{
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.2em;
  color: #962b10;
}

.ResKey
{
  text-transform: lowercase;
  font-style: italic;
}

.ObsKey
{
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-variant: small-caps;
  font-weight: bold;
}

.AbilName
{
  font-style: italic;
}

.ObsName
{
  font-style: italic;
  font-weight: bold;
}

.NPCName
{
  font-weight: bold;
}


/*--------------------*\
|       Toggler        |
\*--------------------*/
.TogglerDiv{
  height: 2rem;
  width: 3rem;
  margin-left: 0.5rem;
}

.knobs, .layer
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.toggle
{
  position: relative;
  top: 50%;
  width: 50px;
  height: 28px;
  margin: -15px auto 2px auto;
  overflow: hidden;
}

.toggle.r, .toggle.r .layer
{
  box-shadow: inset 2px 2px 4px rgb(0 0 0 / 0.50);
  border-radius: 100px;
  background-color: #F2F3F3;
}

.toggle.b2
{
  border-radius: 2px;
}

.checkbox
{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs
{
  z-index: 2;
}

#toggle-1 .knobs:before
{
  box-shadow: inset 2px 2px 4px rgb(255 255 255 / 0.20), inset -2px -2px 4px rgb(0 0 0 / 0.50);
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 1.25em;
  height: 1.25em;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1em;
  padding: 4px 2px;
  background-color: #A39085;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#toggle-1 .checkbox:checked + .knobs:before
{
  content: '';
  left: 26px;
  background-color: #c6833a;
}

#toggle-1 .checkbox:checked ~ .layer
{
  background-color: #F8E9D9;
}

#toggle-1 .knobs, #toggle-1 .knobs:before, #toggle-1 .layer
{
  transition: 0.3s ease all;
}





/*-------------------*\
|       Popups        |
\*-------------------*/
.PopUpClose{
	position:absolute;
	top:-8px;
	right:-8px;
	width:40px;
}


.ExportInfo  {
	width:800px;
	position:fixed;
	left:calc(50% - 400px);
	z-index:100;
	
	  height:fit-content;
	  text-align: center;
	  overflow: visible;
	  
	  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	  --tw-shadow-color: rgb(55 65 81 / 0.5);
	  --tw-shadow: var(--tw-shadow-colored);
	  background-clip: padding-box;
	  
	  backdrop-filter:  blur(4px);
}


.TooltipDiv  {
	opacity: 0;
	transition-property: opacity ;	
	position:fixed;
	z-index:101;
}


.TooltipPop  {
	display:none;
}

.SmallTooltipPop  {
	display:none;
}

.TutorialWindow  {
	display:none;
	position:fixed;
	z-index:100;
}

.KeywordWindow  {
	display:none;
}

.ContactWindow  {
	display:none;
}

.InfoPop{
	position:fixed;
	z-index:100;
	display:none;
	overflow:show;
	left: calc(50% - 45vw);
	bottom: 20px;
}

.LoginPop{
  height:fit-content;
  display:block;
  width:90%;
  max-width: 500px;
  text-align: center;
  overflow:show;
  
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(55 65 81 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  background-clip: padding-box;
  
	  backdrop-filter:  blur(4px);
}


.AbilityWindow  {
  height:fit-content;
  position:fixed;
  right:10px;
  width: 330px;
  z-index:101;
  display:none;
  text-align: center;
  overflow: visible;
  
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(55 65 81 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
  background-clip: padding-box;
  
  
	 backdrop-filter:  blur(4px);
}


@media (min-width: 600px){

	.InfoPop{
		position:fixed;
		z-index:100;
		display:none;
		overflow:show;
		left: calc(50% - 250px);
		top: calc(50% - 100px);
	}

	.TooltipPop  {
	  height:fit-content;
	  display:flex;
	  flex-direction:column;
	  width: 500px;
	  text-align: center;
	  overflow: visible;
	  padding-left: 50px;
	  padding-right: 50px;
	  
	  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	  --tw-shadow-color: rgb(55 65 81 / 0.5);
	  --tw-shadow: var(--tw-shadow-colored);
	  background-clip: padding-box;
	  
	 backdrop-filter:  blur(4px);
	}

	.SmallTooltipPop  {
	  text-align: center;
	  padding: 1rem;

	  overflow: auto;
	  border-width: 2px;
	  border-radius: 0.375rem;
	  
	  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	  --tw-shadow-color: rgb(55 65 81 / 0.5);
	  --tw-shadow: var(--tw-shadow-colored);
	  background-clip: padding-box;
	  
	  
	 backdrop-filter:  blur(4px);
	}


	.TutorialWindow  {
	  left:50%;
	  transform: translate(-50%, 0);
		height:fit-content;
	  position:fixed;
	  width: 500px;
	  z-index:100;
	  display:none;
	  text-align: justify;

	  overflow: visible;
	  
	  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	  --tw-shadow-color: rgb(55 65 81 / 0.5);
	  --tw-shadow: var(--tw-shadow-colored);
	  background-clip: padding-box;
	  
	  
	 backdrop-filter:  blur(4px);
	}
	
	
	.KeywordWindow  {
		height:fit-content;
	  position:fixed;
	  left:70px;
	  width: 610px;
	  z-index:100;
	  display:none;
	  text-align: center;

	  overflow: visible;
	  
	  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	  --tw-shadow-color: rgb(55 65 81 / 0.5);
	  --tw-shadow: var(--tw-shadow-colored);
	  background-clip: padding-box;
	  
	  
	 backdrop-filter:  blur(4px);
	}
	
	
	.ContactWindow  {
		position:fixed;
		left: calc(50% - 300px);
		top: calc(50% - 100px);
		padding-top: 40px;
		padding-bottom: 40px;
		
		height:fit-content;
	  width: 610px;
	  z-index:100;
	  display:none;
	  text-align: center;

	  overflow: visible;
	  
	  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	  --tw-shadow-color: rgb(55 65 81 / 0.5);
	  --tw-shadow: var(--tw-shadow-colored);
	  background-clip: padding-box;
	}
}


@media (min-width: 1600px){

	.KeywordWindow, .TutorialWindow, .TooltipPop, .ContactWindow  {
	  width: 750px;
	}
}

@media (min-width: 650px){
}

/* tooltip inner images */
.FallingLeafIcon
{
	position:absolute;
	bottom:-15px;
	left:-55px;
	width:100px;
	height:100px;
}

.MeglinIcon
{
	position:absolute;
	bottom:-15px;
	right:-55px;
	width:100px;
	height:100px;
	pointer-events: none;
}

.MeglinIcon.SmallBox
{
	position:absolute;  
	bottom: -11px;
	right: -18px;
	width: 50px;
	height: 50px;
	pointer-events: none;
}

.FallingLeafIcon.SmallBox
{
	position:absolute;  
	bottom: -22px;
	left: -23px;
	width: 50px;
	height: 50px;
	pointer-events: none;
}

.twistedchaosicon
{
	position:absolute;
	bottom:-30px;
	left:-55px;
	width:100px;
	height:100px;
}


/* icon/keyword jawns */
.LargeIcon
{
  width:120px;
  height:120px;
}

.MidIcon
{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
}

.SmallIcon
{
  width:30px;
  height:30px;
}

.CardIcon
{
  width:29px;
  height:29px;
}

.CardTextIcon
{
  width:19px;
  height:19px;
  margin-top:-2px;
  vertical-align:text-top;
}

.SmallTextIcon
{
  width:24px;
  height:24px;
  margin-top:-4px;
  vertical-align:text-top;
}

.SmallTextIcon.TerrainIcon
{
  width:22px;
  height:22px; 
  margin-top: -2px;
}
	
.CardText .SmallTextIcon {
  width:22px;
  height:22px;
  vertical-align:text-top;
}

.CardText .SmallTextIcon.TerrainIcon
{
  width: 17px;
  height: 17px;
}

.TextIcon
{
  width:35px;
  height:35px;
  margin-top:-6px;
  vertical-align:text-top;
}

.PlaceHolder
{
  width:29px;
  height:29px;
}

.CharSheetIcon
{
  height:100%;
  max-width:40px;
  width: 100%;
}

.CharSheetKeyword
{
  font-size: min(1.2vw, 20px);
  color:transparent;
}







/* Obstacle Table */
.ObsPop_0
{
  background-color:#dee6e8;
  text-align: left;
}

.ObsPop_1
{
  background-color: #4e5961;
  text-align: left;
}

.ObsTable_0
{
  border:1px solid black;
}

.ObsTable_1
{
  border:1px solid #a6a6ad;
}

.ConsType
{
  width:1%;
  white-space: nowrap;
  font-variant: small-caps;
  padding: .5em;
}

.ObsLight
{
  background-color: rgb(255 255 255 / 0.50);
}

.ObsTableCell{
  vertical-align: middle;
  padding: 6px;
  line-height: 25px;
}

.ObsTableCell.PrintOut{
	font-size: 75%;
	border: 1px solid;
}



/* Creature Tooltip */
.CreaPop_0
{
  color: black;
  background-color: rgb(234 206 193 / 0.80);
  text-align: left;
}

.CreaPop_1
{
  color: black;
  background-color: rgb(234 206 193 / 0.80);
  text-align: left;
}



/* tooltip size */
.AbilityCardPop
{
  width:338px;
}


/* tooltip desc font */
.TooltipTitle{
  font-family: 'Grandstander';
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  height: 4.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}


/* Table elements */
.OverTable{
	margin: 0 auto;
	text-align:left;
	border: none;
	table-layout:fixed;
	color: inherit;
}


.TableCellText{  
  border: 2px solid black;
  vertical-align: middle;
  padding: 6px;
  line-height: 25px;
  text-align: center;
}




.TableCellIcon{  
  border: 2px solid black;
  text-align: center;
  vertical-align: middle;
  padding-bottom: 4px;
  padding-top: 12px;
}


/* Table Colors */
.bg_title_wound{
	background-color: #6f697b;
}

.bg_dark_wound{
	background-color: #9e99aa;
}

.bg_mid_wound{
	background-color: #B8B3C2;
}

.bg_light_wound{
	background-color: #D1CED6;
}



.bg_dark_stress{
	background-color: #a38937;
}

.bg_mid_stress{
	background-color: #c1b89a;
}

.bg_light_stress{
	background-color: #D7D4CB;
}



.bg_title_neutral_0{
	background-color: #c2833a;
}

.bg_dark_neutral_0{
	background-color: #dccbba;
}

.bg_mid_neutral_0{
	background-color: #f4ede9;
}

.bg_light_neutral_0{
	background-color: #fff;
}



.bg_title_neutral_1{
	background-color: #c2833a;
	color:black;
}

.bg_dark_neutral_1{
	background-color: #484c55;
}

.bg_mid_neutral_1{
	background-color: #696c73;
}

.bg_light_neutral_1{
	background-color: #858992;
}



/*-----------------------*\
|       Animations        |
\*-----------------------*/
.MainLogo_1, .MainLogo_2 {
	position:absolute;
	top:8%;
	opacity: 0;
	transition-duration: 2s;
	transition-property: opacity ;
	max-width: min(80vw, 500px);
	max-height: 36vh;
}

.MainLogo_1 {
  transition-delay: 0s;
}

.MainLogo_2 {
  transition-delay: 2s;
}



.Popin_Div {
  opacity: 0;
  transform: scale(.3);
  transition-duration: 500ms;
  transition-property: transform, opacity ;
  transition-delay: 500ms;
}

.Popin_Div.visible{
  opacity: 1;
  transform: scale(1);
}



.Fade_Div {
  opacity: 0;
  transition-duration: 2s;
  transition-property: all;
  transition-delay: 250ms;
}

.Fade_Div.visible {
  opacity: 1;
}



.welcome_fallingleaf, .welcome_meglin, .welcome_greg {
  z-index:11;
  position:absolute;
  width:16%;
}

.welcome_fallingleaf {
  top:-2%;
  right:22%;
  transition-delay: 1.5s;
}

.welcome_meglin {
  top:30%;
  left:45%;
  transition-delay: 2s;
}

.welcome_greg {
  width: 11%;
  bottom:20%;
  left:1%;
  transition-delay: 2.5s;
}

.welcome_fallingleaf.visible, .welcome_meglin.visible, .welcome_greg.visible, .welcome_quests.visible, .welcome_strangers.visible, .welcome_stories.visible {
  opacity: 1;
}

.welcome_quests, .welcome_strangers, .welcome_stories {
  position:relative;
}

.welcome_bg_0{
  background-color:#f3e9de;
}

.welcome_bg_1{
  background-color:#4d5568;
}

.welcome_quests_text, .welcome_strangers_text, .welcome_stories_text {
  font-family: 'Grandstander';
  height:fit-content;
	padding: 20px;
	margin: 20px 10%;
	padding-bottom: 165px;
}
		

.welcome_quests, .welcome_strangers, .welcome_stories {
	display:flex;
	justify-content:center;
	flex-direction:column;
}

.welcome_quests_img, .welcome_strangers_img, .welcome_stories_img {
  height:250px;
  width:250px;
  margin:auto;
  margin-top:-175px;
  margin-bottom:25px;
}

.welcome_stories_img{
  margin-bottom:50px;
}



@media (min-width: 675px) {

	.welcome_quests_text, .welcome_strangers_text, .welcome_stories_text {
		padding: 20px;
		display:block;
	}
		

	.welcome_quests, .welcome_strangers, .welcome_stories {
		display:block;
		min-height:350px;
	}

	.welcome_quests_text{
		margin: 0px 150px 73px;
		padding-right: 183px;
	}

	.welcome_strangers_text{
		margin: 20px 150px 88px;
		text-align:right;
		padding-left: 161px;
	}

	.welcome_stories_text{
		margin: 20px 150px 145px;
		padding-right: 94px;
	}

	.welcome_quests_img, .welcome_strangers_img, .welcome_stories_img {
		position:absolute;
	  height:350px;
	  width:350px;
	  margin-top:0px;
	  margin-bottom:0px;
	}

	.welcome_quests_img{
		bottom:0px;
		right:0px;
	}

	.welcome_strangers_img{
		bottom:50px;
		left:0px;
	}

	.welcome_stories_img{
		bottom:50px;
		right:0px;
	}
	
}



@media (min-width: 1024px) {
	

	.welcome_quests, .welcome_strangers, .welcome_stories {
	  min-height:450px;
	}
	

	.welcome_quests_text, .welcome_strangers_text, .welcome_stories_text {
		position:absolute;
		bottom: 0px;
	}
	
	.welcome_quests_text{
		margin: 20px 268px 100px 200px;
		padding: 20px 160px 20px 20px;
	}

	.welcome_strangers_text{
		margin: 20px 200px 100px 226px;
		padding: 20px 20px 20px 164px;
		text-align:right;
	}

	.welcome_stories_text{
		margin: 20px 225px 170px 200px;
		padding: 20px 175px 20px 20px;
	}
	
	.MainLogo_1, .MainLogo_2 {
		max-height: 50vh;
		max-width: 550px;
	}

	.welcome_quests_img, .welcome_strangers_img, .welcome_stories_img {
	  height:450px;
	  width:450px;
	}

	.welcome_quests_img{
		bottom:0px;
		right:50px;
	}

	.welcome_strangers_img{
		bottom:50px;
		left:50px;
	}

	.welcome_stories_img{
		bottom:50px;
		right:50px;
	}
}



/*-----------------------*\
|       Front Page        |
\*-----------------------*/
.plax_bg_0{
	background-color:#fffaf6;
}
.plax_bg_1{
	background-color:#2e3346;
}


.plax {
	height: calc(100vh - 70px);
	margin-top:70px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-perspective: 1px;
	perspective: 1px;
}

.plax_group {
	opacity: 0;
	position: relative;
	height: calc(100vh - 70px);
	width: 100vw;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.plax_group.visible {
  opacity: 1;
}


.plax_text {
	position: relative;
	display: flex;
	justify-content:center;
  font-family: 'Grandstander';
}

.plax_divider{
	position:absolute;
	height:8px;
	z-index:11;
	width:100%;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	background-color:#c6833a;
}


.plax_short,  .plax_tall{
	height: fit-content;
	z-index:10;
}



.plax_layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;	
}


	.plax_layer_base {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		z-index: 8;
	}

	.plax_layer_spec_1 {
		-webkit-transform: translateZ(-.375px) scale(1.375);
		transform: translateZ(-.375px) scale(1.375);
		z-index: 6;
	}

	.plax_layer_spec_2 {
		-webkit-transform: translateZ(-.75px) scale(1.75);
		transform: translateZ(-.75px) scale(1.75);
		z-index: 5;
	}

	.plax_layer_1 {
		-webkit-transform: translateZ(-.2px) scale(1.2);
		transform: translateZ(-.2px) scale(1.2);
		z-index: 7;
	}

	.plax_layer_2 {
		-webkit-transform: translateZ(-.8px) scale(1.8);
		transform: translateZ(-.8px) scale(1.8);
		z-index: 6;
	}

	.plax_layer_3 {
		-webkit-transform: translateZ(-1.4px) scale(2.4);
		transform: translateZ(-1.4x) scale(2.4);
		z-index: 5;
	}
	
	.plax_layer_4 {
		-webkit-transform: translateZ(-2.2px) scale(3.2);
		transform: translateZ(-2.2px) scale(3.2);
		z-index: 4;
	}
	
	.plax_layer_5 {
		-webkit-transform: translateZ(-7px) scale(8);
		transform: translateZ(-7px) scale(8);
		z-index: 3;
	}
	
	.plax_layer_6 {
		-webkit-transform: translateZ(-9px) scale(10);
		transform: translateZ(-9px) scale(10);
		z-index: 2;
	}
	
	.plax_layer_7 {
		-webkit-transform: translateZ(-11px) scale(12);
		transform: translateZ(-11px) scale(12);
		z-index: 1;
	}
	
.Welcome_Right{
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

.Welcome_Img{
	max-height:550px;
}
	

.Intro_Banner{
	margin-top:50px;
	margin-bottom:0px;
	z-index: 1;
}
	

.Intro_Text{
	transition-delay: .8s;
	width:80%;
	max-width:479px;
	padding-top:25px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
}

.Intro_Img{
	max-width:500px;
	max-height:500px;
	margin-bottom: 25px;
}
  
.News_Div{
	width:300px;
	margin-top:0px;
	margin-bottom:50px;
	margin-left: auto;
	margin-right: auto;
	border-image-source: url("images/Border_0.png");
}

.News_Div.New_News{
	display:block;
}
	

.Crew_Div{
	display:flex;
	flex-direction:column;
}
	

.Crew_Img{
	min-width:250px;
	min-height:250px;
	width:80%;
	margin:auto;
}

.Crew_Img_Small{
	width:150px;
	height:150px;
	padding:0px;
}
	

.Crew_Butt{
	height:50px;
	width:50px;
	margin:4px;
}
	

.Crew_Butt.ActiveButt{
	outline:2px solid #c6833a;
}

.Contact_Div{
	display:flex;
	flex-direction:column;
	gap:50px;
}
	

.Contact_Img{
	width:250px;
	height:150px;
}
	

.Contact_Disc, .Contact_News{
	bottom:6px;
	font-family: 'Grandstander';
	word-spacing: 1;
	font-size: 1rem;
}
	

.Contact_Disc{
	left:60px;
}
	

.Contact_News{
	left:49px;
}


.Contact_Mid{
	display:none;
	padding:20px;
	top:56px;
	left:12px;
}


.Contact_Small{
	padding:10px;
	width:250px;
	display:block;  
	font-family: 'Grandstander';
	word-spacing: 1;
	font-size: 1rem;
	top:30px;
	left:0px;
}


@media (min-width: 601px) {
	.Intro_Img{
		margin-top: -25px;
	}
	

	.Crew_Div{
		display:flex;
		flex-direction:row;
	}
	

	.Crew_Img{
		min-width:300px;
		min-height:300px;
		width:300px;
		height:300px;
	}
	

	.Contact_Img{
		width:435px;
		height:275px;
	}
	

	.Contact_Disc, .Contact_News{
		bottom:25px;
		font-size: 1.5rem;
	}
		

	.Contact_Disc{
		left:123px;
	}
		

	.Contact_News{
		left:107px;
	}


	.Contact_Mid{
		width:413px;
		display:block;
	}


	.Contact_Small{
		display:none;
	}
		
		
}


@media (min-width: 1024px) {


	.Welcome_Right{
		margin-top:0px;
	}

	.plax_short {
		min-height: 810px;
	}


	.plax_tall {
		height: 1620px;
	}
	
	.plax_kick{
		height:900px;
	}
	
	.NarrowCol{
		flex-direction:row;
	}
	
	.Welcome_Intro_Left{
		max-width:650px;
		width:60%;
		margin-top: auto;
		margin-bottom:auto;
	}
	
	.Welcome_Intro_Right{
		margin-left:50px;
		height:550px;
		width:550px;
		margin-top:0px;
	}
	
	.Welcome_Intro_Img{
		min-width:550px;
	}
	

	.Intro_Banner{
		margin-top:200px;
		margin-bottom:0px;
	}
	
	.Intro_Text{
		padding-top:50px;
	}

	.Intro_Img{
		width:500px;
		position: absolute;
		max-height:500px;
		right:-64%;
		bottom:-255px;
		z-index:0;
	}
	

	.News_Div{
		display:block;
		margin-left: 25px;
		margin-right: 25px;
	}
	

	.Crew_Img{
		min-width:450px;
		min-height:450px;
		width:450px;
		height:450px;
	}
	

	.Contact_Div{
		display:flex;
		flex-direction:row;
	}
}
/*-----------------------------*\
|       Character Select        |
\*-----------------------------*/

.CharCardDiv{
	position:relative;
	gap: 70px 15px;
	max-width: 1400px;
	display: grid;
	justify-content:space-evenly;
	margin-top: 40px;
}

@media (min-width: 1124px) {
  .CharCardDiv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1520px) {
  .CharCardDiv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*-------------------------------*\
|       Character Creation        |
\*-------------------------------*/
/* START Character Creation Choices Styling */


.ChoiceCard {
  min-width:200px;
  width:fit-content;
  text-align: center;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

	border-image-slice: 33%;
	border-image-width: 45px;
	border-image-repeat: stretch stretch; 
	border-image-outset: 2px;
	border-style: solid;
	border-image-source: url("images/Border_0.png");
}

.bg_0_choice{
	border-image-source: url("images/Border_0.png");
	background-color:#fef6f0;
}

.bg_1_choice{
	border-image-source: url("images/Border_1.png");
	background-color:#2b2f3a;
}

.ChoiceCard:hover {
	border-image-source: url("images/Border_Gold.png"); 
	-webkit-filter: brightness(.8);
}

.ChoiceCard.Active{
	border-image-slice: 33%;
	border-image-width: 45px;
	border-image-repeat: stretch stretch; 
	border-image-outset: 4px;
	border-style: solid;
	border-image-source: url("images/Border_Thick.png"); 
}

@media (min-width: 1024px){
	.ChoiceCard {
      padding-bottom: 0.5rem;
	}
}

.choice:hover{
	opacity:1;
}

.cardchoice:hover{
  outline-style: solid;
  outline-width: 2px;
  outline-color: #c6833a;
	opacity:1;
}

/* Character Creation Core Stat Selector */

.multiButt{
  margin: 0px;
}

.multiButt button{
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 2px;
  border-bottom-width: 2px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  padding-right: 0.75rem;
}

.multiButt button:first-child{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-left-width: 2px;
}

.multiButt button:last-child{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-right-width: 2px;
}

.CreationDiv{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 1.5rem;
}

.CreationSection{
  overflow-y: auto;
  height: 74vh;
  grid-column: span 5 / span 5;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 1024px){
  .CreationSection{
    grid-column: span 3 / span 3;
  }
}

.CreatureSidebar{
  height: 74vh;
  grid-column: span 5 / span 5;
  margin-top: 1.5rem;
  justify-content:center;
  display: flex;	
}

@media (min-width: 1024px){
  .CreatureSidebar{
    position: static;
    margin-left: 2rem;
    display: flex;	
    grid-column: span 2 / span 2;
  }
}

.ChatWindow{
	border-radius: 1.5rem;
	margin-bottom: 1.5rem;
	padding:1.5rem;
	min-height:145px;
}


.ClassAbilsSelect {
  height: 360px;
  display:flex;
  gap: 20px;
  padding: 10px;
  overflow-y: hidden;
  overflow-x: auto;
}

.ClassAbilsSelect::-webkit-scrollbar {
  width:10px;
  height:10px;
}

.ClassAbilsSelect::-webkit-scrollbar-thumb {
  background-color: #c6833a;
}
	
.ClassAbilsSelect::-webkit-scrollbar-thumb:hover {
  background-color: #d9662e;
}

.ClassAbilsSelect::-webkit-scrollbar-track {
  background-color:rgb(255 255 255 / 0.20);
}

@supports (scrollbar-width: thin) {
	.ClassAbilsSelect {
	  scrollbar-color: #c6833a rgb(255 255 255 / 0.20);
	  scrollbar-width: thin;
	}
}


/*-----------------------------*\
|       Class Focus Bars        |
\*-----------------------------*/
.ClassFocus{
  width: 40px;
  position:absolute;
  bottom:34px;
}

.ClassFocus.FocusDamage{
  left:55px;
}

.ClassFocus.FocusMaladies{
  left:138px;
}

.ClassFocus.FocusTerrain{
  left:223px;
}

.ClassFocus.FocusControl{
  left:306px;
}

.ClassFocus.FocusDefence{
  left:389px;
}

.ClassFocus.FocusHealing{
  left:472px;
}

.ClassFocus.FocusComplexity{
  left:558px;
}


/*---------------------------*\
|       Portrait Maker        |
\*---------------------------*/

/*the left div*/
.PortraitDivMain{
  width: 95vw;
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

/*the right div*/
.PortraitDivChoice{
  width: 93.5vw;
  display: flex;
  flex-direction: column;
  margin: auto;
  border-image-source: url("images/Border_0.png");
} 

.PortraitPartMenu{
  height:98px;
  display:flex;
  overflow-x: scroll;
  overflow-y: hidden;
}

.PortraitPartMenu::-webkit-scrollbar {
  height:10px;
}

.PortraitPartMenu::-webkit-scrollbar-thumb {
  background-color: #c6833a;
}
	
.PortraitPartMenu::-webkit-scrollbar-thumb:hover {
  background-color: #d9662e;
}

.PortraitPartMenu::-webkit-scrollbar-track {
  background-color:rgb(255 255 255 / 0.20);
}


.PartSelector{
  min-height: 75px;
  min-width: 75px;
}

.PortraitLayers{
  display: flex;
}

.PortraitPart{
  height:101px;
  background-color: rgb(255 255 255 / 0.50);
}

.ColorMenu{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index:2;
	height:fit-content;
}

.ColorButt{
  padding:1rem;
  padding:1rem;
}

.ColorButtChosen{
  outline-style: solid;
  outline-width: 4px;
  outline-color: #c6833a;
}

.PortraitButt{
  font-size: 1.3rem;
  line-height: 1.7rem;
  font-family: 'Grandstander', cursive;
}

@media (min-width: 735px){
  .PortraitDivMain{
    width: 320px;
	margin-bottom: 0px;
	margin-right: 4px;
	margin-top: -3px;
  }
  
  .PortraitPartMenu{
    height: 60px;
  }

  .PortraitDivChoice{
    width: calc(100vw - 435px);
    height: 402px;
    margin-top: 1px;
  }
  
  .PartSelector{
    min-height: 37px;
    min-width: 37px;
  }
  
  .PortraitLayers{
	height:347px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

	.PortraitLayers::-webkit-scrollbar {
	  width:10px;
	}

	.PortraitLayers::-webkit-scrollbar-thumb {
	  background-color: #c6833a;
	}
	
	.PortraitLayers::-webkit-scrollbar-thumb:hover {
      background-color: #d9662e;
	}

	.PortraitLayers::-webkit-scrollbar-track {
	  background-color:rgb(255 255 255 / 0.20);
	}
  
  .PortraitPart{
	height:82px;
  }
  
  .ColorButt{
	padding:.5rem;
  }

  .ColorButtChosen{
    outline-style: solid;
    outline-color: #c6833a;
  }

  .PortraitButt{
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: 'Grandstander', cursive;
  }
}

@media (min-width: 1121px){
  .PortraitDivMain{
    width: 406px;
  }
  
  .PortraitPartMenu{
    height:98px;
  }

  .PortraitDivChoice{
    width: calc(100vw - 521px);
	max-width:988px;
	height: 491px;
  }
  
  .PartSelector{
    min-height: 75px;
    min-width: 75px;
  }
  
  .PortraitLayers{
	height:400px;
  }
  
  .PortraitPart{
	height:101px;
  }
  
  .ColorButt{
	padding:1rem;
  }

  .ColorButtChosen{
    outline-style: solid;
    outline-color: #c6833a;
  }

  .PortraitButt{
    font-size: 1.3rem;
    line-height: 1.7rem;
    font-family: 'Grandstander', cursive;
  }
}

@supports (scrollbar-width: thin) {
	.PortraitPartMenu{
	  height:88px;
	  scrollbar-width: thin;
	  scrollbar-color: #c6833a rgb(255 255 255 / 0.20);
	}

	.PortraitLayers{
	  scrollbar-width: thin;
	  scrollbar-color: #c6833a rgb(255 255 255 / 0.20);
	}

	@media (min-width: 735px){
	  .PortraitPartMenu{
		height: 50px;
	  }

	  .PortraitLayers{
		height:357px;
	  }
	}

	@media (min-width: 1121px){
	  
	  .PortraitPartMenu{
		height:89px;
	  }
	  
	  .PortraitLayers{
		height:410px;
	  }
	}
}


.PortraitPartDiv{
	height:50%;
}

/*------------------------------*\
|       Creature Creation        |
\*------------------------------*/
.CreatureDetCol{
	grid-column: span 3 / span 3;
}
@media (min-width: 1024px){
	.CreatureDetCol{
		grid-column: span 1 / span 1;
	}
}

.CreatureFilter{
  border-radius: 100%;
  height: 3rem;
  width: 3rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  justify-content: center;
  display: flex;
}

.CreatureFilter:hover{
  background-color: #c6833a;
  border-color: #c6833a;
}

.CreatureFilter.Active{
  border-radius: 100%;
  height: 3rem;
  width: 3rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  justify-content: center;
  display: flex;
  background-color: #c6833a;
  border-color: #c6833a;
}

.CreatureFilter.Active:hover{
  background-color: rgb(181 78 11);
  border-color: rgb(181 78 11);
}


.CreatureFilter.Void{
  border-radius: 100%;
  height: 3rem;
  width: 3rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  justify-content: center;
  display: flex;
  opacity:.5;
  border-color: #c6833a;
}
.CreatureFilter.Void:hover{
  opacity:1;
}


.CreatStats{
  display: flex;
  flex-direction: column;
  width: 450px;
  justify-content: left;
  gap: 20px;
  height:fit-content;
}





/*----------------------------*\
|       Lore Card Stuff        |
\*----------------------------*/


.LoreCard.Inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.LoreCard:hover .LoreCard.Inner,
.LoreCard:focus .LoreCard.Inner{
  transform: rotateY(180deg);
}

.LoreCard.Side {
  position: absolute;
  width:500px;
  height:500px;
}

.LoreCard.Side.Front {
  width:500px;
  height:500px;
  color: black;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.LoreCard:hover .LoreCard.Side.Front,
.LoreCard:focus .LoreCard.Side.Front{
  opacity:1;
}
.LoreCard.Side.Back {
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity:0;
}

.LoreCard:hover .LoreCard.Side.Back,
.LoreCard:focus .LoreCard.Side.Back{
  opacity:1;
}




/*-------------------------------*\
|       Ability Card Stuff        |
\*-------------------------------*/


/*card tooltips*/

.cardtip
{
	position: absolute;
	width: 40px;
	height: 40px;
	z-index: 15;
	border-radius:100%;
}

.cost1
{
  border: 2px solid red;
	left: 6px;
	top: 6px;
}

.cost2
{
  border: 2px solid red;
	left: 6px;
	top: 51px;
}

.cost3
{
  border: 2px solid red;
	left: 6px;
	top: 96px;
}

.keyword1
{
  border: 2px solid red;
	border-radius: 100%;
	right: 7px;
	top: 6px;
}

.keyword2
{
  border: 2px solid red;
	border-radius: 100%;
	right: 7px;
	top: 51px;
}

.keyword3
{
  border: 2px solid red;
	border-radius: 100%;
	right: 7px;
	top: 96px;
}

.movement
{
	border-radius: 100%;
	left: 6px;
	top: 287px;
}

.target
{
	border-radius: 100%;
    bottom: 21px;
    right: 19px;
	width:53px;
	height:53px;
}

.sourcett
{
	border-radius: 100%;
	left: 100px;
	top: 8px;
	width: 35px;
	height: 35px;
}

.typett
{
	border-radius: 100%;
	left: 73px;
	top: 24.5px;
	width: 20.5px;
	height: 20.5px;
}

.tiertt
{
	border-radius: 100%;
	right: 77px;
	top: 23.5px;
	width: 20.5px;
	height: 20.5px;
}



/*positioning elements*/
.strenuous {
	position: absolute;
	right: 15.5px;
	top: 10px;
	width: 17px;
	height: 17px;
}

.exhausting {
	position: absolute;
	right: 43px;
	top: 10px;
	width: 17px;
	height: 17px;
}

.cardsource {
	position: absolute;
	border-radius:100%;
	left: 100px;
	top: 8px;
	width: 35.5px;
	height: 35.5px;
}

.cardtype {
	position: absolute;
	border-radius:100%;
	left: 72.5px;
	top: 24.25px;
	width: 21.5px;
	height: 21.5px;
}

.cardtierinnate {
	position: absolute;
	border-radius:100%;
	right: 75px;
	top: 23.5px;
	width: 21.5px;
	height: 21.5px;
}

.cardelemental {
  position: absolute;
  border-radius: 100%;
  bottom: 6px;
  right: 62.45px;
  width: 19px;
}

.cardelemental.back{
  bottom: 4.5px;
  right: 61px;
  width: 22px;
  height: 22px;
}

.cardelemental.backback{
  bottom: 2.5px;
  right: 59px;
  width: 26px;
  height: 26px;
}

.cardkeyword_odd_1 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    left: 109px;
	width:27px;
	height:27px;
}

.cardkeyword_odd_2 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    left: 78px;
	width:27px;
	height:27px;
}

.cardkeyword_odd_3 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    right: 71px;
	width:27px;
	height:27px;
}

.cardkeyword_odd_4 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    left: 56px;
	width:27px;
	height:27px;
}

.cardkeyword_odd_5 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    right: 53px;
	width:27px;
	height:27px;
}

.cardkeyword_even_1 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    left: 91px;
	width:27px;
	height:27px;
}

.cardkeyword_even_2 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    right: 89px;
	width:27px;
	height:27px;
}

.cardkeyword_even_3 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    left: 60px;
	width:27px;
	height:27px;
}

.cardkeyword_even_4 {
	position: absolute;
	border-radius:100%;
    top: 84px;
    right: 58px;
	width:27px;
	height:27px;
}

.cardtarget {
	position: absolute;
    bottom: 21px;
    right: 19px;
	width:53px;
	height:53px;
}


.FurnishingBack {
	display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
}

.Furnishing {
    position: absolute;
    top: 0px;
    left: 0px;
}


.AbilityCardpngBack {
	height: 88mm;
	width: 63mm;
	min-width: 63mm;
	display: inline-block;
    position: relative;
    top: 0px;
    left: 0px;
}

.AbilityCardpng {
	height: 88mm;
	width: 63mm;
    position: absolute;
    top: 0px;
    left: 0px;
}

.TitleFont {
    font-family: 'Grandstander', cursive;
	color: black;
}



.TitleBox {
    position: absolute;
    left: 62px;
    right: 57px;
	height: 32px;
}



.TitleSmall {
    top: 50px;
	line-height: 1;
	font-size: 13px;
}



.TitleMedium {
    top: 56px;
	line-height: 1;
	font-size: 13px;
}

.ActionSpeed {
    position: absolute;
	vertical-align: middle;
	line-height: 1;
    bottom: 9px;
    left: 17px;
    right: 17px;
	font-size: 14px;
}

.ActionSpeedTarget {
    position: absolute;
	vertical-align: middle;
	line-height: 1;
    bottom: 9px;
    left: 42px;
    right: 137px;
	font-size: 14px;
}

.ActionSpeedWhite {
    position: absolute;
	vertical-align: middle;
	line-height: 1;
	color: white;
    bottom: 9px;
    left: 17px;
    right: 17px;
	font-size: 14px;
}



.CardText {
    position: absolute;
	text-align: center;
    top: 113px;
    left: 22px;
    right: 20px;
	height: 195px;
	width: 196px;
	line-height: 18px;
	font-family: 'open_sanscondensed_light', sans-serif;
	color: black;
    display:flex;
	font-size: 12px;
}



.CardFlavorText {
	font-style: italic;
}

.CardCover {
    position: absolute;
	text-align: center;
    top: 0;
    left: 0;
	height: 334px;
	width: 239px;
}

.leftfloat {
	float: left;
}

.rightfloat {
	float: right;
}

.TargetBlocker {
	width:133px;
    float:right;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
	shape-outside:circle(37px at 112px 173px);
}

.handblockerleft {
	width:10px;
    float:left;
    height:100%;
	shape-outside: circle(12px at 0px 102px);
}

.handblockerright {
	width:8px;
    float:right;
    height:100%;
	shape-outside: circle(12px at 100% 50%);
}




/*---------------------------*\
|       Draggable Cards       |
\*---------------------------*/


.listitemClass div
{   
	text-align: center;
	display: inline-block;
}

#imageListId
{            
	display: inline-block;
}


#dragimg {
  position: absolute;
  z-index: 99;
}


.abilitycardbox
{
	width: 238.117px;
	height: 332.6px;
}


.abilitycardboxchoice
{
	height: 88mm;
	width: 63mm;
	display:inline-block;
}




/*---------------------------*\
|       Character Sheet       |
\*---------------------------*/
.CSAbilTitleDiv{
  flex-wrap: wrap;
  column-span: all;
  display: flex;
  font-family: 'Grandstander';
}




.AbilityToggle{
  width: 100%;
  height: fit-content;
  padding: 4px;
}


.AbilityToggle{
  background-color: #ffffff33;
}

.AbilityToggle.Highlight{
  background-color: #c6833a66;
}

.AbilityToggle.Active{
  background-color: #ffffff99;
  color:black;
}

.AbilityToggle.Active.Highlight{
  background-color: #c6833aCC;
  color:black;
}


@media (min-width: 683px){
	.AbilityToggle{
	  max-width: none;
	  width: calc(50% - 5px);
	}
}


@media (min-width: 976px){
	.AbilityToggle{
	  width: calc(33% - 4px);
	}
}

@media (min-width: 1219px){
	.AbilityToggle{
	  width: calc(25% - 8px);
	}
}

@media (min-width: 1492px){
	.AbilityToggle{
	  width: calc(20% - 8px);
	}
}




.AbilityToggleName{
  max-width: calc(100% - 95px);
  margin-left: .5rem;
}




.FreeAbility{
  background-color: rgb(255 255 255 / 0.20);
  padding:4px;
}


.FreeAbility.Active{
  background-color: rgb(255 255 255 / 0.60);
  color:black;
}


.AbilityFilter{
  border-radius: 100%;
  border-width:5px;
  justify-content: center;
  display: flex;
  border-color: transparent;
}

.AbilityFilter:hover{
  border-color: #c6833a;
}

.AbilityFilter.Active{
  border-color: #c6833a;
}

.AbilityFilter.Active:hover{
  border-color: rgb(181 78 11);
}


.AbilityFilter.Void{
  border-radius: 100%;
  border-width:5px;
  justify-content: center;
  display: flex;
  opacity:.5;
  border-color: #c6833a;
  filter: grayscale(1);
}
.AbilityFilter.Void:hover{
  opacity:1;
}


.NumberInput{
	width:40px;
	height:35px;
	padding:0px;
	padding-top:5px;
	font-family: inherit;
	font-size: inherit;
}


.ResourceInput{
	width:40px;
	height:40px;
	margin-left:-5px;
	text-align: center;
	border-width: 3px 3px 3px 0px;
}


.inputExtender{
	width:20px;
	height:40px;
	position:absolute;
	right:0px;
	top:0px;
	z-index:-1;
	border-width: 3px 0px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.ClassSubTitle{
	text-transform: uppercase;
	position:absolute;
	bottom:-20px;
	transform: translateX(-50%);
	left: 50%;
	font-size: 10px;
	font-family: 'Grandstander';
	word-spacing: 1;
	padding: 0px 2px;
}


/*-----------------------------------*\
|       Ability Learning Stuff        |
\*-----------------------------------*/

.unknownAbility
{ 
	opacity:.6;
}

.LockedAbility{
	-webkit-filter: brightness(0.50);
}

.LockedAbility:hover{
	-webkit-filter: brightness(1);
}



/*-----------------------*\
|       Group Page        |
\*-----------------------*/

.Group_Banner_Back{
	width:calc(100% - 18px);
	margin-left: 9px;
	margin-right: 9px;
	position:relative;
	justify-content:center;
	display:none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 225px;
}

@media (min-width: 640px){
	.Group_Banner_Back{
		display:flex;
	}
}

.Groupname_Banner{
	display:flex;
	justify-content:center;
	position:absolute;
	bottom: 10px;
	background-image: url('images/banner_groupname.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	overflow: visible;
	z-index:5;
	color:black;
	height: 55px;  
	padding-top: 4px;
	font-family: 'Grandstander';
	word-spacing: 1;
	font-size: 34px;
}

@media (min-width: 640px){
	.Groupname_Banner_hidden{
		display:none;
	}
}

.Portrait_1_0{
  position: absolute;
  bottom:0px;
  left:calc(50% - 120px);
  z-index:1;
}

.Portrait_2_0{
  position: absolute;
  bottom:0px;
  left:calc(42% - 120px);
  z-index:1;
}

.Portrait_2_1{
  position: absolute;
  bottom:0px;
  left:calc(58% - 120px);
  z-index:2;
}

.Portrait_3_0{
  position: absolute;
  bottom:0px;
  left:calc(34% - 120px);
  z-index:1;
}

.Portrait_3_1{
  position: absolute;
  bottom:0px;
  left:calc(50% - 120px);
  z-index:2;
}

.Portrait_3_2{
  position: absolute;
  bottom:0px;
  left:calc(66% - 120px);
  z-index:1;
}

.Portrait_4_0{
  position: absolute;
  bottom:0px;
  left:calc(26% - 120px);
  z-index:1;
}

.Portrait_4_1{
  position: absolute;
  bottom:0px;
  left:calc(42% - 120px);
  z-index:2;
}

.Portrait_4_2{
  position: absolute;
  bottom:0px;
  left:calc(58% - 120px);
  z-index:3;
}

.Portrait_4_3{
  position: absolute;
  bottom:0px;
  left:calc(74% - 120px);
  z-index:1;
}

.Portrait_5_0{
  position: absolute;
  bottom:0px;
  left:calc(18% - 120px);
  z-index:1;
}

.Portrait_5_1{
  position: absolute;
  bottom:0px;
  left:calc(34% - 120px);
  z-index:2;
}

.Portrait_5_2{
  position: absolute;
  bottom:0px;
  left:calc(50% - 120px);
  z-index:3;
}

.Portrait_5_3{
  position: absolute;
  bottom:0px;
  left:calc(66% - 120px);
  z-index:2;
}

.Portrait_5_4{
  position: absolute;
  bottom:0px;
  left:calc(82% - 120px);
  z-index:1;
}


.Portrait_6_0{
  position: absolute;
  bottom:0px;
  left:calc(10% - 120px);
  z-index:1;
}

.Portrait_6_1{
  position: absolute;
  bottom:0px;
  left:calc(26% - 120px);
  z-index:2;
}

.Portrait_6_2{
  position: absolute;
  bottom:0px;
  left:calc(42% - 120px);
  z-index:3;
}

.Portrait_6_3{
  position: absolute;
  bottom:0px;
  left:calc(58% - 120px);
  z-index:4;
}

.Portrait_6_4{
  position: absolute;
  bottom:0px;
  left:calc(74% - 120px);
  z-index:3;
}

.Portrait_6_5{
  position: absolute;
  bottom:0px;
  left:calc(90% - 120px);
  z-index:2;
}

.LeftFurnButt, .RightFurnButt{
	color: rgb(181 78 11 / 0.3);
	position: absolute;
	height:10%;
	top:45%;
}

.LeftFurnButt{
	left:-4.3%;
}

.RightFurnButt{
	left:101%;
}

.LeftFurnButt:hover, .RightFurnButt:hover{
	-webkit-filter: drop-shadow( 0px 0px 4px white);
	filter: drop-shadow( 0px 0px 4px white);
	color: rgb(198 98 32 / 0.9);
}

.HomeBaseDiv{
	padding:1rem 0;
	max-width:1400px;
}


.ConvertArrows{
	display:none;
}


@media (min-width: 600px){

	.ConvertArrows{
		display:flex;
		flex-direction:row;
	}
}




/*---------------------------------*\
|       Adventure Info Stuff        |
\*---------------------------------*/

.boxtext
{
	position:relative;
	border-image-slice: 33%;
	border-image-width: 4em;
	border-image-repeat: stretch stretch; 
	border-image-outset: 3px;
	border-style: solid;
	border-image-source: url("images/Border_Fancy.png");  
	padding: 1rem 3rem;
	margin-top:20px;
	margin-bottom:20px;
}

.boxtext.meglin
{
	border-image-source: url("images/Border_0.png");  
	padding: 1rem;
	margin-top:0px;
	margin-bottom:0px;
}


.StorylineDiv{
	display:flex;
	flex-direction:column;
}

@media (min-width: 1000px){

	.StorylineDiv{
		flex-direction:row;
	}
	
}


.roundbutt{
  position: relative;
  margin: 0 10px; 
  margin-top: 12px; 
  height: 18px;
  width: 18px;
  border-radius: 100%;
  padding:9px;
}


.NavTab{
  color: #c6833a;
  cursor: pointer;
}


.NavTab.Active{
  border-bottom-width: 3px;
  border-color: #c6833a;
}



/*--------------------------*\
|       Search Things        |
\*--------------------------*/

.SearchFilter{
  border-radius: 100%;
  border-width:5px;
  justify-content: center;
  display: flex;
  border-color: transparent;
}

.SearchFilter.Square{
  border-radius: 0%;
}

.SearchFilter:hover{
  background-color: #c6833a;
  border-color: #c6833a;
}

.SearchFilter.Active{
  border-radius: 100%;
  border-width:5px;
  justify-content: center;
  display: flex;
  background-color: #c6833a;
  border-color: #c6833a;
}

.SearchFilter.Active:hover{
  background-color: rgb(181 78 11);
  border-color: rgb(181 78 11);
}


.SearchFilter.Void{
  border-radius: 100%;
  border-width:5px;
  justify-content: center;
  display: flex;
  opacity:.5;
  border-color: #c6833a;
  filter: grayscale(1);
}
.SearchFilter.Void:hover{
  opacity:1;
}





.SearchResults{
	margin-top: 3px;
	overflow: auto;
}


.SearchResults::-webkit-scrollbar {
  width:10px;
  height:10px;
}

.SearchResults::-webkit-scrollbar-thumb {
  background-color: #c6833a;
}
	
.SearchResults::-webkit-scrollbar-thumb:hover {
  background-color: #d9662e;
}

.SearchResults::-webkit-scrollbar-track {
  background-color:rgb(255 255 255 / 0.20);
}

@supports (scrollbar-width: thin) {
	.SearchResults {
	  scrollbar-color: #c6833a rgb(255 255 255 / 0.20);
	  scrollbar-width: thin;
	}
}


.SearchResults.Abilsearch{
	height: calc(100vh - 448px);
	min-height: 400px;
}


@media (min-width: 919px){
	.SearchResults.Abilsearch{
		height: calc(100vh - 386px);
		min-height: 400px;
	}
}


@media (min-width: 1250px){
	.SearchResults.Abilsearch{
		height: calc(100vh - 334px);
		min-height: 400px;
	}
}

/*-----------------------*\
|       Print Page        |
\*-----------------------*/
.TableHeader{
	position:sticky;
	top: 0;
	z-index:1;
	margin: 3 auto;
	border-color: #c6833a;
	padding: 0.25rem;
	border-width: 2px;
}

.AbilityRow{
	margin: 0.25rem;
}

.MajorAbil_0{
	background-color: #fdfbf5;
}

.StandardAbil_0{
	background-color: #faf8f7;
}

.MinorAbil_0{
	background-color: #fef7f1;
}

.PassiveAbil_0{
	background-color: #ffffff;
}

.ReactionAbil_0{
	background-color: #f6f7f7;
}

.MajorAbilBold_0{
	background-color: #eed1a4;
}

.StandardAbilBold_0{
	background-color: #bac9c3;
}

.MinorAbilBold_0{
	background-color: #c38e67;
}

.PassiveAbilBold_0{
	background-color: #e0d7d1;
}

.ReactionAbilBold_0{
	background-color: #a39f96;
}

.MajorAbil_1{
	background-color: #655e4b;
}

.StandardAbil_1{
	background-color: #525e60;
}

.MinorAbil_1{
	background-color: #504840;
}

.PassiveAbil_1{
	background-color: #605e5b;
}

.ReactionAbil_1{
	background-color: #343432;
}

.MajorAbilBold_1{
	background-color: #a98455;
}

.StandardAbilBold_1{
	background-color: #738185;
}

.MinorAbilBold_1{
	background-color: #7c4a30;
}

.PassiveAbilBold_1{
	background-color: #8f8c88;
}

.ReactionAbilBold_1{
	background-color: #4c4c4e;
}


.AbilTitleRow{
  z-index: 2;
  padding: 10px;
  font-weight: 500;
  height:fit-content;
}


.AbilDescRow{
  padding: 0.375rem;
  font-weight: 500;
}


.AbilTitle{
  font-family: 'Grandstander', cursive;
}

.SearchAbil_0 {
	color: black;
}

.SearchAbil_1 {
	color: white;
}



.SearchOptionName{
  max-width: 170px;
  margin-left: .5rem;
  min-height: 42px;
}

.col-span-all{
  column-span: all;
}

























/*---------------------------------*\
|       Adventure Info Stuff        |
\*---------------------------------*/

.help{
	cursor: help;
}
/*
.active{
  background-color: rgb(255 255 255 / 0.6);
}*/

.primaryButt{
  border-color: #c6833a;
  background-color: #c6833a;
  color: black;
}

.primaryButt:hover{
  border-color: #c6833a;
  background-color: #c6833a;
}

.primaryButtState{
  border-color: #c6833a;
  background-color: #c6833a;
  color: black;
}

.secondaryButt{
  border-color: #c6833a;
  background-color: white;
  color: black;
}

.secondaryButt:hover{
  border-color: #c6833a;
  background-color: #c6833a;
  color: black;
}

.secondaryButtState{
  border-color: #c6833a;
  color: black;
}

.inactiveButt{
  cursor: not-allowed;
  border-color: #ebe0d4;
  background-color: rgb(243 244 246);
  color: rgb(156 163 175);
}

.claimedButt{
  border-color: #c6833a;
  background-color: rgb(142 147 153);
  color: ffffff;
}

.claimedButt:hover{
  border-color: #c6833a;
  background-color: #c6833a;
  color: white;
}

.card-shadows{
  box-shadow: 1px -6px 2px rgba(0,0,0,0.5);
    -webkit-filter: brightness(100%);
}

.position-1{
  margin-top: 2px;
  z-index: 2;
  --tw-drop-shadow: drop-shadow(1px -6px 2px rgba(0,0,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.position-2{
  margin-top: -283px;
  z-index: 3;
  --tw-drop-shadow: drop-shadow(1px -6px 2px rgba(0,0,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.position-3{
  margin-top: -283px;
  z-index: 4;
  --tw-drop-shadow: drop-shadow(1px -6px 2px rgba(0,0,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.position-4{
  margin-top: -283px;
  z-index: 5;
}










.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: -webkit-sticky;
  position: sticky;
}

.inset-0\.5{
  top: 0.125rem;
  right: 0.125rem;
  bottom: 0.125rem;
  left: 0.125rem;
}

.inset-0{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.-top-5{
  top: -1.25rem;
}

.-top-0{
  top: -0px;
}

.top-0{
  top: 0px;
}

.top-1\/2{
  top: 50%;
}

.-top-2{
  top: -0.5rem;
}

.top-4{
  top: 1rem;
}

.top-6{
  top: 1.5rem;
}

.top-\[85px\]{
  top: 85px;
}

.left-auto{
  left: auto;
}

.left-0{
  left: 0px;
}

.left-1\/2{
  left: 50%;
}

.left-4{
  left: 1rem;
}

.left-6{
  left: 1.5rem;
}

.left-52{
  left: 13rem;
}

.left-72{
  left: 18rem;
}

.-bottom-60{
  bottom: -15rem;
}

.-bottom-40{
  bottom: -10rem;
}

.-bottom-20{
  bottom: -5rem;
}

.-bottom-10{
  bottom: -2.5rem;
}

.-bottom-4{
  bottom: -1rem;
}

.bottom-0{
  bottom: 0px;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-4{
  bottom: 1rem;
}

.bottom-8{
  bottom: 2rem;
}

.bottom-10{
  bottom: 2.5rem;
}

.-left-2{
  left: -0.5rem;
}

.left-20{
  left: 5rem;
}

.-right-2{
  right: -0.5rem;		  
}

.right-0{
  right: 0px;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-6{
  right: 1.5rem;
}

.top-2{
  top: 0.5rem;
}

.top-1{
  top: 0.25rem;
}

.top-5{
  top: 1.25rem;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-50{
  z-index: 50;
}

.z-\[100\]{
  z-index: 100;
}

.z-\[999\]{
    z-index: 999;
}

.col-span-full{
  grid-column: 1 / -1;
}

.col-span-1{
  grid-column: span 1 / span 1;
}


.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-4{
  grid-column: span 4 / span 4;
}

.col-span-7{
  grid-column: span 7 / span 7;
}

.row-span-1{
  grid-row: span 1 / span 1;
}

.row-span-2{
  grid-row: span 2 / span 2;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

.float-none{
  float: none;
}

.flex{
  display: flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-auto{
  aspect-ratio: auto; 
}

.h-min{
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}

.h-fit{
	height:fit-content;
}

.h-full{
  height: 100%;
}

.h-3{
  height: 0.75rem;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-10{
  height: 2.5rem;
}

.h-12{
  height: 3rem;
}


.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-\[68px\]{
  height: 68px;
}

.min-h-\[189px\]{
  min-height: 189px;
}

.h-\[200px\]{
  height: 200px;
}

.h-\[330px\]{
  height: 330px;
}

.h-\[388px\]{
  height: 388px;
}

.h-\[484px\]{
  height: 484px;
}

.h-\[550px\]{
  height: 550px;
}

.h-\[600px\]{
  height: 600px;
}

.h-\[60vh\]{
  height: 60vh;
}

.h-\[72vh\]{
  height: 72vh;
}

.h-\[85vh\]{
  height: 85vh;
}

.h-\[95vh\]{
  height: 95vh;
}

.min-h-\[95vh\]{
  min-height: 95vh;
}

.h-screen{
  height: 100vh;
}

.max-h-screen{
  max-height: 100vh;
}

.max-h-28{
  max-height: 7rem;
}

.min-h-28{
  min-height: 7rem;				  
}

.min-h-min{
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

.min-h-max{
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
}

.min-h-full{
  min-height: 100%;
}

.min-h-fit{
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

.max-w-28{
  max-width: 7rem;
}

.max-w-\[150px\]{
  max-width: 150px;
}

.min-w-28{
  min-width: 7rem;
}

.min-w-\[330px\]{
  min-width: 330px;
}

.max-h-\[30\]{
  max-height: 30;
}

.max-w-\[75px\]{
  max-width: 75px;
}


.w-fit{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.w-3{
  width: 0.75rem;
}

.w-4{
  width: 1rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-8{
  width: 2rem;
}

.w-10{
  width: 2.5rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-15{
  width: 3.75rem;
}

.w-\[238px\]{
  width: 238px;
}

.w-\[284px\]{
  width: 284px;
}
.w-max{
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.w-min{
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.w-auto{
  width: auto;
}

.min-w-\[55px\]{
  min-width: 55px;
}

.min-w-\[160px\]{
  min-width: 160px;
}

.w-1\/2{
  width: 50%;
}

.w-2\/5{
  width: 40%;
}

.min-w-min{
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

.max-w-xs{
  max-width: 20rem;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-screen-2xl{
  max-width: 1536px;
}

.max-w-9xl{
  max-width: 112rem;
}

.max-w-7xl{
  max-width: 80rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-\[30\]{
  max-width: 30;
}

.max-w-\[40\]{
  max-width: 40;
}

.max-w-\[55px\]{
  max-width: 55px;
}

.max-w-\[150px\]{
  max-width: 150px;
}

.max-w-\[250px\]{
  max-width: 250px;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-xl{
  max-width: 36rem;
}

.max-w-2xl{
  max-width: 42rem;
}

.flex-none{
  flex: none;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-grow{
  flex-grow: 1;
}

.flexbreak{
  flex-basis: 100%;
  height: 0;
}

.grow{
  flex-grow: 1;
}

.border-collapse{
  border-collapse: collapse;
}


.resize{
  resize: both;
}

.snap-x{
  -ms-scroll-snap-type: x var(--tw-scroll-snap-strictness);
      scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.scroll-m-3{
  scroll-margin: 0.75rem;
}

.scroll-mb-2{
  scroll-margin-bottom: 0.5rem;
}

.scroll-mb-10{
  scroll-margin-bottom: 2.5rem;
}

.scroll-p-3{
  scroll-padding: 0.75rem;
}


.columns-\[125px\]{
  -moz-columns: 125px;
       columns: 125px;
}

.columns-3{
  -moz-columns: 3;
       columns: 3;
}

.columns-\[200px\]{
  -moz-columns: 200px;
       columns: 200px;
}

.columns-\[250px\]{
  -moz-columns: 250px;
       columns: 250px;
}

.columns-\[300px\]{
  -moz-columns: 300px;
       columns: 300px;
}

.columns-2{
  -moz-columns: 2;
       columns: 2;
}

.break-inside-auto{
  -moz-column-break-inside: auto;
       break-inside: auto;
}

.break-before-column{
  -moz-column-break-before: column;
       break-before: column;
}

.break-inside-avoid-column{
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}

.grid-flow-row{
  grid-auto-flow: row;
}

.grid-flow-col{
  grid-auto-flow: column;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-8{
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-rows-2{
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3{
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4{
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.flex-row{
  flex-direction: row;
}

.flex-col{
  flex-direction: column;
}

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

.items-end{
  align-items: flex-end;
}

.content-start{
  align-content: flex-start;
}


.justify-end{
  justify-content: flex-end;
}

.justify-around{
  justify-content: space-around;
}

.justify-items-center{
  justify-items: center;
}
.self-end{
  align-self: flex-end;
}

.place-self-start{
  place-self: start;
}

.self-start{
  align-self: flex-start;
}

.self-center{
  align-self: center;
}

.justify-self-start{
  justify-self: start;
}

.justify-self-end{
  justify-self: end;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-clip{
  overflow: clip;
}

.overflow-scroll{
  overflow: scroll;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.overflow-x-scroll{
  overflow-x: scroll;
}

.overflow-y-hidden{
  overflow-y: hidden;
}

.overflow-y-scroll{
  overflow-y: scroll;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre{
  white-space: pre;
}

.rounded-xlg{
  border-radius: 0.65rem;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-sm{
  border-radius: 0.125rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-b-sm{
  border-bottom-right-radius: 0.125rem;
  border-bottom-left-radius: 0.125rem;
}

.ability-outline{
  border-radius: 1rem;
  outline-style: solid;
  outline-width: thin;
  outline-color: #c6833a;
}

.outline-2{
  outline-width: 2px;
}

.border{
  border-width: 1px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-6{
  border-width: 6px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-b-4{
  border-bottom-width: 4px;
}

.border-dashed{
  border-style: dashed;
}

.border-actionBrown-200{
  border-color: #c6833a;
}

.border-actionBrown-100{
  border-color: #c6833a;
}

.border-actionBrown-200\/60{
  border-color: rgb(181 78 11 / 0.6);
}

.border-primaryBG-700{
  border-color: rgb(84 64 52);
}

.border-transparent{
  border-color: transparent;
}

.border-white{				 
  border-color: white;
}

.border-Maneuver-200{
  border-color: rgb(86 118 129);
}

.border-Maneuver-100{
  border-color: rgb(181 212 226);
}

.border-Trick-200{
  border-color: rgb(159 54 42);
}

.border-Trick-100{
  border-color: rgb(244 180 173);
}

.border-Spell-200{
  border-color: rgb(235 182 107);
}

.border-Spell-100{
  border-color: rgb(249 219 177);
}

.border-Psytech-200{
  border-color: rgb(127 79 57);
}

.border-Psytech-100{
  border-color: rgb(176 146 132);
}

.border-Talent-200{
  border-color: rgb(122 128 127);
}

.border-Talent-100{
  border-color: rgb(209 209 209);
}

.border-Mental-200{
  border-color: rgb(163, 137, 55);
}

.border-Mental-100{
  border-color: rgb(195 184 150);
}

.border-Physical-200{
  border-color: rgb(111, 105, 123);
}

.border-Physical-100{
  border-color: rgb(159 153 171);
}

.border-red-500{
  border-color: rgb(239 68 68);
}

.border-blue-500{
  border-color: rgb(59 130 246);
}

.border-yellow-500{
  border-color: rgb(234 179 8);
}

.border-purple-600{
  border-color: rgb(147 51 234);
}

.border-orange-500{
  border-color: rgb(249 115 22);
}

.border-orange-300{
  border-color: rgb(253 186 116);
}

.border-actionBrown-300{
  border-color: #c6833a;
}

.bg-\[\#ebe0d4\]\/80{
  background-color: rgb(254 244 231 / 0.8);
}

.bg-\[\#282c2f\]\/80{
  background-color: rgb(40 44 47 / 0.8);
}

.bg-white\/95{
  background-color: rgb(255 255 255 / 0.95);
}

.bg-slate-100{
  background-color: rgb(241 245 249);
}

.bg-Talent-200{
  background-color: rgb(209 209 209);
}

.bg-actionBrown-100\/25{
  background-color: rgb(198 98 32 / 0.25);
}

.bg-actionBrown-200{
  background-color: #c6833a;
}

.bg-\[\#ebe0d4\]{
  background-color: #ebe0d4;
}

.bg-\[\#282c2f\]{
  background-color: #282c2f;
}

.bg-\[\#ebe0d4\]\/60{
  background-color: rgb(254 244 231 / 0.6);
}

.bg-\[\#282c2f\]\/60{
  background-color: rgb(40 44 47 / 0.6);
}

.bg-white{
  background-color: white;
}

.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/60{
  background-color: rgb(255 255 255 / 0.6);
}

.bg-white\/30{
  background-color: rgb(255 255 255 / 0.3);
}

.bg-gray-100{
  background-color: rgb(243 244 246);
}

.bg-gray-200{
  background-color: rgb(229 231 235);
}

.bg-gray-300{
  background-color: #ebe0d4;
}

.bg-gray-900\/20{
  background-color: rgb(17 24 39 / 0.2);
}

.bg-gray-900\/30{
  background-color: rgb(17 24 39 / 0.3);
}

.bg-gray-900\/10{
  background-color: rgb(17 24 39 / 0.1);
}

.bg-actionBrown-100{
  background-color: #c6833a;
}

.bg-actionBrown-100\/60{
  background-color: rgb(198 98 32 / 0.6);
}

.bg-actionBrown-100\/10{
  background-color: rgb(198 98 32 / 0.1);
}

.bg-Reaction-100{
  background-color: rgb(228 174 134);
}

.bg-Mental-100{
  background-color: rgb(195 184 150);
}

.bg-Physical-100{
  background-color: rgb(159 153 171);
}


.bg-Talent-100{
  background-color: rgb(209 209 209);
}


.bg-Mental-100\/80{
  background-color: rgb(195 184 150 / 0.8);
}

.bg-Physical-100\/80{
  background-color: rgb(159 153 171 / 0.8);
}

.bg-Maneuver-100\/80{
  background-color: rgb(181 212 226 / 0.8);
}

.bg-Trick-100\/80{
  background-color: rgb(244 180 173 / 0.8);
}

.bg-Spell-100\/80{
  background-color: rgb(249 219 177 / 0.8);
}

.bg-Psytech-100\/80{
  background-color: rgb(176 146 132 / 0.8);
}

.bg-Talent-100\/80{
  background-color: rgb(209 209 209 / 0.8);
}

.bg-Mental-100\/60{
  background-color: rgb(195 184 150 / 0.6);
}

.bg-Physical-100\/60{
  background-color: rgb(159 153 171 / 0.6);
}

.bg-Maneuver-100\/60{
  background-color: rgb(181 212 226 / 0.6);
}

.bg-Trick-100\/60{
  background-color: rgb(244 180 173 / 0.6);
}

.bg-Spell-100\/60{
  background-color: rgb(249 219 177 / 0.6);
}

.bg-Psytech-100\/60{
  background-color: rgb(176 146 132 / 0.6);
}

.bg-Talent-100\/60{
  background-color: rgb(209 209 209 / 0.6);
}

.bg-Mental-100\/20{
  background-color: rgb(195 184 150 / 0.2);
}

.bg-Physical-100\/20{
  background-color: rgb(159 153 171 / 0.2);
}

.bg-Maneuver-100\/20{
  background-color: rgb(181 212 226 / 0.2);
}

.bg-Trick-100\/20{
  background-color: rgb(244 180 173 / 0.2);
}

.bg-Spell-100\/20{
  background-color: rgb(249 219 177 / 0.2);
}

.bg-Psytech-100\/20{
  background-color: rgb(176 146 132 / 0.2);
}

.bg-Talent-100\/20{
  background-color: rgb(209 209 209 / 0.2);
}

.bg-cover{
  background-size: cover;
}

.bg-fixed{
  background-attachment: fixed;
}

.bg-clip-padding{
  background-clip: padding-box;
}

.bg-center{
  background-position: center;
}

.bg-no-repeat{
  background-repeat: no-repeat;
}

.fill-current{
  fill: currentColor;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-1{
  padding: 0.25rem;
}

.p-2{
  padding: 0.5rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.p-14{
  padding: 3.5rem;
}

.px-auto{
  padding-left: auto;
  padding-right: auto;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-14{
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;				  
}

.pl-1\/2{
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-7{
  padding-left: 1.75rem;
}

.pl-8{
  padding-left: 2rem;
}

.pl-9{
  padding-left: 2.25rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pr-0{
  padding-right: 0px;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pr-4{
  padding-right: 1rem;
}

.pr-5{
  padding-right: 1.25rem;
}

.pr-8{
  padding-right: 2rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pt-20{
  padding-top: 5rem;   
}

.pb-0{
  padding-bottom: 0px;
}

.pb-0\.5{
  padding-bottom: 0.125rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-14{
  padding-bottom: 3.5rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.text-left{
  text-align: left;
}

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

.font-primary{
  font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}

.font-handwriting{
  font-family: 'Grandstander';
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-7xl{
  font-size: 4.5rem;
  line-height: 1;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.font-bold{
  font-weight: 700;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.text-white{
  color: white;
}

.text-actionBrown-200{
  color: #c6833a;
}

.text-actionBrown-100{
  color: #c6833a;
}

.text-elementalMental-100{
  color: rgb(168 136 33);
}

.text-elementalPhysical-100{
  color: rgb(112 105 125);
}

.text-Mental-200{
  color: rgb(168 136 33);
}

.text-Physical-200{
  color: rgb(112 105 125);
}

.text-blue-600{
  color: rgb(37 99 235);
}

.opacity-0{
  opacity: 0;
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-gray-700\/50{
  --tw-shadow-color: rgb(55 65 81 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-black\/30{
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-white{
  --tw-shadow-color: #fff;
  --tw-shadow: var(--tw-shadow-colored);
}

.outline{
  outline-style: solid;
}

.greyedout{
  filter: grayscale(100%);
}

.drop-shadow-\[0_-8px_2px_rgba\(0\2c 0\2c 0\2c 0\.25\)\]{
  --tw-drop-shadow: drop-shadow(0 -8px 2px rgba(0,0,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition{
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-75{
  transition-duration: 75ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

input:checked + div svg{
  display: block;
}


/* START Character Creation TABS */

.creationTab-hide{
  margin-bottom: -72vh;
  transition-duration: 250;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.creationTab-show{
  margin-bottom: 0px;
  transition-duration: 250;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.creationTab-active{
  background-color: white;
  color: rgb(0 0 0);
}

.creationTab-inactive{
  background-color: rgb(229 231 235);
}

.creationTab-locked{
  background-color: #ebe0d4;
  color: rgb(107 114 128);
}