roll20-character-sheets/ChroniquesOublieesFantasy2/cof2e.css

/* COF2e v1.16.0 */

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons&display=swap');

/* Declarations */
* {
  font-size: 1.3rem;
}

div,
span,
input,
select,
textarea,
button,
.charmancer .cofmancer {
  box-sizing: border-box;
  font-family: var(--cof-font);
}

input:hover:read-write,
select:hover {
  background-color: white;
}

.cofmain .material-icons {
  font-size: 1.3rem;
}

.cofmain input[type="text"] {
  width: 100%;
}

.cofmain input:hover:read-write,
.cofmain select:hover {
  border: 1px solid orange;
}

.cofmain .pc-gears input[type="text"],
.cofmain .npc-gears input[type="text"],
.cofmain input[type="text"].w-auto {
  width: auto;
  flex-grow: 1;
  margin: 2px;
}

.cofmain .heading input[type="number"],
.cofmain .cofsheet input[type="number"] {
  width: 3rem;
  text-align: right;
}

.cofmain .cofsheet input[type="number"].two-digits {
  width: 4rem;
  text-align: right;
}

.cofmain .cofsheet input[type="text"].two-digits,
.cofmain .cofsheet span.two-digits {
  width: 2rem;
  text-align: right;
}

.cofmain .cofsheet input[type="number"].treasure {
  width: 7rem;
  text-align: right;
  font-size: small;
}

.cofmain .cofsheet input[type="checkbox"],
.cofmain .cofsheet input[type="radio"] {
  accent-color: var(--cof-hilite);
}

.cofmain .cofsheet input[type="range"] {
  font-size: small;
}

summary {
  display: list-item;
}

summary h4 {
  display: inline;
}

.cofmain textarea {
  resize: vertical;
}

.cofmain textarea.no-resize {
  resize: none;
}

.cofmain textarea.xx-large {
  height: 24rem;
}

.cofmain textarea.x-large {
  height: 18rem;
}

.cofmain textarea.large {
  height: 15rem;
}

.cofmain textarea {
  height: 12rem;
}

.cofmain textarea.medium {
  height: 9rem;
}

.cofmain textarea.small {
  height: 6rem;
}

.cofmain hr,
.cofmancer hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}

/* Redefine Roll20 repeating sections buttons */

.charsheet .repcontrol {
    height: 2em;
}

.charsheet .repcontrol .btn.repcontrol_add,
.charsheet .repcontrol .btn.repcontrol_edit {
    color: #f5f5f5;
    font-size: 0.1em;
    height: 20px;
}

.charsheet .repcontrol button.btn.repcontrol_add::after {
    font-family: "Pictos";
    content: "&";
    margin-left: -8px;
    margin-right: -5px;
    font-size: 11em;
    color: var(--cof-dark);
}

.charsheet .repcontrol button.btn.repcontrol_edit::after {
    font-family: "Pictos";
    content: "(";
    margin-left: -8px;
    margin-right: -5px;
    font-size: 11em;
    color: var(--cof-dark);
}

.charsheet .repcontainer.editmode + .repcontrol button.btn.repcontrol_edit::after {
    content: ")";
}

.charsheet .repcontrol button.btn.repcontrol_add,
.charsheet .repcontrol button.btn.repcontrol_edit {
  border-radius: 5px;
  margin: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}

button[type="roll"] {
  box-shadow: none;
}

button[type="roll"]:hover {
  font-weight: bold;
  background-color: transparent;
}

option.optgroup {
  background: var(--cof-hilite);
  font-weight: bold;
  color: white;
}

/* Main div */
.cofmain,
.cofmancer {

  /* CSS Vars */
  --cof-font: "Merriweather Sans", "Verdana";
  --cof-color: burlywood;
  --cof-dark: #3d3121;
  --cof-light: whitesmoke;
  --cof-hilite: #6f5b41;
  --cof-click: tomato;

  /* General Styles */
  width: 100%;
  min-width: 850px;
  background-color: var(--cof-light);
  border: 1px solid black;
  border-radius: 10px;
  margin: 5px;
  padding: 5px;
}

.cofmancer textarea {
  height: 2.5rem;
}

.cofmancer textarea:focus {
  height: 15rem;
}

.bordered {
  border: 1px solid gray;
  padding: 2px;
}

.border-rounded {
  border-radius: 5px;
}

input,
select {
  border: none;
  padding: 0px;
  margin: 2px;
  max-height: 20px;
}

select.select-xl {
  width: 20rem;
}

select.select-lg {
  width: 16rem;
}

select.select-md {
  width: 9rem;
}

select.select-sm {
  width: 5rem;
}

select.select-xs {
  width: 2.5rem;
  appearance: none;
}

select.select-xxs {
  font-size: smaller;
  width: 1.3rem;
  appearance: none;
}

select.select-xxs.first-char {
  width: 1.1rem;
}

select.select-xxs option {
  font-size: small;
}

.cofmancer button {
  background-color: transparent;
  border: 2px solid var(--cof-color);
  border-radius: 5px;
}

.cofmancer button:hover {
  font-weight: bold;
  box-shadow: var(--cof-dark);
}

/* Icon buttons & images */
button.flat-btn {
  border: 0px;
  background-color: transparent;
  background-image: none;
}

.cofmain button[type="roll"].img-btn:before,
.cofmain button[type="action"].img-btn:before {
  content: "";
}

.cofmain .trait button[type="roll"].img-btn,
.cofmain .npc-traits button[type="roll"].img-btn {
  padding: 0;
  margin: 0 2px;
  font-size: 14px;
  font-weight: bold;
}

.cofmain .rank-summary button[type="roll"].img-btn {
  padding: 0;
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
}

span.img-btn {
  font-family: pictos;
  font-variant: normal;
}

span.img-btn-lg {
  font-size: large;
}

span.img-btn-xl {
  font-size: x-large;
}

.img-btn:hover {
  font-weight: bold;
  color: var(--cof-click);
  transition: all 0.2s ease;
}

img.bubble-img {
  width: 18px;
}

img.bubble-img:hover,
.bubble-icon:hover {
  transform: scale(1.5);
  background-color: var(--cof-click);
  border-radius: 100%;
  transition: all 0.2s ease;
}

/* Action button as Roll button */
span.d20-btn {
  font-family: dicefontd20;
  font-size: large;
  vertical-align: middle;
}

span.d6-btn {
  font-family: dicefontd6;
  font-size: large;
  vertical-align: middle;
}

span.d20-btn:hover,
span.d6-btn:hover {
  font-weight: bold;
}

button[type="action"].block-title {
  padding: 1px;
  border: none;
  border-radius: 3px;
}

button[type="action"].block-title:hover {
  color: var(--cof-click);
  transition: all 0.1s ease;
}

/* General Layout */

div.block-title,
summary.block-title,
button.block-title {
  background-color: var(--cof-color);
  color: var(--cof-dark);
  text-align: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

summary.block-title {
  margin-left: 15px;
  list-style-position: outside;
}

div.block-header {
  font-size: large;
  font-variant: small-caps;
}

div.path div.block-title {
  font-size: medium;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}

.d-flex {
  display: flex;
}

.d-flex-between {
  justify-content: space-between;
}

.d-flex-even {
  justify-content: space-evenly;
}

.d-flex-middle {
  vertical-align: middle;
}

.d-flex-1 {
  flex: 1;
}

.d-inline {
  display: inline-block;
}

.align-self-center {
  align-self: center;
}

.align-right {
  text-align: right;
}

.float-right {
  float: right;
}

.m2 {
  margin: 2px;
}

.m5 {
  margin: 5px;
}

.p2 {
  padding: 2px;
}

.attr-max {
  font-weight: bold;
  margin-left: 5px;
  margin-right: 5px;
}

.ellipsis {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

.cofmain input[value="0"].has-script + div.has-script,
.cofmain input[value="0"].has-script textarea.has-script,
.cofmain input[value=""].has-script + span.has-script,
.cofmain input[value="0"].has-script + span.has-script,
.cofmain input[value="0"].has-script .weapon span.has-script,
.cofmain input[value="0"].has-script + div.ammos,
.cofmain input[value="0"].has-psionic + .has-psionic,
.cofmain input[value="0"].opt-tact + div.opt-tact,
.cofmain input[value="0"].fav-tact + div.fav-tact,
.cofmain input[value="0"].fav-abilities + div.fav-abilities,
.cofmain input[value="0"].fav-ability + div.fav-ability,
.cofmain input[value=""].immu-dm + span.immu-dm,
.cofmain input[value="0"].mounted + .mounted,
.cofmain input[value="0"].high-fan + .high-fan {
  display: none;
}

.cofmain input[value="0"].d20roll-btns + div.d20roll-btns,
.cofmain input[value="2"].d20roll-btns + div.d20roll-btns {
  display: none;
}

.cofmain input[value="1"].d20roll-btns + div.d20roll-btns {
  display: block;
}

.cofmain input[value="1"].locked ~ button.unlocked,
.cofmain input[value="1"].locked + input.locked,
.cofmain input[value="0"].locked ~ button.locked,
.cofmain input[value="0"].locked ~ span.locked {
  display: none;
}

.cofmain input[value="0"].locked ~ button.unlocked,
.cofmain input[value="0"].locked + input.locked,
.cofmain input[value="1"].locked ~ button.locked,
.cofmain input[value="1"].locked ~ span.locked {
  display: inline-block;
}

.cofmain input[value="npc"].locked ~ button.unlocked,
.cofmain input[value="npc"].locked ~ button.locked,
.cofmain input[value="npc"].locked ~ span.locked {
  display: none;
}

/* Identity layout */

.cofmain .heading {
  display: grid;
  grid-template-columns: 4fr 1.2fr 6fr;
  gap: 5px;
}

.cofmain .heading .logo,
.cofmain .heading .token {
  width: 100%;
}
.cofmain .heading input[value="0"].token-mod ~ div.token-mod,
.cofmain .heading input[value="1"].token-script ~ button.token-script,
.cofmain .heading input[value="0"].token-script ~ div.token-script {
  display: none;
}

.identity input[type="text"] {
  border-bottom: dashed 1px;
}

.identity-pc .identity-row {
  display: grid;
  grid-template-columns: 2fr 4fr 1fr 1fr;
  gap: 5px;
  margin: 2px;
}

.identity-npc .identity-row {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 3fr;
  gap: 5px;
  margin: 2px;
}

.identity .level-type {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 1fr 3fr;
  gap: 5px;
  margin: 2px;
}

input[value="pc"] ~ input.is-mook,
input[value="npc"] ~ button[name="act_charmancer-btn"],
input[value="npc"] ~ button[name="roll_checkup"],
input[value="1"].is-mook + .npc-configs.is-mook {
  display: none;
}

/* Sheet types */
.identity-pc,
.identity-npc,
.identity-gm,
.cof-pc,
.cof-npc,
.weapon-opt,
.weapon-hands,
.weapon-thrown,
.weapon-traits {
  display: none;
}

.cof-head-toggle[value="pc"] ~ div.identity-pc,
.cof-head-toggle[value="npc"] ~ div.identity-npc,
.cof-head-toggle[value="gm"] ~ div.identity-npc,
.cof-type-toggle[value="pc"] ~ div.cof-pc,
.cof-type-toggle[value="npc"] ~ div.cof-npc,
.cof-type-toggle[value="gm"] ~ div.cof-gm,
.cof-wopt-toggle[value="1"] ~ div.weapon-opt,
.cof-wopt-toggle[value="1"] ~ div.weapon-effects,
.cof-inhand-toggle[value="1"] ~ div.weapon-hands,
.cof-thrown-toggle[value="1"] ~ div.weapon-thrown,
.cof-trait-toggle[value="1"] ~ div.weapon-traits {
    display: block;
}

/* Sheet tabs & sub-tabs */
.tab-btn,
.d20roll_1d,
.d20roll_db,
.d20roll_dm,
.locked,
.unlocked {
  border: none;
  margin-top: 5px;
}

.main-tab {
  font-size: medium;
}

.sub-tab {
  margin-top: 10px;
  font-size: small;
}

input[value="0"].pc-skills-btn ~ button.pc-skills-btn,
input[value=""].custom-skill + div.custom-skill,
input[value="0"].npc-reminder + input[type="checkbox"].npc-reminder {
  display: none;
}

input:not([value=""]).custom-skill + div.custom-skill.custom-skill-top {
  border-top: 1px solid grey;
}

/* Hide all tabs */
.pc-main-tab,
.pc-abilities-tab,
.pc-gears-tab,
.pc-notes-tab,
.pc-config-tab,
.pc-script-tab,
.pc-version-tab,
.pc-attacks-subtab,
.pc-otact-subtab,
.pc-resdm-subtab,
.pc-hands-subtab,
.pc-rolls-subtab,
.pc-master-subtab,
.pc-skills-subtab,
.pc-buffs-subtab,
.pc-import-subtab,
.npc-main-tab,
.npc-attacks-subtab,
.npc-abilities-subtab,
.npc-notes-subtab,
.npc-gears-tab,
.npc-config-tab,
.npc-script-tab,
.npc-version-tab {
  display: none;
}

/* Style the active (sub-)tab button */
.tabs-toggle[value="main"] ~ div .pc-main-btn,
.tabs-toggle[value="attacks"] ~ div .pc-attacks-btn,
.tabs-toggle[value="otact"] ~ div .pc-otact-btn,
.tabs-toggle[value="hands"] ~ div .pc-hands-btn,
.tabs-toggle[value="resdm"] ~ div .pc-resdm-btn,
.tabs-toggle[value="abilities"] ~ div .pc-abilities-btn,
.tabs-toggle[value="rolls"] ~ div .pc-rolls-btn,
.tabs-toggle[value="master"] ~ div .pc-master-btn,
.tabs-toggle[value="skills"] ~ div .pc-skills-btn,
.tabs-toggle[value="buffs"] ~ div .pc-buffs-btn,
.tabs-toggle[value="import"] ~ div .pc-import-btn,
.tabs-toggle[value="gears"] ~ div .pc-gears-btn,
.tabs-toggle[value="notes"] ~ div .pc-notes-btn,
.tabs-toggle[value="config"] ~ div .pc-config-btn,
.tabs-toggle[value="script"] ~ div .pc-script-btn,
.tabs-toggle[value="version"] ~ div .pc-version-btn,
.tabs-toggle[value="main"] ~ div .npc-main-btn, 
.tabs-toggle[value="attacks"] ~ div .npc-attacks-btn,
.tabs-toggle[value="abilities"] ~ div .npc-abilities-btn,
.tabs-toggle[value="notes"] ~ div .npc-notes-btn,
.tabs-toggle[value="gears"] ~ div .npc-gears-btn,
.tabs-toggle[value="config"] ~ div .npc-config-btn,
.tabs-toggle[value="script"] ~ div .npc-script-btn,
.tabs-toggle[value="version"] ~ div .npc-version-btn {
  color: white; 
  background-color: var(--cof-hilite); 
}

.d20-toggle[value="1d20"] ~ div .d20roll_1d,
.d20-toggle[value="2d20kh1"] ~ div .d20roll_db,
.d20-toggle[value="2d20kl1"] ~ div .d20roll_dm {
  color: white; 
  background-color: var(--cof-hilite); 
}

/* Show the selected tab */
.tabs-toggle[value="main"] ~ div.pc-main-tab,
.tabs-toggle[value="attacks"] ~ div.pc-attacks-subtab,
.tabs-toggle[value="otact"] ~ div.pc-otact-subtab,
.tabs-toggle[value="hands"] ~ div.pc-hands-subtab,
.tabs-toggle[value="resdm"] ~ div.pc-resdm-subtab,
.tabs-toggle[value="abilities"] ~ div.pc-abilities-tab,
.tabs-toggle[value="rolls"] ~ div.pc-rolls-subtab,
.tabs-toggle[value="master"] ~ div.pc-master-subtab,
.tabs-toggle[value="skills"] ~ div.pc-skills-subtab,
.tabs-toggle[value="buffs"] ~ div.pc-buffs-subtab,
.tabs-toggle[value="import"] ~ div.pc-import-subtab,
.tabs-toggle[value="gears"] ~ div.pc-gears-tab,
.tabs-toggle[value="notes"] ~ div.pc-notes-tab,
.tabs-toggle[value="config"] ~ div.pc-config-tab,
.tabs-toggle[value="script"] ~ div.pc-script-tab,
.tabs-toggle[value="version"] ~ div.pc-version-tab,
.tabs-toggle[value="main"] ~ div.npc-main-tab, 
.tabs-toggle[value="attacks"] ~ div.npc-attacks-subtab,
.tabs-toggle[value="abilities"] ~ div.npc-abilities-subtab,
.tabs-toggle[value="notes"] ~ div.npc-notes-subtab,
.tabs-toggle[value="gears"] ~ div.npc-gears-tab, 
.tabs-toggle[value="config"] ~ div.npc-config-tab,
.tabs-toggle[value="script"] ~ div.npc-script-tab,
.tabs-toggle[value="version"] ~ div.npc-version-tab {
    display: block;
}

/* Show/Hide areas */
input.block-switch {
  display: none;
}

.abilities-view,
.block-switch:checked ~ .abilities-edit {
  display: block;
}

.abilities-edit,
.block-switch:checked ~ .abilities-view {
  display: none;
}

input[value="0"].init-agi ~ div.init-agi,
input[value="0"].bouclier-malus ~ div.bouclier-malus {
  display: none;
}

input[value="1"].init-agi ~ div.init-agi {
  display: inline;
}

input[value="1"].bouclier-malus ~ div.bouclier-malus {
  display: block;
}

input[value="0"].arme-label + span.arme-label {
  display: none;
}

.cofmancer .type-pol,
.cofmancer .type-exp,
.cofmancer .type-spe {
  display: none;
}

.cofmancer input[value="pol"] ~ .type-pol,
.cofmancer input[value="exp"] ~ .type-exp,
.cofmancer input[value="spe"] ~ .type-spe {
  display: block;
}

.cofmancer .stat-cell {
  width: 10%;
  text-align: center;
  margin-top: 5px;
}

div.change-view {
  width: 100%; 
  text-align: right;
  margin-bottom: 5px;
}

/* PC sheet layout */ 
.pc-main-tab .pc-attributes {
  display: grid;
  grid-template-columns: 2fr 3fr 1.5fr;
}

.pc-attributes .traits,
.pc-attributes .attacks,
.pc-attributes .vitality,
.pc-cond-def .conditions,
.pc-cond-def .defenses,
.pc-luck-rd .luck,
.pc-luck-rd .dmred {
  margin: 5px;
}

.pc-attributes .trait {
  display: grid;
  grid-template-columns: 1.75fr 0.25fr 1fr 1.35fr 1.35fr;
  gap: 2px;
  padding: 2px;
}

.pc-attributes .trait details.trait-detail summary,
.pc-buffs-subtab summary.buffs-detail {
  list-style: none;
}

.pc-attributes .trait details.trait-detail summary:hover,
.pc-buffs-subtab summary.buffs-detail:hover {
  color: orange;
  font-weight: bold;
}

.pc-attributes .trait details[open].trait-detail,
.pc-attributes .trait span.trait-detail {
  font-size: xx-small;
}

.pc-attributes .attack {
  display: grid;
  grid-template-columns: 3fr 1fr 2.5fr 1fr 1fr;
  gap: 2px;
  padding: 2px;
}

.pc-attributes .speed {
  display: grid;
  grid-template-columns: 3fr 5.7fr;
  gap: 2px;
  padding: 2px;
}

.pc-attributes .hits {
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: 2px;
  padding: 2px;
}

.pc-attributes .hits input[value="yellow"].pv-status ~ div.pv-color {
  background-color: khaki;
}

.pc-attributes .hits input[value="red"].pv-status ~ div.pv-color {
  background-color: orangered;
}

.pc-attributes .hits input[value="black"].pv-status ~ div.pv-color {
  background-color: firebrick;
  color: var(--cof-light);
}

.pc-attributes .hit,
.pc-cond-def .defense {
  margin-top: 2px;
}

.centered,
.pc-attributes .trait h4,
.pc-attributes .attack h4,
.pc-attacks .weapon h4,
.pc-buffs h4,
.pc-roll-r1 h4,
.npc-attacks .weapon h4,
.npc-abilities .npc-ability h4 {
  text-align: center;
}

.pc-attributes .attack input[type="number"],
.pc-attributes .hits input[type="number"] {
  width: 3rem;
}

.pc-main-tab .pc-cond-def,
.pc-main-tab .pc-luck-rd {
  display: grid;
  grid-template-columns: 2fr 5fr;
}

.pc-cond-def .defense {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 2fr 1fr 1fr 3fr 1fr;
  gap: 2px;
}

.conditions input[value="0"].condition-show ~ button.condition-effraye,
.conditions input[value="0"].condition-show ~ button.condition-panique {
  display: none;
}

.conditions input[value="1"].condition-affaibli ~ button img.condition-affaibli,
.conditions input[value="1"].condition-aveugle ~ button img.condition-aveugle,
.conditions input[value="1"].condition-effraye ~ button img.condition-effraye,
.conditions input[value="1"].condition-essoufle ~ button img.condition-essoufle,
.conditions input[value="1"].condition-etourdi ~ button img.condition-etourdi,
.conditions input[value="1"].condition-immobilise ~ button img.condition-immobilise,
.conditions input[value="1"].condition-invalide ~ button img.condition-invalide,
.conditions input[value="1"].condition-panique ~ button img.condition-panique,
.conditions input[value="1"].condition-paralyse ~ button img.condition-paralyse,
.conditions input[value="1"].condition-ralenti ~ button img.condition-ralenti,
.conditions input[value="1"].condition-renverse ~ button img.condition-renverse,
.conditions input[value="1"].condition-surpris ~ button img.condition-surpris {
  width: 22px;
  border-radius: 100%;
  background-color: tan;
}

.conditions .bordered:has(input[value="1"]:not(.condition-show)) {
  border-color: orange;
  border-width: 2px;
  border-style: dashed;
  transition: all 0.2s ease-in-out;
}

input[type="hidden"][value="1"].has-buff + .has-buff {
  font-weight: bolder;
}

.pc-luck-rd .luck {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2px;
}

.pc-luck-rd .luck input[type="number"] {
  width: 2.5rem;
}

.pc-luck-rd .luck span {
  vertical-align: middle;
}

.pc-luck-rd .dmred {
  display: grid;
  grid-template-columns: 2fr 11fr;
  gap: 2px;
}

.dmred input {
  width: 100%;
}

.pc-attacks-subtab,
.pc-otact-subtab,
.pc-hands-subtab,
.pc-resdm-subtab,
.pc-rolls-subtab,
.pc-master-subtab,
.pc-skills-subtab,
.pc-buffs-subtab,
.pc-import-subtab {
  min-height: 120px;
}

.pc-attacks .weapon {
  display: grid;
  grid-template-columns: 25px 5fr 2.5fr 1fr 4fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-attacks .weapon div,
.pc-attacks .weapon input,
.pc-attacks .weapon select,
.npc-attacks .weapon div,
.npc-attacks .weapon input,
.npc-attacks .weapon select {
  padding: 0;
  margin: 2px;
}

.pc-attacks .weapon-option,
.pc-attacks .weapon-special,
.pc-attacks .weapon-special-ongoing,
.npc-attacks .weapon-option,
.npc-attacks .weapon-special {
  display: grid;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-attacks .weapon-special,
.npc-attacks .weapon-special {
  grid-template-columns: 25px 1fr;
}
.pc-attacks .weapon-special-ongoing {
  grid-template-columns: 60% calc(40% - 5px);
}

.pc-attacks input[value=""].ongoing + button.ongoing {
  display: none;
}

.pc-attacks .weapon-option {
  grid-template-columns: 25px 3fr 4fr 9fr;
}

.npc-attacks .weapon-option {
  grid-template-columns: 25px 2fr 4fr 10fr;
}

.npc-attacks .weapon-effect {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-attacks .weapon-hand,
.npc-attacks .weapon-hand {
  display: grid;
  grid-template-columns: 25px 90%;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-attacks .weapon-throw,
.npc-attacks .weapon-throw {
  display: grid;
  grid-template-columns: 25px 16% 16% 18%;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-attacks .weapon-trait,
.npc-attacks .weapon-trait {
  display: grid;
  grid-template-columns: 25px 20%;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-attacks .weapon-option div,
.npc-attacks .weapon-option div,
.npc-attacks .weapon-effect div {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.pc-otact-subtab .pc-tactic,
.npc-attacks-subtab .npc-tactic {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 2px;
  margin-top: 2px;
}

.pc-hands-subtab .pc-hands {
  display: grid;
  grid-template-columns: 25px 1fr 1fr;
}

.pc-hands input[value="0"].pc-hand ~ button,
input[value="0"].pc-dual + .pc-dual {
  display: none;
}

input[value="0"].spell-concentration-show ~ button.spell-concentration {
  display: none;
}

button.attack-maneuvers,
button.spell-concentration {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

button.attack-maneuvers span,
button.spell-concentration span {
  font-weight: bolder;
}

.pc-main-tab input[value="1"].attack-maneuvers ~ button.attack-maneuvers,
.pc-abilities-tab input[value="1"].spell-concentration ~ button.spell-concentration {
  background-color: orange;
}

.pc-abilities-tab .abilities {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
}

.abilities .rank {
  border-top: 1px solid gray;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.abilities .rank .rank-summary {
  display: inline-flex;
  vertical-align: middle;
  gap: 5px;
}

.abilities .rank .rank-summary .rank-title {
  width: 21rem;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abilities .rank textarea {
  height: 2.5rem;
  overflow: hidden;
  resize: vertical;
}

.abilities .rank textarea:focus {
  height: 12rem;
}

.abilities-view .abilities input:checked ~ .rank-title {
  font-weight: bold;
}

.abilities-view .abilities summary:has(input:not([value=""]).notes).notes {
  font-style: italic;
}

.abilities-view .abilities .rank span {
  white-space: pre-wrap;
  user-select: text;
}

.abilities-view .abilities .rank-summary input[value="1"].spell ~ span.rank-title::after {
  content: " *";
  text-decoration: overline;
}

/*.abilities-view input[value="0"].use-params div.rank details div.d-flex.use-params {
  display: none;
}*/

.post-it textarea.post-it,
.weapon textarea.one-row,
.weapon-opt textarea.one-row,
.abilities .path textarea.one-row,
.abilities .rank textarea.one-row,
.pc-abilities-tab .pc-master-subtab textarea.one-row,
.pc-roll-r1 textarea.one-row,
.pc-gears .gears textarea.one-row,
.pc-gears .ammos textarea.one-row,
.pc-actions textarea.one-row,
.npc-abilities .npc-ability textarea.one-row,
.npc-trait-rd textarea.one-row,
.npc-gears .gears textarea.one-row,
.npc-gears .ammos textarea.one-row,
.npc-actions textarea.one-row,
.npc-configs textarea.one-row,
.resources textarea.one-row {
  padding: 0;
  margin: 0;
  height: 2rem;
  resize: vertical;
  transition: all 0.2s ease;
}

.weapon button[type="action"].float-right {
  margin-top: -24px;
  margin-right: -12px;
}

.pc-gears .gears textarea.one-row {
  width: 70%;
}

.pc-gears .gears textarea.one-row.full-width,
.npc-gears .gears textarea.one-row {
  width: 100%;
}

.weapon textarea.one-row:focus,
.weapon-opt textarea.one-row:focus,
.abilities .rank textarea.one-row:focus,
.abilities .path textarea.one-row:focus,
.pc-abilities-tab .pc-master-subtab textarea.one-row:focus,
.pc-roll-r1 textarea.one-row:focus,
.pc-gears .gears textarea.one-row:focus,
.pc-gears .ammos textarea.one-row:focus,
.pc-actions textarea.one-row:focus,
.npc-abilities .npc-ability textarea.one-row:focus,
.npc-trait-rd textarea.one-row:focus,
.npc-gears .gears textarea.one-row:focus,
.npc-actions textarea.one-row:focus,
.npc-configs textarea.one-row:focus,
.resources textarea.one-row:focus {
  height: 6rem;
}

.post-it textarea.post-it:focus {
  height: 4rem;
}

.post-it input:not([value=""]).post-it + textarea.post-it {
  border: 2px dotted var(--cof-dark);
  background-color: papayawhip;
}

input[value="0"].show-paths-4to9 ~ div.abilities,
input[value="0"].ability-uses + div.ability-uses {
  display: none;
}

.pc-rolls-subtab .pc-roll-r1 {
  display: grid;
  grid-template-columns: 25px 4fr 6.5fr 6.5fr;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-rolls-subtab .pc-roll-r2 {
  display: grid;
  grid-template-columns: 2.4rem 5fr 15fr;
  gap: 2px;
  margin-bottom: 2px;
}

.pc-buffs-subtab div.buff-detail {
  display: grid;
  grid-template-columns: 5% auto 5%;
  gap: 5px;
  margin: 2px;
}

.pc-rolls-subtab .buff-list {
  width: auto;
}

.pc-buffs-subtab .pc-buffs {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  gap: 2px;
}

.pc-gears-tab .pc-gears,
.npc-gears-tab .npc-gears {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.pc-gears .gears,
.npc-gears .gears,
.pc-gears .resources,
.npc-gears .resources,
.pc-gears .ammos,
.npc-gears .ammos,
.pc-gears .misc-gears,
.pc-gears .notes {
  margin-top: 10px;
}

.pc-config-tab li {
  margin-top: 2px;
}

.pc-config-tab li.config-check,
.npc-config-tab li.config-check {
  list-style: none;
}

.pc-config-tab details:has(li input[type="checkbox"]:checked) summary h4 {
  font-style: italic;
}

.pc-config-tab ul.pc-configs li {
  list-style: none;
}

.pc-config-tab div.pc-configs {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 2px;
}

.pc-config-tab div.pc-configs.first-rank {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2px;
}

.pc-config-tab ul.pc-configs:has(.first-rank) {
  margin-left: 0;
}

.pc-config-tab div.pc-configs.first-rank span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-config-tab li.force-max input.force-max:checked ~ input.two-digits {
  border: 1px dotted var(--cof-dark);
}

.pc-script-tab div.pc-configs {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2px;
}

.pc-version-tab details ul,
.npc-version-tab details ul {
  padding-left: 0;
  margin-left: 10px;
}

.pc-version-tab details li,
.npc-version-tab details li em,
.pc-version-tab details li,
.npc-version-tab details li em {
  font-size: small;
}

.npc-config-tab .npc-configs,
.npc-script-tab .npc-configs {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 2px;
}

.pc-config-tab input[name="attr_pvmax_force"] ~ span,
.pc-config-tab input[name="attr_drmax_force"] ~ span,
.pc-config-tab input[name="attr_pcmax_force"] ~ span,
.pc-config-tab input[name="attr_pmmax_force"] ~ span,
.pc-config-tab input[name="attr_pemax_force"] ~ span {
  display: inline-block;
  width: 5rem;
}

.pc-script-tab .pc-actions,
.npc-script-tab .npc-actions {
  margin-top: 10px;
}

.pc-script-tab .pc-actions input.list-name {
  margin: 2px;
}

/* NPC LAYOUT */

.cof-npc .npc-main {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.cof-npc .npc-4colrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.cof-npc .npc-2colrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.cof-npc .npc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.cof-npc .npc-trait {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cof-npc .npc-trait-rd {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.npc-attacks .weapon {
  display: grid;
  grid-template-columns: 25px 4fr 3.5fr 1fr 3fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
}

.npc-abilities .npc-ability {
  display: grid;
  grid-template-columns: 25px 1fr 0.75fr 2fr;
  gap: 2px;
  margin-bottom: 2px;
}

textarea.stat-block {
  border: 1px dashed;
  height: 12em;
  word-break: break-all;
}

textarea.import-result {
  border: none; 
  background-color: transparent;
  resize: none;
}

textarea.migration {
  font-family: monospace;
  border: none; 
  background-color: transparent;
  resize: none;
}

/*.sheet-darkmode {
  .cofmain {
    background-color: #333;
    color: #ddd;

    h4 {
      color: #ddd;
    }
    .tab-btn {
      color: #333;
    }
  }
}*/

/* ROLL TEMPLATES */

.sheet-rolltemplate-cof2 {
  border: 1px solid gray;
  border-radius: 5px;
  background-color: whitesmoke;
  margin-left: -37px;
  margin-top: 12px;
}

.withoutavatars .sheet-rolltemplate-cof2 {
  margin-left: -7px;
}

.sheet-rolltemplate-cof2 .sheet-rt {
  font-family: "Merriweather Sans";
}

.pc-config-tab select[name="attr_couleur_pj"] option[value=""],
.sheet-rolltemplate-cof2 .sheet-rt-header {
  background-color: burlywood;
  padding: 5px;
}

.pc-config-tab select option[value="blue"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-blue {
  background-color: #0d6efd;
  color: #fff;
}
.pc-config-tab select option[value="indigo"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-indigo { 
  background-color: #6610f2;
  color: #fff;
}
.pc-config-tab select option[value="purple"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-purple {
  background-color: #6f42c1;
  color: #fff;
}
.pc-config-tab select option[value="pink"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-pink {
  background-color: #d63384;
  color: #fff;
}
.pc-config-tab select option[value="red"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-red {
  background-color: #dc3545;
  color: #fff;
}
.pc-config-tab select option[value="orange"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-orange { 
  background-color: #fd7e14;
}
.pc-config-tab select option[value="yellow"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-yellow {
  background-color: #ffc107;
}
.pc-config-tab select option[value="green"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-green { 
  background-color: #198754;
  color: #fff;
}
.pc-config-tab select option[value="teal"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-teal {
  background-color: #20c997;
  color: #fff;
}
.pc-config-tab select option[value="cyan"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-cyan {
  background-color: #0dcaf0;
}
.pc-config-tab select option[value="gray"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-gray {
  background-color: #6c757d;
  color: #fff;
}
.pc-config-tab select option[value="dark"],
.sheet-rolltemplate-cof2 .sheet-rt-header.sheet-color-dark {
  background-color: #343a40;
  color: #fff;
}

.sheet-rolltemplate-cof2 .sheet-rt-title {
  font-size: large;
}

.sheet-rolltemplate-cof2 .sheet-rt-2cols {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 2px;
  padding: 5px;
}

.sheet-rolltemplate-cof2 .sheet-rt-token {
  margin-top: -16px;
  width: 72px;
  height: 72px;
}

.sheet-rolltemplate-cof2 .sheet-rt-token ~ div {
  align-self: center;
}

.sheet-rolltemplate-cof2 .sheet-rt-roll {
  text-align: center;
  font-size: large;
  padding: 5px;
  margin: 5px;
}

.sheet-rolltemplate-cof2 .sheet-rt-text {
  font-size: small;
  padding: 5px;
}

.sheet-rolltemplate-cof2 .sheet-rt-centered {
  text-align: center;
}

.sheet-rolltemplate-cof2 .sheet-rt-text span > a.userscript-chat-button:hover {
  color: orange;
}

.sheet-rolltemplate-cof2 .sheet-rt-tags {
  background-color: #6f5b41;
  color: whitesmoke;
  border-radius: 5px;
  padding: 2px;
}

.sheet-rolltemplate-cof2 .sheet-rt-hit,
.sheet-rolltemplate-cof2 .sheet-rt-miss {
  display: inline-block;
  background-color: whitesmoke;
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  margin: 2px;
  font-size: 1.1em;
}

.sheet-rolltemplate-cof2 .sheet-rt-hit {
  border-color: #198754;
  color: #198754;
}

.sheet-rolltemplate-cof2 .sheet-rt-miss {
  border-color: #dc3545;
  color: #dc3545;
}

.sheet-rolltemplate-cof2 .inlinerollresult {
  background-color: white;
  border: 2px burlywood solid;
  border-radius: 25%;
  font-weight: bold;
}

.sheet-rolltemplate-cof2 .inlinerollresult.fullcrit,
.sheet-rolltemplate-cof2 .inlinerollresult.fullfail {
  color: whitesmoke;
}

.sheet-rolltemplate-cof2 .inlinerollresult.fullcrit {
  background-color: green;
}

.sheet-rolltemplate-cof2 .inlinerollresult.fullfail {
  background-color: red;
}

.sheet-rolltemplate-cof2 .sheet-rt-hidden {
  display: none;
}

.sheet-rolltemplate-cof2 .sheet-rt-critical {
  color: green;
  font-weight: bold;
}

.sheet-rolltemplate-cof2 .sheet-rt-fumble {
  color: red;
  font-weight: bold;
}

.sheet-rolltemplate-cof2 .sheet-rt-secondary {
  color: steelblue;
}

/* Jakob's better default roll template for Roll20 */
/* https://gist.github.com/joesinghaus/28173990b3235365f6e13fb9f834aa5d */
/* Changed default font and background color to match sheet look-and-feel */

/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
  margin-left: -37px;
  font-family: "Merriweather Sans";
}
.withoutavatars .sheet-rolltemplate-custom {
  margin-left: -7px;
}
.sheet-rolltemplate-custom .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 {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: center;
  color: var(--header-text-color);
  padding: 5px;
}
.sheet-rolltemplate-custom .sheet-title {
  font-size:1.1em;
}
.sheet-rolltemplate-custom .sheet-subtitle {
  font-size:.9em;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container {
  /* this is the default color */
  --header-bg-color: burlywood;
  --header-text-color: #000;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-blue {
  --header-bg-color: #0d6efd;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-indigo { 
  --header-bg-color: #6610f2;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-purple {
  --header-bg-color: #6f42c1;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-pink {
  --header-bg-color: #d63384;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
  --header-bg-color: #dc3545;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-orange { 
  --header-bg-color: #fd7e14;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-yellow {
  --header-bg-color: #ffc107;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-green { 
  --header-bg-color: #198754;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-teal {
  --header-bg-color: #20c997;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-cyan {
  --header-bg-color: #0dcaf0;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-gray {
  --header-bg-color: #6c757d;
  --header-text-color: #fff;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-dark {
  --header-bg-color: #343a40;
  --header-text-color: #fff;
}

/* All props part */
.sheet-rolltemplate-custom .sheet-content {
  display: grid;
  background: #FFF;
  /* 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 {
  padding: 5px;
}

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

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-custom .sheet-value {
}
*/

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

/* Text & description fields */
.sheet-rolltemplate-custom .sheet-text,
.sheet-rolltemplate-custom .sheet-desc {
  grid-column: span 2;
  padding: 5px;
}

.sheet-rolltemplate-custom .sheet-desc {
  text-align: center;
  background-color: var(--header-bg-color);
}

/* ROLL TEMPLATES - Dark Mode */

.sheet-rolltemplate-cof2.sheet-rolltemplate-darkmode,
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode {
  color: #333;
}

.sheet-rolltemplate-cof2.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-custom.sheet-rolltemplate-darkmode .inlinerollresult {
  color: whitesmoke;
}