/* Typography: "Alegreya Sans" + "Alegreya" */
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* Typography */
  --font-alegreya-sans: 'Alegreya Sans', sans-serif;
  --font-alegreya: 'Alegreya', serif;

  /* Colors */
  /* Carmesim */
  --carmesim-50: #fff1f1;
  --carmesim-100: #fee5e6;
  --carmesim-200: #fdced1;
  --carmesim-300: #faa7ad;
  --carmesim-400: #f77581;
  --carmesim-500: #ef4458;
  --carmesim-600: #d72240;
  --carmesim-700: #b91736;
  --carmesim-800: #9b1634;
  --carmesim-900: #851632;

  /* Vermelho */
  --vermelho-50: #fff1f1;
  --vermelho-100: #ffe1e0;
  --vermelho-200: #ffc8c6;
  --vermelho-300: #ffa19e;
  --vermelho-400: #ff6b66;
  --vermelho-500: #fd3d36;
  --vermelho-600: #eb1e17;
  --vermelho-700: #c6150f;
  --vermelho-800: #9e1510;
  --vermelho-900: #871915;

  /* Dourado */
  --dourado-50: #f7f6ef;
  --dourado-100: #ece9d5;
  --dourado-200: #dad3ae;
  --dourado-300: #c5b77f;
  --dourado-400: #b09954;
  --dourado-500: #a48b4e;
  --dourado-600: #8d7041;
  --dourado-700: #725636;
  --dourado-800: #604933;
  --dourado-900: #543f2f;

  /* Azul */
  --azul-50: #eaffff;
  --azul-100: #cafdff;
  --azul-200: #9cf8ff;
  --azul-300: #57f1ff;
  --azul-400: #0cdfff;
  --azul-500: #00c2ea;
  --azul-600: #0099c4;
  --azul-700: #007ba0;
  --azul-800: #0b617f;
  --azul-900: #0e516b;

  /* Verde */
  --verde-50: #f3fbf2;
  --verde-100: #e3f7e1;
  --verde-200: #caedc5;
  --verde-300: #9ede97;
  --verde-400: #6cc761;
  --verde-500: #47ab3c;
  --verde-600: #328229;
  --verde-700: #2d6f26;
  --verde-800: #285823;
  --verde-900: #21491e;

  /* Grafite */
  --grafite-50: #f7f7f6;
  --grafite-100: #e4e4e3;
  --grafite-200: #c8c8c7;
  --grafite-300: #a5a4a3;
  --grafite-400: #818180;
  --grafite-500: #676765;
  --grafite-600: #515150;
  --grafite-700: #414140;
  --grafite-800: #383837;
  --grafite-900: #313130;

  /* Cinza */
  --cinza-50: #f8f8f8;
  --cinza-100: #f0f0f0;
  --cinza-200: #e4e4e4;
  --cinza-300: #d3d3d4;
  --cinza-400: #b4b4b5;
  --cinza-500: #98989b;
  --cinza-600: #808082;
  --cinza-700: #6a6a6b;
  --cinza-800: #59595b;
  --cinza-900: #4d4d4f;
}

/* Global / Reset */

* {
  margin: 0px;
  padding: 0px;
  font-family: var(--font-alegreya);
}

.largedialog textarea {
  box-sizing: border-box;
  resize: none;
}

/* Variables */

.active-tab {
  color: var(--carmesim-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.border {
  border: 1px solid gray;
  border-radius: 0.25rem;
}

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

.font-pictos {
  font-family: 'Pictos';
}

.hidden {
  display: none;
}

.italic {
  font-style: italic;
}

.lowercase {
  text-transform: lowercase;
}

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

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

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

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-2xs {
  font-size: 0.625rem;
  line-height: 0.75rem;
}

.underline {
  text-decoration-line: underline;
}

.uppercase {
  text-transform: uppercase;
}

/* Old Dragon 2e CSS */

.sheet-darkmode .sheetform,
.sheet-form {
  background: none;
}

.charactersheet {
  background-color: var(--dourado-100);
  border-radius: 1.5rem;
}

/* Tabs Setup (Character/Monster) */

/* Hides the contents of each tab by default */
.charactersheet div[class^="sheet-section"] { 	
	display: none;
}

/* Shows the tab content when the appropriate input field is selected */
.charactersheet input.sheet-tab-character:checked ~ .sheet-section-character,
.charactersheet input.sheet-tab-monster:checked ~ .sheet-section-monster{
	display: flex;
}


/* Hides the radio button for each tab and makes sure it's above everything else */
.charactersheet input.sheet-tab {
  width: 100px;
  height: 24px;
	position: relative;
	opacity: 0;
	z-index: 9999;
  cursor: pointer;
}

/* Styles the span with the tab information and slides to the left, so it appears underneath the radio button */
.charactersheet span.sheet-tab {
	display: inline-block;
  width: 100px;
  height: 24px;
  margin-left: -100px;
  vertical-align: middle;
  background-color: var(--cinza-200);
  text-align: center;
	font-weight: bold;
	border-radius: 3px;
  cursor: pointer;
}

/* Modifies the span color once the radio button is selected so that is clear which tab is selected */
.charactersheet input.sheet-tab-character:checked + span.sheet-tab-character,
.charactersheet input.sheet-tab-monster:checked + span.sheet-tab-monster {
  background-color: var(--carmesim-600);
  color: white;
	border-radius: 3px;
}

.sheet-section-character,
.sheet-section-monster {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-top: 10px;
  /* max-width: 832px; */

  .sheet-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    .stats,
    .monster-stats {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .stat {
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: end;
        gap: 0.25rem;

        .stat-value {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 0.25rem;
          font-size: larger;
  
          label {
            margin: 0px;
            padding: 2px 3px;
            font-size: medium;
          }
  
          input {
            width: 35px;
            height: 35px;
            text-align: center;
            font-weight: bold;
          }
        }
    
        .stat-mod {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: small;

          span {
            width: 25px;
            height: 25px;
            padding: 4px;
            background-color: var(--cinza-200);
            border: 1px solid rgb(204, 204, 204);
            border-radius: 3px;
            text-align: center;
            line-height: 24px;
          }
  
          input {
            width: 35px;
            height: 35px;
            text-align: center;
          }
        }
      }
    }

    .jp {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      width: max-content;

      .jp-group {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        .jpd,
        .jpc,
        .jps {
          display: flex;
          flex-direction: column;
          align-items: center;

          span.attr-value {
            width: 25px;
            height: 25px;
            padding: 4px;
            background-color: var(--cinza-200);
            border: 1px solid rgb(204, 204, 204);         
            border-radius: 3px;
            text-align: center;
            line-height: 24px;
          }
        }

        .jp-values {
          display: flex;
          flex-direction: row;
          gap: 0.5rem;

          .jp-value {
            display: flex;
            flex-direction: column;
            align-items: center;

            input {
              width: 20px;
              height: 20px;
              text-align: center;
              font-size: 1rem;
            }

            span {
              width: 10px;
              height: 10px;
              padding: 4px;
              background-color: var(--cinza-200);
              border: 1px solid rgb(204, 204, 204);         
              border-radius: 3px;
              text-align: center;
              font-size: 1rem;
              line-height: 12px;
            }
          }
        }
      }
    }

    .encounter,
    .treasure,
    .dv {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      width: max-content;
      text-align: center;

      .encounter-group,
      .treasure-group,
      .dv-group {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        .dv-value {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        input {
          width: 50px;
          text-align: center;
        }
      }

      .dv-group {
        align-items: flex-start;
      }
    }
  }

  .sheet-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;

    .header {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .basic-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.25rem;

        input {
          width: 180px;
        }

        select {
          margin-bottom: 0px;
          width: auto;
          background-color: #f5f5f5;
        }
      }

      .monster-basic-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.25rem;

        select {
          margin-bottom: 0px;
          width: auto;
          background-color: #f5f5f5;
        }
      }

      .additional-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.25rem;

        .alignment,
        .mv,
        .xp,
        .hp {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-wrap: wrap;

          select {
            margin-bottom: 0px;
            width: 120px;
            background-color: #f5f5f5;
          }
        }

        .monster-xp {
          display: flex;
          flex-direction: column;
          align-items: center;

          input {
            width: 40px;
            text-align: center;
          }
        }

        .mv-values,
        .xp-values,
        .hp-values {
          display: flex;
          flex-direction: row;
          gap: 0.25rem;
        }

        .mv-value,
        .xp-value,
        .hp-value {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .mv-value {
          span {
            width: 30px;
            height: 18px;
            padding: 4px;
            background-color: var(--cinza-200);
            border: 1px solid rgb(204, 204, 204);         
            border-radius: 3px;
            text-align: center;
            line-height: 18px;
          }

          input {
            width: 40px;
            text-align: center;
          }
        }

        .xp-value,
        .hp-value {
          input {
            width: 80px;
            text-align: center;
            
          }
        }
      }

      .overview {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.25rem;

        .ca {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.25rem;
          padding: 0px 10px;
          height: max-content;

          .ca-values {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;

            .ca-total {
              display: flex;
              flex-direction: column;
              align-items: center;

              span {
                width: 25px;
                height: 25px;
                padding: 4px;
                background-color: var(--cinza-200);
                border: 1px solid rgb(204, 204, 204);         
                border-radius: 3px;
                text-align: center;
                line-height: 24px;
              }
            }

            .ca-value {
              display: flex;
              flex-direction: column;
              align-items: center;

              input {
                width: 20px;
                height: 20px;
                text-align: center;
                font-size: 1rem;
              }

              span {
                width: 10px;
                height: 10px;
                padding: 4px;
                background-color: var(--cinza-200);
                border: 1px solid rgb(204, 204, 204);         
                border-radius: 3px;
                text-align: center;
                font-size: 1rem;
                line-height: 12px;
              }
            }
          }
        }

        .ba {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.25rem;
          padding: 0px 10px;
          height: max-content;

          .ba-values {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.25rem;

            .bac, .bad {
              display: flex;
              flex-direction: column;
              align-items: center;

              span.attr-value {
                width: 25px;
                height: 25px;
                padding: 4px;
                background-color: var(--cinza-200);
                border: 1px solid rgb(204, 204, 204);         
                border-radius: 3px;
                text-align: center;
                line-height: 24px;
              }

              button {
                padding: 0px;
              }
            }

            .ba-value {
              display: flex;
              flex-direction: column;
              align-items: center;

              input {
                width: 20px;
                height: 20px;
                text-align: center;
                font-size: 1rem;
              }

              span {
                width: 10px;
                height: 10px;
                padding: 4px;
                background-color: var(--cinza-200);
                border: 1px solid rgb(204, 204, 204);         
                border-radius: 3px;
                text-align: center;
                font-size: 1rem;
                line-height: 12px;
              }
            }
          }
        }

        .economy {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.25rem;
          padding: 0px 10px;
          height: max-content;
  
          .currency {
            display: flex;
            flex-direction: row;
            gap: 0.25rem;
  
            .gp,
            .sp,
            .cp {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.15rem;
  
              input {
                width: 45px;
                height: 35px;
                text-align: center;
              }
  
              .gp-label {
                color: #e3a008;
              }
  
              .sp-label {
                color: #98989b;
              }
  
              .cp-label {
                color: #b43403;
              }
            }
          }
        }
      }
    }

    .main {
      height: -webkit-fill-available;

      .navigation-tabs {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-bottom: 1rem;

        button {
          background-color: transparent;
          border: none;
          font-weight: bold;
        }

        button:hover {
          color: var(--carmesim-500);
          text-decoration: underline;
          text-underline-offset: 2px;
        }
      }

      /* tab buttons */
      .tab-attacks,
      .tab-skills,
      .tab-spells,
      .tab-equipment,
      .tab-details,
      .tab-notes,
      .tab-monster-attacks,
      .tab-monster-info {
        display: none;
      }

      /* Show selected tab */
      .sheet-tabstoggle[value="attacks"] ~ .navigation-tabs button[name="act_attacks"],
      .sheet-tabstoggle[value="skills"] ~ .navigation-tabs button[name="act_skills"],
      .sheet-tabstoggle[value="spells"] ~ .navigation-tabs button[name="act_spells"],
      .sheet-tabstoggle[value="equipment"] ~ .navigation-tabs button[name="act_equipment"],
      .sheet-tabstoggle[value="details"] ~ .navigation-tabs button[name="act_details"],
      .sheet-tabstoggle[value="notes"] ~ .navigation-tabs button[name="act_notes"],
      .sheet-tabstoggle[value="monster_attacks"] ~ .navigation-tabs button[name="act_monster_attacks"],
      .sheet-tabstoggle[value="monster_info"] ~ .navigation-tabs button[name="act_monster_info"] {
        color: var(--carmesim-500);
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      /* attacks tab (Ataques) */
      .sheet-tabstoggle[value="attacks"] ~ div.tab-attacks {
        display: block;

        .attack-list-header {
          display: flex;
          flex-direction: row;
          padding: 2.5px 5px;
          border-top-left-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
          background-color: var(--carmesim-600);
          color: white;
          font-size: smaller;
          font-weight: bold;

          .attack-name-label {
            flex-basis: 20%;
          }
          .attack-range-label {
            flex-basis: 10%;
          }
          .attack-ba-label {
            flex-basis: 7%;
          }
          .attack-bonus-ba-label {
            flex-basis: 10%;
          }
          .attack-damage-label {
            flex-basis: 7%;
          }
          .attack-bonus-damage-label {
            flex-basis: 10%;
          }
          .attack-properties-label {
            flex-basis: 26%;
          }
          .attack-action-label {
            flex-basis: 10%;
          }
        }

        .repcontainer[data-groupname=repeating_attacks] {
          .repitem {
            .attack-data {
              display: flex;
              flex-direction: row;
              gap: 0.25rem;
              margin-top: 0.25rem;
              margin-bottom: 0.5rem;

              .attack-name {
                flex-basis: 20%;
              }

              .attack-range {
                flex-basis: 9.5%;
              }

              .attack-ba {
                flex-basis: 6.5%;
              }

              .attack-bonus-ba {
                flex-basis: 9.5%;
              }

              .attack-damage {
                flex-basis: 6.5%;
              }

              .attack-bonus-damage {
                flex-basis: 9.5%;
              }

              .attack-properties {
                flex-basis: 25.5%;
              }

              .attack-action {
                display: flex;
                flex-direction: row;
                justify-content: center;
                gap: 0.5rem;
                flex-basis: 10%;

                button {
                  background-color: var(--carmesim-600);
                  color: white;
                  border: none;
                  border-radius: 0.5rem;
                  padding: 0.25rem;
                  font-size: x-large;
                }

                button:hover {
                  background-color: var(--carmesim-500);
                }
              }
            }

            .attack-data input {
              width: 100%;
              padding: 0.25rem;
            }

            .attack-data input::placeholder {
              color: var(--cinza-400);
            }
          }
        }
      }

      /* skills tab (Habilidades Raça/Classe) */
      .sheet-tabstoggle[value="skills"] ~ div.tab-skills {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: 100%;

        .infravision {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 0.5rem;

          input {
            width: 35px;
          }
        }

        .race-skills,
        .class-skills {
          display: flex;
          flex-direction: column;

          .tab-title {
            padding: 5px;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background-color: var(--carmesim-600);
            color: white;
            text-align: center;
            font-size: larger;
            font-weight: bold;
          }

          textarea {
            min-height: 164px;
            height: auto;
            padding: 5px;
            background-color: white;
            border: none;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
          }
        }
      }

      /* spells tab (Magias) */
      .sheet-tabstoggle[value="spells"] ~ div.tab-spells {
        display: block;

        .spell-list-header {
          display: flex;
          flex-direction: row;
          padding: 2.5px 5px;
          border-top-left-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
          background-color: var(--carmesim-600);
          color: white;
          font-size: smaller;
          font-weight: bold;

          .spell-name-label {
            flex-basis: 22.5%;
          }
          .spell-school-label {
            flex-basis: 15%;
          }
          .spell-circle-label {
            flex-basis: 7.5%;
          }
          .spell-range-label {
            flex-basis: 12%;
          }
          .spell-duration-label {
            flex-basis: 15.5%;
          }
          .spell-jp-label {
            flex-basis: 13%;
          }
          .spell-slot-label {
            flex-basis: 7%;
          }
          .spell-roll-label {
            flex-basis: 7.5%;
          }
        }

        .repcontainer[data-groupname=repeating_spells] {
          .repitem {
            .spell-data {
              display: flex;
              flex-direction: row;
              gap: 0.25rem;
              margin-top: 0.25rem;
              margin-bottom: 0.5rem;

              .spell-name {
                flex-basis: 23%;
              }

              .spell-school {
                flex-basis: 15%;
              }

              .spell-circle {
                flex-basis: 7%;
              }

              .spell-range {
                flex-basis: 12%;
              }

              .spell-duration {
                flex-basis: 15%;
              }

              .spell-jp {
                flex-basis: 13%;
              }

              .spell-slot {
                flex-basis: 7%;
              }

              .spell-roll {
                display: flex;
                flex-direction: row;
                justify-content: center;
                flex-basis: 8%;

                button {
                  background-color: var(--carmesim-600);
                  color: white;
                  border: none;
                  border-radius: 0.5rem;
                  padding: 0.25rem;
                  font-size: x-large;
                }

                button:hover {
                  background-color: var(--carmesim-500);
                }
              }

              select {
                margin-bottom: 0px;
                padding: 0.25rem;
                width: 40px;
                height: 25px;
                background-color: #f5f5f5;
                font-family: 'Courier New', Courier, monospace;
              }
            }

            .spell-data input {
              width: 100%;
              padding: 0.25rem;
            }

            .spell-data input::placeholder {
              color: var(--cinza-400);
            }

            .spell-description-header {
              padding: 2.5px 5px;
              /* border-top-left-radius: 0.5rem;
              border-top-right-radius: 0.5rem;
              background-color: var(--carmesim-600); */
              color: white;
              font-size: smaller;
              font-weight: bold;
              text-align: center;
            }

            .spell-description {
              display: none;

              textarea {
                width: 100%;
                margin-bottom: 0px;
                padding: 0.25rem;
                border: none;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
                resize: vertical;
              }
            }

            input.spell-description-input:checked ~ div.spell-description {
              display: block;
            }

            input.spell-description-input:checked ~ span.spell-description-input {
              background-color: var(--carmesim-600);
              color: white;
              border-top-left-radius: 0.5rem;
              border-top-right-radius: 0.5rem;
            }

            input.spell-description-input:checked ~ span.spell-description-input::after {
              margin-left: 0.5rem;
              content: "⯅";
              font-size: smaller;
            }

            input.spell-description-header {
              opacity: 0;
              position: relative;
              z-index: 999;
              width: 100%;
              cursor: pointer;
            }

            span.spell-description-header {
              display: inline-block;
              position: absolute;
              left: 0px;
              width: 98.5%;
              border-top-left-radius: 0.5rem;
              border-top-right-radius: 0.5rem;
              background-color: var(--carmesim-700);
            }

            span.spell-description-header::after {
              margin-left: 0.5rem;
              content: "⯆";
              font-size: smaller;
            }

            hr {
              margin-top: 0.75rem;
              margin-bottom: 0.75rem;
              border: none;
              height: 1px;
              background-color: black;
            }

            .repcontrol_edit {
              
            }

            .repcontrol_add {

            }

            .repcontrol_del {
              
            }

            .repcontrol_move {
              
            }
          }
        }
      }

      /* equipment tab (Equipamentos) */
      .sheet-tabstoggle[value="equipment"] ~ div.tab-equipment {
        display: block;

        .equipment-list-header {
          display: flex;
          flex-direction: row;
          padding: 2.5px 5px;
          border-top-left-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
          background-color: var(--carmesim-600);
          color: white;
          font-size: smaller;
          font-weight: bold;

          .equipment-name-label {
            flex-basis: 25%;
          }
          .equipment-quantity-label {
            flex-basis: 7%;
          }
          .equipment-weight-label {
            flex-basis: 13%;
          }
          .equipment-cost-label {
            flex-basis: 10%;
          }
          .equipment-description-label {
            flex-basis: 45%;
          }
        }

        .second-item {
          margin-top: 1rem;
        }

        .repcontainer[data-groupname=repeating_weapon],
        .repcontainer[data-groupname=repeating_armor],
        .repcontainer[data-groupname=repeating_shield],
        .repcontainer[data-groupname=repeating_misc],
        .repcontainer[data-groupname=repeating_container],
        .repcontainer[data-groupname=repeating_vehicle] {
          .repitem {
            .equipment-data {
              display: flex;
              flex-direction: row;
              gap: 0.25rem;
              margin-top: 0.25rem;
              margin-bottom: 0.5rem;

              .equipment-name {
                flex-basis: 24.5%;
              }

              .equipment-quantity {
                flex-basis: 6.5%;
              }

              .equipment-weight {
                flex-basis: 12%;
              }

              .equipment-cost {
                flex-basis: 9.5%;
              }

              .equipment-description {
                flex-basis: 46%;
              }
            }

            .equipment-data input {
              width: 100%;
              padding: 0.25rem;
            }

            .equipment-data input::placeholder {
              color: var(--cinza-400);
            }
          }
        }

        .load-section {
          display: flex;
          justify-content: center;
          margin-top: 1rem;

          .load {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            padding: 0px 10px;
            width: max-content;
  
            .load-values {
              display: flex;
              flex-direction: row;
              gap: 0.25rem;
      
              .current-load,
              .max-load {
                display: flex;
                flex-direction: column;
                align-items: center;
      
                input {
                  width: 45px;
                  height: 35px;
                  text-align: center;
                }
              }
            }
          }
        }
      }

      /* details tab (Detalhes) */
      .sheet-tabstoggle[value="details"] ~ div.tab-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;

        .languages,
        .reputation,
        .appearance,
        .personality,
        .background {
          display: flex;
          flex-direction: column;

          .tab-title {
            padding: 5px;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background-color: var(--carmesim-600);
            color: white;
            text-align: center;
            font-size: larger;
            font-weight: bold;
          }

          select {
            width: 100%;
            height: 30px;
            background-color: white;
            border: none;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            text-align: center;
          }

          textarea {
            height: auto;
            padding: 5px;
            background-color: white;
            border: none;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
          }
        }

        .appearance,
        .personality,
        .background {

          textarea {
            resize: vertical;
          }
        }

        .languages {
          textarea {
            height: 30px;
          }
        }

        .appearance,
        .personality {
          textarea {
            min-height: 64px;
          }
        }

        .background {
          grid-column: span 2 / span 2;

          textarea {
            min-height: 64px;
          }
        }
      }

      /* notes tab (Anotações) */
      .sheet-tabstoggle[value="notes"] ~ div.tab-notes {
        display: block;

        .notes {
          .tab-title {
            padding: 5px;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background-color: var(--carmesim-600);
            color: white;
            text-align: center;
            font-size: larger;
            font-weight: bold;
          }

          textarea {
            height: auto;
            min-height: 245px;
            padding: 5px;
            background-color: white;
            border: none;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            resize: vertical;
          }
        }
      }

      /* monster attacks tab (Ataques) */
      .sheet-tabstoggle[value="monster_attacks"] ~ div.tab-monster-attacks {
        display: block;

        .monster-attack-list-header {
          display: flex;
          flex-direction: row;
          padding: 2.5px 5px;
          border-top-left-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
          background-color: var(--carmesim-600);
          color: white;
          font-size: smaller;
          font-weight: bold;

          .monster-attack-times-label {
            flex-basis: 3%;
            text-align: center;
          }

          .monster-attack-name-label {
            flex-basis: 30.5%;
            padding-left: 10px;
          }

          .monster-attack-ba-label {
            flex-basis: 7%;
          }

          .monster-attack-damage-label {
            flex-basis: 14.5%;
          }

          .monster-attack-bonus-damage-label {
            flex-basis: 36%;
          }

          .monster-attack-action-label {
            flex-basis: 9%;
          }
        }

        .repcontainer[data-groupname=repeating_monsterattacks] {
          .repitem {
            .monster-attack-data {
              display: flex;
              flex-direction: row;
              gap: 0.25rem;
              margin-top: 0.25rem;
              margin-bottom: 0.5rem;

              .monster-attack-times {
                flex-basis: 4%;

                input {
                  width: 30px;
                  text-align: center;
                }
              }

              .monster-attack-name {
                flex-basis: 29%;
              }

              .monster-attack-ba {
                flex-basis: 6%;
              }

              .monster-attack-damage {
                flex-basis: 12%;

                input {
                  width: 100px;
                }
              }

              .monster-attack-bonus-damage {
                flex-basis: 39%;
              }

              .monster-attack-action {
                display: flex;
                flex-direction: row;
                justify-content: center;
                gap: 0.5rem;
                flex-basis: 10%;

                button {
                  background-color: var(--carmesim-600);
                  color: white;
                  border: none;
                  border-radius: 0.5rem;
                  padding: 0.25rem;
                  font-size: x-large;
                }

                button:hover {
                  background-color: var(--carmesim-500);
                }
              }
            }

            .monster-attack-data input {
              /* width: 100%; */
              padding: 0.25rem;
            }

            .monster-attack-data input::placeholder {
              color: var(--cinza-400);
            }
          }
        }
      }

      /* monster info tab (Informações) */
      .sheet-tabstoggle[value="monster_info"] ~ div.tab-monster-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: 100%;

        .monster-flavor,
        .monster-traits {
          display: flex;
          flex-direction: column;

          .tab-title {
            padding: 5px;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background-color: var(--carmesim-600);
            color: white;
            text-align: center;
            font-size: larger;
            font-weight: bold;
          }

          textarea {
            min-height: 164px;
            height: auto;
            padding: 5px;
            background-color: white;
            border: none;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
          }

          textarea[name="attr_monster_flavor"] {
            min-height: 40px;
          }
        }
      }
    }
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }

  input[type="number"] {
      -moz-appearance: textfield;
  }

  hr {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border: none;
    height: 1px;
    background-color: black;
  }
}

/* Roll Button styles */

.ui-dialog .charsheet button[type=roll] {
  margin: 0px;
  border: 0;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-size: medium;
}

.ui-dialog .charsheet button[type=roll]:hover {
  color: var(--carmesim-500);
}

.ui-dialog .charsheet button[type=roll]::before {
  /* content: ""; */
  padding-right: 0.25rem;
  font-weight: 600;
  font-size: small;
}

.ui-dialog .charsheet button[type=roll].jp-roll {
  font-size: small;
}

.ui-dialog .charsheet button[type=roll].jp-roll::before {
  font-size: xx-small;
}

.ui-dialog .charsheet button[type=roll].ba-roll {
  font-size: small;
}

.ui-dialog .charsheet button[type=roll].ba-roll::before {
  font-size: xx-small;
}

.ui-dialog .charsheet button[type=roll].spell-roll,
.ui-dialog .charsheet button[type=roll].attack-roll,
.ui-dialog .charsheet button[type=roll].monster-attack-roll,
.ui-dialog .charsheet button[type=roll].damage-roll,
.ui-dialog .charsheet button[type=roll].monster-damage-roll {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-dialog .charsheet button[type=roll].spell-roll::before,
.ui-dialog .charsheet button[type=roll].attack-roll::before,
.ui-dialog .charsheet button[type=roll].monster-attack-roll::before,
.ui-dialog .charsheet button[type=roll].damage-roll::before,
.ui-dialog .charsheet button[type=roll].monster-damage-roll::before {
  content: "";
  padding: 0px;
}

.ui-dialog .charsheet button[type=roll].spell-roll::before span,
.ui-dialog .charsheet button[type=roll].attack-roll::before span,
.ui-dialog .charsheet button[type=roll].monster-attack-roll::before span,
.ui-dialog .charsheet button[type=roll].damage-roll::before span,
.ui-dialog .charsheet button[type=roll].monster-damage-roll::before span {
  font-size: small;
}

/* Roll Template styles */

/* basicroll, bacroll, badroll, spellroll, attackroll, monsterattackroll, damageroll, monsterdamageroll */

.sheet-rolltemplate-basicroll,
.sheet-rolltemplate-bacroll,
.sheet-rolltemplate-badroll,
.sheet-rolltemplate-spellroll,
.sheet-rolltemplate-attackroll,
.sheet-rolltemplate-monsterattackroll,
.sheet-rolltemplate-damageroll,
.sheet-rolltemplate-monsterdamageroll {
  padding: 0.5rem;
}

.sheet-rolltemplate-basicroll .sheet-character-name,
.sheet-rolltemplate-bacroll .sheet-character-name,
.sheet-rolltemplate-badroll .sheet-character-name,
.sheet-rolltemplate-spellroll .sheet-character-name,
.sheet-rolltemplate-attackroll .sheet-character-name,
.sheet-rolltemplate-damageroll .sheet-character-name,
.sheet-rolltemplate-monsterattackroll .sheet-character-name,
.sheet-rolltemplate-monsterdamageroll .sheet-character-name {
  font-style: italic;
}

.sheet-rolltemplate-basicroll h4.sheet-success {
  padding: 1rem 0px;
  color: lawngreen;
  font-weight: bolder;
}

.sheet-rolltemplate-basicroll h4.sheet-fail {
  padding: 1rem 0px;
  color: red;
  font-weight: 900;
}

.sheet-rolltemplate-basicroll div.sheet-rollresult {
  padding-bottom: 1rem;
}

.sheet-rolltemplate-bacroll div.sheet-rollresult,
.sheet-rolltemplate-badroll div.sheet-rollresult,
.sheet-rolltemplate-attackroll div.sheet-rollresult,
.sheet-rolltemplate-monsterattackroll div.sheet-rollresult,
.sheet-rolltemplate-damageroll div.sheet-rollresult,
.sheet-rolltemplate-monsterdamageroll div.sheet-rollresult {
  padding: 1rem 0px;
}

.sheet-rolltemplate-bacroll div.sheet-rollresult strong,
.sheet-rolltemplate-bacroll div.sheet-rollresult span:nth-child(2),
.sheet-rolltemplate-badroll div.sheet-rollresult strong,
.sheet-rolltemplate-badroll div.sheet-rollresult span:nth-child(2),
.sheet-rolltemplate-attackroll div.sheet-rollresult strong,
.sheet-rolltemplate-attackroll div.sheet-rollresult span:nth-child(2),
.sheet-rolltemplate-damageroll div.sheet-rollresult strong,
.sheet-rolltemplate-damageroll div.sheet-rollresult span:nth-child(2) {
  /* font-size: x-large; */
}

.sheet-rolltemplate-bacroll div.sheet-rollresult span.inlinerollresult.showtip.tipsy-n-right:nth-child(2),
.sheet-rolltemplate-badroll div.sheet-rollresult span.inlinerollresult.showtip.tipsy-n-right:nth-child(2),
.sheet-rolltemplate-attackroll div.sheet-rollresult span.inlinerollresult.showtip.tipsy-n-right:nth-child(2),
.sheet-rolltemplate-monsterattackroll div.sheet-rollresult span.inlinerollresult.showtip.tipsy-n-right:nth-child(2),
.sheet-rolltemplate-damageroll div.sheet-rollresult span.inlinerollresult.showtip.tipsy-n-right:nth-child(2),
.sheet-rolltemplate-monsterdamageroll div.sheet-rollresult span.inlinerollresult.showtip.tipsy-n-right:nth-child(2) {
  padding: 0px;
  background: none;
  border: none;
  cursor: text;
  pointer-events: none;
  text-decoration: underline;
}

.sheet-rolltemplate-spellroll div.sheet-school {
  margin-top: 1rem;
  font-style: italic;
}

.sheet-rolltemplate-spellroll div.sheet-school,
.sheet-rolltemplate-spellroll div.sheet-range,
.sheet-rolltemplate-spellroll div.sheet-duration,
.sheet-rolltemplate-spellroll div.sheet-jp {
  margin-bottom: 1rem;
}

.sheet-rolltemplate-basicroll hr,
.sheet-rolltemplate-bacroll hr,
.sheet-rolltemplate-badroll hr,
.sheet-rolltemplate-attackroll hr,
.sheet-rolltemplate-monsterattackroll hr,
.sheet-rolltemplate-damageroll hr,
.sheet-rolltemplate-monsterdamageroll hr,
.sheet-rolltemplate-spellroll hr {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border: none;
  height: 1px;
  background-color: white;
}