@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Rosarivo:ital@0;1&family=Donegal+One&family=Ewert&family=Rye&family=Kaisei+Opti&family=Smokum&display=swap"); 


.charsheet {
	min-width: 841px;
	max-width: 841px;
}

/* Web code */

input[type=text].circular-input {
	width: 35px;
	height: 35px;
	/* Makes the input circular from https://www.geeksforgeeks.org/how-to-make-an-input-appear-rounded-in-html/ */
	border-radius: 50%;
	border: 1px solid #ccc;
	text-align: center;
}


input[type="radio"]:checked+label{ background-color: khaki; } 

/* From https://stackoverflow.com/questions/75992689/change-the-label-background-color-when-a-checkbox-is-checked */

input[type="checkbox"].emphasis {
  display: none;
  height: 20px; 
  text-align: center;
  font-size: 1.0em !important;
  margin: 0px 0px -4px 0px;
  /*opacity: 0;*/
}

input[type="checkbox"].emphasis:checked + label {
  color: DarkRed;
  height: 20px; 
  text-align: center;
  font-size: 1.1em !important;
  margin: 0px 0px -4px 0px;
}

label.emphasis {
 display: inline-block;
 vertical-align: top;
 border: 0px solid pink;
 text-align: center;
 height: 20px; 
 font-size: 1.0em !important;
 margin: 0px 0px -4px 0px;
}

/* End Web code */

/* Boot Hill Classes */
input[type="text"].item {
 height: 20px;
 text-align: center;
 border: 1px solid black;
 background: transparent;
}
input[type="text"].itnumb {
 width: 63px;
 margin: -2px 0px 0px 0px;
}
input[type="text"].itdesc {
 width: 216px;
 margin: -2px 0px 0px -5px;
}
input[type="text"].itvalu {
 width: 63px;
 margin: -2px 0px 0px -5px;
}
 
input.equip-title, 
label.equip-title {
 box-sizing: border-box;
 font-family: Donegal One;
 font-weight: bold;
 text-align: center;
 width: 70px;
 height: 18px;
 border: 1px solid gray; 
}

label.bio-title {
 box-sizing: border-box;
 font-family:Donegal One;
 font-size: 1.2em !important;
 font-weight: bold; 
 text-align: left; 
 margin: 0px 0px 0px 0px;
}
label.bio40  { width:  40px !important; }
label.bio80  { width:  80px !important; }
label.bio90  { width:  90px !important; }
label.bio100 { width: 100px !important; }
label.bio140 { width: 140px !important; }
label.bio150 { width: 150px !important; }
label.bio170 { width: 170px !important; }

input.bio-data {
 box-sizing: border-box;
 text-align: center;
 border-bottom: 2px solid black;
 background: transparent;
 font-size: 1.2em;
 font-weight: bold;
 margin: 0px 0px 0px 0px;
}


/* End Boot Hill Classes */

.charsheet .sheet-maindiv {
    width: 840px; 
    margin:0px; 
	padding:5px;
	border: 2px solid black;
    background-color: white;
}

.charsheet .sheet-container {
	display: table;
	width: 100%;
	margin-left: 1px;
}

.charsheet .sheet-section {
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
    margin: none;
	width: 99%;
}

.charsheet .sheet-column {
	display: table-cell;
}

.charsheet .sheet-row {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.charsheet label {
    width: auto;
    display: inline-block;
    font-size: .75em;
}


.charsheet input[type=text].sheet-skill {
    text-align: center;
    font-size: 1.15em;
    width: 40px;
    border-top: none;
    border-right: none;
	border-left: none;
	border-bottom: dotted 1px black;
    color: black;
}

.charsheet input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border: none;
    border-bottom: dotted 1px black;
    color: black;
    width: 45px;
    text-align: center;
}

.charsheet input[type=number]::-webkit-outer-spin-button,
.charsheet input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -webkit-appearance: textfield;
}

.charsheet label.sheet-stat {
    width: 45px;
    font-size: 1.1em;
}

.charsheet label.sheet-combat {
    font-size: .9em;
	color: #b30000;
}

.charsheet label.sheet-skill {
    font-size: 1em; 
}

.charsheet label.sheet-bonus {
    font-size: .9em;
    font-weight: bold;
}
/* 'invisible' textButton template for Attribute, Derived Traits, and Skills checks */

.ui-dialog .sheet-serenity-charactersheet button[type=roll]::before {
    content: ""; /* remove the dice icon, to make it 'invisible */
}

div.sheet-tab-content
{
	color: black;
    border: 1px solid #a8a8a8;
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}


div.sheet-tab-content { display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4,
input.sheet-tab5:checked ~ div.sheet-tab5,
input.sheet-tab6:checked ~ div.sheet-tab6,
input.sheet-tab7:checked ~ div.sheet-tab7
{
    display: block;
}

.sheet-tabSpan{
	color: black;
}

input.sheet-tab
{
    width: 110px;
    height: 20px;
    position: relative;
    top: 0px;
    left: 5px;
    margin: -1.5px;
    margin-bottom: 5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
	color: black;
}

input.sheet-tab + span::before
{
    content:attr(title);


    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	8, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);

    width: 110px;
    height: 20px;
    font-size: 18px;

    position: absolute;
    top: 70px;
    left: 30px;
}

input.sheet-tab:checked + span::before
{
    background: #dcdcdc;
    background: -moz-linear-gradient(to top, #D3D3D3	, #dcdcdc, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #dcdcdc, #D3D3D3	);
    background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -o-linear-gradient(to top, #D3D3D3	, #dcdcdc, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #dcdcdc, #D3D3D3	);
    border-bottom-color: #fff;
}

input.sheet-tab:not(:first-child) + span::before
{
    border-left: none;
}


input.sheet-tab2 + span::before
{
  	left: 133px;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
}


input.sheet-tab3 + span::before
{
  	left: 244px;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
}


input.sheet-tab4 + span::before
{
  	left: 355px;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
}


input.sheet-tab5 + span::before
{
  	left: 466px;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
}


input.sheet-tab6 + span::before
{
  	left: 577px;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
}


input.sheet-tab7 + span::before
{
  	left: 688px;

    background: #fff;
    background: -moz-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -webkit-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -ms-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: -o-linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
    background: linear-gradient(to top, #D3D3D3	, #fff, #D3D3D3	);
}

input[type="radio"].sheet-tab1:checked~div.sheet-tab1-content,
input[type="radio"].sheet-tab2:checked~div.sheet-tab2-content,
input[type="radio"].sheet-tab3:checked~div.sheet-tab3-content,
input[type="radio"].sheet-tab4:checked~div.sheet-tab4-content,
input[type="radio"].sheet-tab5:checked~div.sheet-tab5-content,
input[type="radio"].sheet-tab6:checked~div.sheet-tab6-content,
input[type="radio"].sheet-tab7:checked~div.sheet-tab7-content {
    visibility: visible;
    top: 0;
}




/* Configuration Windows*/
.charsheet .sheet-cdiv {
    width: 825px;
	height: 145px;
	margin: 0px 0px 0px 0px;
    border: 0px dashed brown;
    padding-right: 0px;
    padding-left: 0px;
}
.charsheet .sheet-cfgdiv {
    width: 625px;
	height: 25px;
	margin: 0px 0px 0px 0px;
    border: 0px dashed brown;
}
.sheet-HideConfig:checked ~ *.sheet-config {
	display:none;
}

.charsheet span.sheet-is-config::after { /*Close Config: grayish background with black text*/
	content: "^";
}

.charsheet .sheet-HideConfig:checked + span.sheet-is-config::after { /*Show Configuration: Black background with grayish text*/
	content: "v";
}

.charsheet span.sheet-is-config {
    text-align: center;
    display: inline-block;    
    width: 20px;
    height: 12px;
    font-size: 9px;
    /*font-family: "Pictos";*/
    background: black; /*#93537c;*/
	color: white; /*white;*/
	font-weight: bold;
	border-radius: 4px;
	margin-left: -20px;
}

.charsheet input.sheet-HideConfig {
    width: 20px;
    height: 12px;
    cursor: pointer;
	margin:	0px 0px 0px 20px;
	opacity: 0;
	z-index: 9999;
}

.charsheet .sheet-HideConfig:checked + span.sheet-is-config {
    background: black;
    border-radius: 4px;
	color: white;
}

.charsheet label.sheet-configitem {
    margin-left: 0px; 
    width: 100px; 
    font-size: .9em; 
    font-weight: normal
}

/*End Configuration Window*/


.charsheet .sheet-tooltip {
    position: relative;
}

.charsheet .sheet-tooltip .sheet-tooltip-text {
    position: absolute;
    z-index: 1;
    text-align: left;
    font-size: 12pt;
    font-weight: normal;
    /* vertically center */
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /* basic styles */
    width: 400px;
    padding: 10px;
    border-radius: 10px;
    background: #111111 !important;
    color: #CCC;
    opacity: 0;
    transition: 0.3s opacity;
    display: none;
    /* move to right */
    left: 100%;
    margin-left: 15px;
    /* and add a small left margin */
}

.charsheet .sheet-tooltip .sheet-tooltip-text input label span table {
    color: inherit;
    margin: 5px auto;
    border-spacing: 0;
}

.charsheet .sheet-tooltip .sheet-tooltip-text  table td {
    padding: 5px;
    border: none;
    border-top: 1px solid #CCCCCC;
    text-align: left;
    font-size: 12pt;
}

.charsheet .sheet-tooltip .sheet-tooltip-text  table th {
    text-align: center;
    padding: 0 8px;
}

.charsheet .sheet-tooltip .sheet-tooltip-text table tr:first-child td {
    border: none;
}

.charsheet .sheet-tooltip .sheet-tooltip-text .sheet-tooltip-table-center td {
    text-align: center;
}

.charsheet .sheet-tooltip .sheet-tooltip-text .sheet-tooltip-table-center-first-col td:first-child {
    text-align: center;
}

.charsheet .sheet-tooltip .sheet-tooltip-text .sheet-tooltip-table-left-first-col td:first-child {
    text-align: left;
}

.charsheet .sheet-tooltip .sheet-tooltip-text.sheet-tooltip-text-wide {
    width: 500px;
}

.charsheet .sheet-tooltip .sheet-tooltip-text.sheet-tooltip-text-left {
    /* reset defaults */
    left: initial;
    margin: initial;
    /* set new values */
    right: 100%;
    margin-right: 15px;
}

.charsheet .sheet-tooltip .sheet-tooltip-text:after {
    content: "";
    position: absolute;
    /* vertically center */
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /* the arrow */
    border: 10px solid #111111;
    border-color: transparent #111111 transparent transparent;
    opacity: 0;
    transition: 0.3s;
    /* position tooltip correctly */
    right: 100%;
    margin-left: -5px;
}

.charsheet .sheet-tooltip .sheet-tooltip-text.sheet-tooltip-text-left:after {
    /* reset defaults */
    right: initial;
    margin: initial;
    border: initial;
    /* set new values */
    left: 100%;
    margin-right: -5px;
    /* the arrow */
    border: 10px solid #111111;
    border-color: transparent transparent transparent #111111;
}


.charsheet .sheet-tooltip:hover .sheet-tooltip-text,
.charsheet .sheet-tooltip:hover .sheet-tooltip-text:after {
    opacity: 1;
    display: block;
}

.charsheet .sheet-tooltip .sheet-tooltip_label strong {
      font-family: "Montserrat", "Arial Black", sans-serif;
      font-weight: bold;
      text-transform: uppercase;
}

/* End Tooltip */

/* Roll template not using 'table' */

/* Check and Manifest Template */
.sheet-rolltemplate-shottype .sheet-container,
.sheet-rolltemplate-manifest .sheet-container,
.sheet-rolltemplate-check .sheet-container {
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}

.sheet-rolltemplate-shottype .sheet-container h1 {
    color: rgb(126, 45, 64);
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}
.sheet-rolltemplate-manifest .sheet-container h1 {
    color: Crimson;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}
.sheet-rolltemplate-check .sheet-container h1 {
    color: SaddleBrown;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-shottype div,
.sheet-rolltemplate-manifest div,
.sheet-rolltemplate-check div {
    padding: 2px;
}

.sheet-rolltemplate-shottype span {
    color: rgb(126, 45, 64);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.4em;
    padding-left: 5px;
    text-align: left;
}
.sheet-rolltemplate-manifest span {
    color: Crimson;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.4em;
    padding-left: 5px;
    text-align: left;
}
.sheet-rolltemplate-check span {
    color: SaddleBrown;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.4em;
    padding-left: 5px;
    text-align: left;
}
 
.sheet-rolltemplate-shottype .sheet-subheader,
.sheet-rolltemplate-manifest .sheet-subheader,
.sheet-rolltemplate-check .sheet-subheader {
    color: #000;
    font-size: 1em;
    font-style: italic;
}
 
.sheet-rolltemplate-shottype .sheet-arrow-right {
    border-bottom: 2px solid transparent;
    border-left: 180px solid rgb(126, 45, 64);
    border-top: 2px solid transparent;
}
.sheet-rolltemplate-manifest .sheet-arrow-right {
    border-bottom: 2px solid transparent;
    border-left: 180px solid Crimson;
    border-top: 2px solid transparent;
}
.sheet-rolltemplate-check .sheet-arrow-right {
    border-bottom: 2px solid transparent;
    border-left: 180px solid SaddleBrown;
    border-top: 2px solid transparent;
}

.sheet-rolltemplate-shottype .sheet-tcat, 
.sheet-rolltemplate-manifest .sheet-tcat,
.sheet-rolltemplate-check .sheet-tcat {
    font-style: italic;
}

.sheet-rolltemplate-shottype .inlinerollresult, 
.sheet-rolltemplate-manifest .inlinerollresult,
.sheet-rolltemplate-check .inlinerollresult  {
    background-color: #ffffff;
    border: none;
}
 

.sheet-rolltemplate-manifest .inlinerollresult.fullcrit,
.sheet-rolltemplate-check .inlinerollresult.fullcrit {
    color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-manifest .inlinerollresult.fullfail,
.sheet-rolltemplate-check .inlinerollresult.fullfail {
    color: #B31515;
    border: none;
}
 
.sheet-rolltemplate-manifest .inlinerollresult.importandivoll,
.sheet-rolltemplate-check .inlinerollresult.importandivoll {
    color: #4A57ED;
    border: none;
}
/* End Check, ShotType & Manifest templates*/
/* End non-table roll templates */


/*Buttons Styling*/

.charsheet button[type=roll].sheet-textButton {
    background-color: transparent;
    color: black;
    border: none;
    font-size: 1.25em;
    font-weight: bold;
    text-align: right;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
    margin: 0px;
}

.charsheet span.sheet-diceroll {
    font-family: "dicefontd20";
}

.charsheet button[type=roll].sheet-textButton::before,
.charsheet button[type=roll].sheet-powerButton::before {
    content: "" !important;
}

/*End Button Styling*/


/* Skills Columns */

.sheet-skillsWrapper {
	display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-gap: 1px;
    grid-auto-rows: minmax(auto, auto);
}

.sheet-skillLabel{
	font-weight: bold;
	font-size: 1.3em;
}

.sheet-text_input{
	border: none;
    box-shadow: none;
    border-bottom: 1px solid black;
    border-radius: 0;
	display:inline-block;
	outline:none;
	line-height:12px;
	padding-top:0px;
	padding-bottom:0px;
	background: #E0E0E0; /* Lighter Gray */
	/* background: #D3D3D3; /* Light Gray */
}

div.sheet-skills input.sheet-text_input {
	height:26px;
}

.sheet-skill_values{
		text-align:center;
		font-size:0.75em;
		width:26px;
}

.sheet-skillButtons{
	font-size: 0.70em!important;
	background-color: PaleTurquoise;
}

.sheet-skillName{
	display:inline-block;
	width:69%;
}

.sheet-col1{
		grid-column:1;
}

.sheet-col2{
		grid-column:2;
}

.sheet-col3{
		grid-column:3;
}

.sheet-col4{
		grid-column:4;
}

.sheet-col5{
		grid-column:5;
}


/* End Skills Columns */


/*----------- Roll Template ------------------------*/

/* New Roll Template */

.sheet-lightRed{
	background-color:#fde8ec;
}

/*Buttons Styling*/
.charsheet button[type=roll].sheet-melee-button,
.charsheet button[type=roll].sheet-attack-button {
	color: white;
    background-color: #cc0000;
	background-image: none;
    font-size: 1em;
    border: none;
    text-shadow: none;
    box-shadow: none;
}

.charsheet button[type=roll].sheet-range-button {
	color: white;
    background-color: SaddleBrown;
	background-image: none;
    font-size: 1em;
    border: none;
    text-shadow: none;
    box-shadow: none;
}

.charsheet button[type=roll].sheet-parry-button {
	color: white;
    background-color: blue;
	background-image: none;
    font-size: 1em;
    border: none;
    text-shadow: none;
    box-shadow: none;
}
/
.charsheet button[type=roll].sheet-skill-button {
	color: black;
    background-color: PaleTurquoise;
	background-image: none;
    font-size: 0.7em;
    border: none;
    text-shadow: none;
    box-shadow: none;
}
.charsheet button[type=roll].sheet-textButton {
    background-color: transparent;
    color: black;
    border: none;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
	padding-right: 2px;
    margin: 0px;
}
.charsheet button[type=action].sheet-textButton {
    background-color: transparent;
    color: black;
    border: none;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
	padding-right: 2px;
    margin: 0px;
}

.charsheet span.sheet-diceroll {
    font-family: "dicefontd20";
}

.charsheet button[type=roll].sheet-textButton::before,
.charsheet button[type=roll].sheet-powerButton::before {
    content: "" !important;
}

.button[type=action]:hover {
	background-color: red;
	color: black;
}

/*End Button Styling*/