input {
    border: none;
    border-bottom: 2px solid #444444;
    background-color: rgba(133, 131, 133, 0);
    padding-left: 2px;
}

select {
    font-size: 1em;
    height: 2em;
    margin-bottom: 0;
    margin-left: 3px;
}

.textchatcontainer .message.you {
    background-color: #e5e3c3;
}

.sheet-bold {
    font-weight: bold;
}


.sheet-btns-bs,
.sheet-btns-lp {
    margin: 0;
    padding: 0;
    line-height: 5px;
    font-size: 1em;
    width: 20px;
    height: 20px;
    border: 1px solid #d7c38f;
    background: none;
    border-radius: 3px;
}

.sheet-btn-up,
.sheet-btn-down {
    font-family: 'Pictos';
}

.sheet-btn-up {
    color: green;
}

.sheet-btn-down {
    color: red;
}

.sheet-btn-bs-minus,
.sheet-btn-lp-minus {
    font-size: 1em;
}

.sheet-cb-resurected {
    height: 100%;
}


.charsheet {
    background-color: #ffffa5;
    min-width: 948px;
    min-height: 600px;
}

/* General layout flex options */
.sheet-flexc {
    display: flex;
    flex-direction: column;
}

.sheet-flexr {
    display: flex;
    flex-direction: row;
}

.sheet-jcfs {
    justify-content: flex-start;
}
.sheet-jcfe {
    justify-content: flex-end;
}
.sheet-jcc {
    justify-content: center;
}
.sheet-jcsa {
    justify-content: space-around;
}
.sheet-jcsb {
    justify-content: space-between;
}
.sheet-jcse {
    justify-content: space-evenly;
}
/* end general layout flex options */


/*  tab set up start  ==========================*/
label.sheet-tab {
    display: inline;
    position: relative;
    width: 18%;
    font-weight: bold;
    color: #939252;
    padding: .5em 1em;
    padding-bottom: 7px;
    cursor: pointer;
    z-index: 10;
    text-align: center;
    border: 1px solid #550000;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.sheet-tab-area div[class^="sheet-tab-view"] {
    display: none;
}

.sheet-tab-area input.sheet-tab1:checked ~ div.sheet-tab-view1,
.sheet-tab-area input.sheet-tab2:checked ~ div.sheet-tab-view2,
.sheet-tab-area input.sheet-tab3:checked ~ div.sheet-tab-view3 {
    display: block;
}

input.sheet-tab:checked::before {
    border-bottom-color: white;
}
.sheet-tab-area input.sheet-tab {
    height: 1.1em;
    z-index: 15;
    position: absolute;
    opacity: 0;
}

.sheet-tab-area input.sheet-tab1:checked + label.sheet-tab1,
.sheet-tab-area input.sheet-tab2:checked + label.sheet-tab2,
.sheet-tab-area input.sheet-tab3:checked + label.sheet-tab3 {
    background: #a7a52c;  /*originally ab8b57*/
    color: white; /*originally white*/
    text-shadow: 2px 2px 1px black;
    border-bottom: none;
    padding-bottom: 9px;
}
/*  end tab setup ==============================*/

/*  columns and rows start ======================= */
.sheet-hth-attack-panel {
    display: grid;
    width: 75%;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'lbl-col input-col';
    margin-top: 5px;
}


/*  columns and rows end ======================= */



/*  All inputs */
input.sheet-input2,
input.sheet-input2-sm {
    max-width: 42px;
    color: darkblue;
    text-align: center;
}
input.sheet-input2-sm {
    font-size: 1em;
    height: 2em;
}

input.sheet-input-bs,
input.sheet-input-lp {
    display: block;
    font-size: 2em;
    width: 58px;
    color: red;
    margin-left: auto;
    margin-right: auto;
    margin-top: .5em;
    text-align: center;
}

input.sheet-input-dotted-sm,
input.sheet-input-dotted {
    width: 90px;
    border-bottom: 1px dotted black;
    line-height: 1em;
}

input.sheet-input-dotted-sm {
    width: 42px;
    font-size: .7em;
}

input.sheet-input-dotted-sm-grd {
    border-bottom: 1px dotted black;
    width: 42px;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    font-weight: bold;
    padding-right: 0;
}

input[type="number"].sheet-input-dotted-lc,
input.sheet-input-dotted-save,
input.sheet-input-dotted-mth, /* Missile To Hit */
input.sheet-input-dotted-hth /* Hand To Hand */{
    width: 70px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1em;
    border-bottom: 1px dotted black;
    padding: 0;
    text-align: center;
}
input.sheet-input-dotted-mth {
    width: 40px;
    line-height: 1.2em;
    font-size: 1em;
}

input[type="number"].sheet-input-dotted-lc,
input.sheet-input-dotted-save {
    width: 42px;
    line-height: 1.5em;
}

input.sheet-input-dotted-lc {

}

input[type="number"].sheet-input-eps {
    flex: 1;
    width: 100%;
    border-bottom: 1px solid black;
    text-align: right;
    font-size: 1.5em;
}

input[type="number"][name="attr_ep_magician"],
input[type="number"][name="attr_ep_alchemist"] {
    flex: 0 1;
}

.sheet-input-group,
.sheet-input-group2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.sheet-input-group2 {
    justify-content: center;
    height: 22px;
    line-height: 1.4em;
}

.sheet-input-dotted,
.sheet-input-dotted-sm,
.sheet-input-group3 {
    display: block;
    text-align: center;
}



.sheet-input-group-char-name {
    flex: 4;
    margin-right: 20px;
}

.sheet-input-group-race,
.sheet-input-group-type {
    flex: 1;
}
/* End inputs */

.sheet-fighter-thief-exp-row {
    border-bottom: 2px solid #550000;
    padding-bottom: .5em;
}


.sheet-col-fighter-exp {
    border-right: 2px solid #550000;
    border-bottom: 2px solid #550000;
    padding: 0 0 1em 0;
}
.sheet-fighter-thief-priest-col {
    flex: 1;
    border-right: 2px solid #550000;
    padding: 0 0 .5em 0;
}

.sheet-col-fighter-exp,
.sheet-col-thief-exp,
.sheet-col-priest-exp {
    flex: 0 1;
    padding: .5em;
}

.sheet-col-fighter-exp {

}

.sheet-col-thief-exp {
}

.sheet-col-priest-exp {
 }
.sheet-priest-col1 {
    max-height: 200px;
}


.sheet-priest-col2 {
    padding: .5em .5em 0 0;
}

/* ---------------- Magician / Alchemist styling ----------------------*/

.sheet-alchemist-col,
.sheet-magician-col {
    flex: 1;
}
.sheet-magician-col {
    border-right: 2px solid #550000;
}

.sheet-magician-eps-box,
.sheet-alchemist-eps-box {
    padding: 5px;
}
.sheet-magician-eps-box {

}

/* ===== Spell book ===== */
.sheet-spbook-col {
    padding-bottom: 1em;
    height: 100%;
    background-color: #ffffc8;
    overflow: hidden;
    overflow-y: scroll;
}

.sheet-spbook-header {
    border-radius: 5px;
    border: 1px solid black;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    overflow: hidden;
    background-color: #b4b400;
    font-size: 1.5em;
    font-weight: bold;
    min-height: 30px;
    text-align: center;
    text-shadow: 1px 1px 1px black;
    color: white;
}

.sheet-spell-entry {
    padding-left: 5px;
    border-bottom: 1px dashed orange;
}
.sheet-spell-lvl {
    display: inline-block;
    font-size: 1.3em;
    color: brown;
    padding-left: 30px;
    background-color: #f1f1f1;
    border-bottom: 1px solid brown;
}
.sheet-spell-entry input[type="checkbox"] {
    display: inline-block;
}
.sheet-spell-entry input[type="checkbox"]:checked ~ p {
    display: inline;
    /*font-weight: bold;*/
    color: #684e00;
}

.sheet-spell-entry .sheet-spell-lbl {
    color: #0048ff;
    font-weight: bold;
}
.sheet-spell-entry .sheet-spell-abv {
    color: #a600ff;
    display: inline-block;
}
.sheet-spell-entry p {
    color: #c79300;
    display: inline;
}
span.sheet-dmg {
    color: #880000;
    font-weight: bold;
}
span.sheet-rng {
    color: #01a37e;
}
span.sheet-radius {
    color: #000000;
    font-weight: bold;
}
.sheet-formula-col {
    text-align: center;
}
.sheet-formula-charm-col {
    text-align: center;
    font-size: .8em;
}
.sheet-formula-c1 {
    color: red;
}
.sheet-formula-c2 {
    color: blue;
}
.sheet-formula-numerator {
    border-bottom: 1px solid black;
    text-align: center;
}
.sheet-formula-denominator {
    text-align: center;
}

/* ===== Potion book ===== */
.sheet-pobook-col {
    padding-bottom: 1em;
    height: 100%;
    background-color: #eaffc8;
    overflow: hidden;
    overflow-y: scroll;
}

.sheet-poi-clear {
    color: gray;
}

.sheet-poi-black {
    color: black;
}

.sheet-poi-yellow {
    color: goldenrod;
}

.sheet-poi-brown {
    color: brown;
}

.sheet-poi-green {
    color: green;
}

.sheet-poi-orange {
    color: orange;
}

.sheet-poi-violet {
    color: violet;
}

.sheet-poi-milky {
    color: white;
    text-shadow: 1px 1px 1px black;
}



/* ------------- end Magician / Alchemist styling -------------------  */

.sheet-preach-row {
    padding-right: .5em;
}

.sheet-col-header {
    font-size: .8em;
    color: darkred;
    text-align: center;
}
.sheet-header1  {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}



.sheet-stats-panel-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 230px 230px;
    
    grid-template-areas: 'tlquad trquad'
                         'blquad brquad';
}

.sheet-experience-panel-view {
    height: 100%;
}

.sheet-thief-skills-box {
    padding-right: .5em;
}

.sheet-lbl-btn,
.sheet-lbl-mth-btn,
.sheet-lbl-hth-btn {
    border: 1px solid black;
    border-radius: 4px;
    background-image: linear-gradient(#859da7, #384247);
    color: lightyellow;
    padding: 1px 2px;
    margin-top: 2px;
    min-width: 46px;
    text-align: center;
}

.sheet-lbl-btn:hover,
.sheet-lbl-mth-btn:hover,
.sheet-lbl-hth-btn:hover {
    background-color: #859da7;
    background-image: none;
    color: black;
    /*background-image: linear-gradient(#384247, #859da7);*/
}

.sheet-lbl-mth-btn {
    max-height: 40px;
}

.sheet-lbl-mth-btn {
    flex: 1;
    text-align: left;
}

.sheet-atk-btn-col {
    flex: 1;
}

.sheet-grid-lbl-col {
    grid-area: lbl-col;
}
.sheet-grid-input-col {
    grid-area: input-col;
}

.sheet-volley-cnt > label {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    text-align: right;
}
input[type="radio"][name="sheet-volleycnt"] {
    margin-top: -5px;
    margin-right: 10px;
}

.sheet-lbl {
    font-size: 1em;
}

.sheet-lbl1,
.sheet-lbl3 {
    font-size: 1.5em;
}

.sheet-lbl2 {
    font-size: 1.2em;
    flex: 1;
    line-height: 1.6em;
}
.sheet-lbl2g {
    display: inline;
    font-size: 1.1em;
    line-height: 1.7em;
}

.sheet-lbl3 {
    color: darkred;
    text-shadow: 1px 1px 0 black;
    padding-right: 5px;
}






.sheet-perm-value {
    min-width: 40px;
    flex: 0 1;
    text-align: center;
    border-bottom: 2px solid #444444;
    background-color: rgba(10, 1, 2, 0.2);
}

.sheet-stats-tlquad,
.sheet-stats-trquad {
    margin-top: 5px;
}

.sheet-stats-tlquad {
    grid-area: tlquad;
    border-bottom: 1px dashed #550000;
}

.sheet-stats-trquad {
    grid-area: trquad;
    border-bottom: 1px dashed #550000;
}

.sheet-stats-blquad {
    grid-area: blquad;
}

.sheet-stats-brquad {
    grid-area: brquad;
}

.sheet-col-info1 {
    flex: 0 1;
}
.sheet-info-col-lbl {
    flex: 1 50px;
    min-width: 50px;
}
.sheet-info-col-lbl-sm {
    font-size: 1em;
    line-height: 2em;
}
.sheet-info-col-lbl-fullload {
    font-size: .7em;
}
.sheet-info-col-lbl-mth,
.sheet-info-col-lbl-hth {
    font-size: 1em;
    flex: 1 50px;
}
.sheet-hth-col2 {
    font-size: 1em;
    width: 150px;
}
.sheet-col-lbl-slay {
    font-size: 1em;
    padding-right: 3px;
}

.sheet-col-money {
    /*width: 170px;*/
    flex: 0 1 170px;
}

.sheet-money-col-lbl {
    flex: 1;
}

.sheet-lc-col-lbl {
    flex: 0 1 50px;
}

.sheet-lc-col-lbl-lc {
    flex: 1;
    line-height: 1.8em;
}

.sheet-header1-input {
    width: 52%;
    font-size: 1.5em;
    height: 30px;
    color: #976000;
    font-weight: bold;
}

.sheet-header1 .sheet-select {
    width: auto;
}

.sheet-select-load-cat {
    font-size: .9em;
    height: 2em;
    line-height: 1em;
    width: 48px;
    padding: 2px;
    margin: 2px 0;
}

.sheet-row-spacer {
    height: 15px;
}

.sheet-select-type {
    margin-right: 10px;
}

.sheet-tab-area {
    height: 540px;
    position: relative;
    top: 1em;
}

.sheet-tab-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 0;
}

.sheet-tab-view {
    border: 2px solid #550000;
    margin-top: 1px;
    top: 5px;
    height: 460px;
    position: relative;
    z-index: 0;
}




.sheet-val,
.sheet-val-lg,
.sheet-val-tf,
.sheet-val-sm,
.sheet-val-sm2,
.sheet-val-quota {
    display: block;
    border-bottom: 1px dotted black;
    /*padding-left: 10px;*/
    width: 1em;
    text-align: center;
}

.sheet-val-lg {
    font-size: 1.5em;
    width: 1.5em;
}

.sheet-val-sm {
    font-size: .7em;
}

.sheet-val-sm2 {
    width: 1.8em;
}

.sheet-val-tf {
    font-size: 1.3em;
    font-weight: bold;
    padding-left: 0;
    min-width: 28px;
    flex: 1;
}

.sheet-val-quota {
    flex: 1;
}

.sheet-wrapper {
    min-width: 948px;
    max-width: 955px;
}



/*======= roll template classes ========*/
/*-------- Thief function       --------*/
.sheet-rolltemplate-percent_func .sheet-tf-container {
    display: flex;
    flex-direction: column;
    border: 2px solid navy;
    height: 109px;
}

.sheet-rolltemplate-percent_func h3 {
    margin-bottom: 0;
    
    color: #d20101;
    text-shadow: 1px 1px 1px black;
    padding-left: 10px;
    display: inline-block;
}

.sheet-rolltemplate-percent_func .sheet-header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #ffffd8;
    border-bottom: 1px solid #ffbf00;
}

.sheet-rolltemplate-percent_func .sheet-hlbl {
    padding-top: 5px;
}

.sheet-rolltemplate-percent_func .sheet-func {
    border-bottom: #0a4ba1;
    text-align: center;
    color: red;
    font-weight: bold;
    border-bottom: 1px solid #ffbf00;
    background-color: #eaeac7;
}

.sheet-rolltemplate-percent_func .sheet-results {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #ffffd8;
}

.sheet-rolltemplate-percent_func .inlinerollresult {
    background-color: #aac19f;
    color: white;
    text-shadow: 2px 2px 1px black;
    border-radius: 5px;
    border: 1px solid black;
}

.sheet-rolltemplate-percent_func .sheet-need-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-percent_func .sheet-roll-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-percent_func .sheet-need-header {
    font-size: 1em;
    color: #006d57;
    line-height: 1.4em;
    height: 2em;
}

.sheet-rolltemplate-percent_func .sheet-needed {
    font-size: 1.5em;
    text-align: center;
    height: 26px;
}


.sheet-rolltemplate-percent_func .sheet-need-footer {
    font-size: .6em;
    color: #506a00;
    text-align: center;
    line-height: 1.2em;
}

.sheet-rolltemplate-percent_func .sheet-roll-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-percent_func .sheet-roll-header {
    font-size: 1em;
    color: #006d57;
    line-height: 1.4em;
    height: 2em;
}

.sheet-rolltemplate-percent_func .sheet-roll-val {
    font-size: 1.5em;
    text-align: center;
    height: 26px;
}


.sheet-rolltemplate-percent_func .sheet-roll-fail {
    height: 10px;
    margin-top: 0;
    background-color: #880000;
}

.sheet-rolltemplate-percent_func .sheet-roll-success {
    height: 10px;
    margin-top: 0;
    background-color: #008800;
}

/*-------- missle to hit function       --------*/
.sheet-rolltemplate-mth .sheet-mth-container {
    display: flex;
    flex-direction: column;
    border: 2px solid navy;
    /*height: 109px;*/
}

.sheet-rolltemplate-mth h3 {
    margin-bottom: 0;
    
    color: #d20101;
    text-shadow: 1px 1px 1px black;
    padding-left: 10px;
    display: inline-block;
}

.sheet-rolltemplate-mth .sheet-header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #ffffd8;
    border-bottom: 1px solid #ffbf00;
}

.sheet-rolltemplate-mth .sheet-hlbl {
    padding-top: 5px;
}

.sheet-rolltemplate-mth .sheet-plus {
    color: #aa00cb;
    font-weight: bold;
}

.sheet-rolltemplate-mth .sheet-dmg-done {
    border-bottom: #0a4ba1;
    text-align: center;
    color: #004e9a;
    font-weight: bold;
    border-bottom: 1px solid #ffbf00;
    background-color: #eaeac7;
    padding-top: 8px;
}

.sheet-rolltemplate-mth .sheet-results {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #ffffd8;
}

.sheet-rolltemplate-mth .inlinerollresult {
    background-color: #951313;
    color: white;
    text-shadow: 2px 2px 1px black;
    border-radius: 5px;
    border: 1px solid #ffaaaa;
}

.sheet-rolltemplate-mth .sheet-maxdmg {
    font-size: 2em;
    color: #951313;
    padding: 4px 0;
}

.sheet-rolltemplate-mth .sheet-need-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-mth .sheet-roll-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-mth .sheet-need-header {
    font-size: 1em;
    color: #006d57;
    line-height: 1.4em;
    height: 2em;
}

.sheet-rolltemplate-mth .sheet-needed {
    font-size: 1.5em;
    text-align: center;
    height: 26px;
}


.sheet-rolltemplate-mth .sheet-need-footer {
    font-size: .6em;
    color: #506a00;
    text-align: center;
    line-height: 1.2em;
}

.sheet-rolltemplate-mth .sheet-roll-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-mth .sheet-roll-header {
    font-size: 1em;
    color: #006d57;
    line-height: 1.4em;
    height: 2em;
}

.sheet-rolltemplate-mth .sheet-roll-val {
    font-size: 1.5em;
    text-align: center;
    height: 26px;
}


.sheet-rolltemplate-mth .sheet-roll-fail {
    height: 10px;
    margin-top: 0;
    background-color: #880000;
}

.sheet-rolltemplate-mth .sheet-roll-success {
    height: 10px;
    margin-top: 0;
    background-color: #008800;
}
/*======================================*/
/*-------- Hand to Hand Attack ---------*/
.sheet-rolltemplate-hth .sheet-hth-container {
    display: flex;
    flex-direction: column;
    border: 2px solid navy;
    /*height: 109px;*/
}

.sheet-rolltemplate-hth h3 {
    margin-bottom: 0;
    
    color: #d20101;
    text-shadow: 1px 1px 1px black;
    padding-left: 10px;
    display: inline-block;
}

.sheet-rolltemplate-hth .sheet-header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    line-height: 2em;
    background-color: #ffffd8;
    border-bottom: 1px solid #ffbf00;
}

.sheet-rolltemplate-hth .sheet-hlbl {
    padding-top: 5px;
}

.sheet-rolltemplate-hth .sheet-plus {
    color: #aa00cb;
    font-weight: bold;
}

.sheet-rolltemplate-hth .sheet-dmg-done {
    border-bottom: #0a4ba1;
    text-align: center;
    color: #004e9a;
    font-weight: bold;
    border-bottom: 1px solid #ffbf00;
    background-color: #eaeac7;
    padding-top: 8px;
}

.sheet-rolltemplate-hth .sheet-results {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #ffffd8;
}

.sheet-rolltemplate-hth .inlinerollresult {
    background-color: #951313;
    color: white;
    text-shadow: 2px 2px 1px black;
    border-radius: 5px;
    border: 1px solid #ffaaaa;
}

.sheet-rolltemplate-hth .sheet-maxdmg {
    font-size: 2em;
    color: #951313;
    padding: 4px 0;
}

.sheet-rolltemplate-hth .sheet-need-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-hth .sheet-roll-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-hth .sheet-need-header {
    font-size: 1em;
    color: #006d57;
    line-height: 1.4em;
    height: 2em;
}

.sheet-rolltemplate-hth .sheet-needed {
    font-size: 1.5em;
    text-align: center;
    height: 26px;
}


.sheet-rolltemplate-hth .sheet-need-footer {
    font-size: .6em;
    color: #506a00;
    text-align: center;
    line-height: 1.2em;
}

.sheet-rolltemplate-hth .sheet-roll-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-rolltemplate-hth .sheet-roll-header {
    font-size: 1em;
    color: #006d57;
    line-height: 1.4em;
    height: 2em;
}

.sheet-rolltemplate-hth .sheet-roll-val {
    font-size: 1.5em;
    text-align: center;
    height: 26px;
}


.sheet-rolltemplate-hth .sheet-roll-fail {
    height: 10px;
    margin-top: 0;
    background-color: #880000;
}

.sheet-rolltemplate-hth .sheet-roll-success {
    height: 10px;
    margin-top: 0;
    background-color: #008800;
}