input[type="number"][readonly],
input[type="text"][readonly] {
  font-weight: bold;
  background-color: lightgrey;
}

input[type="text"],
input[type="number"] {
  background-color: transparent;
  border: 0 solid black;
  border-bottom-width: 1px;
  margin-top: 1px;
}

input[type="text"]:focus,
input[type="number"]:focus {
  border-bottom-width: 2px;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  margin: 1px 0 0 0;
}

input[type="text"] {
  min-width: 3em;
}

.sheet-main {
  width: 90%;
  margin: auto;
}

h1,
h4,
h5{
  color: white;
  margin: 0px;
}
h1 {
  font-size: 50px;
}
.sheet-section {
  margin-top: 15px;
}

.sheet-header,
.sheet-footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
}

.sheet-subtitle {
  position: relative;
  font-size: 15px;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  margin-bottom: 10px;
}

.sheet-subtitle:before,
.sheet-subtitle:after {
  position: absolute;
  top: 20%;
  overflow: hidden;
  width: 50%;
  height: 10px;
  content: "";
  background-color: black;
}
.sheet-subtitle:before {
  margin-left: -50%;
  text-align: right;
}

.sheet-subtitle-text {
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
}

.sheet-box {
  border: 1px solid black;
  background-color: white;

  display: block;
  position: relative;
  clear: both;
  height: auto;
  width: 100%;

  padding-bottom:10px;

}
.sheet-label {

}

.sheet-cell {
  display: inline-block;
  margin: 0.3em 0.5em 0.3em 0.25em;
  height: 3em;
  min-height: 3em;
  vertical-align: top;
  text-align: center;
  position: relative;
  padding-left:5px;
}

.sheet-cell > input[type="number"] {
  width: 98%;
  max-width: 100%;
}
.sheet-cell span {
  padding: 0em 0.07em 0em 0.07em;
  text-align: center;
  font-size: 0.85em;
  font-style: italic;
  font-weight: bold;
  position: relative;
  bottom: 0px;
}

.sheet-cell > * {
  max-width: 100%;
}

.sheet-cell > input,
.sheet-cell > select,
.sheet-cell > .sheet-calc {
  display: block;
  padding: 0.25em 2px 0.25em 2px;
  vertical-align: top;
  height: 1.825em; /* otherwise defaults from base.css hardcode it too tall */
  position: relative;
}

.sheet-disclaimer{
    text-align:center;
    width:100%;
    color:white;
    background-color:black;
    margin-top:10px;
    margin-bottom:-11px;
    font-size: 8px;
    font-weight: bold;
}

.sheet-tab-header,.sheet-tab-body,.sheet-tab-body-skill{
    border:1px solid black;
    background-color:white;
}

.sheet-tab-header{
    border-bottom:0px solid black;
    height: 30px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width:70%;
    font-weight: bold;
    color: white;
    background-color: black;
    padding-top: 10px;
    font-size: 12px;
}
.sheet-tab-body{
    height: 40px;
}

.sheet-tab-body-skill{
    height: auto;
}
.sheet-star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
    color:red;
    font-family: 'Pictos';
    padding-left:20px;
}
.sheet-star:before {
   content: "S";
   position: absolute;
   visibility:visible;

   color:white;
   text-shadow: 2px 0 0 red, 0 2px 0 red, 0 -2px 0 red, -2px 0 0 red, 2px 2px 0 red, 2px -2px 0 red, -2px 2px 0 red, -2px -2px 0 red;

}
.sheet-star:checked:before {
   content: "S";
   position: absolute;

   color:red;
   text-shadow: 2px 0 0 red, 0 2px 0 red, 0 -2px 0 red, -2px 0 0 red, 2px 2px 0 red, 2px -2px 0 red, -2px 2px 0 red, -2px -2px 0 red;
}

.sheet-size-90{
    width:90%;
}

/* turn off spinners for firefox width:3.25em; */
input[type="number"] {
	-moz-appearance: textfield !important;
	-moz-padding-end: .5em;
	padding-inline-end: .5em; /* moz changes to this */
}
/* set right align for numbers */
input[type="number"], span.sheet-number, input.sheet-number {
	text-align:right;
}


/* CHROME: hide spinner area at right when readonly or when not hovering over a number */
input[readonly]::-webkit-inner-spin-button ,
input.sheet-calc::-webkit-inner-spin-button ,
input.disabled::-webkit-inner-spin-button,
input[type="number"]:not(:hover)::-webkit-inner-spin-button  {
    -webkit-appearance: none;
    margin-right:0px;
    padding-right:.25em;
}

/* FIREFOX: hide spinner for all disabled/sheet-calc */
input.sheet-calc[type="number"]:hover,
input.sheet-calc[type="number"]:focus,
input[type="number"].sheet-calc,
input[type="number"]:disabled {
	-webkit-appearance: none;
	-moz-appearance: textfield !important;
	-moz-padding-end:.5em !important;
	padding-inline-end: .5em;
}

.sheet-pictos {
	font-family: "Pictos" !important;
}

input.sheet-header-skill{
    width:35px;
    background-color:white;
    margin-right: 5px;
    margin-top:-3px;
    float: right;
}

.sheet-img-skill{
    margin:-15px 5px 0px -15px;
    width:50px;
    float:left;
}

button[type="roll"] {
	margin-left:initial;
	margin-right:initial;
	margin: .25em .25em .25em .25em ;
	font-size:.8125rem;
}

button, button:hover, button:active {
	background-image: initial;
}

button[type="roll"].sheet-blank-roll-button::before {
    content: '';
}

input[type=checkbox].sheet-checkbox-big
{
    /* Double-sized Checkboxes */
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    padding: 10px;
    margin-left: 25px;
}

/* Might want to wrap a span around your checkbox text */
.sheet-checkbox-big
{
    /* Checkbox text */
    font-size: 110%;
    display: inline;
}


.sheet-weight {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
    color:black;
    font-family: 'Pictos';
    padding-left:20px;
}
.sheet-weight:before {
   content: "b";
   position: absolute;
   visibility:visible;

   color:white;
   text-shadow: 2px 0 0 red, 0 2px 0 red, 0 -2px 0 red, -2px 0 0 red, 2px 2px 0 red, 2px -2px 0 red, -2px 2px 0 red, -2px -2px 0 red;

}
.sheet-weight:checked:before {
   content: "b";
   position: absolute;

   color:black;
   text-shadow: 2px 0 0 red, 0 2px 0 red, 0 -2px 0 red, -2px 0 0 red, 2px 2px 0 red, 2px -2px 0 red, -2px 2px 0 red, -2px -2px 0 red;
}