.chat-message {
   padding: 3px 4px 3px 4px;

   h1, h2, h3, h4, h5, h6 {
      /*font-weight: bold;*/
      margin: 1rem 0 0.5rem;
   }

   .message-content {
      padding: 1px 5px 4px 5px;

      img {
         border: none;
      }

      button {
         margin: 0.4rem 0.1rem;
         width: 98%
      }

      .content-link, .inline-roll {
         color: $lightColor2
      }

      .digest {
         margin-bottom: 6px;
      }

      .apply-damage, .apply-heal {
         margin-top: 4px;
      }

      .damage-roll, .saving-Roll, .heal-roll {
         font-size: 15px;
      }

      .small-text {
         margin-left: 4px;
         font-size: 10px;
         color: #808080;
         line-height: 12px;
      }

      .attack-fail, .roll-fail {
         font-size: 20px;
      }

      .item-name {
         font-size: 18px;
         font-weight: 600;
      }

      .attack-success, .roll-success {
         font-size: 18px;
      }

      .damage {
         font-size: 18px;
         font-weight: bold;
      }

      .attack-desc {
         margin-top: 4px;
      }

      .attack-result {
         margin: 2px 0 6px 0;
         font-size: 18px;
      }

      .attack-info {
         font-size: 18px;
      }

      .roll-info {
         font-size: 16px;
      }

      .warning {
         font-size: 16px;
      }

      .collapser {
         cursor: pointer;
      }

      .item-image {
         float: left;
         flex: 0 0 28px;
         height: 28px;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         border: none;
         margin-right: 5px;
         position: relative;
         top: -3px;
      }

      .expander {
         width: 30px; /* Set a fixed width to control the space for the symbol */
         height: 30px; /* Adjust height as needed */
         cursor: pointer; /* Optional: to make it appear clickable */
      }

      .expander::after {
         font-size: 28px; /* Keep the size as you intended */
         content: '>';
         transform: translateY(-50%); /* Vertically center the symbol */
         transition: transform 0.3s ease; /* Smooth transition for rotation */
      }

      .expander.expanded::after {
         transform: translateY(-50%) rotate(90deg); /* Rotate downwards when expanded */
      }

      .card-tray {
         margin: 8px 0 4px 0;

         label {
            cursor: pointer;
            display: flex;
            justify-content: center;
            gap: .25rem;
            font-size: 11px;

            > span {
               flex: none;
            }

            &::before, &::after {
               content: "";
               flex-basis: 50%;
               border-top: 1px dotted #808060;
               align-self: center;
            }
         }
      }

      .apply-condition, .remove-condition {
         background: url('../assets/img/grungeyellow2.jpg');
         color: $lighterColor;
         box-shadow: none;
         border: 1px solid #605050;

         &:hover {
            background: rgb(170, 86, 10);
         }
      }

      .heal-roll, .apply-heal {
         background: url('../assets/img/grungegreen.jpg');
         color: $lighterColor;
         box-shadow: none;
         border: 1px solid #447744;

         &:hover {
            background: rgb(26, 180, 20);
         }
      }

      .attack-roll, .damage-roll, .apply-damage {
         background: url('../assets/img/grungered.jpg');
         color: $lighterColor;
         box-shadow: none;
         border: 1px solid #774444;

         &:hover {
            background: rgb(180, 26, 20);
         }
      }

      .saving-roll {
         background: url('../assets/img/grungeblue.jpg');
         border: 1px solid $darkColor;
         box-shadow: none;
         color: $lighterColor;

         &:hover {
            background: rgb(10, 86, 170);
         }
      }

      .spell-cast {
         background: url('../assets/img/grungepurple.jpg');
         border: 1px solid $darkColor;
         box-shadow: none;
         color: $lighterColor;

         &:hover {
            background: rgb(86, 10, 170);
         }
      }

      .action-roll {
         background: url('../assets/img/grungeyellow2.jpg');
         border: 1px solid $darkColor;
         box-shadow: none;
         color: $lighterColor;

         &:hover {
            background: rgb(170, 86, 10);
         }
      }
   }
}
