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

.charsheet {
    background: white;
}


.sheet-clear {
    background:none;
}
/*-----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,
input.sheet-tab6:not(:checked) ~ .sheet-tab6 {
    display: none;
}

input.sheet-tab {
    width: calc(20% - 4px);
    max-width: 150px;
    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;

    background: #fff;
    border: solid 1px #a8a8a8;
    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 {
    border-bottom-color: white;
}

.sheet-tab-br {
    border-bottom: 1px solid #a8a8a8;
    margin-bottom: 5px;
    margin-top: 1px;
}

    /*-----Sheet Arrow-----*/
input.sheet-arrow {
    float: left;
}

div.sheet-body {
    display: none;
}

input.sheet-arrow:checked ~ div.sheet-body {
    display: block;
}

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

input.sheet-arrow[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-arrow[type="checkbox"] + span::before
{
    color:white;
    margin-right: 4px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    float: left;
    content: "►";
    width: 14px;
    height: 14px;
    font-size: 12px;
}
input.sheet-arrow[type="checkbox"]:checked + span::before
{
    color:white;
    content: "▼";
}
    /*====Sheet Col ====*/
.sheet-wrapper .sheet-3colrow .sheet-col {
    width: calc(40% - 9px) !important;
    margin-right: 5px !important;
}

.sheet-wrapper .sheet-3colrow .sheet-col:nth-child(2) {
    width: calc(20% - 9px) !important;
    margin-right:5px;
}

.sheet-wrapper .sheet-3colrow .sheet-col:last-child {
    margin-right: 0;
}

.sheet-wrapper .sheet-2colrow .sheet-col {
    width: calc(50% - 3px);
    margin-right: 2px;
}

.sheet-wrapper .sheet-2colrow .sheet-col:last-child {
    margin-right: 0 !important;
}

.sheet-wrapper .sheet-1colrow .sheet-col {
    width: calc(100% - 3px) !important;
    margin-right: 0 !important;
}
    /*-----sheet select-----*/
.sheet-select {
    margin-bottom: 0px;
    
    width: 100%;
    text-align: center;
    padding-left: 10%; 
    text-indent: 0.01px; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 00px;
    -moz-padding-end: 00px;
}

.sheet-wrapper .sheet-select {
    border: 0 !important;  
	-webkit-appearance: none;  
	-moz-appearance: none; 
	background: transparent;
	text-overflow: ""; 
    text-align: center;
    
	color: black;
	border-radius: 15px;
    padding-top:0px;

    box-shadow: inset 0 0 5px black;
}

.sheet-wrapper select.sheet-species, select.sheet-species *, .sheet-wrapper input.sheet-species[type="text"] {
    text-shadow: 0px 0px 5px #23AB4C;
    background: white;
    box-shadow: inset 0 0 5px #23AB4C;
}

 .sheet-wrapper select.sheet-career, select.sheet-career *, .sheet-wrapper input.sheet-career[type="text"] {
    text-shadow: 0px 0px 5px #A54885;
    background: white;
    box-shadow: inset 0 0 5px #A54885; 
}

.sheet-wrapper select.sheet-body, select.sheet-body * {
    text-shadow: 0px 0px 5px silver;
    background: white;
    box-shadow: inset 0 0 5px silver;
}

.sheet-wrapper select.sheet-speed, select.sheet-speed * {
    text-shadow: 0px 0px 5px #FFF100;
    background: white;
    box-shadow: inset 0 0 5px #FFF100;
}

.sheet-wrapper select.sheet-mind, select.sheet-mind * {
    text-shadow: 0px 0px 5px #00ADEF;
    background: white; 
    box-shadow: inset 0 0 5px #00ADEF;
}

.sheet-wrapper select.sheet-will, select.sheet-will * {
    text-shadow: 0px 0px 5px #ED2229;
    background: white;
    box-shadow: inset 0 0 5px #ED2229;
}
    /*-----text-----*/

h5 {
    text-shadow: 0px 0px 10px black;
    color:black;
}

th {
    text-shadow: 0px 0px 10px black;
    color:black;
}

h4 {
    text-shadow: 0px 0px 10px black;
    color:black;
}

h2 {
    text-shadow: 0px 0px 20px black;
    color:black;
}

{
    text-shadow: 0px 0px 10px black;
    color:black;
}

.sheet-center {
    text-align: center
}

.sheet-left {
    text-align: left
}

.sheet-right {
    text-align: right
}

.sheet-motto {
    text-align: center;
    font-style: italic;
    font-weight: 700;
}

.sheet-goal {
    text-align: center;
    font-style: italic;
}
/*====text box ====*/
.sheet-wrapper input[type="text"], .sheet-wrapper input[type="number"], .sheet-wrapper textarea {
    display: inline-block;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px dotted gray;
    background-color: transparent;
    vertical-align: middle;
}

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

textarea {
    height: 30px;
}

table.sheet-center {
    text-align: center;
    margin-left:auto; 
    margin-right:auto;
}
/*--------------Big Checkbox--------------*/

/* ----Hide actual sheet-arrow checkbox---- */
input.sheet-bigcheck[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
{
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

input.sheet-bigcheck[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
{
    color: red;
    content: "✖";
}

input.sheet-black[type="checkbox"] + span::before
{
    color: black;
    content: "✖";
    width: 14px;
    height: 14px;
    font-size: 12px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
input.sheet-black[type="checkbox"]:checked + span::before
{
    color: black;
    content: "✖";
}
/*-----Hidden-----*/
.sheet-hidden {
    display:block;
}

/*--------------Round checkbox--------------*/

/* ----Hide actual roundcheck checkbox---- */
input.sheet-roundcheck[type="checkbox"]
{
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* ----Fake roundcheck checkbox---- */
input.sheet-roundcheck[type="checkbox"] + span::before
{
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    border-radius: 20px 20px 20px 20px;

    -moz-box-shadow: 0 0 20px #ccc;
    -webkit-box-shadow: 0 0 20px #ccc;
    box-shadow: 0 0 20px #ccc;
    
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
    
    -moz-border-radius:  20px 20px 20px 20px;
    -webkit-border-radius:  20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
}

input.sheet-roundcheck[type="checkbox"] + span::before
{
    content: "";
    width: 14px;
    height: 14px;
    font-size: 12px;
    
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
input.sheet-roundcheck[type="checkbox"]:checked + span::before
{
    color: red;
    font-size: 1em;
    content: "✓";
}

/* Button Reset */
.charsheet .sheet-wrapper button[type="roll"]:before {
    content: ""!important;
    display: none;
}
.charsheet .sheet-wrapper button[type="roll"],
.charsheet .sheet-wrapper .sheet-roll {
    width: 100%;
    height:24px;
    vertical-align: middle;
    padding: 0;
    display: inline-block;
    margin: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    
    background-color: transparent;
    border: 1px solid black;
    
    white-space: nowrap;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.charsheet .sheet-wrapper button[type="roll"]:hover,
.charsheet .sheet-wrapper .sheet-roll:hover,
.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
    background-color: black;
    border-color: red;
}

.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
}

.charsheet .sheet-wrapper button[type="roll"] label,
.charsheet .sheet-wrapper button[type="roll"] input {
    height:24px;
    line-height: 24px;
    font-size: 11px; /*13px*/
    vertical-align: middle;
    text-align:center;
    width: 99%;
    cursor: pointer;
    background: none;
    box-shadow: none;
    transition: none;
    border-radius: none;
    border:none;
    font-weight:700;
}

.charsheet .sheet-wrapper button[type="roll"] input {
}

.charsheet .sheet-wrapper button[type="roll"]:hover label,
.charsheet .sheet-wrapper button[type="roll"]:hover input {
    color: white;
    border: none;
}

.sheet-speedroll button[type="roll"]  {
    border: 1px solid  #FFF100;
}

.sheet-speedroll button[type="roll"]:hover label {
    background-color: #FFF100;
    color:black;
}

.sheet-bodyroll button[type="roll"]  {
    border: 1px solid silver;
}

.sheet-bodyroll button[type="roll"]:hover label {
    background-color: silver;
    color:black;
}

.sheet-mindroll button[type="roll"]  {
    border: 1px solid #00ADEF;  
}

.sheet-mindroll button[type="roll"]:hover label {
    background-color: #00ADEF;
    color:black;
}

.sheet-willroll button[type="roll"]  {
    border: 1px solid #ED2229;
}

.sheet-willroll button[type="roll"]:hover label {
    background-color: #ED2229;
    color:black;
}

.sheet-speciesroll button[type="roll"]  {
    border: 1px solid #23AB4C;  
}

.sheet-speciesroll button[type="roll"]:hover label {
    background-color: #23AB4C;
    color:black;
}

.sheet-careerroll button[type="roll"]  {
    border: 1px solid #A54885;
}

.sheet-careerroll button[type="roll"]:hover label {
    background-color: #A54885;
    color:black;
}