/* ~~~Latest Topics CSS~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~ */

.posterAvatar{
   width:50px;
   height:50px;
   border: 0px solid #295822;
   float: left;
   margin-top:-68px;
   margin-left:6px;
   position:relative;
   z-index:0;
}

.posterAvatar img {
   width: 50px;
   height: 50px;
   object-fit: cover;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: #050505;
}

.postGroup {
   font-size:12px;
   color:#98FB98;
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   border: 0px solid #FFFF00;
   text-align: left;
   margin-left:-5px;
   margin-top:-74px;
   padding-right: 50px;
   line-height: 20px;
}

.arrows{
   font-size:15px;
   color:#FFFFFF;
   padding-left: 72px;
}

.postTitle{
   font-size:14px;
   color:#09E002;
}

a.postTitle:link,
a.postTitle:visited,
a.postTitle:hover,
a.postTitle:active {
   color: #09E002;
   text-decoration: none;
}

a.postTitle:hover{
   text-decoration: none;
   cursor: default;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Latest Topics Post */
.postText {
   font-size:14px;
   color:#98FB98;
   line-height: 20px;
}

.postText img.smilies,
.postText img.emoji {
   max-width: 24px;
   max-height: 20px;
   width: auto;
   height: auto;
   object-fit: contain;
   vertical-align: text-bottom;
}



.postAuthor {
   color:#C4C4C4;
   font-size:11px;
}

.postTime {
   font-size:11px;
   color:#C4C4C4;
}

/* Latest Topics Post */
.buttonBackground a:link,
.buttonBackground a:visited,
.buttonBackground a:hover,
.buttonBackground a:active {
   text-decoration: none;
}

.postGroup a:link,
.postGroup a:visited,
.postGroup a:hover,
.postGroup a:active {
   text-decoration: none;
}

.postGroup a .postText {
   color: #98FB98;
}

.postlink {
   color: #ff0000;
}

.button {
   background: rgba(0, 0, 0, 0.01);
   height: 74px;
   width:101%;
   border: none;
   color: white;
   padding: 15px 32px;
   margin-left: -5px;
   text-align: left;
   text-decoration: none;
   display: inline-block;
   position:relative;
   z-index:0;
   border: 0px solid #FF0000;
}

a.button:hover{
   background: rgba(0, 0, 0, 0.2);
   border: solid;
   border-width: 3px;
   border-color: #1A1A1A;
   border-style: double;
}

.buttonUnread {
   background: rgba(0, 0, 0, 0.01);
   height: 74px;
   width:101%;
   border: none;
   color: white;
   padding: 15px 32px;
   margin-left: -5px;
   text-align: left;
   text-decoration: none;
   display: inline-block;
   position:relative;
   z-index:0;
}

a.buttonUnread:hover{
   text-decoration: none;
   background: rgba(0, 0, 0, 0.2);
   border: solid;
   border-width: 3px;
   border-color: #1A1A1A;
   border-style: double;
}

.buttonBackground {
   background: rgba(0, 0, 0, 0.52);
   height: 74px;
   width:100%;
   text-align: left;
   padding-left: 4px;
   text-decoration: none;
   display: inline-block;
   position: relative;
   z-index:0;
   border-left: 1px solid rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ~~~Latest Updates CSS~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~ */

.latest-updates-background {
   background: rgba(0, 0, 0, 0.52);
   height: 20%;
   width:100%;
   padding:20px;
   margin-top:0;
   margin-bottom:14px;
   text-decoration: none;
   display: inline-block;
   z-index:0;
   border-left: 1px solid rgba(255, 255, 255, 0.08);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.latest-updates-background:last-of-type {
   margin-bottom: 0;

}

.latest-updates-panel > .latest-updates-background:not(:first-of-type) {
   display: none;
}

.latest-updates-panel.latest-updates-panel--expanded > .latest-updates-background:not(:first-of-type) {
   display: inline-block;
}

.latest-updates-toggle {
   width: 100%;
   padding: 10px 14px;
   color: #fff;
   background: rgba(0, 0, 0, 0.52);
   border: 1px solid rgba(255, 255, 255, 0.08);
   cursor: pointer;
}

.latest-updates-toggle:hover,
.latest-updates-toggle:focus-visible {
   background: rgba(0, 0, 0, 0.7);
}


.buttonBackgroundUnread {
   border-left: 3px solid #18ff0a;
   animation: unread-indicator-breathe 2.4s ease-in-out infinite;
}

@keyframes unread-indicator-breathe {
   0%, 100% {
      border-left-color: rgba(24, 255, 10, 0.35);
      box-shadow: -2px 0 4px rgba(24, 255, 10, 0.08);
   }

   50% {
      border-left-color: rgba(24, 255, 10, 1);
      box-shadow: -3px 0 8px rgba(24, 255, 10, 0.55);
   }
}

@media (prefers-reduced-motion: reduce) {
   .buttonBackgroundUnread {
      animation: none;
   }
}

.latest-topics-pagination {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 6px;
   margin-top: 4px;
}

.latest-topics-page {
   min-width: 38px;
   padding: 8px 10px;
   color: #fff;
   line-height: 1;
   text-align: center;
   text-decoration: none;
   background: rgba(0, 0, 0, 0.52);
   border: 1px solid rgba(255, 255, 255, 0.08);
}

a.latest-topics-page:hover,
a.latest-topics-page:focus-visible {
   color: #98fb98;
   text-decoration: none;
   border-color: rgba(152, 251, 152, 0.55);
}

.latest-topics-page--current {
   color: #111;
   font-weight: bold;
   background: #98fb98;
   border-color: #98fb98;
}

.latest-topics-ellipsis {
   padding: 0 2px;
}