/*-----background-----*/

.charsheet {
    background-color: #000000;
    background-size: 100%;
    border: solid 5px gray;
}

    /*-----tabs-----*/

input.sheet-tab1:not(:checked) ~ .sheet-tab1,
input.sheet-tab2:not(:checked) ~ .sheet-tab2,
input.sheet-tab3:not(:checked) ~ .sheet-tab3,
input.sheet-tab4:not(:checked) ~ .sheet-tab4, 
input.sheet-tab5:not(:checked) ~ .sheet-tab5, {
    display: none;
}

input.sheet-tab {
    width: calc(20% - 5px);
    height: 20px;

    outline: none !important;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

input.sheet-tab1 {
    margin-left: 1px;
}

input.sheet-tab::before {
    content: attr(title);
    display: inline-block;
    color: #F1C11E;

    background: #000000;
    border: solid 1px #F1C11E;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    font-size: 14px;
    font-weight: bold;
    text-align: center;
    
    width: 100%;
    height: 20px;
}

input.sheet-tab:checked::before {
    color: #000000;

    background: #F1C11E;
}

.sheet-tab-br {
    margin-bottom: 2px;
    margin-top: 2px;
}

    /*-----headers-----*/

h4 {
    color: #F1C11E;
    font-weight: bold;
    padding: 2;
    font-size: 12px;
    text-align: right;
    background: #000000;
    margin: 2px;
    display: inline-block;
    
}

h3 {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.sheet-entry-secondary {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 85px;
    background-color: #000000;
}

.sheet-entry-cw-max {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 80px;
    background-color: #000000;
}

.sheet-entry-combat-long {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 145px;
    background-color: #000000;
}

.sheet-entry-health-long {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 90px;
    background-color: #000000;
}
.sheet-entry-reaper {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 98px;
    background-color: #000000;
}


.sheet-entry-perk-level {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 110px;
    background-color: #000000;
}

.sheet-entry-ft {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 30px;
    background-color: #000000;
}

.sheet-entry-health-short {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 65px;
    background-color: #000000;
}

.sheet-entry-long {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 50px;
    background-color: #000000;
}

.sheet-entry-total {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 5%;
    background-color: #000000;
}

.sheet-entry-vp {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 10px;
    background-color: #000000;
}

.sheet-entry-vp-count {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 2px;
    background-color: #000000;
}

.sheet-entry-primary {
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 380px;
    background-color: #000000;
}

.sheet-entry-ac {
    color: #ADD8E6;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-normal {
    color: #BEBEBE;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-laser {
    color: #E3242B;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-fire {
    color: #DD571C;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-plasma {
    color: #028E5F;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-explosion {
    color: #FBE106;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-dr {
    color: #808080;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

.sheet-entry-rr {
    color: #32CD32;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 8%;
    background-color: #000000;
}

    /*-----sheet select-----*/

.sheet-select {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 12%;
    height: 100%;
    margin-top: 5px;
}

.sheet-select-fatigue {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 25%;
    height: 100%;
}

.sheet-select-skill {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 18%;
    height: 100%;
    margin-top: 5px;
}

.sheet-select-condition {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 24%;
    height: 100%;
    margin-top: 5px;
}

.sheet-select-perk {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 30%;
    height: 100%;
    margin-top: 5px;
}

.sheet-select-damage-type {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 12%;
    height: 100%;
    margin-top: 5px;
}

.sheet-select-cw {
    color: #F1C11E;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px; 
    width: 60%;
    height: 100%;
    margin-top: 5px;
}


    /*-----section borders-----*/

.sheet-center {
    text-align: center;
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 5px;
    
    color: #F1C11E;
    font-weight: bold;
    text-align: center;
    background: #000000;
    border: 1px solid #F1C11E; 
    border-radius: 5px;
    padding: 5px;
}

    /*--------------Big Checkbox--------------*/

    /* ----Hide actual sheet-arrow checkbox---- */

input.sheet-bigcheck[type="checkbox"], input.sheet-toggle-show[type="checkbox"] {
    
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* ----Fake sheet-arrow checkbox---- */

input.sheet-bigcheck[type="checkbox"] + span::before, input.sheet-toggle-show[type="checkbox"] + span::before {
    
    margin-right: 4px;
    border: solid 1px #F1C11E;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #000000;
    -webkit-box-shadow: 0 0 2px #000000;
    box-shadow: 0 0 2px #000000;
    
    background: #F1C11E;
    background: -moz-radial-gradient(#000000, #F1C11E);
    background: -webkit-radial-gradient(#000000, #F1C11E);
    background: -ms-radial-gradient(#000000, #F1C11E);
    background: -o-radial-gradient(#000000, #F1C11E);
    background: radial-gradient(#000000, #F1C11E);
}

input.sheet-bigcheck[type="checkbox"] + span::before, input.sheet-toggle-show[type="checkbox"] + span::before {
    
    content:"";
    width: 14px;
    height: 14px;
    font-size: 12px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

input.sheet-bigcheck[type="checkbox"]:checked + span::before, input.sheet-toggle-show[type="checkbox"]:checked + span::before {
    
    color: red;
    content: "✓";
    border-color: red;
    background: #0000000;
    background: -moz-radial-gradient(red, #000000);
    background: -webkit-radial-gradient(red, #000000);
    background: -ms-radial-gradient(red, #000000);
    background: -o-radial-gradient(red, #000000);
    background: radial-gradient(red, #000000);
}

    /*-----sheet information-----*/

.sheet-text-long{
    height: 20px;
    width: 80%;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border-radius: 5px; 
    border-color: #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-text-medium{
    height: 20px;
    width: 60%;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border-radius: 5px; 
    border-color: #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-text-short{
    height: 20px;
    width: 25%;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border-radius: 5px; 
    border-color: #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-text-armor-name-1{
    height: 20px;
    width: 69%;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border-radius: 5px; 
    border-color: #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-text-armor-name-2{
    height: 20px;
    width: 44.5%;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border-radius: 5px; 
    border-color: #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-vehicle-damage{
    height: 20px;
    width: 25%;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border-radius: 5px; 
    border-color: #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}


.sheet-number {
    height: 20px;
    width: 5%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #F1C11E;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-damage {
    height: 20px;
    width: 12%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #F1C11E;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-weapon-name {
    height: 20px;
    width: 29.5%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #F1C11E;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-rad {
    height: 20px;
    width: 5%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #32cd32;
    border: 1px solid #000000; 
    border-radius: 5px; 
}

.sheet-number-ac {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #ADD8E6;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-normal {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #BEBEBE;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-laser {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #E3242B;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-fire {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #DD571C;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-plasma {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #028E5F;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-explosion {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #FBE106;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-dr {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #808080;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.sheet-number-rr {
    height: 20px;
    width: 1%;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #32CD32;
    border: 1px solid #000000; 
    border-radius: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
}


    /*-----placeholder textarea-----*/
    
.sheet-text_name {
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 75%;
}

    /*-----textarea-----*/

textarea, .content{
    height: 70px;
    color: #000000;
    font-weight: bold;
    text-align: left;
    background: #F1C11E;
    border: 1px solid #000000; 
    border-radius: 5px; 
    width: 96%;
    margin-top: 5px;
}

/*----Sheet Buttons----*/

.sheet-skill_button {
  background: #F1C11E;
  border-radius: 10px;
  border-color: #000000;
  color: #000000;
  padding: 10px 10px 10px 10px;
  width: 160px;
  font-weight: bold;
  
  background: -moz-radial-gradient(#F1C11E, #000000);
  background: -webkit-radial-gradient(#F1C11E, #000000);
  background: -ms-radial-gradient(#F1C11E, #000000);
  background: -o-radial-gradient(#F1C11E, #000000);
  background: radial-gradient(#F1C11E, #000000);
}

.sheet-sequence_button {
  background: #F1C11E;
  border-radius: 10px;
  border-color: #000000;
  color: #000000;
  width: 50px;
  font-weight: bold;
  
  background: -moz-radial-gradient(#F1C11E, #000000);
  background: -webkit-radial-gradient(#F1C11E, #000000);
  background: -ms-radial-gradient(#F1C11E, #000000);
  background: -o-radial-gradient(#F1C11E, #000000);
  background: radial-gradient(#F1C11E, #000000);
}

.sheet-damage_button {
  background: #F1C11E;
  border-radius: 10px;
  border-color: #000000;
  color: #000000;
  padding: 10px 10px 10px 10px;
  width: 30px;
  font-weight: bold;
  
  background: -moz-radial-gradient(#F1C11E, #000000);
  background: -webkit-radial-gradient(#F1C11E, #000000);
  background: -ms-radial-gradient(#F1C11E, #000000);
  background: -o-radial-gradient(#F1C11E, #000000);
  background: radial-gradient(#F1C11E, #000000);
}

.sheet-burst_button {
  background: #F1C11E;
  border-radius: 10px;
  border-color: #000000;
  color: #000000;
  padding: 10px 10px 10px 10px;
  width: 80px;
  font-weight: bold;
  
  background: -moz-radial-gradient(#F1C11E, #000000);
  background: -webkit-radial-gradient(#F1C11E, #000000);
  background: -ms-radial-gradient(#F1C11E, #000000);
  background: -o-radial-gradient(#F1C11E, #000000);
  background: radial-gradient(#F1C11E, #000000);
}

.sheet-damage-result_button {
  background: #F1C11E;
  border-radius: 10px;
  border-color: #000000;
  color: #000000;
  width: 80px;
  font-weight: bold;
  
  background: -moz-radial-gradient(#F1C11E, #000000);
  background: -webkit-radial-gradient(#F1C11E, #000000);
  background: -ms-radial-gradient(#F1C11E, #000000);
  background: -o-radial-gradient(#F1C11E, #000000);
  background: radial-gradient(#F1C11E, #000000);
}

.sheet-special_button:hover {
  background: red;
  border-color: #000000;
  
  background: -moz-radial-gradient(red, #000000);
  background: -webkit-radial-gradient(red, #000000);
  background: -ms-radial-gradient(red, #000000);
  background: -o-radial-gradient(red, #000000);
  background: radial-gradient(red, #000000);
}

.sheet-skill_button:hover {
  background: red;
  border-color: #000000;
  
  background: -moz-radial-gradient(red, #000000);
  background: -webkit-radial-gradient(red, #000000);
  background: -ms-radial-gradient(red, #000000);
  background: -o-radial-gradient(red, #000000);
  background: radial-gradient(red, #000000);
}

.sheet-sequence_button:hover {
  background: red;
  border-color: #000000;
  
  background: -moz-radial-gradient(red, #000000);
  background: -webkit-radial-gradient(red, #000000);
  background: -ms-radial-gradient(red, #000000);
  background: -o-radial-gradient(red, #000000);
  background: radial-gradient(red, #000000);
}

.sheet-damage_button:hover {
  background: red;
  border-color: #000000;
  
  background: -moz-radial-gradient(red, #000000);
  background: -webkit-radial-gradient(red, #000000);
  background: -ms-radial-gradient(red, #000000);
  background: -o-radial-gradient(red, #000000);
  background: radial-gradient(red, #000000);
}

.sheet-burst_button:hover {
  background: red;
  border-color: #000000;
  
  background: -moz-radial-gradient(red, #000000);
  background: -webkit-radial-gradient(red, #000000);
  background: -ms-radial-gradient(red, #000000);
  background: -o-radial-gradient(red, #000000);
  background: radial-gradient(red, #000000);
}

.sheet-damage-result_button:hover {
  background: red;
  border-color: #000000;
  
  background: -moz-radial-gradient(red, #000000);
  background: -webkit-radial-gradient(red, #000000);
  background: -ms-radial-gradient(red, #000000);
  background: -o-radial-gradient(red, #000000);
  background: radial-gradient(red, #000000);
}

/*----Collapsible----*/

.charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body {
    display: none;
}

/*----Special Roll Templates---*/

/* Smaller margins - remove these if you want the huge default left margin */

.sheet-rolltemplate-custom .sheet-container {
  border: 5px solid gray;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
}

/* Header formatting - title and subtitle */

.sheet-rolltemplate-custom .sheet-header {
  background-color: #F1C11E;
  font-weight: bold;
  text-align: left;
  color: #000000;
  padding: 5px;
}

.sheet-rolltemplate-custom .sheet-title {
  font-size:1.1em;
}

.sheet-rolltemplate-custom .sheet-subtitle {
  font-size:.9em;
}

/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
  display: grid;
  background: #000000;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
  padding: 5px;
}

/* Left column */

.sheet-rolltemplate-custom .sheet-content .sheet-key {
    font-weight: bold;
    padding-right: 5px;
    text-align: right;
    background: #000000;
    color: #F1C11E;
}

/* Right column */

.sheet-rolltemplate-custom .sheet-value {
    padding-right: 5px;
    text-align: left;
    background: #000000;
    color: #F1C11E;
}

.sheet-rolltemplate-custom .inlinerollresult {
    background: #000000;
    border-color: #000000;
}

/* Description field */

.sheet-rolltemplate-custom .sheet-desc {
    grid-column: span 2;
    padding: 5px;
    text-align: left;
    background: #000000;
    color: #F1C11E;

.hidden {
  display: none !important;
}

button {
  font-weight: bold;
  padding: 5px 10px;
  margin: 5px 0;
  cursor: pointer;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}