@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Averia+Serif+Libre:ital,wght@0,300;0,700;1,300;1,400;1,700&display=block');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower:wght@400&display=block');
@import url('https://fonts.googleapis.com/css2?family=Raleway&family=EB+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mynerve&display=block');
:root
{
  --colour: #000000 !IMPORTANT;
  --font: "Raleway"!important;
}

@page
{
  size: letter !important;
  margin: 0;
}
@media print
{
	html, body
	{
		width: 8.5in;
		height: 11in;
		margin: 0;
		padding: 0;
	}
	.page
	{
		width: 8.5in;
		height: 11in;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	.no-print
	{
		display: none !important;
	}
}

.page
{
	background: url("background.jpg");
	background-size: cover;
	position: relative;
	width: 8.5in;
	height: 11in;
	margin: 1cm calc(50% - 105mm) auto calc(50% - 105mm);
	border: 1px #D3D3D3 solid;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
//	overflow: hidden;
	box-sizing: border-box;
//	transition: margin 0.5s ease;
	padding: 1cm;
}
.page.printer-friendly
{
	background: white;
}
html
{
	font-family: 'Averia Serif Libre';
	font-size: 8pt;
}
//div
//{
//	border-radius: 4pt;
//}
input, textarea
{
	color: var(--colour);
	background: none;
	overflow: visible;
	
	font-family: var(--font);
	font-weight: 600;
}
.tooltip
{
	display: block !important;
	width: 512px !important;
	color: black;
	border: 0 !important;
	position: absolute;
	background: none;
	font-size: 10pt !important;
	font-family: 'Averia Serif Libre' !important;
	margin: 0 !important;
	padding: 0 !important;
	left: calc(100% + 16px);
	top: -2px;
	overflow: visible !important;
	transform: translate(0, 50%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	z-index: 2 !important;
}
.tooltip .material-symbols-outlined
{
	position: absolute;
	font-size: 13pt;
	left: -16px;
}
.show-tooltip:hover .tooltip
{
	opacity: 1 !important;
	transition: opacity 0.5s;
}
.tooltip-container
{
	position: absolute !important;
	display: inline-block !important;
	width: 16px !important;
	border: 0 !important;
}

#menu
{
	position: fixed;
	left: -8px;
	border-radius: 5px;
	border: 1px solid #0007;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	width: 52px;
}
#menu div
{
	display: block;
	margin: 16px 8px 16px 16px;
	border: 0;
	background: none;
	font-family: 'Material Symbols Outlined';
	font-weight: 800;
	font-style: normal;
	font-size: 24px;
	cursor: pointer;
}
#instructions
{
	all: unset;
	
	position: fixed;
	margin: 0;
	padding: 8px;
	padding-left: 16px;
//	left: 50vw;
//	top: 0px;	
//	width: 256px;
	left: -4px;
	top: 350px;
	font-size: 10pt;
//	text-align: center;
//	transform: translate(-50%, 0);
	background: white;
	border-radius: 5px;
	border: 1px solid #0007;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	transition: transform 0.4s;
	z-index: 2;
}
#instructions.hidden
{
	transform: translate(-100%, 0);
	transition: transform 0.4s;
}
#save
{
	position: relative;
	width: 38px;
    font-variation-settings: 'FILL' 1;
}
#show-instructions
{
	position: relative;
	width: 38px;
}
#printer-friendly
{
	position: relative;
	width: 38px;
}
#printer-friendly div
{
  font-family: 'Material Symbols Outlined';
  font-weight: 800;
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
#printer-friendly input[type=checkbox]
{
	all: unset;
	width: 0;
	height: 0;
}
#printer-friendly input[type=checkbox]:not(:checked):after
{
	content: "humidity_high";
}
#printer-friendly input[type=checkbox]:checked:after
{
	content: "format_color_reset";
}
#show-player-aid
{
	position: relative;
	width: 38px;
}
#show-player-aid div
{
  font-family: 'Material Symbols Outlined';
  font-weight: 800;
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
#show-player-aid input[type=checkbox]
{
	all: unset;
	width: 0;
	height: 0;
    font-weight: normal;
}
#show-player-aid input[type=checkbox]:not(:checked):after
{
	content: "subtitles_off";
}
#show-player-aid input[type=checkbox]:checked:after
{
	content: "subtitles";
}
#font-selection
{
	position: relative;
	width: 38px;
}
#menu #font-list
{
	display: none;
	position: absolute;
	left: 24px;
	transform: translate(0, -50%);
	z-index: 6;
}
#menu #font-list.visible
{
	display: block;
}
#font-list select
{
	font-size: 16px;
	padding: 4px 8px;
	border: 2px solid black;
	border-radius: 6px;
}
#colour-selection
{
	position: relative;
	width: 38px;
	height: 22px;
	padding-top: 4px;
}
#colour-selection input[type=color]
{
	width: 0;
	height: 0;
	padding: 0;
	border: 0;
	visibility: hidden;
}
#colour-selection input[type=color]:before
{
	visibility: visible;
	display: block;
	width: 16px;
	height: 16px;
	margin-left: 3px;
	border: 2px solid black;
	border-radius: 24px;
	background: var(--colour);
	content: " ";
	cursor: pointer;
}

#modal-bg
{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff7;
	z-index: 20;
	left: 0;
	top: 0;
	backdrop-filter: blur(2px);
	display: none;
}
.no-click
{
	pointer-events: none;
}

#character input[type=text]
{
	border: 0;
	margin-right: 8pt;
	width: 100%;
	box-sizing: border-box;
	font-size: 11pt;
	background: none;
	transform: translate(0, 1pt);
}
#character div
{
	height: 14pt;
	border-bottom: 1pt solid black;
	width: 100%;
	background: none;
}
div.input
{
	display: flex !important;
	border: 0 !important;
}
#character #character-name
{
	font-size: 13pt;
	transform: translate(0, -1pt);
	box-sizing: border-box;
}
#character label
{
	float: left;
	padding-top: 4pt;
	padding-right: 2mm;
}
#character
{
	margin-bottom: 0.5cm;
	float: left;
}
#character table
{
	width: 11.5cm;
}
#logo
{
	position: relative;
	float: right;
	top: -0.1cm;
}
#logo img
{
	width: 7cm;
}
#abilities
{
	float: left;
	height: calc(3.64cm + 2pt);
}
#abilities table
{
	border-collapse: collapse;
}
#abilities > table
{
	width: 11.3cm;
	box-sizing: border-box;
	height: 100%;
}
#abilities > table > tbody > tr > td
{
	height: 14.5pt;
}
#abilities > table > tbody > tr > td > table tr:nth-child(2) td
{
	height: 8.9pt;
}
#abilities table td
{
	margin: 0;
	padding: 0;
	vertical-align: top;
}
#abilities > table > tbody > tr > td:nth-child(1)
{
	border: 1pt solid black;
}
#abilities > table > tbody > tr > td:nth-child(3)
{
	border: 1pt solid black;
}
#abilities > table > tbody > tr > td:nth-child(1) input
{
	width: 1.0cm;
	border: 0;
	text-align: center;
	height: 14.5pt;
	font-size: 15pt;
	transform: translate(0, 1pt);
}
#abilities > table > tbody > tr > td:nth-child(2)
{
	padding: 0 2mm;
	overflow: hidden;
	transform: translate(0, 0.8mm);
}
#abilities table table
{
	font-size: 6pt;
	height: 100%;
	border: 0;
	width: 100%;
}
#abilities table table tr
{
	border: 0;
	text-align: center;
	overflow: hidden;
}
#abilities table table tr td:nth-child(1)
{
	text-align: left;
	padding-left: 0.2mm;
}
#abilities table table tr td:last-child
{
	text-align: right;
	padding-right: 0.2mm;
}
#abilities table table input
{
	border: 0;
	text-align: center;
	font-size: 9pt;
	width: 99%;
//	box-sizing: border-box;
	height: 8.9pt;
}
#abilities table table tr td:nth-child(1) input
{
	text-align: left;
	padding-left: 1mm;
}
#abilities table table tr td:last-child input
{
	text-align: right;
	padding-right: 1mm;
}
#abilities table tr:nth-child(4) table tr td:last-child
{
	width: 2.1cm;
}
#movement
{
	float: left;
	font-size: 6.5pt;
	margin: 0 3mm;
	height: 3.64cm;
	border: 1pt solid black;
}
#movement table
{
	border-collapse: collapse;
	margin: 0 2mm;
	width: 3cm;
	overflow: hidden;
	height: 100%;
}
#movement input
{
	font-size: 10pt;
	text-align: center;
//	box-sizing: border-box;
	height: 6pt;
//	display: none;
}
#movement #base-movement
{
	border: 1pt solid black;
	width: 1cm;
	height: 4mm;
	font-size: 10pt;
}
#movement td:nth-child(3)
{
	width: 	0;
	height: 8pt;
}
#movement td:nth-child(2) input
{
	border: 0;
	width: 0.7cm;
	height: 8pt;
	font-size: 6pt;
}
#movement td:nth-child(3) input
{
	border: 0;
	border-bottom: 1pt solid black;
	width: 1cm;
	height: 6pt;
	margin: 0;
}
#saving-throws
{
	float: right;
	border: 1pt solid black;
	font-size: 6.2pt;
	text-align: center;
	height: 3.64cm;
}
#saving-throws input
{
	font-size: 12pt;
	text-align: center;
	box-sizing: border-box;
	margin: 0 1mm;
	border: 0;
	border-bottom: 1pt solid black;
	width: 0.8cm;
	height: 14.75pt;
}
#saving-throws table
{
	border-collapse: collapse;
	height: 100%;
}
#saving-throws td
{
	vertical-align: bottom;
}
#ac
{
	float: left;
	border: 1pt solid black;
	font-size: 6.5pt;
	margin-top: 0.5cm;
	width: 11.2cm;
	height: 2.5cm;
}
#ac table
{
	width: 100%;	
}
#ac input[type=text]
{
	border: 0;
//	border-bottom: 1pt solid black;
//	margin-right: 8pt;
	width: 100%;
	box-sizing: border-box;
	font-size: 8pt;
//	height: 11pt;
	background: none;
	transform: translate(0, 1pt);
}
#ac div
{
	height: 11pt;
	border-bottom: 1pt solid black;
	width: 100%;
	background: none;
}
#ac span
{
	display: block;
	overflow: hidden;
//	padding: 0 4px;
}
#ac label
{
	float: left;
	padding-top: 4pt;
	margin-right: 1mm;
}
#ac .shield
{
	vertical-align: top;
	text-align: center;
	background: url("shield.svg") no-repeat 50% -75%/2cm;
	width: 2cm;
}
#ac .shield input
{
	display: block;
	border: 0;
	background: none;
	position: relative;
	left: 50%;
	top: 0.75cm;
	width: 1cm;
	font-size: 20pt;
	height: 20pt;
	text-align: center;
	transform: translate(-50%, -42%);
}
#ac tr:nth-child(1n+2) td:nth-child(1)
{
	text-align: right;
	padding-right: 2mm;
}
#ac tr:nth-child(1n+2) td:nth-child(1) input
{
	text-align: right;
}
#ac tr:nth-child(1n+2) td:last-child input
{
	width: 7cm;
	padding-left: 2mm;
	text-align: unset;
}
#hp
{
	float: right;
	border: 1pt solid black;
	font-size: 6.5pt;
	margin-top: 0.5cm;
	width: 7.13cm;
	height: 2.5cm;
}
#hp table
{
	border-collapse: collapse;
	height: 100%;
}
#hp tr
{
	vertical-align: top;
}
#hp td
{
	padding: 0.5mm 2mm;
}
#hp td:nth-child(1)
{
	border-right: 1pt solid black;
	text-align: center;
}
#hp td:last-child
{
	width: 100%;
}
#hp input
{
	width: 1.5cm;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	font-size: 24pt;
	border: 0;
	padding-bottom: 4mm;
}
#hp textarea
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 0;
	resize: none;
	font-size: 12pt;
}
#weapons
{
	float: left;
	width: 100%;
	margin-top: 0.5cm;
}
#weapons table
{
	width: 100%;
	border-collapse: collapse;
}
#weapons td
{
	border: 1pt solid black;
	text-align: center;
	height: 9.5pt;
}
#weapons th
{
//	font-weight: normal;
}
#weapons td:nth-child(1)
{
	text-align: left;
}
#weapons th:nth-child(1)
{
	text-align: left;
}
#weapons td:nth-child(1)
{
	width: 3cm;
}
#weapons td:nth-child(3)
{
	width: 3cm;
}
#weapons td:nth-child(5)
{
	width: 3cm;
}
#weapons td:nth-child(6)
{
	width: 3cm;
}
#weapons input[type=text]
{
	box-sizing: border-box;
	font-size: 10pt;
//	height: 11pt;
	width: 100%;
	border: 0;
	text-align: center;
	transform: translate(0, -0.5mm);
}
#weapons td:nth-child(1) input[type=text]
{
	text-align: left;
	transform: unset;
}
#weapons td:nth-child(3) input[type=text]
{
	width: 1.2cm;
	margin: 0 1mm;
}
#weapons td:nth-child(5) input[type=text]
{
	width: 1.2cm;
	margin: 0 1mm;
}
#weapons div
{
	display: block;
	height: 11pt;
	border: 0;
	padding: 0;
}
#thieving
{
	float: left;
	width: 100%;
	margin-top: 0.5cm;
}
#thieving table
{
	width: 100%;
	border-collapse: collapse;
}
//#thieving tr:nth-child(1)
//{
//	border: 1pt dotted #0007;
//}
#thieving td
{
	text-align: center;
}
#thieving input
{
	display: inline;
	width: 1.8cm;
	height: 0.6cm;
//	border-radius: 1cm;
	box-sizing: border-box;
	font-size: 14pt;
	border: 0;
	border-bottom: 1pt solid black;
	text-align: center;
	margin-left: 1mm;
}
#thieving tr:nth-child(1) input
{
	border-bottom: 1pt dotted black;
}
#turning
{
	float: left;
	width: 100%;
	margin-top: 0.5cm;
}
#turning table
{
	width: 100%;
	border-collapse: collapse;
}
#turning td
{
	text-align: center;
	vertical-align: top;
}
#turning input
{
	display: inline;
	width: 1.2cm;
	height: 0.6cm;
//	border-radius: 1cm;
	box-sizing: border-box;
	font-size: 16pt;
	border: 0;
	border-bottom: 1pt solid black;
	text-align: center;
	margin-left: 1mm;
}
#spells
{
	float: left;
	width: 100%;
	margin-top: 0.5cm;
}
#spells table
{
	width: 100%;
	border-collapse: collapse;
}
#spells td
{
	text-align: center;
	vertical-align: top;
}
#spells input
{
	display: inline;
	width: 1.2cm;
	height: 0.6cm;
//	border-radius: 1cm;
	box-sizing: border-box;
	font-size: 16pt;
	border: 0;
	border-bottom: 1pt solid black;
	text-align: center;
	margin-left: 1mm;
}
#special-abilities
{
	float: left;
	width: 49%;
	margin-top: 0.5cm;
	border: 1pt solid black;
	height: 3.5cm;
}
#special-abilities input
{
	border: 0;
	width: 4.3cm;
//	height: 8pt;
	margin: 0;
	box-sizing: border-box;
	transform: translate(0, -1pt);
}
#special-abilities div
{
	display: block;
	border-bottom: 1pt solid black;
	height: 11pt;
	padding: 0;
	vertical-align: top;
}
#special-abilities table
{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
#special-abilities td
{
	padding: 0 1mm;
	height: 9.5pt;
}
#special-abilities td:last-child
{
	text-align: right;
}
#proficiencies
{
	float: right;
	width: 49%;
	margin-top: 0.5cm;
	border: 1pt solid black;
	height: 3.5cm;
}
#proficiencies input
{
	border: 0;
	width: 1cm;
	margin: 0;
	background: none;
	box-sizing: border-box;
	transform: translate(0, 1pt);
}
#proficiencies div
{
	display: block;
	border-bottom: 1pt solid black;
	height: 11pt;
	padding: 0;
	margin: 0 0.5mm;
	vertical-align: top;
}
#proficiencies span
{
	display: inline-block;
	margin: 0;
	padding: 0;
	transform: translate(0, -2pt);
}
#proficiencies table
{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
#proficiencies td
{
	padding: 0 1mm;
	height: 9.5pt;
}
#proficiencies td:last-child
{
	text-align: right;
}
#proficiencies td input:nth-child(1)
{
	width: 2.8cm;
}
#proficiencies td input:nth-child(2)
{
	width: 0.6cm;
	text-align: center;
	font-size: 8.5pt;
}
#proficiencies td input:nth-child(3)
{
	width: 0.6cm;
	text-align: center;
}
#proficiencies td:nth-child(2) input:nth-child(1)
{
	width: 4.2cm;
}
#xp
{
	float: left;
	border: 1pt solid black;
	font-size: 6.5pt;
	margin-top: 0.5cm;
	width: 49%;
	height: 2.6cm;
}
#xp table
{
	border-collapse: collapse;
	height: 100%;
	width: 100%;
}
#xp th
{
	font-size: 8pt;
	height: 0;
}
#xp tr
{
	vertical-align: top;
}
#xp td
{
	padding: 0.5mm 2mm;
}
#xp #total-xp
{
	width: 100%;
	height: 1.5cm;
	box-sizing: border-box;
	text-align: center;
	font-size: 24pt;
	border: 0;
}
#xp input
{
	border: 0;
	border-bottom: 1pt solid black;
	width: 100%;
	box-sizing: border-box;
	font-size: 12pt;
	height: 12pt;
}
#xp span
{
	display: block;
	overflow: hidden;
}
#xp label
{
	float: left;
	padding-top: 4pt;
	margin-right: 1mm;
}
#xp td:nth-child(2)
{
	width: 1.7cm;
}
#xp td:nth-child(2) input
{
	text-align: center;
}
#money
{
	float: right;
	border: 1pt solid black;
	font-size: 6.5pt;
	margin-top: 0.5cm;
	width: 49%;
	height: 2.6cm;
}
#money table
{
	border-collapse: collapse;
	height: 100%;
	width: 100%;
}
#money td:nth-child(1), #money th:nth-child(1)
{
	border-right: 1pt solid black;
	text-align: center;
	width: 2cm;
}
#money tr
{
	vertical-align: top;
}
#money td
{
	padding: 0.5mm 2mm;
}
#money th
{
	font-size: 8pt;
	height: 0;
}
#money input
{
	border: 0;
	border-bottom: 1pt solid black;
	width: 100%;
	box-sizing: border-box;
	font-size: 12pt;
	height: 12pt;
	text-align: center;
}
#money span
{
	display: block;
	overflow: hidden;
}
#money label
{
	float: left;
	padding-top: 4pt;
	margin-right: 1mm;
}
#money textarea
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 0;
	resize: none;
	font-size: 12pt;
}
#gear
{
//	float: left;
    display: inline-block;
	width: 49%;
	margin-top: 0.5cm;
	height: 9.5cm;
}
#gear table
{
	width: 100%;
	border-collapse: collapse;
	height: 100%;
}
#gear tbody
{
	border: 1pt solid black;
}
#gear td
{
	border: 0;
	text-align: center;
	height: 9.5pt;
	padding: 0 1mm;
}
#gear tr:not(:last-child) td:nth-child(2)
{
	width: 30%;
}
#gear td:nth-child(3)
{
	width: 10%;
}
#gear div
{
	width: 100%;
}
#gear input[type=text]
{
	box-sizing: border-box;
	font-size: 10pt;
	width: 100%;
	border: 0;
	text-align: center;
	transform: translate(0, -1pt);
}
#gear td:nth-child(1) input[type=text]
{
	text-align: left;
}
#gear div
{
	display: block;
	height: 11pt;
	border: 0;
	padding: 0;
	border-bottom: 1pt solid black;
}
#gear tr:last-child td
{
//	padding-top: 1mm;
	text-align: left;
	height: 14pt;
	line-height: 14pt;
	overflow: hidden;
}
#gear th
{
	height: 0;
}
#gear-total-weight
{
	color: var(--colour);
	background: none;
	overflow: visible;
	font-family: var(--font);
	font-weight: 600;
	font-size: 10pt;
	text-align: center !important;
}
#notes
{
	float: right;
	margin-top: 0.5cm;
	width: 49%;
	height: 9.5cm;
}
#notes table
{
	border-collapse: collapse;
	height: 100%;
	width: 100%;
}
#notes tr
{
	vertical-align: top;
}
#notes td
{
	padding: 0.5mm 2mm;
	border: 1pt solid black;
}
#notes textarea
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 0;
	resize: none;
	font-size: 10pt;
}
#spell-list
{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 0.5cm;
	height: 9.7cm;
}
#spell-list table
{
	width: 100%;
	border-collapse: collapse;
	height: 100%;
	table-layout: fixed;
//	border: 1pt solid black;
}
#spell-list th
{
	height: 0;
	padding-bottom: 2mm;
}
#spell-list tbody
{
	border: 1pt solid black;
}
#spell-list tr:nth-child(2) th:nth-child(2n+1)
{
	text-align: left;	
	padding-left: 2mm;
}
#spell-list tr:nth-child(2) th:nth-child(2n+2)
{
	text-align: right;	
	padding-right: 2mm;
}
#spell-list td
{
	border: 0;
	text-align: center;
	height: 9.5pt;
	padding: 0 1mm;
}
#spell-list col:nth-child(7n+4), #spell-list col:nth-child(7n+5), #spell-list col:nth-child(7n+6), #spell-list col:nth-child(7n+7)
{
	width: 5mm;
}
#spell-list col:nth-child(7n+2), #spell-list col:nth-child(7n+3)
{
	width: 7mm;
}
#spell-list td:nth-child(7n+2) input, #spell-list td:nth-child(7n+3) input
{
	text-align: center;
}
#spell-list td:nth-child(7n+4) div
{
	border: 0;
}
#spell-list td input[type=checkbox]
{
	width: 0;
}
#spell-list td:nth-child(7n+4) input[type=checkbox]:not(:checked):before
{
	left: 0;
	display: block;
	content: ' ';
	width: 4pt;
	height: 4pt;
	border: 1pt solid black;
	border-radius: 6pt;
	cursor: pointer;
	transform: translate(-50%, 4pt);
}
#spell-list td:nth-child(7n+4) input[type=checkbox]:checked:after
{
	position: relative;
	top: 0;
	display: block;
	background: black;
	content: ' ';
	width: 4pt;
	height: 4pt;
	border: 1pt solid black;
	border-radius: 6pt;
	cursor: pointer;
	transform: translate(-50%, 4pt);
}
#spell-list :is(td:nth-child(7n+5), td:nth-child(7n+6), td:nth-child(7n+7)) input[type=checkbox]:not(:checked):before
{
	display: block;
	content: ' ';
	width: 6pt;
	height: 6pt;
//	border: 1pt solid black;
	cursor: pointer;
	transform: translate(0, 3pt);
}
#spell-list :is(td:nth-child(7n+5), td:nth-child(7n+6), td:nth-child(7n+7)) input[type=checkbox]:checked:after
{
	position: relative;
	top: 0;
	display: block;
	width: 6pt;
	height: 6pt;
	cursor: pointer;
	transform: translate(2pt, 0);
}
#spell-list td:nth-child(7n+5) input[type=checkbox]:checked:after
{
	content: 'V';
}
#spell-list td:nth-child(7n+6) input[type=checkbox]:checked:after
{
	content: 'S';
}
#spell-list td:nth-child(7n+7) input[type=checkbox]:checked:after
{
	content: 'M';
}
#spell-list tr:first-child td
{
	padding-top: 4mm;
}
#spell-list tr:last-child div
{
	border: 0;
}
#spell-list input[type=text]
{
	box-sizing: border-box;
	font-size: 10pt;
	height: 15pt;
	width: 100%;
	border: 0;
	text-align: left;
}
#spell-list div
{
	display: flex;
	height: 11pt;
	border: 0;
	padding: 0;
	border-bottom: 1pt solid black;
}
#spell-list.play div
{
	cursor: pointer;
}
#spell-list.play div:hover input
{
	color: red;
}
#spell-list.play X:hover
{
	color: red;
}
#spell-list.play div input[type=text]
{
	pointer-events: none;
}
#spell-list input[type=checkbox]
{
	height: 8pt;
	margin: 0;
}
//#spell-list span:not(.material-symbols-outlined)
//{
//	color: var(--colour);
//	background: none;
//	overflow: visible;
//	
//	font-family: var(--font);
//	font-weight: 600;
//
//	box-sizing: border-box;
//	font-size: 10pt;
//	height: 15pt;
//	width: 100%;
//	border: 0;
//	text-align: left;
//}
#spell-list label
{
	cursor: pointer;
}
X
{
	font-family: 'Material Symbols Outlined';
	font-weight: 800;
	font-style: normal;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
}
X:before
{
	content: 'close';
	line-height: 14pt;
}
#spell-list-edit
{
	position: absolute;
	top: 12px;
	left: 0px;
//	border: 1px solid black;
	border: 0;
//	display: none;
	width: 0;
	height: 0;
}
#spell-list-edit:after
{
	position: absolute;
	color: black;
	font-weight: normal;
	font-family: 'Material Symbols Outlined';
	content: "play_arrow";
	top: -6px;
	left: 2px;
	width: 12px;
	height: 12px;
	cursor: pointer;
}
#spell-list-edit:checked:after
{
	content: "edit";
}
#player-aid
{
    font-family: "Mynerve";
    color: #00a;
}
#help-saving-throws
{
    position: absolute;
    text-align: center;
    transform: rotate(90deg);
    right: -26pt;
    top: 135pt;
}
#help-ac
{
    position: absolute;
    text-align: center;
    transform: rotate(-90deg);
    left: -22pt;
    top: 240pt;
}
#help-thac0
{
    position: absolute;
    text-align: center;
    left: 210pt;
    top: 290pt;
}
#help-turning
{
    position: absolute;
    text-align: center;
    transform: rotate(-90deg);
    left: -6pt;
    top: 475pt;
}
#help-ability-checks
{
    position: absolute;
    text-align: center;
    transform: rotate(-90deg);
    left: 0pt;
    top: 147pt;
}
#portrait
{
    position: absolute;
    display: block;
    right: 1cm;
    top: 11cm;
    height: 4cm;
    aspect-ratio: 1;
	transform: translate(0%, -100%);
    mix-blend-mode: multiply;
}
#portrait img
{
    display: none;
    width: 100%;
    height: 100%;
}
#portrait #edit-image:before
{
    font-family: 'Material Symbols Outlined';
    font-weight: 800;
    font-style: normal;
	font-size: 16px;
	color: black;
	content: "\f044";
	width: 32px;
	height: 32px;
	position: absolute;
	left: 8px;
	top: 8px;
	text-align: center;
	line-height: 32px;
	background: white;
	border-radius: 5px;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: color 0.1s, opacity 0.2s;
	z-index: 10;
	opacity: 0;
}
#portrait:hover #edit-image:before
{
	display: block;
	opacity: 0.5;
	content: "edit";
}
#portrait:hover #edit-image:hover:before
{
	color: #28c8;
	opacity: 1.0;
}
#url-modal
{
	padding: 8px;
	left: 50%;
	top: 50%;
}
.modal
{
	position: fixed;
	width: 256px;
	z-index: 30;
	background: white;
	border-radius: 5px;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
	display: none;
	transform: translate(-50%, -50%);
}
.modal input
{
	width: 100%;
	font-family: 'Averia Serif Libre';
}
#help-portrait
{
    position: absolute;
    text-align: left;
    right: -12pt;
    top: 9cm;
	transform: translate(100%, -50%);
}