.dsa41.sheet.actor.character {

  .head-data {

    .sidebar-element {

      height: 24px;
      width: 100%;
      margin-top: 4px;

      &.rollable {

        label {
          display: inline-block;
          line-height: 24px;
          vertical-align: middle;
        }

        .formula {
          display: inline-block;
          line-height: 24px;
          vertical-align: middle;
        }

        .die {

        }


        &:hover {
          .formula {
            text-shadow: 0 0 10px rgb(255 0 0);
          }
        }
      }

      &.resource-bar {

        position: relative;
        border: 1px inset #ccc;
        background-color: rgba(0, 0, 0, 0.2);

        label {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 48px;
          background-color: rgba(0, 0, 0, 0.1);
          z-index: 3;
          line-height: 24px;
          vertical-align: middle;
          text-indent: 8px;
          color: white;
          text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
        }

        span.resource-fill {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          background: url('/systems/DSA_4-1/assets/gradient.png');
          background-size: 32px 100%;

          &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }

          &.lep::after {
            background-color: rgba(0, 192, 96, 0.5);
          }

          &.aup::after {
            background-color: rgba(192, 166, 0, 0.5);
          }

          &.asp::after {
            background-color: rgba(0, 26, 192, 0.5);
          }

          &.kap::after {
            background-color: rgba(128, 0, 192, 0.5);
          }
        }


      }

    }

  }

}