body {
	font-size: large;
	font-family: georgia, serif;
	color: #660000; /* A darker maroon */
	background-color: cornsilk;
}

h1 {
	color: red;
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.5em;
	clear: both;
	width: 6in;
}

h5 {
	font-size: large;
	font-weight: bold;
	font-style: italic;
	margin: 0.5em 0 0 0;
}

h6 {
	font-size: large;
	font-weight: normal;
	font-style: italic;
	margin: 0.5em 0 0 0;
}

p {
	text-indent: 0.25in;
	margin: 0;
	margin-bottom: 5px;
	padding: 0;
	width: 6in;
	clear: both;
	hyphens: auto;
}
p:first-child {
	margin-top: 0.5em;
	text-indent: 0;
}

ol {
	margin: 5px 0 5px 0;
}

kbd {
	font-size: 120%;
	color: black;
}

/* Repurpose the <dfn> tag to give low-contrast emojis a dark halo */
dfn {
	font-style: normal; /* Strips the default browser italicization */
	display: inline;    /* Forces it to flow exactly like a normal letter */
	line-height: 1;
	margin: 0;
	/* The Glow Hack: Creates a crisp 360-degree dark silhouette */
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.7);
}

.mlab-btn {
    /* Tells the browser to match the exact font size of the surrounding text */
    font-size: 1em; 
    font-weight: inherit;
    line-height: inherit;
    
    /* Keeps your custom styling clean and interactive */
    cursor: pointer;
    /* margin-left: 8px; */
    color: #7A0000; /* Or whatever signature color you chose */
    display: inline-block;
    vertical-align: middle;
}
/* Optional: Keep a crisp hover transition scaled to the new size */
.mlab-btn:hover {
    color: #e6b800;
    transform: scale(1.1);
}

.drop {
	text-indent: initial;
	margin-top: 0.5em;
}
.drop:first-letter { /* Does a fancy drop cap on the first letter of the paragraph */
    font-size: 4em; /* Adjust size as needed */
    float: left;    /* Aligns the letter to the left */
    line-height: 1; /* Adjusts line height */
    margin: -0.1em 0.1em -0.1em 0; /* Space between the drop cap and text */
	vertical-align: top; /* Aligns with the top of the text */
	color: red;
	/* font-weight: bold; */
	text-shadow: maroon .03em .03em;
	}

em { /* co-opt the little-used <em> tag to do a different sort of emphasis than italicization */
	color: black;
	font-style: normal;
}

.right {
	text-align: right;
}

.cent {
	text-align: center;
}

.blue {
	color: blue;
}

.red {
	color: red;
}

.teal {
	color: teal;
}

.cmd {
	color: white;
	background-color: navy;
	font-family: helvetica, sans-serif;
	font-weight: bold;
}

.inv {
	color: transparent;
}

.most { /* Use when a lot of emphasis is needed */
	font-weight: bold;
	color: red;
}

.nomar {
	margin: 0;
}

.nobmar {
	margin-bottom: 0;
}

.fn {
	display: grid;
	/* Adjust '2em' based on how much space your numbers need */
	grid-template-columns: 0.75em 1fr; 
	/* line-height: 1.5; */
	margin-bottom: 0.5em;
}

.fn-char {
	/* Superscript styling */
	vertical-align: super;
	color: blue;
	font-family: helvetica, sans-serif;
	font-weight: bold;
	font-size: x-small;
	padding-right: 2px;
	/* Keeps the number aligned to the top-left of the grid cell */
	align-self: start;
}

.fn-txt {
	/* This will naturally stay in the second column */
}

ol.super {
    counter-reset: item;
    padding: 0;
	margin: 0;
    list-style: none;
    }
	
    .super li:before{
    	content: counter(item) "";
        counter-increment: item;
    	position: absolute;	
    	vertical-align: super;
		color: blue;
		font-family: helvetica, sans-serif;
		font-weight: bold;
    	font-size: small;
		word-wrap: break-word;
    	left: 0em;
    }
   
    .super li{
	   	position: relative;
    	display: block;
    	padding: .0em .0em .0em 0.5em;
		text-align: left;
    }

/* Unified Hanging Indent List - Tightened Layout */
ol.hi {
    padding: 0;
    margin: 0 0 0 1.2em;    /* This is the indent for the entire <ol> */
    list-style: none;       
    counter-reset: item;    
    width: 5.5in;
}
ol.hi > li {
    position: relative;
    padding-left: 1.2em;    /* This is the gap between the digit and the text */
    margin-bottom: 5px;     
    text-align: left;
    hyphens: auto;
}
/* Injects the raw digit perfectly flush inside the new 0.8em channel */
ol.hi > li::before {
    content: counter(item) ""; 
    counter-increment: item;   
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}
/* OVERRIDE: Neutralizes global <p> styles for multi-power/spell entries */
ol.hi > li > p {
    text-indent: 0;
    width: auto;
    clear: none;
    margin: 0;
    margin-top: 2px;
    padding: 0;
}

li {
	font-size: large;
	width: 6in;
    text-align: left;
}

ul.rtar {
	list-style-type: none;
	padding-left: 25px;
}
ul.rtar li::before {
    content: "\25BA";
    font-weight: bold;
    display: inline-block;
    width: 20px;
    margin-left: -20px;
}

ul.ast {
    list-style-type: none;
    padding-left: 25px;
}
ul.ast li:first-child::before {
    content: "*";
    font-weight: bold;
    display: inline-block;
    width: 15px;
    margin-left: -15px;
}
ul.ast li:nth-child(2)::before {
    content: "**";
    font-weight: bold;
    display: inline-block;
    width: 25px;
    margin-left: -25px;
}
ul.ast li:nth-child(3)::before {
    content: "†";
    font-weight: bold;
    display: inline-block;
    width: 15px;
    margin-left: -15px;
}
ul.ast li:nth-child(4)::before {
    content: "‡";
    font-weight: bold;
    display: inline-block;
    width: 15px;
    margin-left: -15px;
}

ul.qsrc {
	list-style: none;
	padding-left: 1em;
	position: relative;
	margin-left: 0px;
}

ul.qsrc li {
	max-width: 3in;
	padding-left: 3in;
}

ul.qsrc li:before {
	content: "—";
	position: absolute;
	left: 3in;
}

div.mantle {
  margin-left: 0;
  padding-left: 0;
  max-width: 600px;
  width: 100%;
}
div.mantle > div {
  display: grid;
  grid-template-columns: 1.2em 1fr; 
  gap: 0.2em;
  margin-bottom: 5px;
}
/* Boldfaces the level number column automatically */
div.mantle > div > span:first-child {
  font-weight: bold;
}

sup {
	font-size: x-small;
	padding-left: 1px;
	font-family: helvetica, sans-serif;
	font-weight: bold;
	color: blue;
}

sup.reg {
	font-size: small;
	font-family: georgia, serif;
	font-weight: normal;
	color: #660000; /* A darker maroon */
}

a {
	color: magenta;
	text-decoration: none;
}

/* visited link 
a:visited {
  color: green;
}*/

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

s {
  text-decoration: line-through black solid 5px;
}

.box {
	background-color: bisque;
	max-width: 5.5in;
	border: 5px solid darkkhaki;
	padding: 10px;
	margin: 20px;
}

.box p {
	width: 5.5in;
}

table.plain { /* For when a striped table is not wanted */
	margins: 0;
	padding: 0;
	border-spacing: 0;
}

table.plain td {
	text-align: left;
	font-family: helvetica, sans-serif;
}

table.plain tr {
	background: transparent;
}

table { /* standard striped table */
	border-collapse: collapse;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
table.center {
	margin-left: auto;
	margin-right: auto;
}
caption {
	margin-bottom: 0.5em;
	text-align: left;
	font-weight: bold;
	font-size: large;
}
tr:nth-child(even) {
	background-color: khaki;
}
thead {
	position: sticky;
	top: 0;
	background: cornsilk;
	inset-block-start: 0;
}
tfoot {
	position: sticky;
	bottom: 0;
	background: cornsilk;
	inset-block-end: 0;
}
th {
	text-align: center;
	vertical-align: bottom;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
}
td {
	text-align: center;
	padding: 2px;
	padding-right: 10px;
	vertical-align: top;
}
@media (min-width: 992px) {
  /* Keeps the tfoot detectable by IntersectionObserver without disrupting table layout */
  tfoot.split-foot {
    display: table-footer-group !important;
    height: 1px !important;
    line-height: 0 !important;
    font-size: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  tfoot.split-foot * {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}

figure {
	/* border: 1px #cccccc solid; */
	/* padding: 4px; */
	margin: auto;
	width: 600px;
}

figcaption {
	/* background-color: black; */
	/* color: white; */
	font-size: medium;
	font-style: italic;
	/* padding: 2px; */
	text-align: center;
}

aside {
	width: 250px;
	padding: 0 15px 0 15px;
	margin: 0 15px 0 15px;
	float: right;
	font-size: medium;
	background-color: khaki;
}

ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* text squishing tests */
/* Base class to handle the display requirements for all squish levels */
[class^="squish"] {
    display: inline-block;
    transform-origin: left;
    white-space: nowrap; /* Prevents the squished text from wrapping internally */
}

/* .squish1: The Elegant Method (Kerning only) */
.squish1 {
    letter-spacing: -0.05em;
}

/* .squish2: Kerning + 90% Scale */
.squish2 {
    letter-spacing: -0.02em;
    transform: scaleX(0.9);
    margin-right: -0.5em; /* Pulls subsequent text back to close the gap */
}

/* .squish3: Kerning + 80% Scale */
.squish3 {
    letter-spacing: -0.02em;
    transform: scaleX(0.8);
    margin-right: -1.0em;
}

/* .squish4: Kerning + 70% Scale */
.squish4 {
    letter-spacing: -0.01em;
    transform: scaleX(0.7);
    margin-right: -1.5em;
}

/* .squish5: Kerning + 60% Scale (The "High-Pressure" Squish) */
.squish5 {
    transform: scaleX(0.6);
    margin-right: -2.0em;
}
/* end text squishing tests */

.txt2 { /* Two-column text layout */
	column-count: 2;
	column-gap: 36px;
	column-width: 270px;
	max-width: 6in;
	word-wrap: break-word;
}

.txt2 p {
	text-indent: -25px;
	padding: 0 0 0 25px;
	margin: 0;
	width: 270px;
	clear: both;
	hyphens: auto;
}

.txt3 { /* Three-column text layout */
	column-count: 3;
	column-gap: 18px;
	column-width: 180px;
	max-width: 6in;
	word-wrap: break-word;
}

.txt3 p {
	/* font-family: helvetica, sans-serif; */
	text-indent: -25px;
	padding: 0 0 0 25px;
	margin: 0;
	width: 160px;
	clear: both;
	hyphens: auto;
}

.txt3 h2 {
	font-size: large;
	text-align: center;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	page-break-after: avoid;
    break-after: avoid;
	width: 160px;
	clear: both;
	hyphens: none;
	background-color: khaki;
}

.sntxt3 { /* Slightly narrower three-column text layout */
	column-count: 3;
	column-gap: 16px;
	column-width: 170px;
	max-width: 588px;
	word-wrap: break-word;
}

.sntxt3 p {
	/* font-family: helvetica, sans-serif; */
	text-indent: -25px;
	padding: 0 0 0 25px;
	margin: 0;
	width: 160px;
	clear: both;
	hyphens: auto;
}

.sntxt3 h2 {
	font-size: large;
	text-align: center;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	page-break-after: avoid;
    break-after: avoid;
	width: 160px;
	clear: both;
	hyphens: none;
	background-color: khaki;
}

.col-bord td:nth-child(even) {
	border-right: 1px solid #660000;
}

.col1-left td:nth-child(1) {
    text-align: left;
}

.col2-left td:nth-child(2) {
    text-align: left;
}

.col3-left td:nth-child(3) {
    text-align: left;
}

.col4-left td:nth-child(4) {
    text-align: left;
}

.col5-left td:nth-child(5) {
    text-align: left;
}

.col6-left td:nth-child(6) {
    text-align: left;
}
.col7-left td:nth-child(7) {
    text-align: left;
}

.col8-left td:nth-child(8) {
    text-align: left;
}

.col9-left td:nth-child(9) {
    text-align: left;
}

.col10-left td:nth-child(10) {
    text-align: left;
}

.col11-left td:nth-child(11) {
    text-align: left;
}

.col12-left td:nth-child(12) {
    text-align: left;
}

.col1-right td:nth-child(1) {
    text-align: right;
}

.col2-right td:nth-child(2) {
    text-align: right;
}

.col3-right td:nth-child(3) {
    text-align: right;
}

.col4-right td:nth-child(4) {
    text-align: right;
}

.col5-right td:nth-child(5) {
    text-align: right;
}

.col6-right td:nth-child(6) {
    text-align: right;
}

.col7-right td:nth-child(7) {
    text-align: right;
}

.col8-right td:nth-child(8) {
    text-align: right;
}

.col9-right td:nth-child(9) {
    text-align: right;
}

.col10-right td:nth-child(10) {
    text-align: right;
}

.col11-right td:nth-child(11) {
    text-align: right;
}

.col12-right td:nth-child(12) {
    text-align: right;
}

iframe {
	border: 1px solid goldenrod;
	margin: 0;
	padding: 0;
}

.add {
	padding-left: 0.25em;
	border-left: 5px solid green;
}
.add li {
	margin-left: 1em;
}

.hb {
	padding-left: 0.25em;
	border-left: 5px solid purple;
}

.feat {
	padding-left: 0.25em;
	border-left: 10px solid goldenrod;
}
.feat2 {
	padding-left: 0.25em;
	border-left: 30px double goldenrod;
}

.warn {
	padding-left: 0.25em;
	border-left:5px solid red;
}
.warn li {
	margin-left: 1em;
}

.stick {
	position: sticky;
	top: 0;
	background: cornsilk;
}

.rel {
	position: relative;
}

.tleft {
	text-align: left;
}

.tright {
	text-align: right;
}

.ulined {
	margin: 0;
	padding: 0;
	border-bottom-style: solid;
	width: 6in;
	margin-bottom: 0.25em;
}

.ulthin {
	margin: 0;
	padding: 0;
	border-bottom-style: solid;
	border-width: 1px;
	width: 6in;
	margin-bottom: 0.25em;
}

.ulfaint {
	border-bottom-style: dotted;
	border-width: 1px;
}

.olthin {
	margin: 0;
	padding: 0;
	border-top-style: solid;
	border-width: 1px;
	width: 6in;
	margin-top: 0.25em;
}

.stripped {
	border-style: none;
	border-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.left { /* remove indent */
	text-indent: initial;
}

.ind {
	text-indent: 25px;
}

.ind2 {
	text-indent: 50px;
}

.hind { /* hanging indent */
	text-indent: -25px;
	padding-left: 25px;
	margin: 0;
}

.hind2 { /* hanging indent with a bit more */
	text-indent: -25px;
	padding-left: 50px;
	margin: 0;
}

.first { /* Leading paragraphs: remove indent, add top margin */
	text-indent: initial;
	margin-top: 0.5em;
}

.ctxt { /* Color text: remove indent, add top margin, italicize */
	text-indent: initial;
	font-style: italic;
	margin-top: 0.5em;
}

.last { /* add space back to bottom of paragraph */
	margin-bottom: 0.5em;
}

.book { /* used when citing a source */
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 2px;
	padding-left: 0.12em;
	text-indent: initial;
	background-color: lightcyan;
	color: navy;
	border: 1px solid navy;
	border-left: 5px solid navy;
}

.book sup {
	font-size: small;
	font-family: georgia, serif;
	font-weight: normal;
	color: navy;
}

.side { /* used when a "sidebar" is needed */
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 2px;
	padding-left: 0.12em;
	text-indent: initial;
	background-color: mintcream;
	color: navy;
	border: 1px solid turquoise;
	border-left: 5px solid turquoise;
}

.unfin { /* used when giving an "unfinished" warning */
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 2px;
	padding-left: 0.12em;
	text-indent: initial;
	font-size: x-large;
	background-color: #FFCCFF; /* very light pink */
	color: black;
	border: 1px solid red;
	border-left: 5px solid red;
	hyphens: none;
}
/* Example:
<p class="unfin"><b class="smcap">Unfinished:</b> Some elements of this section are missing or incomplete.</p>
*/

.bord { /* used for examples and offsetting from surrounding text */
	border: 1px solid;
	padding: 4px;
	max-width: 6.1in;
}

.code { /* used for code blocks */
	font-family: "Courier New", monospace;
	font-weight: bold;
	text-indent: initial;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid midnightblue;
	padding: 1em;
	background-color: white;
	color: midnightblue;
	width: 600px;
}

.hilit {
	background-color: khaki;
}

.nolit {
	background-color: transparent;
}

/* default background color */
.unlit { 
	background-color: cornsilk;
}

.smcap {
	font-variant: small-caps;
}

.sans {
	font-family: helvetica, sans-serif;
}

.sansb {
	font-family: helvetica, sans-serif;
	font-weight: bold;
}

.form { /* remove indent, add top and bottom margin, boldface */
	text-indent: initial;
	text-align: center;
	font-weight: bold;
	font-family: helvetica, sans-serif;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 600px;
}

/* image class for in-line images like icons*/
img.in {
  height: 1em;
  vertical-align: text-bottom;
}

.btn-norm.btn { /* Used for normal use */
	background-color: #660000; /* A darker maroon */
	border: 2px solid cornsilk;
	border-radius: 12px;
	color: cornsilk;
	font-size: large;
	font-family: georgia, serif;
/*	font-stretch: normal; */
	padding: 3px 3px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition: 0.3s;
	cursor: pointer;
	float: left;
	margin-bottom: 0.5em;
	width: 200px;
}

.btn-norm .btn:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

.btn-norm .btn:hover {
	background-color: red;
}

.btn-slnav .button { /* Used for navigating spells lists */
	background-color: #660000; /* A darker maroon */
	border: 2px solid cornsilk;
	border-radius: 12px;
	color: cornsilk;
	font-size: medium;
	font-family: arial, helvetica, sans-serif;
	font-stretch: condensed;
	padding: 3px 3px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition: 0.3s;
	cursor: pointer;
	float: left;
	margin-bottom: 0.5em;
	width: 40px;
}

.btn-slnav .button:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

.btn-slnav .button:hover {
	background-color: red;
}

.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.clr { /* Use on next style after a button bar. */
	clear: both;
}

/* Spell and magic item statistics block <div> class start */
.smistat {
	width: 6in;
	hyphens: auto;
	text-indent: 0;
	margin: 0;
	padding: 0;
	clear: both;
}

.smistat p {
	text-indent: -0.25in;
	padding-left: 0.25in;
	margin: 0;
}
/* Spell and magic item statistics block <div> class end */

/* Creature statistics block <div> class start */
.statblock {
    width: 605px;
    height: 100%;
    overflow-x: auto;
    border: none;
}

.statblock table {
	table-layout: fixed;
    border-spacing: 0;
}

.statblock th {
    border: none;
    padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0;
	padding-right: 10px;
    width: 390px;
    min-width: 390px;
    position: static;
    top: 0;
    color: #660000; /* A darker maroon */
    font-weight: bold;
	text-align: left;
	vertical-align: bottom;
}

.statblock td {
    border: none;
    padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0;
	padding-right: 10px;
    width: 390px;
    min-width: 390px;
	text-align: left;
	vertical-align: top;
}

.statblock th:nth-child(1), .statblock td:nth-child(1) {
    position: sticky;
    left: 0;
	padding-right: 5px;
    width: 200px;
    min-width: 200px;
	text-align: right;
	vertical-align: top;
	background: cornsilk;
	font-weight: bold;
}

.statblock th[id], td[id] {
	/* This prevents the column from hiding behind the sticky one to the left */
	scroll-margin-inline-start: 205px;
}
/* Creature statistics block <div> class end */

/* XP award block <div> class start */
.xpblock {
    width: 100%;          /* Forces container to stay within screen boundaries */
    max-width: 100%;
    height: 100%;
    overflow-x: auto;     /* Triggers the horizontal scrollbar */
    position: relative;   /* Context box for sticky elements */
    border: none;
}

.xpblock table {
    width: max-content;   /* Forces the table to maintain its full natural width */
    border-spacing: 0;
    /* table-layout: fixed; REMOVED to fix the giant Column 2 issue */
}

.xpblock th {
    border: none;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 0;
    padding-right: 10px;
    color: #660000; 
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
}

.xpblock td {
    border: none;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 0;
    padding-right: 10px;
    text-align: center;
    vertical-align: top;
}

.xpblock td, .xpblock th {
    white-space: nowrap;
}

/* Fixed Character Level Column */
.xpblock th:nth-child(1), .xpblock td:nth-child(1) {
    position: sticky;
    left: 0;
    padding-right: 5px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
    vertical-align: top;
    background: cornsilk;
    font-weight: bold;
    z-index: 2;          /* Keeps it layered above sliding numbers */
}

/* Centering and pinning the spanned CR header */
#CR_Super_Header {
    position: sticky;
    left: 100px;
    background: cornsilk;
    text-align: center;
}

.xpblock th[id], td[id] {
    scroll-margin-inline-start: 105px;
}
/* XP award block <div> class end */

/* .xpblock { */
    /* /* width: 605px; */ */
	/* width: max-content; */
	/* min-width: 100%; */
    /* height: 100%; */
    /* overflow-x: auto; */
    /* border: none; */
/* } */
/* .xpblock table { */
	/* /* width: 605px; */ */
	/* width: max-content; */
	/* table-layout: fixed; */
    /* border-spacing: 0; */
/* } */
/* .xpblock th { */
    /* border: none; */
    /* padding-top: 2px; */
	/* padding-bottom: 2px; */
	/* padding-left: 0; */
	/* padding-right: 10px; */
    /* /* width: 80px; */ */
    /* /* min-width: 8px; */ */
    /* position: static; */
    /* top: 0; */
    /* color: #660000; /* A darker maroon */ */
    /* font-weight: bold; */
	/* text-align: center; */
	/* vertical-align: bottom; */
/* } */
/* .xpblock td { */
    /* border: none; */
    /* padding-top: 2px; */
	/* padding-bottom: 2px; */
	/* padding-left: 0; */
	/* padding-right: 10px; */
	/* /* width: 80px; */ */
	/* /* min-width: 80px; */ */
	/* text-align: center; */
	/* vertical-align: top; */
/* } */
/* .xpblock td, .xpblock th { */
	/* white-space: nowrap; */
/* } */
/* .xpblock th:nth-child(1), .xpblock td:nth-child(1) { */
    /* position: sticky; */
    /* left: 0; */
	/* padding-right: 5px; */
    /* width: 100px; */
    /* min-width: 100px; */
    /* max-width: 100px; */
	/* text-align: center; */
	/* vertical-align: top; */
	/* background: cornsilk; */
	/* font-weight: bold; */
/* } */
/* .xpblock th[id], td[id] { */
	/* /* This prevents the column from hiding behind the sticky one to the left */ */
	/* scroll-margin-inline-start: 105px; */
/* } */

/* Tooltip class start */
.has-tt {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	text-indent: 0;
}
.has-tt .tt-txt {
	visibility: hidden;
	overflow: visible;
	width: 400px;
	background-color: darkblue;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	padding: 5px 5px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 5%;
	margin-left: -5px;
	opacity: 0;
	transition: opacity 0.5s;
}
.has-tt .tt-txt::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 5%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}
.has-tt:hover .tt-txt {
	visibility: visible;
	overflow: visible;
	opacity: 1;
}
/* Tooltip class end */
/* Example use:
Try to hover <span class="has-tt">over me</span><span class="tt-txt">This is the tooltip text.</span>!
 */



/* Index style that makes a collapsed accordion page index: start */
 /* Style the buttons that are used to open and close the accordion panel */
.index {
  background-color: navy;
  color: lightcyan;
  cursor: pointer;
  padding: 3px;
  width: 6in;
  text-align: left;
  border: none;
  outline: none;
  transition: 1s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .index:hover {
  background-color: #green;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: .05in;
  width: 5.9in;
  background-color: snow;
  display: none;
  overflow: hidden;
}
/* When JavaScript appends the "open" class, display it instantly */
.panel.open {
    display: block !important;
}

/* If the screen width is smaller than 768 pixels (like a smartphone in portrait) */
@media screen and (max-width: 768px) {
    #a35-split-container {
        width: 100% !important; /* Take up the full screen width instead of half */
        height: 90vh !important; /* Leave a little room at the top or bottom */
        top: auto !important;
        bottom: 0 !important; /* Slide up from the bottom like a native mobile tray */
        box-shadow: 0 -5px 15px rgba(0,0,0,0.25);
    }
}

/*
Skeleton HTML code needed to have a Page Index:

<button class="index"><b>Click here to show or hide Page Index</b></button>
<div class="panel"><ul>
	<li></li>
</ul></div>

Javascript needed for the Index style to work on a page 

<script>
var acc = document.getElementsByClassName("index");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Index style that makes a collapsed accordion page index: end */