.charsheet {
	min-width:820px;
	min-height:800px;
}

* {box-sizing: border-box;}

.sheet-grid-wrapper-autocalc
{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-column-gap:25px;
}

.sheet-grid-wrapper-outer{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-rows:90px;
}

.sheet-grid-wrapper-top { 
  display: grid; 
  grid-template-columns: 220px 1fr;
  grid-column-gap:10px;
} 

.sheet-grid-wrapper-inner { 
  display: grid; 
  grid-template-columns: 180px 180px 200px;
  grid-auto-rows: 40px;   
  grid-column-gap:10px;
  width:600px;
  height:80px;
} 

.sheet-grid-wrapper-inner-frame { 
  display: grid; 
  grid-template-columns: 180px 180px 200px;
  grid-auto-rows: 40px;   
  grid-column-gap:10px;
  width:600px;
  height:80px;
} 

.sheet-grid-wrapper-main {
    display:grid;
    grid-column-gap:10px;
    grid-row-gap:10px;
    width:800px;
    grid-template-columns: 210px 400px 200px;
}

.sheet-grid-wrapper-frame
{
    display:grid;
    grid-column-gap:10px;
    grid-row-gap:10px;
    width:800px;
    grid-template-columns: 1fr 0.5fr;
}

.sheet-grid-wrapper-autocalcs
{
    display:grid;
    grid-auto-rows:35px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.sheet-grid-wrapper-pilotweps
{
    display:grid;
    grid-auto-rows:32px;
    grid-template-columns: 160px 120px 120px;
    font-size: 12px;
}


.sheet-grid-wrapper-skills
{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows: repeat(6, 30px 52px);
    justify-items:center;
}

.sheet-grid-wrapper-systems
{
    padding:0px;
    margin-top:10px;
    display:grid;
    grid-template-columns: 200px 95px;
    grid-auto-rows:40px;
    
}

.sheet-grid-wrapper-talents
{
    display:grid;
    grid-auto-rows:40px;
    grid-template-columns: 1.6fr 1fr;
}


.sheet-flex-wrapper-main {
  display:flex;
  align-items:flex-start;
  flex-flow: row wrap;
}

.repcontainer[data-groupname="repeating_talents"] > .repitem {
    display: inline-block;
}

.repcontainer[data-groupname="repeating_weapons"] > .repitem {
    display: inline-block;
}



.repcontrol_del
{
    position:relative;
    z-index:9999;
}

.repcontrol_move
{
    position:relative;
    z-index:9999;
}


.sheet-grid-flex-item{
  display:flex;
  flex-direction:column;
  padding:5px;
  width:360px;
  border: 2px solid #000000;
  border-radius: 10px;
  background-color: #f0f0f0;
}

.sheet-grid-flex-noborder-item
{
  display:flex;
  flex-direction:column;
  width:130px;
  height:35px;
}

.sheet-grid-frame-flex-item
{
    display:flex;
    flex-direction:row;
    width:400px;
}

.sheet-grid-frame-flex-item-reverse
{
    position:relative;
    margin-bottom:5px;
    margin-left:65px;
    display:flex;
    flex-direction:row-reverse;
    width:400px;
}

.sheet-grid-item{
  padding:4px;
  border: 2px solid #000000;
  border-radius: 10px;
  background-color: #f0f0f0;
}

.sheet-grid-inner-item
{
    padding:5px;
}

.sheet-talent-rank-container
{
 height:100px;
 width:100%;
}

.sheet-core-stat-container
{
    display:grid;
    align-items:center;
    width:100%;
    grid-auto-rows:65px;
    grid-template-columns: 1fr 1fr;
}

.sheet-license-radio-container
{
    width:35%;
    display:inline-flex;
    cursor:pointer;
    flex-direction: row;
	justify-content: flex-start;
	margin:0;
	padding:0;
}

.sheet-license-radio-button 
{
  display:inline;
  background-color: #eee;
  border-radius: 50%;
}


button[type=roll].sheet-skill-roll::before{
    content: ''; 
}
button[type=roll].sheet-pilot-wep-roll::before{
    content: ''; 
}
button[type=roll].sheet-HASE-roll::before{
    content: ''; 
}

button.sheet-skill-roll{
    box-shadow:none;
    position:relative;
    top:5px;
    border:none;
    text-align:center;
    background:none;
    height:15px;
}

button.sheet-HASE-roll{
    border:none;
    position:relative;
    display:inline-block;
    box-shadow:none;
    text-align:left;
    background:none;
    font-weight:bold;
    font-size:17px;
}

button.sheet-HASE-roll:disabled{
    opacity:100;
}

button.sheet-pilot-wep-roll{
    border:none;
    box-shadow:none;
    position:relative;
    top:2px;
    text-align:center;
    background:none;
    height:15px;
}


button.sheet-skill-roll:hover, button.sheet-pilot-wep-roll:hover, button.sheet-HASE-roll:not([disabled]):hover{
    color:#ff3838;
}

button.sheet-skill-roll:active, button.sheet-pilot-wep-roll:active,button.sheet-HASE-roll:active{
    color:#ad2222;
}


fieldset.sheet-repeating_talents
{
    width:1200px;
}

fieldset.sheet-repeating_systems
{
    width:200px;
    display:inline-block;
}


div.sheet-frame-mounts
{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
}

div.sheet-frame-autocalcs
{
    width:30%;
    display:grid;
    grid-auto-rows:40px;
    grid-template-columns:1fr 1fr;
}

input {
    display:inline-block;
    width:60%;
    height:10px;
}

input.sheet-mounts{
    margin-bottom:10px;
    width:100%;
    display:block;
}

input.sheet-license-name
{
    height:30px;
    width:120px;
    position:relative;
    margin-left:-70px;
    left:40px;
}

input.sheet-short
{
    margin-top:-4px;
    width: 35%;
    text-align:center;
}

input.sheet-short-small
{
    height:25px;
    margin-top:-4px;
    width:35px;
    float:right;  
    text-align:center;
}


input.sheet-xshort
{
    height:25px;
    width:35px;
    text-align:center;
    margin-bottom:4px;
}

input.sheet-corebonus
{
    float:right;
    width:80%;
    height:21px;
}

div.sheet-grid-item > label > input.sheet-short
{
    margin-top:0px;
}

input.sheet-core
{
    display:inline-block;
    clear:right;
    float:right;
    width:35%;
    text-align:center;
}

label
{
    display:inline;
}

label.sheet-center
{
    margin-top:5px;
    font-size:14px;
    text-align:center;
}

label.sheet-HASE
{
    font-size:17.5px;
    margin-bottom:6px;
    text-align: center;
}

label.sheet-flex
{
    display:flex;
    width:200px;
}

label.sheet-small
{
    font-size:14px;
    height:21px;
    display:block;
    padding:0px;
    margin:0;
}

label.sheet-stat-label
{
    margin-top:0px;
    margin-bottom:7px;
    position:relative;
    bottom:10px;
}

select.sheet-dmg-type
{
    margin:0px;
    display:inline;
    width:60px;
    position:relative;
    top:1px;
}

span.sheet-frame-autocalcs
{
    display:inline-block;
    color: solid black;
    opacity:100;
    background:white;
    vertical-align:bottom;
    text-align:center;
    position:relative;
    width:30px;
    height:30px;
    left:20px;
    top:5px;
    font-size:17px;
    font-weight:bold;
    padding-top:3px;
    border: 2px solid black;
    border-radius:5px;
}

span.sheet-frame-max-autocalcs
{
    text-align:center;
    background:white;
    padding-top:3px;
    float:right;
    border: 2px solid black;
    border-radius:5px;
    width:30px;
    height:28px;
}


span.sheet-skill-roll
{
    display:block;
    text-align:center;
    position:Relative;
    bottom:4px;
    text-align:center;
    font-weight:bold;
    font-size:14px;
}


span.sheet-pilot-wep-roll
{
    width:145px;
    display:block;
    text-align:center;
    right:8px;
    position:relative;
    bottom:4px;
    font-weight:bold;
    font-size:16px;
}

span.sheet-HASE-roll
{
    color:black;
    display:inline;
    text-align:center;
    margin:0px;
    font-weight:bold;
    font-size:17px;
}

textarea
{
    resize:none;
    height: 80%
}

textarea.sheet-long
{
    height:82%;
}

textarea.sheet-xlong
{
    height:92%;
} 

textarea.sheet-short
{
    height:50px;
}


/*----------- Sheet Button Setup ------------*/


input.sheet-structure{
	margin-right:10px;
	width: 55px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
	margin-top:0px;
}

input.sheet-corestress
{
    right:50px;
	margin-right:10px;
	width: 55px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
	margin-top:0px;
}

input.sheet-corepower
{
    position:relative;
    width:35px;
    height:35px;
    display:inline-block;
    opacity:0;
    z-index:9999;
}

input.sheet-license
{
    right:22px;
	margin-right:10px;
	width: 25px;
    height: 30px;
    cursor: pointer;	
	position: relative;
	opacity:0;
	z-index: 9999;
	margin-top:0px;

}

input.sheet-overcharge
{
    right:45px;
	margin-right:10px;
	width: 45px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
	margin-top:0px;
}


span.sheet-corepower
{
	position: relative;
	vertical-align:middle;
    width:35px;
    height:35px;
    display:inline-block;
    background: #a1ff9e;
    border: 2px solid black;
    border-radius: 5px;
    margin-left:-30px;
    cursor: pointer;	
}


span.sheet-structure, .charsheet span.sheet-corestress{
	text-align: center;
    display: inline-block;
	font-size: 13px;	
	background: #c7c3b0;
	color: black;
	font-weight: bold;
	width: 50px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left:-65px;
	border: 2px solid black;
	border-left:none;
	margin-top:0px;
}

span.sheet-license
{
    line-height:30px;
	text-align: center;
    display: inline-block;
	font-size: 13px;	
	font-weight: bold;
	background: #c7c3b0;
	color: black;
	width: 20px;
    height: 30px;
    cursor: pointer;	
	position: relative;
	border: 2px solid black;
	border-left:none;
	margin-left:-35px;/*originally 91px*/
	margin-top:0px;
	margin-right:0px;
}

span.sheet-overcharge
{
	text-align: center;
    display: inline-block;
	font-size: 13px;	
	background: #c7c3b0;
	color: black;
	font-weight: bold;
	width: 45px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left:-55px;/*originally 91px*/
	border: 2px solid black;
	border-left:none;
	margin-top:0px;
}


input.sheet-license3:checked+span.sheet-license3,
input.sheet-license3:checked+span.sheet-license3 + input.sheet-license2+span.sheet-license2,
input.sheet-license3:checked+span.sheet-license3 + input.sheet-license2+span.sheet-license2 + input.sheet-license1+span.sheet-license1,
input.sheet-license2:checked+span.sheet-license2,
input.sheet-license2:checked+span.sheet-license2 + input.sheet-license1+span.sheet-license1,
input.sheet-license1:checked+span.sheet-license1
{
    background:#ff4242;
}




input.sheet-structure4:checked + span.sheet-structure4,
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2, 
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3,
input.sheet-structure2:checked + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
input.sheet-corestress1:checked + span.sheet-corestress1

{
    background: #a1ff9e;
}

input.sheet-structure3:checked + span.sheet-structure3,
input.sheet-structure3:checked + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
input.sheet-structure3:checked + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
input.sheet-structure3:checked + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2, 
input.sheet-corestress2:checked + span.sheet-corestress2,
input.sheet-corestress2:checked + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
input.sheet-overcharge1:checked + span.sheet-overcharge1
{
    background: #fff04c;
}

input.sheet-structure2:checked + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
input.sheet-structure2:checked + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
input.sheet-structure2:checked + span.sheet-structure2, 
input.sheet-corestress3:checked + span.sheet-corestress3,
input.sheet-corestress3:checked + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
input.sheet-corestress3:checked + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2,
input.sheet-overcharge2:checked + span.sheet-overcharge2,
input.sheet-overcharge2:checked + span.sheet-overcharge2 + input.sheet-overcharge1 + span.sheet-overcharge1
{
    background: #f79c00;
}

input.sheet-structure1:checked + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
input.sheet-structure1:checked + span.sheet-structure1,
input.sheet-corestress4:checked + span.sheet-corestress4,
input.sheet-corestress4:checked + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3,
input.sheet-corestress4:checked + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
input.sheet-corestress4:checked + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2,
input.sheet-overcharge3:checked + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2 + input.sheet-overcharge1 + span.sheet-overcharge1,
input.sheet-overcharge3:checked + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2,
input.sheet-overcharge3:checked + span.sheet-overcharge3 
{
    background: #f76200;
}

input.sheet-structurecrit:checked + span.sheet-structurecrit,
input.sheet-corestressbreach:checked + span.sheet-corestressbreach,
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3,
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2,
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4,
input.sheet-overcharge4:checked + span.sheet-overcharge4,
input.sheet-overcharge4:checked + span.sheet-overcharge4 + input.sheet-overcharge3 + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2 + input.sheet-overcharge1 + span.sheet-overcharge1,
input.sheet-overcharge4:checked + span.sheet-overcharge4 + input.sheet-overcharge3 + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2,
input.sheet-overcharge4:checked + span.sheet-overcharge4 + input.sheet-overcharge3 + span.sheet-overcharge3,
input.sheet-corepower:checked + span.sheet-corepower
{
    background: #ce0606;
}
input.sheet-acc-tab1:checked + span.sheet-acc-tab1,
input.sheet-acc-tab2:checked + span.sheet-acc-tab2,
input.sheet-acc-tab3:checked + span.sheet-acc-tab3

{
    background: #ff9d87;
	border-radius: 4px;
}

/*----------- 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*/
.charsheet input.sheet-tab1:checked ~ div.sheet-section-pilot,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-talents,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-frame,
{
	display: block;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { 	
	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: 100px;
    height: 50px;
    cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
}

.charsheet input.sheet-acc-tab {
    width: 100px;
    height: 50px;
    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: 13px;	
	background: #c7c3b0;
	color: black;
	font-weight: bold;
	border-radius: 4px;
	width: 100px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -101px;/*originally 91px*/
}

.charsheet span.sheet-acc-tab {
	text-align: center;
    display: inline-block;
	font-size: 13px;	
	background: #c7c3b0;
	color: black;
	font-weight: bold;
	border-radius: 4px;
	width: 100px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -101px;/*originally 91px*/
}

/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 
{
    background: #2c424e;
    color: #bfc4c6;
	border-radius: 4px;
}
/*----------- End Tab Setup -----------*/