/**
 * CONTENTS
 *
 * GENERAL..............All universal configs
 * ..Text...............Static text(Label, span etc.)
 * ..Inputs.............Input field styling(text,number)
 * ..Radio Etc..........Radio and checkboxes
 * ..Button.............Roll & Action buttons
 *
 * SECTIONS.............Adjustments for specific sections of content
 * ..Universal............Universal section CSS
 * ..Page 1...............Player character page sections
 * ..Page 2...............Notes page sections
 * ..Page 3...............Settings page sections
 *
 * PAGE TABS/BUTTONS......CSS for switching tabs/pages and their buttons
 *
 * ROLL TEMPLATES.........Styling the rolls in the chat
 *
 * SPECIAL..............special CSS tricks applied last
 */
/*------------------------------------*\
  #GENERAL
\*------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Zilla+Slab|Anton|Noto+Sans+TC|Bebas+Neue&display=swap");
.charsheet {
  /* ---------- Colors ---------- */
  /* --------- Text ------------- */
  /* --------- Inputs ------------- */
  /* -----Hides up/down buttons on numberfields that don't need them ---*/
  /* highlights empty fields with Light grayish red */
  /* higlight selected input */
  /* ------- Buttons ---------- */
  /* text buttons with dice icon removed */
  /*------------------------------------*\
    #SECTIONS
  \*------------------------------------*/
  /* --------------- Universal Section ------------------- */
  /* -------------------------- Page 1 ----------------------- */
  /* ------ Common Info section ------- */
  /* -------------------------- Page 2/Notes --------------------- */
  /* -------------------------- Page 3/Settings ------------------ */
  /* -------------------------- Page 4/NPC ------------------ */
  /*------------------------------------*\
    #PAGE LAYOUT/ PAGE BUTTONS
  \*------------------------------------*/
  /* Defines core layout of each page */
  /* -------------- page buttons ------------- */
  /* show the selected page */
  /* shows/hides page buttons */
  /*------------------------------------*\
    #SPECIAL
  \*------------------------------------*/
  /* Hide actual radio */
  /* Fake radio */
  /* Remove dot from all radios _after_ selected one */
}
.charsheet * {
  font-family: "Noto Sans TC";
  --mythic-dark-red: #4a0004;
  --mythic-light-red: #ac3f2b;
  --mythic-red: #a83521;
}
.charsheet .version {
  color: black;
  font-weight: bold;
  float: right;
  margin: -16px 20px;
}
.charsheet .capital,
.charsheet :not(textarea) {
  font-family: "Bebas Neue";
}
.charsheet label,
.charsheet .label,
.charsheet span {
  color: var(--mythic-dark-red);
}
.charsheet span.bold {
  font-weight: 800;
  font-size: medium;
}
.charsheet div.border-label label {
  border-style: solid;
  max-width: 80%;
  border-radius: 13px;
}
.charsheet .small-font {
  font-size: xx-small;
  height: 18px;
}
.charsheet input[type=text],
.charsheet input[type=number] {
  background-color: transparent;
  border-style: none none solid none;
  border-color: var(--mythic-light-red);
  border-radius: 0px;
}
.charsheet input[type=number] {
  border: 1px solid var(--mythic-light-red);
  text-align: center;
}
.charsheet input[type=number].bubble {
  border: 2px solid var(--mythic-light-red);
  border-radius: 13px;
}
.charsheet input[type=checkbox].checkbox {
  border: solid var(--mythic-light-red);
  border-radius: 0px;
}
.charsheet input[type=number].ref {
  border-style: none none solid none;
  border-color: black;
  border-radius: 0px;
}
.charsheet input[type=number].ref::-webkit-inner-spin-button,
.charsheet input[type=number].ref::-webkit-outer-spin-button,
.charsheet input[type=number].txtfield::-webkit-inner-spin-button,
.charsheet input[type=number].txtfield::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.charsheet input[type=number].ref,
.charsheet input[type=number].txtfield {
  -moz-appearance: textfield;
}
.charsheet textarea {
  width: 90%;
  height: 85%;
  background-color: transparent;
}
.charsheet textarea:placeholder-shown,
.charsheet input[type=text]:placeholder-shown,
.charsheet input[type=number]:placeholder-shown {
  background-color: #EAC9D1;
}
.charsheet textarea:focus,
.charsheet input[type=text]:focus,
.charsheet input[type=number]:focus {
  background-color: #ccc;
}
.charsheet button[type=roll].txt-btn:before,
.charsheet button[type=roll].skills:before {
  content: " ";
}
.charsheet button[type=roll].d6-dice::before {
  /*new die changes die roller to d6*/
  font-family: "dicefontd6", arial;
  content: "F ";
  color: white;
}
.charsheet button[type=roll].sendtext::before {
  /*new die changes die roller to d6*/
  font-family: "Pictos";
  content: "w ";
  color: black;
}
.charsheet button[type=roll].txt-btn {
  height: 22px;
  border: 2px solid black;
  background-color: transparent;
  margin-left: 5px;
  font-weight: bold;
  padding: 2px 5px 4px 5px;
  text-shadow: none;
}
.charsheet button[type=roll].txt-btn:hover {
  background-color: #d9d9d9;
  border-radius: 10px;
  text-shadow: none;
}
.charsheet button[type=roll].red {
  background-color: #a83521;
  background-position: 0 -30px;
  color: white;
}
.charsheet button[type=roll].red:hover {
  background-color: #a83521;
  background-position: 0 -30px;
  color: white;
  font-size: 1.7em;
}
.charsheet .border {
  border-style: solid;
  border-radius: 13px;
}
.charsheet :is(div.section section) hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 2px;
  border-color: black;
}
.charsheet .section,
.charsheet section {
  display: flex;
  padding: 5px;
  border: none;
  background: white;
  opacity: 0.9;
  min-height: 90%;
  max-width: 800px;
}
.charsheet .flex-row {
  display: flex;
  flex-flow: row wrap;
}
.charsheet .flex-col {
  display: flex;
  flex-flow: column;
}
.charsheet .flex-center {
  place-items: center;
}
.charsheet .gap {
  gap: 10px;
}
.charsheet .columnflex {
  display: flex;
  flex-direction: column;
}
.charsheet .rowflex {
  display: flex;
  flex-direction: row;
}
.charsheet .wrap {
  flex-wrap: wrap;
}
.charsheet .nowrap {
  flex-wrap: nowrap;
}
.charsheet .center {
  align-items: center;
}
.charsheet .middle {
  justify-content: center;
}
.charsheet .spaced {
  justify-content: space-evenly;
}
.charsheet label.title {
  text-transform: capitalize;
  max-width: 150px;
  text-align: center;
  font-size: 25px;
}
.charsheet div.halfsection {
  max-width: 400px;
}
.charsheet main.character {
  /* ------ Archetype section ------- */
  /* ------ Attributes section ------- */
  /* ------ skills section ------- */
  /* ------ advantage section ------- */
  /* ------ powers section ------- */
  /* ------ stress section ------- */
  /* ------ weapons section ------- */
  /* ------ armor section ------- */
  /* ------ equipment section ------- */
  /* ------ rules section ------- */
}
.charsheet main.character div.common {
  grid-area: common;
  width: 790px;
}
.charsheet main.character div.common div label {
  font-size: 1.2em;
  max-width: 80px;
  margin: 5px 0px 5px 0px;
  text-align: right;
}
.charsheet main.character div.common input[type=text] {
  font-size: 2em;
  height: 26px;
  padding-bottom: 0px;
}
.charsheet main.character div.common input[type=text].playername {
  font-size: 1em;
}
.charsheet main.character div.common .namecol label {
  width: 81px;
}
.charsheet main.character div.common :not(.namecol) label {
  width: 66px;
}
.charsheet main.character div.common div.input[type=number] {
  font-size: 1.6em;
  height: 26px;
  width: 51px;
  padding-bottom: 0px;
  margin-top: 10px;
}
.charsheet main.character div.common div.img {
  height: 80px;
}
.charsheet main.character div.archetype {
  grid-area: archetype;
  background: transparent;
  width: 730px;
}
.charsheet main.character div.archetype label {
  height: 15px;
}
.charsheet main.character div.archetype select {
  width: 126px;
  height: 27px;
}
.charsheet main.character div.archetype textarea {
  font-size: 0.8em;
  resize: none;
  overflow-y: scroll;
}
.charsheet main.character div.archetype textarea.featuredesc {
  height: 120px;
  width: 46%;
  margin-right: 8px;
}
.charsheet main.character div.archetype textarea.feature {
  height: 53px;
  width: 380px;
  margin-bottom: 2px;
}
.charsheet main.character div.attributes {
  grid-area: attributes;
  margin-top: -10px;
}
.charsheet main.character div.attributes label.title {
  text-align: center;
  min-width: 800px;
  width: 600px;
}
.charsheet main.character div.attributes span,
.charsheet main.character div.attributes input[type=number] {
  height: 30px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
.charsheet main.character div.attributes span.dice {
  font-size: 23px;
  padding-top: 10px;
}
.charsheet main.character div.attributes input[type=number] {
  width: 45px;
  margin-top: 10px;
}
.charsheet main.character div.attributes button[type=roll] {
  font-size: 1.7em;
}
.charsheet main.character div.skills {
  grid-area: skills;
  background-color: transparent;
}
.charsheet main.character div.skills label {
  width: 100px;
  margin-bottom: 0px;
  margin-top: 7px;
}
.charsheet main.character div.skills div.skillgrid {
  display: grid;
  padding: 5px;
  grid-template-rows: repeat(7, 1fr);
  grid-template-columns: 3fr 2fr 3fr 2fr 3fr 2fr;
  width: 750px;
  height: 215px;
  margin-left: 15px;
}
.charsheet main.character div.skills div.skillgrid div {
  width: 50px;
  height: 24px;
}
.charsheet main.character div.skills span {
  text-transform: capitalize;
  font-size: 17px;
  max-width: 130px;
  color: var(--mythic-light-red);
}
.charsheet main.character div.skills input[type=number] {
  font-size: 17px;
  padding: 2px;
  width: 26px;
  border-style: none none solid none;
  color: var(--mythic-light-red);
}
.charsheet main.character div.skills input[type=number].small {
  width: 22px;
}
.charsheet main.character div.skills input[type=text] {
  width: 65px;
  padding: 1px 4px;
  font-size: 14px;
  color: var(--mythic-light-red);
}
.charsheet main.character div.skills select {
  width: 46px;
  height: 22px;
  padding: 0px;
  margin-top: 4px;
  margin-left: 3px;
}
.charsheet main.character div.skills button[type=roll].skills {
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  width: 95px;
  height: 25px;
  border: 2px solid white;
  color: var(--mythic-light-red);
  text-shadow: none;
  flex-shrink: 0;
}
.charsheet main.character div.skills button[type=roll].skills:hover {
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  width: 95px;
  height: 25px;
  border: 2px solid black;
  border-radius: 9px;
  color: var(--mythic-light-red);
  text-shadow: none;
  flex-shrink: 0;
}
.charsheet main.character div.skills button[type=roll].skills:hover::after {
  font-family: "dicefontd6";
  content: " F";
  color: var(--mythic-red);
}
.charsheet main.character div.skills button[type=roll].special {
  width: 25px;
  color: var(--mythic-light-red);
}
.charsheet main.character div.skills button[type=roll].special:hover {
  width: 25px;
  color: var(--mythic-light-red);
}
.charsheet main.character div.skills button[type=roll].special::after {
  font-family: "dicefontd6";
  content: "F";
  color: var(--mythic-red);
}
.charsheet main.character div.advantage {
  grid-area: advantage;
  padding-left: 20px;
}
.charsheet main.character div.advantage label {
  margin-top: 10px;
}
.charsheet main.character div.advantage input[type=text],
.charsheet main.character div.advantage input[type=number] {
  height: 20px;
}
.charsheet main.character div.advantage span {
  color: var(--mythic-light-red);
}
.charsheet main.character div.advantage input[type=text] {
  width: 185px;
}
.charsheet main.character div.advantage span input[type=text] {
  width: 120px;
}
.charsheet main.character div.advantage input[type=number] {
  width: 40px;
}
.charsheet main.character div.advantage .rowflex {
  margin: 4px 0px;
}
.charsheet main.character div.powers {
  grid-area: powers;
}
.charsheet main.character div.powers .labels {
  justify-content: flex-end;
}
.charsheet main.character div.powers label {
  padding-right: 100px;
}
.charsheet main.character div.powers span {
  width: 53px;
  font-size: 17px;
}
.charsheet main.character div.powers span:nth-of-type(1) {
  padding-right: 68px;
}
.charsheet main.character div.powers input[type=text].name {
  width: 130px;
}
.charsheet main.character div.powers input[type=text],
.charsheet main.character div.powers input[type=numbers] {
  margin: 2px;
  border-width: 2px;
}
.charsheet main.character div.stress {
  grid-area: stress;
  font-size: 15px;
  width: 215px;
  height: 162px;
}
.charsheet main.character div.stress div {
  margin: 5px;
}
.charsheet main.character div.stress span {
  display: inline-block;
  padding-right: 5px;
  min-width: 60px;
}
.charsheet main.character div.stress input[type=text] {
  width: 44px;
  border-style: solid;
}
.charsheet main.character div.weapons {
  grid-area: weapons;
  display: grid;
  grid-template-columns: 3fr repeat(11, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.charsheet main.character div.weapons span {
  text-align: center;
}
.charsheet main.character div.weapons input[type=text] {
  width: 120px;
}
.charsheet main.character div.weapons input[type=number] {
  width: 30px;
}
.charsheet main.character div.weapons input[type=number].ammo {
  width: 42px;
}
.charsheet main.character div.weapons input[type=text],
.charsheet main.character div.weapons input[type=number] {
  border: 1px solid var(--mythic-light-red);
  border-radius: 0px;
}
.charsheet main.character div.weapons select {
  width: 50px;
}
.charsheet main.character div.weapons button[type=roll].d6-dice:before {
  width: 30px;
  font-family: "dicefontd6";
  content: "F";
  color: var(--mythic-red);
}
.charsheet main.character div.weapons button[type=roll].d6-dice:before:hover {
  border: 2px solid black;
  border-radius: 9px;
}
.charsheet main.character div.armor {
  grid-area: armor;
}
.charsheet main.character div.armor div {
  padding: 2px;
}
.charsheet main.character div.armor label {
  margin-bottom: 0px;
}
.charsheet main.character div.equipment {
  grid-area: equipment;
}
.charsheet main.character div.equipment textarea {
  width: 95%;
}
.charsheet main.character div.rules {
  grid-area: rules;
}
.charsheet main.notes textarea {
  height: 140px;
}
.charsheet main.settings input[type=number] {
  height: 24px;
}
.charsheet main.settings span.dice {
  margin-top: 5px;
}
.charsheet main.npc * {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.charsheet main.npc h3 {
  text-align: center;
}
.charsheet main.npc div.mookdice {
  display: inline-block;
  font-family: "dicefontd6";
  font-size: 0.8em;
  color: black;
}
.charsheet main.npc .mookgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr) 3fr;
  place-items: center;
}
.charsheet main.npc .mookgrid .orange {
  background-color: orange;
  font-size: 1.8em;
  place-self: stretch;
  padding-top: 4px;
}
.charsheet main.npc .mookgrid .name {
  grid-column: span 5;
}
.charsheet main.npc .mookgrid .name label {
  width: 40px;
}
.charsheet main.npc .mookgrid .name input {
  font-size: 1.7em;
  text-align: center;
  margin-bottom: 5px;
}
.charsheet main.npc .mookgrid .al {
  grid-column: span 2;
}
.charsheet main.npc .mookgrid .notes {
  grid-column: span 5;
  background-color: LemonChiffon;
}
.charsheet main.character {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: 13fr 5fr 4fr;
  grid-template-rows: 1fr minmax(0.2fr, 2.5fr) 1.5fr 4fr 3fr 2fr 2fr 1fr;
  grid-template-areas: "common     common     common    " "archetype  archetype  archetype " "attributes attributes attributes" "skills     skills     skills    " "powers     stress     stress    " "weapons    armor      armor     " "equipment  equipment  advantage" "rules      rules      rules     ";
  width: 800px;
  height: 1300px;
  position: relative;
}
.charsheet main.notes {
  display: grid;
  width: 750px;
  position: relative;
}
.charsheet main.settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 750px;
  position: relative;
}
.charsheet main.npc {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  width: 750px;
  position: relative;
}
.charsheet main.character,
.charsheet main.notes,
.charsheet main.npc,
.charsheet button[type=action].npc,
.charsheet button[type=action].pc,
.charsheet main.settings {
  display: none;
}
.charsheet input.tabstoggle[value=character] ~ main.character,
.charsheet input.tabstoggle[value=notes] ~ main.notes,
.charsheet input.tabstoggle[value=npc] ~ main.npc,
.charsheet input.tabstoggle[value=settings] ~ main.settings {
  display: grid;
}
.charsheet input.npctoggle[value="0"] ~ button[type=action].pc,
.charsheet input.npctoggle[value="1"] ~ button[type=action].npc {
  display: flex;
}
.charsheet div.tab-buttons {
  display: flex;
  gap: 10px;
}
.charsheet div.tab-buttons button {
  font-size: 1.5em;
}
.charsheet input[type=radio].checkbox {
  opacity: 0;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  left: 4px;
  margin: -12px;
  cursor: pointer;
  z-index: 1;
}
.charsheet input[type=radio].checkbox + span.checkbox::before {
  margin-right: 4px;
  border: solid 1px black;
  line-height: 14px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 2px #ccc;
  background: #f6f6f6;
  background: radial-gradient(#f6f6f6, #dfdfdf);
  font-family: "Pictos";
  content: "3";
  width: 12px;
  height: 12px;
  font-size: 15px;
}
.charsheet input[type=radio].checkbox:checked ~ input[type=radio].checkbox + span.checkbox::before {
  content: "";
}
.charsheet input[type=radio].zero:checked + span.checkbox::before {
  opacity: 0;
}
.charsheet input[type=radio].zero:hover + span.checkbox::before {
  opacity: 0.25;
  font-size: 12px;
  content: "✖";
  text-indent: 0.5px;
}
.charsheet input[type=radio].zero + span.checkbox::before {
  opacity: 0;
}

/*------------------------------------*\
  #MOBILE
\*------------------------------------*/
@media only screen and (max-width: 480px) {
  .charsheet button[type=roll].d6-dice::before {
    /*new die changes die roller to d6*/
    content: "";
  }
  .charsheet main.character {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 13fr 9fr;
    grid-template-rows: 1fr minmax(0.3fr, 2.5fr) 1.5fr 8fr 3fr 2fr 2fr 2fr 2fr 1fr;
    grid-template-areas: "common     common    " "archetype  archetype " "attributes attributes" "skills     skills    " "powers     powers    " "weapons    weapons   " "armor      armor    " "stress     stress    " "equipment  equipment " "rules      rules     ";
    width: 480px;
    height: 1800px;
    position: relative;
  }
  .charsheet div.archetype {
    width: 400px;
  }
  .charsheet div.archetype details div {
    flex-direction: column;
  }
  .charsheet div.archetype textarea.featuredesc {
    width: 90%;
  }
  .charsheet div.attributes {
    flex-wrap: wrap;
  }
  .charsheet div.attributes label.title {
    text-align: center;
    min-width: 450px;
    width: 450px;
  }
  .charsheet div.attributes div.rowflex.nowrap.middle {
    flex-wrap: wrap;
    width: 350px;
  }
  .charsheet div.skills div.rowflex {
    flex-direction: column;
  }
  .charsheet div.skills div.skillgrid {
    display: grid;
    padding: 5px;
    grid-template-rows: repeat(21, 1fr);
    grid-template-columns: 3fr 2fr;
    width: 400px;
    height: 800px;
  }
  .charsheet div.skills button[type=roll].red {
    width: 170px;
  }
  .charsheet button[type=roll].skills {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    width: 145px;
    height: 25px;
    border: 2px solid white;
    color: var(--mythic-light-red);
    text-shadow: none;
  }
  .charsheet button[type=roll].skills:hover {
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    width: 145px;
    height: 25px;
    border: 2px solid black;
    border-radius: 9px;
    color: var(--mythic-light-red);
    text-shadow: none;
  }
  .charsheet button[type=roll].skills:hover::after {
    content: "";
  }
  .charsheet div.skills button[type=roll].special {
    width: 25px;
    color: var(--mythic-light-red);
  }
  .charsheet div.skills button[type=roll].special:hover {
    width: 25px;
    color: var(--mythic-light-red);
  }
  .charsheet div.skills button[type=roll].special::after {
    content: "d6";
  }
}
/*------------------------------------*\
  #ROLL TEMPLATES
\*------------------------------------*/
/* Smaller margins - remove these if you want the huge default left margin */
.withoutavatars .sheet-rolltemplate-mythicd6 {
  margin-left: -7px;
}

.sheet-rolltemplate-mythicd6 {
  margin-left: -37px;
  /* Header formatting - title and subtitle */
  /* example colors */
  /* alt template colors */
  /* Allprops part */
  /* Left column */
  /* Empty rule, use this if you want to change the right column 
  .sheet-value {
  }
  */
  /* Make even-numbered rows grey */
  /* Description field */
}
.sheet-rolltemplate-mythicd6 .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}
.sheet-rolltemplate-mythicd6 .sheet-header {
  background-color: var(--header-bg-color, #a83521);
  color: var(--header-text-color, #FFF);
  text-align: left;
  text-transform: capitalize;
  padding: 5px;
  border-bottom: 2px solid black;
}
.sheet-rolltemplate-mythicd6 .sheet-title {
  font-size: 1.2em;
  font-weight: bold;
}
.sheet-rolltemplate-mythicd6 .sheet-subtitle {
  font-size: 0.9em;
}
.sheet-rolltemplate-mythicd6 .sheet-container {
  /* this are the default heaer colors */
  --header-bg-color: #a83521;
  --header-text-color: #FFF;
}
.sheet-rolltemplate-mythicd6 .sheet-container.sheet-color-green {
  --header-bg-color: #008000;
}
.sheet-rolltemplate-mythicd6 .sheet-container.sheet-color-blue {
  --header-bg-color: #0000e0;
}
.sheet-rolltemplate-mythicd6 .sheet-container.sheet-color-gold {
  --header-bg-color: #ffdd1f;
  --header-text-color: #000;
}
.sheet-rolltemplate-mythicd6 .sheet-container.sheet-color-purple {
  --header-bg-color: #c200c2;
}
.sheet-rolltemplate-mythicd6 .sheet-container.sheet-color-black {
  --header-bg-color: #000;
}
.sheet-rolltemplate-mythicd6 .sheet-container.sheet-color-white {
  --header-bg-color: #FFF;
  --header-text-color: #000;
}
.sheet-rolltemplate-mythicd6 .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-mythicd6 .sheet-content > div {
  padding: 5px;
}
.sheet-rolltemplate-mythicd6 .sheet-content .sheet-key {
  font-weight: bold;
  padding-right: 10px;
  text-align: right;
}
.sheet-rolltemplate-mythicd6 .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-mythicd6 .sheet-content :nth-child(4n) {
  background: #EEE;
}
.sheet-rolltemplate-mythicd6 .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
}