.application.actor {
   overflow: visible clip;

   .window-content {
      overflow: auto;
   }
}

.actor {
   img {
      border: none;
   }

   .nav-tabs-right {
      left: 100%;
      top: 10%;
      position: absolute;
      flex-direction: column;

      .nav-tab {
         width: 38px;
         margin: 2px 0;
         padding-inline-end: 12px;
         border-radius: 0 8px 8px 0;
         padding: 4px;

         a {
            border-radius: 0 6px 6px 0;
            border-right: 1px solid;
            border-bottom: 1px solid;
            border-top: 1px solid;
            padding: 4px 4px 4px 0;
            width: 30px;
            display: inline-block;

            img {
               filter: brightness(50%);
            }
         }
      }

      .nav-tab-vert {
         width: 26px;
         padding: 8px 2px;
         margin: 4px 0;
         padding-inline-end: 8px;
         border-radius: 0 8px 8px 0;
         writing-mode: vertical-lr;
      }
   }

   .ability-scores {
      max-width: 200px;
   }

   .ability-horz {
      border-right-style: solid;
      border-right-width: 1px;

      input {
         margin-right: 4px;
      }
   }

   .ability-horz:last-child {
      border-right: none;
   }

   .xsmall-col {
      min-height: 32px;

      input, label {
         max-width: 38px;
         min-width: 38px;
         display: inline-block;
         text-align: center;
      }

      label {
         font-size: 13px;
      }
   }

   .small-input {
      input {
         align-content: center;
         max-width: 34px;
         min-width: 34px;
         font-size: 16px;
      }
   }

   .saving-throws {
      .tall-row {
         min-height: 36px;
      }

      .small-row {
         min-height: 30px;
      }

      input {
         align-content: center;
         margin-right: 6px;
         max-width: 34px;
         min-width: 34px;
         font-size: 16px;
      }

      label {
         align-content: center;
         text-align: left;
         font-size: 12px;
      }

      .abbr {
         margin-left: 8px;
         font-size: 20px;
      }

      .long {
         font-size: 12px;
      }
   }

   .hit-points {
      height: 74px;
      position: relative;

      .hp-value {
         color: $lighterColor;
         background: none;
         border: 0 none;
         text-align: center;
         font-weight: bolder;
         text-shadow: 0 0 2px $darkerColor, 0 1px 2px $darkerColor, 1px 0 2px $darkerColor, 1px 1px 2px $darkerColor;
         background: none;
      }

      .hp-top {
         position: absolute;
         font-size: 26px;
         top: 15px;
         width: 50px;
         left: calc(50% - 25px);
      }

      .hp-bottom {
         position: absolute;
         font-size: 12px;
         bottom: 8px;
         width: 40px;
         right: calc(50% + -20px);
      }

      .hp-empty {
         background-size: 74px;
         background-position: top;
         background-clip: content-box;
         background-image: url("../assets/img/heart_empty2.png");
         background-repeat: no-repeat;
      }

      .hp-full {
         background-size: 74px;
         background-position: bottom;
         background-clip: content-box;
         background-image: url("../assets/img/heart_full2.png");
         background-repeat: no-repeat;
      }
   }

   .armor-class {
      height: 74px;
      position: relative;
      background-size: 70px;
      background-position: center;
      background-image: url("../assets/img/armor1.png");
      background-repeat: no-repeat;

      .ac-value {
         color: $lighterColor;
         background: none;
         border: 0 none;
         text-align: center;
         font-weight: bolder;
         text-shadow: 0 0 2px $darkerColor, 0 1px 2px $darkerColor, 1px 0 2px $darkerColor, 1px 1px 2px $darkerColor;
      }

      .ac-top {
         position: absolute;
         font-size: 26px;
         top: 10px;
         width: 50px;
         left: calc(50% - 25px);
      }

      .ac-bottom {
         position: absolute;
         font-size: 12px;
         bottom: 15px;
         width: 50px;
         right: calc(50% + -25px);
      }

      .shield {
         position: absolute;
         //left: 58px;
         left: 71%;
         top: 30px;
         font-size: 24px;
         color: #707070;
         //text-shadow: 0 0 3px $c-dark;

         .shield-ac-val {
            width: 40px;
            color: $lighterColor;
            font-weight: bolder;
            text-align: center;
            text-shadow: 0 0 3px $c-dark, 0 1px 2px $c-dark, 1px 0 2px $c-dark, 1px 1px 2px $c-dark;
            position: relative;
            //left: 50%; /* Center horizontally */
            //top: 50%; /* Center vertically */
            left: 12px;
            top: -15px;
            transform: translate(-50%, -50%); /* Adjust position to truly center */
            font-size: 14px;
         }
      }

      .ranged-ac {
         position: absolute;
         left: 1px;
         top: 30px;
         font-size: 24px;
         color: #808080;
         //text-shadow: 0 0 3px $c-dark;

         .ranged-ac-val {
            width: 40px;
            color: $lighterColor;
            font-weight: bolder;
            text-align: center;
            text-shadow: 0 0 3px $c-dark, 0 1px 2px $c-dark, 1px 0 2px $c-dark, 1px 1px 2px $c-dark;
            position: relative;
            //left: 50%; /* Center horizontally */
            //top: 50%; /* Center vertically */
            left: 12px;
            top: -15px;
            transform: translate(-50%, -50%); /* Adjust position to truly center */
            font-size: 14px;
         }
      }
   }

   .dropped-item {
      width: 28px;
      margin: 5px 0 0 6px;
      filter: brightness(0) saturate(100%) invert(44%) sepia(49%) saturate(934%) hue-rotate(315deg) brightness(86%) contrast(91%);
   }

   .category-info {
      font-weight: normal;
      margin-left: 10px;
   }

   .category-caret {
      flex: 0 0 6px;
      margin: 0 5px 0 0;
      cursor: pointer;
   }

   .attack-group {
      box-shadow: 1px 0 1px black;
      padding: 0;
      margin-bottom: 4px;

      .group-0 {
         background-color: #dc2f2f;
      }

      .group-1 {
         background-color: #33cb44;
      }

      .group-2 {
         background-color: #efe528;
      }

      .group-3 {
         background-color: #af50cf;
      }

      .group-4 {
         background-color: #4788bf;
      }

      .group-5 {
         background-color: #dd8525;
      }

      .item-group {
         content: "";
         margin-left: 4px;
         width: 7px;
         border: none;
         height: 24px;
         cursor: pointer;
      }
   }
}

.character {
   .ability {
      min-height: 34px;

      label {
         font-weight: 500;
         margin: 0 0 2px 0;
      }

      .abbr {
         font-size: 20px;
         min-width: 60px;
         max-width: 80px;
         text-align: center;
      }

      .long {
         font-size: 15px;
         min-width: 80px;
         max-width: 80px;
         text-align: left;
      }

      input {
         font-size: 16px;
         max-width: 30px;
         border-radius: 4px;
         padding-top: 0;
         text-align: center;
      }

      .ability-score {
         font-size: 25px;
         text-align: center;
         padding-right: 5px;
      }

      .ability-mod {
         max-width: 36px;
         font-size: 18px;
      }
   }
}

.monster {
   .ability {
      min-height: 30px;

      label {
         font-weight: 500;
         margin: 0 0 2px 0;
      }

      .abbr {
         font-size: 16px;
         min-width: 60px;
         max-width: 80px;
         text-align: center;
      }

      .long {
         font-size: 12px;
         min-width: 80px;
         max-width: 80px;
         text-align: left;
      }

      input {
         font-size: 16px;
         max-width: 30px;
         border-radius: 5px;
         padding-top: 0;
         text-align: center;
      }

      .ability-score {
         font-size: 20px;
         text-align: center;
         padding-right: 5px;
      }

      .ability-mod {
         max-width: 30px;
         font-size: 14px;
      }
   }
}
