@import url('https://fonts.googleapis.com/css?family=Rosarivo:ital@1|Merriweather&display=swap');


.charsheet{
    width: 800px;
}

/*----------- Tabs Setup -------------*/


/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-section"] { 	
	display: none;
}


/*this shows the tab content when the appropriate input field is selected*/
input.sheet-tab1:checked ~ div.sheet-section-basic,
input.sheet-tab2:checked ~ div.sheet-section-stats,
/*input.sheet-tab3:checked ~ div.sheet-section-background,*/
input.sheet-tab4:checked ~ div.sheet-section-skills,
input.sheet-tab5:checked ~ div.sheet-section-talents,
input.sheet-tab6:checked ~ div.sheet-section-combat, 
input.sheet-tab7:checked ~ div.sheet-section-grimoire,
input.sheet-tab8:checked ~ div.sheet-section-posessions,
input.sheet-tab9:checked ~ div.sheet-section-notes,
input.sheet-tab10:checked ~ div.sheet-section-weapons,
input.sheet-tab11:checked ~ div.sheet-section-armor,
input.sheet-tab12:checked ~ div.sheet-section-profession,
input.sheet-tab13:checked ~ div.sheet-section-race,
input.sheet-tab14:checked ~ div.sheet-section-culture,
input.sheet-tab15:checked ~ div.sheet-section-history,
input.sheet-tab16:checked ~ div.sheet-section-artistic,
input.sheet-tab17:checked ~ div.sheet-section-athletic,
input.sheet-tab18:checked ~ div.sheet-section-concentration,
input.sheet-tab19:checked ~ div.sheet-section-general,
input.sheet-tab20:checked ~ div.sheet-section-influence,
input.sheet-tab21:checked ~ div.sheet-section-mystical-arts,
input.sheet-tab22:checked ~ div.sheet-section-outdoor,
input.sheet-tab23:checked ~ div.sheet-section-physical,
input.sheet-tab24:checked ~ div.sheet-section-subterfuge,
{
    
	display: block;
}





/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
.charsheet input.sheet-tab {
    	width: 80px;
    	height: 25px;
    	cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
}


/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-tab {
	text-align: center;
    	display: inline-block;
	font-size: 11px;	
	/*background: #1F5D5A;*/
	background: DarkOliveGreen;
	/*color: #E9C458;*/
	color: Gainsboro;
	font-style: normal;
	border-radius: 16px;
	
	width: 80px;
    	height: 25px;
    	cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -81px;/*originally 91px*/
}

.charsheet span.sheet-tab {
	text-align: center;
    	display: inline-block;
	
	/*background: #1F5D5A;*/
	
}

/*this modifies the span color once the radio button is selected so you know which tab is selected*/
input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
/*input.sheet-tab3:checked + span.sheet-tab3,*/
input.sheet-tab4:checked + span.sheet-tab4,
input.sheet-tab5:checked + span.sheet-tab5,
input.sheet-tab6:checked + span.sheet-tab6,
input.sheet-tab7:checked + span.sheet-tab7,
input.sheet-tab8:checked + span.sheet-tab8,
input.sheet-tab9:checked + span.sheet-tab9,
input.sheet-tab10:checked + span.sheet-tab10,
input.sheet-tab11:checked + span.sheet-tab11,
input.sheet-tab12:checked + span.sheet-tab12,
input.sheet-tab13:checked + span.sheet-tab13,
input.sheet-tab14:checked + span.sheet-tab14,
input.sheet-tab15:checked + span.sheet-tab15,
input.sheet-tab16:checked + span.sheet-tab16,
input.sheet-tab17:checked + span.sheet-tab17,
input.sheet-tab18:checked + span.sheet-tab18,
input.sheet-tab19:checked + span.sheet-tab19,
input.sheet-tab20:checked + span.sheet-tab20,
input.sheet-tab21:checked + span.sheet-tab21,
input.sheet-tab22:checked + span.sheet-tab22,
input.sheet-tab23:checked + span.sheet-tab23,
input.sheet-tab24:checked + span.sheet-tab24,{
    
	background: white;
	/*color: #1F5D5A;*/
	color: DarkOliveGreen;
	font-size: 12px;
	/*font-style: italic;*/
	font-weight: bold;
	border-style: solid;
    border-color: DarkOliveGreen;
    border-width: 1px;
	border-radius: 16px;
}
/*----------- End Tab Setup -----------*/

/* the combat tab */


/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/

/*----------- End Tab Setup -----------*/
/* THIS SECTION IS FOR THE INSTRUCTIONS CARDS */

/*       END OF INSTRUCTION CARD SETUP*/
/* css grids */
.sheet-six-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "cone ctwo cthree cfour cfive csix";
}

.sheet-three-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "tcleft tccenter tcright";
}

.sheet-two-column{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "colleft colright";
}

.sheet-two-column-left-wide{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 65% 34%;
    grid-template-rows: 1fr;
    grid-template-areas: "colleftw colrightw";
}

.sheet-two-column-right-wide{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 35% 64%;
    grid-template-rows: 1fr;
    grid-template-areas: "colleftrw colrightrw";
}

.sheet-row{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "rrow";
}

.sheet-skill-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "skbutt skname skname skname skstat skstat skranks skrbns sksbns skobns skttl skres";
}

.sheet-weapon-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: .40fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "wpbutt wpname wpname wpcat wptype wpsize wprank wprbns wpstat wpother wptotal";
}

.sheet-full-armor-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 3fr .75fr 1.5fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "ardesc arfit artype ardb arbns armin armax arcast";
}

.sheet-piece-armor-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: 2.25fr .75fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "pardesc parfit parloc partype pardb parbns parmin parmax parcast";
}

.sheet-spell-grid{
    display: grid;
    width: 100%;
    grid-gap: 3px;
    grid-template-columns: .5fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "spbutt spsphere spname sptype sprr sprnk sprnkbns spstat spother sptotal";
}

.sheet-cone{
    grid-area: cone;
}

.sheet-ctwo{
    grid-area: ctwo;
}

.sheet-cthree{
    grid-area: cthree;
}

.sheet-cfour{
    grid-area: cfour;
}

.sheet-cfive{
    grid-area: cfive;
}

.sheet-csix{
    grid-area: csix;
}

.sheet-tcleft{
    grid-area: tcleft;
}

.sheet-tccenter{
    grid-area: tccenter;
}

.sheet-tcright{
    grid-area: tcright;
}

.sheet-colleft{
    grid-area: colleft;
}

.sheet-colright{
    grid-area: colright;
}

.sheet-colleftw{
    grid-area: colleftw;
}

.sheet-colrightrw{
    grid-area: colrightrw;
}

.sheet-colleftrw{
    grid-area: colleftrw;
}

.sheet-colrightw{
    grid-area: colrightw;
}

.sheet-skname{
    grid-area: skname;
} 
.sheet-skbutt{
    grid-area: skbutt;
} 
.sheet-skstat{
    grid-area: skstat;
} 
.sheet-skranks{
    grid-area: skranks;
} 
.sheet-skrbns{
    grid-area: skrbns;
} 
.sheet-sksbns{
    grid-area: sksbns;
} 
.sheet-skobns{
    grid-area: skobns;
} 
.sheet-skttl{
    grid-area: skttl;
} 
.sheet-skres{
    grid-area: skres;
}

.sheet-rrow{
    grid-area: rrow;
}

.sheet-wpbutt{
    grid-area: wpbutt;
}  
.sheet-wpname{
    grid-area: wpname;
}

.sheet-wpcat{
    grid-area: wpcat;
}

.sheet-wptype{
    grid-area: wptype;
} 
.sheet-wpsize{
    grid-area: wpsize;
}

.sheet-wprank{
    grid-area: wprank;
} 
.sheet-wprbns{
    grid-area: wprbns;
}

.sheet-wpstat{
    grid-area: wpstat;
} 

.sheet-wpother{
    grid-area: wpother;
} 

.sheet-wptotal{
    grid-area: wptotal;
}

.sheet-ardesc{
    gird-area: ardesc;
}       

.sheet-arfit{
    gird-area: arfit;
}

.sheet-artype{
    gird-area: artype;
}

.sheet-ardb{
    gird-area: ardb;
}

.sheet-arbns{
    gird-area: arbns;
}

.sheet-armin{
    gird-area: armin;
}

.sheet-armax{
    gird-area: armax;
}

.sheet-arcast{
    gird-area: arcast;
}

.sheet-pardesc{
    gird-area: pardesc;
}       

.sheet-parfit{
    gird-area: parfit;
}

.sheet-parloc{
    gird-area: parloc;
}

.sheet-partype{
    gird-area: partype;
}

.sheet-pardb{
    gird-area: pardb;
}

.sheet-parbns{
    gird-area: parbns;
}

.sheet-parmin{
    gird-area: parmin;
}

.sheet-parmax{
    gird-area: parmax;
}

.sheet-parcast{
    gird-area: parcast;
}

.sheet-spbutt{
    grid-area: spbutt;
} 
        
.sheet-spsphere{
    gird-area: spsphere;
}       

.sheet-spname{
    gird-area: spname;
}

.sheet-sptype{
    gird-area: sptype;
}

.sheet-sprr{
    gird-area: sprr;
}

.sheet-sprnk{
    gird-area: sprnk;
}

.sheet-sprnkbns{
    gird-area: sprnkbns;
}

.sheet-spstat{
    gird-area: spstat;
}

.sheet-spother{
    gird-area: spother;
}

.sheet-sptotal{
    gird-area: sptotal;
}
/* end css grids */

.sheet-white {
    background: white;
    color: black;
    font-size: 14px;
    font-weight: normal;
}

input.sheet-under{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

input[type=text].sheet-compact{
    font-family: "Arial", sans-serif;
    font-size: 13px;
    height: 20px;
    
}

input[type=text].sheet-compact-label{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-size: 13px;
    height: 20px;
    font-family: "Arial", sans-serif;
}

input[type=number].sheet-compact-number{
    font-size: 12px;
    height: 20px;
    width: 45px;
}

input[type=number].sheet-compact-number-skill{
    font-size: 12px;
    height: 20px;
    width: 30px;
}

input[type=text].sheet-text-full{
    width: 100%;
}

input.sheet-text-225
{
    width: 225px;
}

input[type=text].sheet-text-200
{
    width: 203px;
}
input.sheet-text-175
{
    width: 175px;
}

input.sheet-text-on
{
    width: 73px;
}

input.sheet-text-off
{
    width: 72px;
}
input.sheet-text-put-on
{
    width: 155px;
}

input.sheet-text-150
{
    width: 150px;
}

input.sheet-text-125
{
    width: 125px;
}

input.sheet-text-100
{
    width: 100px;
}

input.sheet-text-75
{
   width: 75px;
}

input.sheet-text-50
{
   width: 50px;
}

input.sheet-text-45
{
   width: 45px;
}

input.sheet-text-25
{
   width: 17px;
}

input[type=text].sheet-text-25
{
   width: 25px;
}

select.sheet-compact-select-ci{
    font-size: 10px;
    color: black;
    height: 21px;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select-cir{
    font-size: 10px;
    color: black;
    height: 19px;
    width: 45%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select-cires{
    font-size: 9px;
    color: black;
    height: 20px;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

select.sheet-compact-select-cistat{
    font-size: 9px;
    color: black;
    height: 20px;
    width: 40%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*text-indent: 1px;
    text-overflow: '';*/
}

/* will be deleted when full sheet is operational */
div.sheet-header
{
    background: #1F5D5A;
    text-align: center;
    font-size: 14px;
    border-radius: 6px 6px 6px 6px;
    color: white;
}
/* will be deleted when full sheet is operational */
div.sheet-header-one
{
    background: #E9C458;
    text-align: center;
    font-size: 10px;
    border-radius: 0px 0px 0px 0px;
    
}

div.sheet-overflow{
    overflow: scroll;
}
.sheet-section {
    padding: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-style: solid;
    border-color: LightGray;
    border-width: 1px;
    border-radius: 5px 5px 5px 5px;
}

div.sheet-dashboard-header
{
    background: white;
    text-align: center;
    font-size: 11px;
    border-radius: 20px 20px 20px 20px;
    color: black;
    margin: 3px;
    width: 100%;
    padding: 3px;
    border-style: solid;
    border-color: #1F5D5A;
    border-width: 1px;
}

div.sheet-instruction{
    width: 100%;
    text-align: left;
    font-family: 'Merriweather', serif;
}

div.sheet-instruction-center
{
    text-align: center;
    font-size: 14px;
    border-radius: 6px 6px 6px 6px;
    color: black;
}

div.sheet-section-title{
    font-size: 20px;  
    color: black;
    
}

div.sheet-instruction{
    font-size:13px;
    color: black;
}

span.sheet-section-label{
    font-size: 20px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

span.sheet-subsection-label{
    font-size: 16px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

span.sheet-minor-label{
    font-size: 13px;
    font-family: 'Metamorphous', cursive;
    font-family: 'Fondamento', cursive;
    font-family: 'Rosarivo', serif;
}

input.sheet-compact-wide{
    font-size: 10px;
    height: 20px;
    width: 150px;
    
}

input.sheet-compact-mid{
    font-size: 10px;
    height: 20px;
    width: 130px;
}

input.sheet-compact{
    font-size: 10px;
    height: 20px;
    width: 110px;
}

input[type=number].sheet-compact-number{
    font-size: 10px;
    height: 20px;
    width: 45px;
}

input.sheet-compact{
    font-size: 10px;
    height: 20px;
}

input.sheet-text-mid
{
    width: 110px;
}

textarea.sheet-history{
    font-size: 11px;
    width: 375px;
    height: 300px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

textarea.sheet-talent{
    font-size: 11px;
    width: 93%;
    height: 35px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

select.sheet-compact-select{
    font-size: 10px;
    height: 22px;
    width: 75px;
}

select.sheet-compact-select-wide{
    font-size: 10px;
    height: 22px;
    width: 150px;
}

button.sheet-nod20:before {
  content: "" !important;
}

button.sheet-button{
    
    height: 10px;
    width: 24px;
    font-size: 0;
    font-family: 'dicefontd10';
}

/*--------------- Buttons/ chreckboxes ---------------*/
button.sheet-nod20:before {
  content: "" !important;
  
}

button.sheet-button{
    
    height: 20px;
    /*width: 24px;*/
    border-radius: 10px 10px 10px 10px;
    color: black;
    Background-color: gray;
    font-size: 10px ;  
}

button.sheet-button-small{
    
    height: 9px;
    width: 22px;
    color: black;
    Background-color: LightGray;
    border-radius: 12px 12px 12px 12px;
    font-size: 8px;  
    font-family: 'Metamorphous', cursive, 'Arial';
    
}

button.sheet-button-skill{
    
    height: 9px;
    width: 10px;
    color: black;
    Background-color: LightGray;
    border-radius: 12px 12px 12px 12px;
    
}


input[type=checkbox].sheet-check{
    height: 12px;
    width: 12px;
}

.sheet-full-suit,
.sheet-armor-switch-s:checked ~ .sheet-piecemeal {
  display: block;
}

.sheet-piecemeal,
.sheet-armor-switch-s:checked ~ .sheet-full-suit {
  display: none;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}







.itemcontrol {
    margin-left: -33px;
}


.repcontrol{
	margin-right: 14px;
}

div.repcontrol button
{
	width: 13px;
    color: transparent;
    padding: 0px;
    padding-left: 2px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

}

div.repcontrol button.repcontrol_add::before,
div.repcontrol button.repcontrol_edit::before
{
    font-family: Pictos;
    position: relative;
    color: #000;
	width:12px;
	height:12px;
}

/* +Add */
div.repcontrol button.repcontrol_add::before
{

    content: "&"; /* & in Pictos is a + sign, while + is a plus inside a circle */
    left: -0px;
    top: -0px;
}

/* Modify */
div.repcontrol button.repcontrol_edit::before
{
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    content: "x"; /* x in Pictos is a crossed hammer and wrench */
    left: -0px;
    top: -0px;
}
/* Done */
div.repcontrol.editmode button.repcontrol_edit::before
{
    content: "3"; /* 3 in Pictos is a check mark */

}

/* ------------------ Skill check template --------------*/

.sheet-rolltemplate-skill .sheet-container {
    padding: 4px;
    /*background: Silver;*/
    background: DarkOliveGreen;
    border-style: solid;
    border-width: 1px;
    border-color: LightGray;
    color: OldLace;
    font-family: 'Merriweather', serif;
    border-radius: 12px 12px 12px 12px;
}



.sheet-rolltemplate-skill .div{
    line-height: 20px;    
}

.sheet-rolltemplate-skill .sheet-skill-header{
    padding: 4px;
    margin-top: 10px;
    font-family: 'Merriweather', serif;
    color: black;
    background: OldLace;
    border-style: solid;
    border-color: black;
    text-align: center;
    border-right: 1px;
    border-left: 1px;
    border-top: 1px;
    border-bottom: none;
    border-radius: 12px 12px 0px 0px;
}

.sheet-rolltemplate-skill .sheet-skill-title{
    font-size: 24px;
    line-height: 30px;
}

.sheet-rolltemplate-skill .sheet-subtitle{
    font-size: 20px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .sheet-content{
    text-align: center;
    padding: 4px;
    color: black;
    border-radius: 0px 0px 12px 12px;
    /*border-right: 1px;
    border-left: 1px;
    border-top: none;
    border-bottom: 1px;
    border-style: solid;
    border-color: black;*/
    background: OldLace;
}

.sheet-rolltemplate-skill .sheet-display{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .sheet-display-minor{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 16px;
}

.sheet-rolltemplate-skill .inlinerollresult{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .inlinerollresult.fullcrit{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .inlinerollresult.fullfail{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}

.sheet-rolltemplate-skill .inlinerollresult.importantroll{
    border: none;
    background: OldLace;
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 20px;
}