/* Generic styles */
.charsheet {
  background-color: rgb(35,31,32);
  width: 850px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}
.charsheet .sheet-colrow,
.charsheet .sheet-2colrow,
.charsheet .sheet-3colrow,
.charsheet .header,
.charsheet .t-die {
  background: rgb(255,255,255);
  background: linear-gradient(167deg, rgba(255,255,255,1) 45%, rgba(29,164,219,1) 60%);
  border: 2px solid rgb(36,63,142);
  padding: 5px;
  margin-bottom: 10px;
}

.charsheet img,
.charsheet input,
.charsheet textarea, 
.charsheet select {
  margin-bottom: 10px;
}
.charsheet h2, h6 {
  background: rgb(235,166,142);
  border: 2px solid rgb(109,47,87);
  position: relative;
  left: -15px;
  padding-left: 5px;
}
.charsheet h2 {
  width: 200px;
  top: -15px;
  font-size: 1.5em;
}
.charsheet h6 {
  width: 190px;
  top: -5px;
  font-size: 0.9em;
  line-height: 1;
  margin-bottom: -3px;
}
.charsheet label,
.charsheet input {
    display: inline-block;
    font-weight: normal;
}
.charsheet input:read-only {
  cursor: context-menu;
}

.charsheet textarea {
  resize: none;
}

/* Specific styles */
.charsheet .info-t-dice div {
  display: inline-block;
}

.charsheet .little-text {
  padding: 0px 5px;
  line-height: 1;
  font-style: italic;
}
.charsheet .little-text > div.sheet-col {
  margin: 0px;
}
.charsheet .little-text > div.sheet-col span {
  font-size: 0.8em;
}

.charsheet .t-die {
  vertical-align: top;
  text-align: center;
  margin: 5px 10px;
}

.charsheet .t-die > button[type="roll"] {
  font-size: 6em;
  padding: 30px;
}

.charsheet .header label,
.charsheet .info-t-dice label,
.charsheet label.subtitle,
.charsheet span.subtitle {
  font-weight: bold;
}

.charsheet button[type="roll"]:not([name="roll_t_die"]) {
  margin-top: -5px !important;
}

.charsheet input[type="hidden"][value="0"] + button[type="roll"],
.charsheet input[type="hidden"][value=""] + button[type="roll"] {
  pointer-events: none;
}

.charsheet textarea.benefits-limitis {
  width: 380px !important;
  height: 70px !important;
}

/* Table */
.charsheet > .info-t-dice .div-table {
  width: 638px;
  border: 1px solid rgb(35,31,32);
  text-align: center;
  font-size: 1.2em;
}
.charsheet > .info-t-dice .div-row,
.charsheet > .info-t-dice .head-row,
.charsheet > .info-t-dice .foot-row {
  display: table-row !important;
}
.charsheet > .info-t-dice .head-row,
.charsheet > .info-t-dice .foot-row {
  color: rgb(255,255,255);
}
.charsheet > .info-t-dice .head-row {
  background-color: rgb(36,63,142);
}
.charsheet > .info-t-dice .div-row {
  background-color: rgb(255,255,255);
}
.charsheet > .info-t-dice .foot-row {
  background-color: rgb(169,67,64);
}
.charsheet > .info-t-dice .div-cell {
  float: left;
  display: table-column;
  width: 50px;
  border: 1px solid rgb(35,31,32);
}
.charsheet > .info-t-dice .div-cell-big {
  width: 135px;
}

/* Sizes */
.charsheet .w0 {
	width: 0px !important;
}
.charsheet .w70 {
	width: 70px !important;
}
.charsheet .w88 {
	width: 88px !important;
}
.charsheet .w90 {
	width: 90px !important;
}
.charsheet .w100 {
	width: 100px !important;
}
.charsheet .w140 {
	width: 140px !important;
}
.charsheet .w190 {
	width: 190px !important;
}
.charsheet .w170 {
	width: 170px !important;
}
.charsheet .w200 {
	width: 200px !important;
}
.charsheet .w225 {
	width: 225px !important;
}
.charsheet .w640 {
  width: 640px !important;
}
.charsheet .w810 {
  width:810px !important;
}
.charsheet input.notes {
  width: 395px;
}
.charsheet input.powernotes {
  width: 470px;
}
.charsheet select.die-type {
  width: 70px;
}
.charsheet select.die-type-skill {
  width: 60px;
}

/* margins */
.charsheet .mr10 {
	margin-right: 10px !important;
}
.charsheet .mb10 {
  margin-bottom: 10px !important;
}

/* TEMPLATE */
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom,
.sheet-rolltemplate-triumphant-die {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-custom,
.withoutavatars .sheet-rolltemplate-triumphant-die {
  margin-left: -7px;
}

.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-triumphant-die .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header,
.sheet-rolltemplate-triumphant-die .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}
.sheet-rolltemplate-custom .sheet-title,
.sheet-rolltemplate-triumphant-die .sheet-title {
  font-size:1.1em;
}
.sheet-rolltemplate-custom .sheet-subtitle {
  font-size:.9em;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-triumphant-die .sheet-container {
  /* this is the default color */
  --header-bg-color: rgba(112,32,130,1);
  --header-text-color: rgb(255,255,255);
}

/* Allprops part */
.sheet-rolltemplate-custom .sheet-content,
.sheet-rolltemplate-triumphant-die .sheet-content {
  display: grid;
  background: rgb(255,255,255);
  /* 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,
.sheet-rolltemplate-triumphant-die .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key,
.sheet-rolltemplate-triumphant-die .sheet-content .sheet-key {
  font-weight: bold;
  padding-right: 10px;
  text-align: right;
}

/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n),
.sheet-rolltemplate-triumphant-die .sheet-desc {
  background: rgb(230,230,230);
}

/* Description fields */
.sheet-rolltemplate-custom .sheet-desc,
.sheet-rolltemplate-triumphant-die .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
}
.sheet-rolltemplate-triumphant-die .sheet-t-die-success {
  color: rgb(0,160,0);
}
.sheet-rolltemplate-triumphant-die .sheet-t-die-failure {
  color: rgb(255,0,0);
}