/* GLOBAL SETTINGS
    =============================  */
* {
  box-sizing: border-box;
  font-family: sans-serif; }
 
.sheet-container {
    max-width:1100px;
    min-width:1100px;
    border-image-source: url(http://imgsrv.roll20.net/?src=raw.githubusercontent.com/Roll20/roll20-character-sheets/master/FACES%2520%28French%29/FACES_png.png);
    border-image-slice: 45 55 50 55;
    border-image-width: 2%;
    border-image-outset: 10px 20px 10px 20px;
    border-image-repeat: round;
}

button:before {
  display: none; }
button:focus, button:hover, button:active {
    background: none;
  background-color: black !important; }
button:focus, button:hover, button:active, button:focus > h2, button:hover > h2, button:active> h2, 
.sheet-tabs button:focus, .sheet-tabs button:hover, .sheet-tabs button:active,
.sheet-pc button:focus, .sheet-pc button:hover, .sheet-pc button:active {
  color: whitesmoke;
  text-shadow: 1px 1px 2px black, 0 0 25px rgba(181, 181, 181, 0.25), 0 0 5px #dbdbdb; }
button[type="roll"], button[type="action"] {
  background-color: whitesmoke;
  border-bottom: 0.01em solid #666;
  border-bottom-right-radius: 0.01em;
  border-color: black;
  border-radius: 0.25em;
  border-right: 0.02em solid #333333;
  border-style: outset;
  color: black;
  margin: 0.2em !important;
  padding: 0.1em !important; }

div {
  background-color: transparent;
  width: 100%; }

fieldset {
  background-color: transparent; }

h1 {
  color: black;
  text-transform: uppercase; }

h2 {
  font-size: 1em;
  line-height: 1.4em;
  color: black;}
  h2.sheet-label {
    border-bottom: 0.15em solid black;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    margin-left: 3%; }

h3 {
  font-size: 1.25em;
  line-height: 36px; }

input[type="text"], input[type="number"] {
  background-color: transparent;
  -moz-appearance: textfield;
  border-bottom: 0.15em solid black;
  text-align: center;
  border-left: 0em;
  border-radius: 0em;
  border-right: 0em;
  border-top: 0em;
  height: 2.1em;
  font-size: 1.25em;}
input::placeholder {
  background-color: rgba(181, 181, 181, 0.25);
  border: 0.1em dotted black; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="number"] {
    font-weight: bold;
}

input.sheet-talent {
  font-size: 1em; 
  height: 1.6em;
}

label {
  margin-bottom: 0px;
  padding-right: 0px; }

span {
  word-break: break-word; }

textarea {
  text-align: left;
  border-bottom: 0.2em dotted #e3e3e3;
  font-size: 14px;
  font-weight: normal;
  height: 50px;
  line-height: 18px;
  overflow: hidden;
  overflow-wrap: break-word;
  padding: 2px;
  resize: vertical;
  vertical-align: top;
  white-space: pre-line; }

.charsheet {
  min-width: 30em; }

/* FLEXBOX
   ============================= */
div.sheet-flex {
  align-content: flex-start;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
  vertical-align: top; }
  
div.sheet-attribute-flex {
    align-content: flex-start;
    flex-direction: column;
    height: 100%;
}

div.sheet-flex-item {
    flex:1 1 auto;
}

div.sheet-logo-flex {
    justify-content: center
}
    
div.sheet-pc-flex {
  display: inline-flex; }
 
div.sheet-container-flex {
    justify-content:space-evenly
}

/* HIDE DIFFERENT SHEET TYPES BY DEFAULT
   ============================= */
div.sheet-config,
div.sheet-pc, div.sheet-notes {
  display: none; }
 
input.sheet-type[value="config"] ~ div.sheet-config,
input.sheet-type[value="character"] ~ div.sheet-pc,
input.sheet-type[value="notes"] ~ div.sheet-notes{
  display: block; }

/* GRID
   ============================= */
div.sheet-grid {
  display: inline-grid;
  grid-column-gap: 0.2em;
  grid-row-gap: 0.2em;}

div.sheet-grid-tab-inputs label:nth-of-type(1) {
  grid-area: 1 / 2 / 1 / 2; }
div.sheet-grid-tab-inputs span:nth-of-type(1) {
  grid-area: 1 / 1 / 1 / 1; }
div.sheet-grid-tab-inputs label:nth-of-type(2) {
  grid-area: 2 / 2 / 2 / 2; }
div.sheet-grid-tab-inputs span:nth-of-type(2) {
  grid-area: 2 / 1 / 2 / 1; }
div.sheet-grid-tab-inputs label:nth-of-type(3) {
  grid-area: 3 / 2 / 3 / 2; }
div.sheet-grid-tab-inputs span:nth-of-type(3) {
  grid-area: 3 / 1 / 3 / 1; }

/* HIGHLIGHT BUTTONS
   ============================= */
input.sheet-type[value="character"] ~ div.sheet-tabs button[name*="character"],
input.sheet-type[value="config"] ~ div.sheet-tabs button[name*="config"],
input.sheet-type[value="notes"] ~ div.sheet-tabs button[name*="notes"] {
  background-color: black;
  box-shadow: inset 0px 0px 3px 1px rgba(181, 181, 181, 0.25);
  color: whitesmoke; }

/* TABS & LOGO SECTION
   ============================= */
div.sheet-tabs label > input {
    width: 100%; }

/* INPUTS FOR CHARACTER, PLAYER, NOTES..... */
div.sheet-grid-tab-inputs {
  grid-template-columns: 8em 1fr; }

div.sheet-grid-tab-inputs span {
    font-weight: bold;
    text-transform: uppercase; }

div.sheet-grid-tab-buttons {
  grid-template-columns: 5em 5em 5em;
  margin-top: 2%; }

div.sheet-grid-tab-buttons button[name*="character"],
div.sheet-grid-tab-buttons button[name*="config"],
div.sheet-grid-tab-buttons button[name*="notes"]{
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    font-variant: small-caps; }

/* CONFIG SHEET
    ============================= */
input.sheet-customcheck[value="1"] ~ div.sheet-custom {
    display: block;
}

input.sheet-customcheck[value="1"] ~ div.sheet-nocustom {
    display: none;
}

div.sheet-custom {  
  display: none;
}

/* PC SHEET
   ============================= */
div.sheet-grid-header {
  grid-template-columns: 1em 1fr; }
  div.sheet-grid-header button {
    grid-area: 1 / 1 / 1 / 1; }
  div.sheet-grid-header h1 {
    grid-area: 1 / 2 / 1 / 3; }

.sheet-grid-pc {
    grid-template-columns: 250px 340px 250px;
}

div.sheet-pc-flex {
  border: 0.15em solid black;
  border-radius: 0.8em; }
 

/* ATTRIBUTES
----------------------------- */
div.sheet-grid-pc-attributes {
  grid-template-columns: repeat(2,8em 6em);
  grid-template-rows: 6em;
  }
div.sheet-grid-pc-attributes2 {
  grid-template-columns: repeat(2,8em 6em);
  }
div.sheet-grid-pc-attributes button[type="roll"], div.sheet-grid-pc-attributes2 button[type="roll"] {
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;
    border-bottom: 0.15em solid black;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    height: 100%;}
div.sheet-grid-pc-attributes input[type="text"], div.sheet-grid-pc-attributes2 input[type="text"] {
    width: 3.5em; }

/* AUTOEXPAND
----------------------------- */   
.sheet-auto-expand {
  position: relative;
  cursor: text;
  word-wrap: break-word;
  min-height: 20px;
}
.sheet-auto-expand span {
  visibility: hidden;
  white-space: pre-wrap;
  display: block;
}
.sheet-auto-expand textarea {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  resize: none;
  height: 100%;
  width: 100%;
  display: block;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: inherit;
  text-align: inherit;
  text-transform: inherit;
}

/* NOTE
----------------------------- */
div.sheet-grid-note {
  grid-template-columns: 25% 25% 25% 1fr; }

/* ROLL TEMPLATE
----------------------------- */

.sheet-rolltemplate-face div.sheet-face_container, .sheet-rolltemplate-damage div.sheet-face_container,
.sheet-rolltemplate-minisheet div.sheet-face_container, .sheet-rolltemplate-minisheet2 div.sheet-face_container {
    border: 2px solid black !important;
    border-radius: 7px;
    z-index:1;
    background-color: #F8F8FF;
}

.sheet-rolltemplate-face .sheet-face_header, .sheet-rolltemplate-damage .sheet-face_header,
.sheet-rolltemplate-minisheet .sheet-face_header, .sheet-rolltemplate-minisheet2 .sheet-face_header {
    background-color: black;
    padding: 2px;
    border-bottom: 1px solid black;
    border-radius: 5px 5px 0px 0px;
    font-size: 1.2em;
    text-align: center;
}

.sheet-rolltemplate-face div.sheet-face_rowcolor1, .sheet-rolltemplate-damage div.sheet-face_rowcolor1{
    border-bottom: 1px solid black;
    text-align: center;
    text-transform: capitalize;
}

.sheet-rolltemplate-minisheet div.sheet-face_rowcolor1, .sheet-rolltemplate-minisheet2 div.sheet-face_rowcolor1 {
    border-bottom: 1px solid black;
    text-align: center;
}

.sheet-rolltemplate-face a[href^="~"], .sheet-rolltemplate-minisheet a[href^="~"], .sheet-rolltemplate-minisheet2 a[href^="~"] {
  background-color: black;
  color: #F8F8FF;
  padding: 2px 4px 1px 4px;
  margin: 2px -1px 1px 0px;
  font-weight: normal;
  display: inline-block;
  border: 1px solid #789;
  border-radius: 2px;
}

.sheet-rolltemplate-face a[href^="~"]:hover, .sheet-rolltemplate-minisheet a[href^="~"]:hover, .sheet-rolltemplate-minisheet2 a[href^="~"]:hover {
  text-decoration: none;
  cursor: pointer;
  color: #f00;
  box-shadow: 1px 1px 2px #333;
}

/* FOOTER
   ============================= */