:root {
  --accent-primary: #b53030;
  --accent-secondary: #D85050;
  --accent-ternary: #FFB2B2;
  --accent-light: #FBD9D7;
  --content-primary: #0D1B2A;
  --content-secondary: #465872;
  --background-0: #FFFFFF;
  --background-0-forced: #FFFFFF;
  --background-0-semitransparent: rgba(255, 255, 255, 0.2);
  --background-0-input: #FFFFFF;
  --background-20: #F3F5F7;
  --background-40: #EBEDEF;
  --background-60: #C2C8CE;
  --background-80: #788492;
  --background-100: #383E45;
  --status-online: #32A852;

  --font-xxs: 10px;
  --font-xs: 11px;
  --font-s: 12px;
  --font-m: 13px;
  --font-l: 14px;
  --font-xl: 16px;

  --bottom-navigation-height: 65px;
  --top-navigation-height: 60px;
  --max-desktop-width: 1150px;

  --owner-color: #FF0000;
  --admin-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 14v-1.333A2.667 2.667 0 0 1 6.667 10H8m6.667.667c0 2.666-1.667 4-2.334 4-.666 0-2.333-1.334-2.333-4 .667 0 1.667-.334 2.333-1 .667.666 1.667 1 2.334 1Zm-9.334-6a2.667 2.667 0 1 0 5.334 0 2.667 2.667 0 0 0-5.334 0Z"/></svg>');
  --admin-color: #FF0000;
  --mod-color: #00AA00;
}

:root.theme-dark {
  --accent-primary: #cf4f4f;
  --accent-secondary: #dd6b6b;
  --accent-ternary: #e27b7b;
  --accent-light: #612f2c;
  --content-primary: #e0e4e9;
  --content-secondary: #bcc6d0;
  --background-0: rgb(30, 30, 30);
  --background-0-forced: #FFFFFF;
  --background-0-semitransparent: rgba(30, 30, 30, 0.2);
  --background-0-input: #272424;
  --background-20: #2b2b2b;
  --background-40: #333333;
  --background-60: #555555;
  --background-80: #777777;
  --background-100: #aaaaaa;
}

:root.theme-no-blue-light {
  --accent-primary: #b53030;
  --accent-secondary: #D85050;
  --accent-ternary: #FFB2B2;
  --accent-light: #E9B8B5;
  --content-primary: #3A1F1F;
  --content-secondary: #7A4B4B;
  --background-0: rgb(255, 244, 229);
  --background-0-forced: #FFFFFF;
  --background-0-semitransparent: rgba(255, 244, 229, 0.2);
  --background-0-input: #fff7f7;
  --background-20: #FBEAD9;
  --background-40: #F3D9C8;
  --background-60: #E3BBA8;
  --background-80: #B8957D;
  --background-100: #735A50;
}

:root.font-size-extra-small {
  --font-xxs: 9px;
  --font-xs: 10px;
  --font-s: 11px;
  --font-m: 12px;
  --font-l: 13px;
  --font-xl: 15px;
}

:root.font-size-medium {
  --font-xxs: 11px;
  --font-xs: 12px;
  --font-s: 13px;
  --font-m: 14px;
  --font-l: 15px;
  --font-xl: 18px;
}

:root.font-size-large {
  --font-xxs: 12px;
  --font-xs: 13px;
  --font-s: 14px;
  --font-m: 15px;
  --font-l: 16px;
  --font-xl: 20px;
}

*:focus {
  outline: none !important;
  box-shadow: 0 0 2px 3px rgba(181, 48, 48, 0.3) !important;
}

@keyframes fadeOutShadow {
  0% {
    box-shadow: 0 0 2px 3px rgba(181, 48, 48, 0.3);
  }
  100% {
    box-shadow: 0 0 2px 3px rgba(181, 48, 48, 0);
  }
}
.highlight {
  animation: fadeOutShadow 8s ease-out forwards;
}

a { color: var(--accent-primary); }
a:hover { color: var(--accent-secondary) }

h3 {
  font-weight: bold;
  font-size: var(--font-s);
  color: var(--accent-secondary);
  margin: 0;
  border: none;
}

main h4 {
  font-size: var(--font-s);
  font-weight: bold;
  color: var(--accent-primary);
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 32px;
}

main .sfpo h4 {
  display: block;
}


main h4:not(:first-child) {
  padding-top: 10px;
}

main h4::before,
main h4::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--accent-light);
}

main h4::before {
  margin-right: 16px;
}

main h4::after {
  margin-left: 16px;
}

.radio-container input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.radio-container label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  font-size: var(--font-s);
  color: var(--content-secondary)
}

.radio-container label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  background-color: transparent;
}

.radio-container input[type="radio"]:checked+label::after {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(50%);
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--accent-primary);
  border-radius: 50%;
}

.radio-container label:hover::before {
  border-color: var(--accent-secondary)
}

.radio-container input[type="radio"]:focus+label::before {
  box-shadow: 0 0 2px 3px rgba(181, 48, 48, 0.3)
}

#blur {
  background-color: var(--background-0-semitransparent);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  backdrop-filter: blur(2px);
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease;
}

header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 40;
  position: fixed;
  top: 0;
  background: var(--background-0);
  height: var(--top-navigation-height);
  border-bottom: solid 1px var(--background-40);
  box-sizing: border-box
}

.breadcrumbs-fixed header {
  border-bottom: none;
}

.header-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 10px 6px 10px;
  box-sizing: border-box;
  max-width: var(--max-desktop-width);
}

.mode-pwa {
  --top-navigation-height: 42px;
}

@media (min-width: 720.02px) {
  .header-wrapper {
    padding: 10px 10px 6px 10px;
  }
  :root {
    --top-navigation-height: 82px;
  }
  .mode-pwa {
    --top-navigation-height: 82px;
  }
}



.mode-pwa .header-wrapper {
  padding: 6px 10px;
}

.header-wrapper>button:first-of-type {
  display: none;
}

.mode-pwa .header-wrapper>button:first-of-type {
  display: flex;
}

#logo:focus {
  box-shadow: none !important;
}

#logo>img {
  width: 100px;
}

@media (min-width: 720.02px) {
  #logo>img {
    width: 200px;
  }
}

.header-navigation-right {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

@media (min-width: 720.02px) {
  .header-navigation-right {
    gap: 16px;
  }
}

@media (max-width: 375px) {
  .header-navigation-right {
    gap: 6px;
  }
}


.notification-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--accent-ternary);
  color: var(--accent-primary);
  font-size: var(--font-xxs);
  font-weight: bold;
  border-radius: 100px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 3px;
}

.wanda-dropdown {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  max-height: 60vh;
  position: fixed;
  background: var(--background-0);
  border: solid 1px var(--accent-primary);
  border-radius: 6px;
  box-shadow: 0px 0px 4px 0px var(--accent-primary);
}

#wanda-notifications {
  width: calc(100% - 30px);
  max-width: 400px;
  height: auto;
  max-height: 60vh;
  top: calc(0.5*var(--top-navigation-height) + 32px);
  right: max(20px, calc((100% - var(--max-desktop-width)) / 2 + 20px));
  background: var(--background-20);
}

.mode-pwa #wanda-notifications {
  bottom: calc(var(--bottom-navigation-height) + 16px);
  left: 50%;
  width: calc(100% - 16px);
  transform: translate(-50%, 0);
  right: unset;
  top: unset;
}

  #wanda-notifications.hidden {
    display: none;
  }

  .wanda-dropdown:after {
    content: '';
    position: absolute;
    width: 18px;
    height: 12px;
    background: var(--accent-primary);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    top: -12px;
    right: 80px;
    transform: rotate(180deg);
  }

  @media (min-width: 720.02px) {
    #wanda-notifications:after {
      right: 91px;
    } 
  }

  @media (max-width: 375px) {
    #wanda-notifications:after {
      right: 72px;
    } 
  }

  .mode-pwa #wanda-notifications:after {
    top: calc(100% + 1px);
    right: calc(50% - 10px);
    transform: none;
  }

  #wanda-notifications .wanda-notifications-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 6px 6px;
    box-sizing: border-box;
  }


  #wanda-notifications .wanda-notification-content {
    overflow: scroll;
    scrollbar-width: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--background-0);
  }

  #wanda-notifications .wanda-notification-content::-webkit-scrollbar {
    display: none;
  }

  #wanda-notifications .notification {
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 16px;
    border-bottom: solid 1px var(--background-20);
  }

  #wanda-notifications .notification .notification-image {
    display: flex;
    width: 44px;
    height: 44px;
  }

  #wanda-notifications .notification .notification-image .loading-content{
    width: 44px;
    height: 44px;
  }

  #wanda-notifications .notification .notification-image > img {
    border-radius: 100px;
    width: 44px !important;
    height: 44px !important;
  }

  #wanda-notifications .notification .notification-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-grow: 1;
  }

  #wanda-notifications .notification .notification-text {
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    color: var(--content-primary);
    font-size: var(--font-s);
  }

  #wanda-notifications .notification.unread .notification-text {
    color: var(--accent-primary);
  }

  #wanda-notifications .notification .notification-text p {
    margin: 0;
    font-size: var(--font-s);
  }

  #wanda-notifications .notification .notification-time {
    display: flex;
    width: 80px;
    flex: 0 0 80px;
    color: var(--content-secondary);
    font-size: var(--font-xxs);
    text-align: right;
    justify-content: flex-end;
  }

  #wanda-notifications .wanda-notifications-footer {
    display: flex;
    padding: 10px;
    justify-content: center;
  }

header button .avatar {
  width: 28px;
  height: 28px;
  border-radius: 1000;
}

#user-profile-dropdown {
  right: max(6px, calc((100% - var(--max-desktop-width)) / 2 + 6px));
  top: calc(0.5*(var(--top-navigation-height) + 70px));
}

#user-profile-dropdown:after {
  right: 10px;
}

#wanda-header {
  display:none;
}


.mode-pwa #wanda-header {
  width: calc(100% - 50px);
  margin: 0 -15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  display:flex;
}

.mode-pwa #page-header .headerbar {
  display: none;
}

#breadcrumbs {
  margin-top: calc(var(--top-navigation-height));
  background-color: var(--background-0);
  width: 100%;
  display: flex;
  justify-content: center;
}

.breadcrumbs-fixed #breadcrumbs {
  position: fixed;
  z-index: 30;
  border-bottom: solid 1px var(--background-40);
}

.breadcrumbs-hidden #breadcrumbs {
  display: none;
}

.navigation-wrapper {
  display: flex;
  flex-direction: row;
  color: var(--accent-secondary);
  align-items: center;
  width: 100%;
  max-width: var(--max-desktop-width);
  padding: 10px 10px;
  justify-content: space-between;
}

.breadcrumbs-wrapper > svg:last-child {
  display: none;
}

#breadcrumbs .button-small {
  overflow: hidden;
  justify-content: flex-start;
}

.breadcrumbs-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.mod-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
}

#bottom-navigation {
  display: none;
}

.mode-pwa #bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  background: var(--accent-primary);
  width: 100%;
  padding: 4px calc(0.5*(100vw - var(--max-desktop-width)));
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  align-items: flex-start;
  z-index: 40;
  font-size: var(--font-xs);
  height: var(--bottom-navigation-height);
  box-sizing: border-box;
}

@supports (-webkit-touch-callout: none) {
  :root {
    --bottom-navigation-height: 80px;
  }
}

.mode-pwa .bottom-navigation-item {
  color: var(--background-0);
  min-width: 72px;
  position: relative;
  padding: 8px 0;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mode-pwa .bottom-navigation-item:focus {
  box-shadow: none !important;
}

.mode-pwa .bottom-navigation-item.active {
  background-color: var(--accent-secondary);
}

.mode-pwa .bottom-navigation-item.notification-bell-icon {
  color: var(--accent-primary);
  background-color: var(--background-0);
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  position: relative;
  border-radius: 100px;
  margin: 6px 6px;
}

.mode-pwa .bottom-navigation-item.notification-bell-icon.active {
  box-shadow: 0 0 10px 0 var(--background-0);
}

.mode-pwa .bottom-navigation-item.notification-bell-icon > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mode-pwa .bottom-navigation-item:not(.notification-bell-icon) {
  font-weight: bold;
}


.mode-pwa .notification-counter {
  top: 0;
  right: 14px;
}

.mode-pwa .bottom-navigation-item.notification-bell-icon .notification-counter {
  top: -7px;
  right: -6px;
}

.mode-pwa.theme-dark .notification-counter {
  background-color: var(--background-20);
  color: var(--accent-ternary);
}

#wanda-bottom-navigation > div{
    padding: 6px 3px;
    width: 56px;
  }

#wanda-bottom-navigation a {
    color: var(--background-0-forced);
  }

.wanda-notifications-badge {
  border-radius: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: -49px;
  left: 21px;
  width: 20px;
  height: 10px;
  padding: 5px 0;
  background-color: var(--accent-ternary);
  color: var(--accent-primary);
}

.wanda-notifications-badge.messages {
  top: -40px;
  left: 15px;
}

.wanda-notifications-badge.hidden {
display: none;
}



  .flex-center {
    display: flex;
    justify-content: space-between;  
    align-items: center;
  }

  .noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  }
  #wanda-bottom-navigation {
    display: none;
  }


  @media (max-width: 700px) {
    #nav-main svg{
      width: 20px;
      height: 20px;
      stroke-width: 1.5px;
    }
  }


.forums .row .row-item {
  background-image: none !important;
}

.forums .row .row-item.forum_unread::after {
  background: var(--accent-secondary);
  content: '';
  display: inline-block;
  position: absolute;
  left: 33px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 100px;
}

.subforum.unread::before {
  background: var(--accent-secondary);
  content: '';
  display: inline-block;
  position: absolute;
  left: 33px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 100px;
}


.forums dl.row-item dt .list-inner {
  padding-left: 10px;
}

.forum-image {
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}

.forum-image img{
width: 32px;
height: 32px;
}

.topic_unread_hot .row-item-link::after,.topic_unread_hot_mine .row-item-link::after,.topic_unread .row-item-link::after {
  background: var(--accent-secondary);
  content: '';
  display: inline-block;
  position: absolute;
  left: 22px;
  top: -1px;
  width: 12px;
  height: 12px;
  border-radius: 100px;
}

.unread .fa-file {
  display: none;
}

.wanda-link {
    color: var(--accent-primary);
    text-transform: uppercase;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
}

.wanda-link:hover {
  text-decoration: none;
  color: var(--accent-primary);
}

.wanda-button {
  border-radius: 3px;
  border: 1px solid var(--background-60);
  padding: 6px 16px;
  background-color: var(--background-0);
}

.wanda-button:focus {
  outline: solid 1px var(--accent-secondary);
}

.button-loader {
  padding-top: 0px;
  padding-bottom: 0px;
  height: 31px;
  min-width: 80px;
}


.button-expandable {
  padding: 10px 0;
  border: 1px solid var(--background-40);
  background-color: var(--background-0);
  color: var(--accent-primary);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border-radius: 4px;
}

.button-expandable .inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-expandable .inner-container .label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.button-expandable .inner-container .label span {
  font-size: var(--font-l);
  font-weight: bold;
  text-transform: uppercase;
}

.button-expandable .inner-container .expand-icon {
  padding: 0 10px;
}

.button-expandable.expanded .expand-icon {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.button-expandable .forum-list {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  flex-direction: column;
  gap: 16px; 
  padding: 0 24px;
}

.button-expandable.expanded .forum-list {
  max-height: 500px;
  opacity: 1;
  padding: 24px 24px;
}

.button-tab {
  font-size: var(--font-l);
  color: var(--background-80);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 1.5px 0 0 var(--background-40);
}

.button-tab:hover {
  box-shadow: 0 1.5px 0 0 var(--accent-primary);
  color: var(--content-secondary);
}

.button-tab.active {
  color: var(--accent-primary);
  box-shadow: 0 1.5px 0 0 var(--accent-primary);
}

.tab-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.forum-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forum-list .forum {
  font-size: var(--font-l);
  font-weight: bold;
  text-decoration: none;
}

.forum-list .subforum {
  font-size: var(--font-l);
  font-weight: normal;
  margin-left: 26px;
  text-decoration: none;
}

.forum-list span {
  display: inline-block;
}

.post-buttons .button {
  display: flex;
  align-items: center;
  height: 20px;
  min-width: 20px;
  gap: 4px;
  justify-content: space-around;
  color: var(--accent-primary);
  border-color: var(--background-40);
}

.post-buttons .button .icon {
  color: var(--background-100);
}

@media (min-width: 700px) {
.author {
    min-height: 24px;
}
}

.post-buttons .button:focus, .post-buttons .button .icon:focus {
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

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

.center {
    display: flex;
    align-content: center;
    justify-content: center;
}

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

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

.hidden {
  display: none !important;
}

.gap6 {
  gap: 6px !important;
}

.gap10 {
  gap: 10px !important;
}

.gap16 {
  gap: 16px !important;
}

.gap20 {
  gap: 20px !important;
}

.vp6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.vp10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.vp16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

#scrollToTopButton {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--accent-light);
  color: var(--accent-secondary);
  cursor: pointer;
  border-radius: 100px;
  width: 48px;
  height: 48px;
  padding: 0;
}

.mode-pwa #scrollToTopButton {
  bottom: calc(var(--bottom-navigation-height) + 10px);
}

#scrollToTopButton:hover {
  color: var(--accent-primary);
}

.overlay {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  display: flex;
}

.modal {
  z-index: 200;
  position: fixed;
  top: 20vh;
  left: calc(10vw - 20px);
  background-color: var(--background-0);
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 80vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeIn 0.5s forwards;
}

.modal-ajax-restyle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background-0);
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: calc(100vw - 39px);
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  z-index: 99;
  animation: fadeIn 0.5s forwards;
  border-radius: 4px;
  max-width: 500px;
  margin: 0;
  border: none;
}

@media (max-width: 720px)  {
  .modal-ajax-restyle {
    border-radius: 0px;
    max-width: 720px;
  }
}

.modal-ajax-restyle .alert_close {
    float: right;
    margin-right: -4px;
    margin-top: -16px;
    font-size: 24px;
    color: var(--background-100)

}

.modal-ajax-restyle .alert_close:hover {
  color: var(--accent-primary);
  text-decoration: none;
}

.modal-ajax-restyle h3 {
  color: var(--accent-primary);
  text-transform: none;
  font-size: 16px;
}

.modal-ajax-restyle fieldset {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 24px;
}

.modal-button-container {
  width: 100%;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 16px;
}

@media (min-width: 900px)  {
  .modal {
    left: calc(50vw - 370px);
    width: 700px;
  }
}

.close-button {
    width: 100%;
    text-align: right;
    color: var(--content-secondary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    }
  
.close-button:hover,
.close-button:focus {
    color: #b53030;
    text-decoration: none;
    cursor: pointer;
    }
  

.modal>h2 {
  width: 100%;
  color: var(--accent-primary);
  text-align: center;
  margin: 0;
}

.modal>p {
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  width: 100%;
}

.modal .button-container {
    display: flex;
      justify-content: flex-end;
      flex-direction: row;
      width: 100%;
      gap: 8px;
      text-align: right;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(-50%, -50px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
  
  
  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-50px);
    }
  }

.file-upload-area {
  flex-direction: column !important;
}

.file-upload-wrapper {
  border: 1px solid var(--accent-primary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--background-20);
  max-width: 100%;

}

/* File input field styles */
.file-upload-wrapper input[type="file"] {
  width: 0;
  height: 100%;
  opacity: 0; /* Hide the default input */
  cursor: pointer;
  padding: 0;
}

/* Change text when a file is selected */
.file-upload-wrapper input[type="file"]:valid + .file-upload-text {
  display: block;
}

.file-upload-wrapper input[type="file"]:valid::before {
  content: 'File selected';
}

/* Additional styles */
.file-upload-wrapper:hover {
  background-color: var(--background-40);
}

.file-upload-wrapper:active {
  background-color: var(--background-60);
}

/* File upload label styles */
.file-upload-label {
  width: 100%;
  padding: 10px;
  text-align: center;
  color: var(--content-primary);
  cursor: pointer;
}

/* Highlighting during drag over */
.file-upload-wrapper.dragover {
  background-color: var(--background-40);
}

#image_preview {
  display: none; /* Initially hidden */
  width: 100%; /* Full width of its container */
  height: 0; /* Initial height set to 0 */
  padding-top: calc(80vh - 160px); /* Top padding equal to width, creates square aspect ratio */
  position: relative; /* Required for the aspect ratio trick */
  margin-top: 20px; /* Spacing above the preview */
  background: var(--background-20); /* Background color */
  overflow: hidden; /* Ensures the content fits in the box */
}

/* Style for the actual image inside the preview */
#image_preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Image stretches to fill the container */
  height: 100%; /* Image stretches to fill the container */
  object-fit: contain; /* Ensures the image covers the area, might crop */
}
/* Additional styles when the image is displayed */
#image_preview.displayed {
  display: block; /* Show the image */
}

/* Spinning animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinning {
  animation: spin 2s linear infinite;
}

.content.image_preview {
  display: inline-block;
  padding: 10px;
  border-radius: 4px;
  box-shadow: #0000001a 2px 2px 4px 2px;
  margin: 10px;
  max-width: 500px;
  max-height: 80vh;
  overflow: overlay;
}

fieldset .content.image_preview {
  display: none;
}

.content.image_preview img {
  max-width: 100%;
}

.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#shoutbox-icon {
  cursor: pointer;
  position: fixed;
  bottom: 80px;
  left: 10px;
  background-color: var(--accent-primary);
  color: var(--background-0);
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

#shoutbox-wrapper {
  position: fixed;
  top: 60px;
  left: 5vw;
  width: 90vw;
  height: 70vh;
}

.validation-error {
  color: var(--accent-primary);
  font-size: 12px;
  margin-top: 0.25rem;
  display: block;
}

.input-error {
  border-color: var(--accent-primary);
}

.old-views-wrapper {
  width: 100%;
  max-width: var(--max-desktop-width);
  margin: 0 auto;
  padding: 24px 5px;
  box-sizing: border-box;
}

.breadcrumbs-fixed .old-views-wrapper {
  padding: calc(var(--top-navigation-height) + 66px) 5px 24px 5px;
}

.breadcrumbs-hidden .old-views-wrapper {
  padding: calc(var(--top-navigation-height) + 24px) 5px 24px 5px;
}

main {
  padding: 0px 5px;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-20);
  width: 100%;
  max-width: var(--max-desktop-width);
  box-sizing: border-box;
  margin: 0 auto;
  gap: 24px;
}

main hr {
  width: 80%;
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--background-40);
}

.breadcrumbs-fixed main.home {
  margin-top: -42px;
}

a:has(> button):hover {
  text-decoration: none !important;
}

.info-box {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  font-size: var(--font-s);
  padding: 6px 10px;
  text-align: left;
}

.info-box.info {
  background-color: var(--background-20);
  box-shadow: 0px 0px 4px 0px var(--accent-secondary);
}

button {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 16px;
  font-weight: bold;
  font-size: var(--font-s);
  text-transform: uppercase;
  line-height: 1;
  height: 30px;
  border-radius: 3px;
  white-space: nowrap;
  width: fit-content;
  text-decoration: none !important;
}

.link-button {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 16px;
  font-weight: bold;
  font-size: var(--font-s);
  text-transform: uppercase;
  line-height: 1;
  height: 30px;
  border-radius: 3px;
  white-space: nowrap;
  width: fit-content;
  text-decoration: none !important;
}

button svg, .link-button svg {
  flex-shrink: 0;
}

.button-primary {
  background-color: var(--accent-primary);
  color: var(--background-0);
  cursor: pointer;
  border: none;
}

button.icon-left {
  padding-left: 10px;
}

button.icon-right {
  padding-right: 10px;
}

button.nav-icon-button {
  color: var(--accent-primary);
  padding: 0;
  width: 32px;
  height: 32px;
}

button.button-circle {
  border-radius: 1000px;
}

.button-small {
  padding: 5px 6px;
  gap: 6px;
  height: 22px;
  min-width: 22px;
}

.view-compact .button-small {
  font-size: var(--font-xs);
  padding: 5px 4px;
  height: 20px;
  min-width: 20px;
}

.button-small.icon-left,
.button-small.icon-right {
  padding-left: 6px;
  padding-right: 6px;
}

button.icon-button {
  padding-left: 7px;
  padding-right: 7px;
  min-width: initial;
}

button.icon-only-mobile {
  padding-left: 7px;
  padding-right: 7px;
}

.button-primary:hover {
  background-color: var(--accent-secondary);
  border: none;
}

.button-secondary {
  background-color: var(--background-0);
  border: 1px solid var(--background-60);
  color: var(--accent-primary);
}

.button-secondary:hover {
  border-color: var(--accent-primary);
}

.button-ternary {
  background-color: var(--background-40);
  color: var(--accent-secondary);
  border: none;
}

.button-ternary:hover {
  background-color: var(--background-20);
}

.button-ternary.active {
  background-color: var(--accent-light);
}

.button-ternary.active:hover {
  background-color: var(--accent-light);
}

.button-ternary.dangerous {
  background-color: var(--accent-ternary);
  color: var(--background-0);
}

.button-ternary.dangerous:hover {
  background-color: var(--accent-light);
}

.button-ternary.unread {
  padding-right: 10px;
}

.button-ternary.unread::after {
  content: "";
  position: absolute;
  top: 0px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--accent-secondary);
  border-radius: 50%;
}

.button-ghost {
  background-color: transparent;
  color: var(--accent-secondary);
  border: none;
}

.button-ghost:hover {
  background-color: var(--accent-light);
}

.button-input input {
  width: 100%;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  background: var(--background-0);
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mode-pwa .pwa-hidden {
  display: none !important;
}

@media (max-width: 720px) {
  .button-input.icon-only-mobile form {
    display: none;
  }

  .button-input.expanded {
    width: 100%;
  }

  .button-input.icon-only-mobile.expanded form {
    display: inline;
    width: calc(100% - 3px);
  }
  .mobile-hidden {
    display: none !important;
}
}

@media (max-width: 540px) {
  .mobile-xs-hidden {
    display: none !important;
}
}

@media (max-width: 375px) {
  .mobile-xxs-hidden {
    display: none !important;
}
.view-compact .thread-navigation {
  margin-top: 4px !important;
  min-height: 22px;
}
.thread-navigation {
  margin-left: -50px;
}
}

@media (min-width: 720.02px) {
  .desktop-hidden {
      display: none !important;
  }
}

.view-compact .compact-view-hidden {
  display: none;
}

.button-input form {
  display: inline;
  color: var(--content-primary)
}

.spinner-replace {
  width: 100%;
  height: 100%;
}

.top-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.bottom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.topic-name {
  width: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.user-profile .topic-name {
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.top-container .button-input.expanded ~ .topic-name {
  display: none;
}

.topic-name h1 {
  font-weight: bold;
  color: var(--accent-primary);
  font-size: 20px;
  margin: 0;
}

.topic-name span {
  font-size: var(--font-s);
  font-weight: normal;
  color: var(--content-secondary);
}

.actions-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 5px 0;
  flex-grow: 1;
}

.stats {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  font-size: var(--font-s);
  gap: 10px;
  color: var(--content-secondary);
}

.stats span {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.stats strong{
  color: var(--content-primary);
  width: 50%
}

section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 0;
  border: 1px solid var(--background-40);
  background-color: var(--background-0);
  color: var(--accent-primary);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.login-register .form-wrapper {
    padding: 24px;
}

.login-register .form-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.login-register .form-wrapper p {
    font-size: var(--font-s);
    color: var(--content-primary);
    margin-bottom: 16px;
    text-align: center;
    text-wrap: balance;
}

.thread-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--font-l);
}

.thread-row-label {
  font-weight: normal;
  color: var(--content-secondary);
  font-size: var(--font-s);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
  cursor: auto !important;
  text-transform: none;
  min-width: 100px;     
  text-align: center;
}

.thread-row-label .separator {
  color: var(--background-60);
}

.thread-list-header > span:first-of-type {
  margin-right: auto;
}

.thread-list-header > span:last-of-type {
  padding-right: 26px;
}

.thread-row-wrapper {
  padding: 10px;
  position: relative;
}

.view-compact .thread-row-wrapper {
  padding: 4px;
}

.thread-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}

.content-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

@media (max-width: 720px) {
  .content-wrapper {
      flex-direction: column;
  }

  .thread-navigation {
      margin-top: 8px;
  }

  .view-compact .thread-navigation {
    margin-top: -14px;
    min-height: 22px;
}
}

@media (min-width: 720.02px) {
  .thread-row {
      padding: 8px 16px;
  }
}

.thread-row:hover:not(:has(button:hover)) {
  background-color: var(--background-20);
}

.thread-row-wrapper:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 34px);
  height: 1px;
  background-color: var(--background-40);
  margin-left: 17px;
}

.thread-icon, .thread-icon img {
  position: relative;
  width: 32px;
  height: 32px;
  align-self: flex-start;
}

.thread-icon .thread-image{
  width: 24px;
  height: 24px;
  padding: 4px;
}

.thread-icon.unread::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -4px;
  width: 12px;
  height: 12px;
  background-color: var(--accent-secondary);
  border-radius: 50%;
}

.thread-contents {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-grow: 1;
}


.thread-contents h2 {
  font-size: var(--font-l);
  font-weight: bold;
  color: var(--content-primary);
  margin: 0;
}

.view-compact .thread-contents h2 {
  font-size: var(--font-s);
}

.thread-contents h2.unread {
  color: var(--accent-primary);
}

.thread-row h2.sticky::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  left: -2px;
  top: 2px;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_573_2795)"><path d="M10.0754 2.13999L10.138 2.19532L13.8047 5.86199C13.9171 5.97497 13.9853 6.12447 13.9969 6.2834C14.0086 6.44234 13.9629 6.60019 13.8682 6.72835C13.7735 6.85651 13.636 6.9465 13.4807 6.98203C13.3253 7.01755 13.1624 6.99625 13.0214 6.92199L10.9067 9.03599L9.95738 11.5673C9.93237 11.6341 9.89681 11.6965 9.85205 11.752L9.80538 11.8053L8.80538 12.8053C8.6905 12.92 8.53772 12.9888 8.37571 12.9989C8.21369 13.009 8.05357 12.9596 7.92538 12.86L7.86205 12.8047L6.00005 10.9433L3.47138 13.4713C3.35141 13.5909 3.19042 13.6603 3.02112 13.6655C2.85182 13.6706 2.6869 13.6112 2.55986 13.4992C2.43282 13.3871 2.35317 13.231 2.33711 13.0623C2.32105 12.8937 2.36977 12.7253 2.47338 12.5913L2.52871 12.5287L5.05671 9.99999L3.19538 8.13799C3.08059 8.02319 3.01164 7.87046 3.00145 7.70844C2.99126 7.54642 3.04054 7.38625 3.14005 7.25799L3.19538 7.19532L4.19538 6.19532C4.24568 6.14484 4.30375 6.10275 4.36738 6.07065L4.43271 6.04265L6.96338 5.09265L9.07738 2.97932C9.00529 2.84454 8.98171 2.68908 9.01057 2.53899C9.03944 2.38889 9.11901 2.25327 9.23594 2.15485C9.35288 2.05643 9.50009 2.00117 9.65291 1.99834C9.80573 1.99552 9.95488 2.04595 10.0754 2.13999Z" fill="%23B53030"/></g><defs><clipPath id="clip0_573_2795"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}


.details-wrapper {
    font-size: var(--font-l); 
}

.property {
    font-size: var(--font-xs);
    color: var(--content-secondary);
    font-weight: normal;
    margin-right: 3px;
}

.value {
    font-size: var(--font-xs);
    color: var(--content-primary);
    font-weight: bold;
}

.value:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  background-color: var(--background-60);
  margin: 0 8px;
  vertical-align: middle;
}

.thread-row .username-coloured, .thread-row .username  {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

.thread-row .subforums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  align-items: flex-start;
}

.thread-row .subforums button{
  position: relative;
}

.thread-stats {
  display: flex;
  flex-direction: row;
  gap: 16px;
  font-size: var(--font-s);
  color: var(--content-primary);
}

.thread-stats-item {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.thread-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.view-compact .thread-navigation {
  gap: 6px;
}

.thread-navigation > span:first-child {
  font-size: var(--font-xs);
  font-weight: normal;
  color: var(--content-secondary);
}

.separator {
  font-size: var(--font-l);
  font-weight: normal;
  color: var(--background-60);
}

.thread-navigation span {
  font-size: var(--font-l);
  font-weight: normal;
  color: var(--background-60);
  display: inline-flex;
}

.thread-navigation button:nth-child(2),
.thread-navigation button:nth-last-child(5),
.thread-navigation button:nth-last-child(4),
.thread-navigation button:nth-last-child(3),
.thread-navigation button:last-child {
    display: inline-flex;
}

.thread-navigation button {
  display: none;
}


.thread-row.global_read,
.thread-row.global_read_mine,
.thread-row.global_read_locked,
.thread-row.global_read_locked_mine,
.thread-row.global_unread,
.thread-row.global_unread_mine,
.thread-row.global_unread_locked,
.thread-row.global_unread_locked_mine,
.thread-row.announce_read,
.thread-row.announce_read_mine,
.thread-row.announce_read_locked,
.thread-row.announce_read_locked_mine,
.thread-row.announce_unread,
.thread-row.announce_unread_mine,
.thread-row.announce_unread_locked,
.thread-row.announce_unread_locked_mine,
.thread-row.forum_link,
.thread-row.forum_read,
.thread-row.forum_read_locked,
.thread-row.forum_read_subforum,
.thread-row.forum_unread,
.thread-row.forum_unread_locked,
.thread-row.forum_unread_subforum,
.thread-row.sticky_read,
.thread-row.sticky_read_mine,
.thread-row.sticky_read_locked,
.thread-row.sticky_read_locked_mine,
.thread-row.sticky_unread,
.thread-row.sticky_unread_mine,
.thread-row.sticky_unread_locked,
.thread-row.sticky_unread_locked_mine,
.thread-row.topic_moved,
.thread-row.pm_read,
.thread-row.topic_read,
.thread-row.topic_read_mine,
.thread-row.topic_read_hot,
.thread-row.topic_read_hot_mine,
.thread-row.topic_read_locked,
.thread-row.topic_read_locked_mine,
.thread-row.pm_unread,
.thread-row.topic_unread,
.thread-row.topic_unread_mine,
.thread-row.topic_unread_hot,
.thread-row.topic_unread_hot_mine,
.thread-row.topic_unread_locked,
.thread-row.topic_unread_locked_mine {
    background-image: none !important;
}

.thread-row[class*="locked"] .spinner-replace::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='4' width='28' height='24' rx='3' fill='%23F3DDDD'/><path d='M26 17.3334C26.884 17.3334 27.7319 17.6846 28.357 18.3097C28.9821 18.9348 29.3333 19.7827 29.3333 20.6667V22.6667C29.8637 22.6667 30.3724 22.8774 30.7475 23.2525C31.1226 23.6276 31.3333 24.1363 31.3333 24.6667V28.6667C31.3333 29.1971 31.1226 29.7058 30.7475 30.0809C30.3724 30.456 29.8637 30.6667 29.3333 30.6667H22.6666C22.1362 30.6667 21.6275 30.456 21.2524 30.0809C20.8773 29.7058 20.6666 29.1971 20.6666 28.6667V24.6667C20.6666 24.1363 20.8773 23.6276 21.2524 23.2525C21.6275 22.8774 22.1362 22.6667 22.6666 22.6667V20.6667C22.6666 19.7827 23.0178 18.9348 23.6429 18.3097C24.2681 17.6846 25.1159 17.3334 26 17.3334ZM26 25.3334C25.6636 25.3333 25.3396 25.4603 25.0929 25.689C24.8463 25.9178 24.6952 26.2313 24.67 26.5667L24.6666 26.6667C24.6666 26.9304 24.7448 27.1882 24.8913 27.4075C25.0378 27.6267 25.2461 27.7976 25.4897 27.8985C25.7333 27.9995 26.0014 28.0259 26.2601 27.9744C26.5187 27.923 26.7563 27.796 26.9428 27.6095C27.1292 27.423 27.2562 27.1855 27.3077 26.9268C27.3591 26.6682 27.3327 26.4001 27.2318 26.1565C27.1309 25.9128 26.96 25.7046 26.7407 25.5581C26.5215 25.4116 26.2637 25.3334 26 25.3334ZM26 18.6667C25.4695 18.6667 24.9608 18.8774 24.5857 19.2525C24.2107 19.6276 24 20.1363 24 20.6667V22.6667H28V20.6667C28 20.1363 27.7892 19.6276 27.4142 19.2525C27.0391 18.8774 26.5304 18.6667 26 18.6667Z' fill='%23D85050'/><path d='M9 10.5H23.6667' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 16H20.6667' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 21.5H18' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.thread-row[class*="locked"] .spinner-replace > *,
.thread-row[class*="deleted"] .spinner-replace > *,
.thread-row[class*="moved"] .spinner-replace > * {
    display: none;
}

.thread-row[class*="deleted"] .spinner-replace::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='4' width='28' height='24' rx='3' fill='%23EBEDEF'/><path d='M19.6666 20.6666H30.3333' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M23.6666 23.3334V27.3334' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M26.3334 23.3334V27.3334' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M20.3334 20.6666L21 28.6666C21 29.0202 21.1405 29.3594 21.3906 29.6094C21.6406 29.8595 21.9798 30 22.3334 30H27.6667C28.0203 30 28.3595 29.8595 28.6095 29.6094C28.8596 29.3594 29 29.0202 29 28.6666L29.6667 20.6666' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M23 20.6667V18.6667C23 18.4899 23.0702 18.3203 23.1953 18.1953C23.3203 18.0702 23.4899 18 23.6667 18H26.3333C26.5101 18 26.6797 18.0702 26.8047 18.1953C26.9298 18.3203 27 18.4899 27 18.6667V20.6667' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 10.5H23.6667' stroke='%23788492' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 16H19.6667' stroke='%23788492' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 21.5H16' stroke='%23788492' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.thread-row[class*="moved"] .spinner-replace::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='4' width='28' height='24' rx='3' fill='%23F3DDDD'/><path d='M28 25.3333L30.6666 28M30.6666 28L28 30.6666M30.6666 28H23.3333C22.626 28 21.9478 27.719 21.4477 27.2189C20.9476 26.7188 20.6666 26.0405 20.6666 25.3333C20.6666 24.626 20.9476 23.9478 21.4477 23.4477C21.9478 22.9476 22.626 22.6666 23.3333 22.6666H24' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 10.5H23.6667' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 16H23.6667' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 21.5H16' stroke='%23D85050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.pages {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.top-navigation .pages {
  flex-wrap: nowrap;
  max-width: calc(100vw - 60px);
  overflow: scroll;
  scrollbar-width: none;
}

.top-navigation {
  display: flex;
  gap: 10px;
}

.top-navigation .next-page-wrapper-top {
  display: none;
}

@media (min-width: 720.02px) {
  .top-navigation .pages {
    justify-content: flex-start;
  }
}

.top-navigation .button-ternary, .top-navigation .button-ghost {
  padding: 5px 6px;
  gap: 6px;
  height: 22px;
  min-width: 22px;
}

.top-navigation .button-ternary.icon-left {
  padding-left: 3px;
}

.top-navigation .button-ternary.icon-right {
  padding-right: 3px;
}

.next-page-wrapper-bottom {
  display: none;
}

.bottom-navigation .next-page-wrapper-top {
  display: none !important;
}

.bottom-navigation .next-page-wrapper-bottom {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 5px;
  order: -1;
}

.bottom-navigation .pages > :not(.next-page-wrapper-bottom) {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.bottom-navigation .button-ternary, .bottom-navigation .button-ghost {
  padding: 7px 10px;
  gap: 6px;
  min-width: 22px;
}

.bottom-navigation .button-ternary.icon-left {
  padding-left: 6px;
}

.bottom-navigation .button-ternary.icon-right {
  padding-right: 6px;
}

.pages span {
  font-size: var(--font-l);
  font-weight: normal;
  color: var(--background-80);
  display: inline-flex;
}

main textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  padding: 10px;
  font-size: var(--font-m);
  color: var(--content-primary);
  border: none;
  outline: none;
  overflow-y: hidden;
  box-sizing: border-box;
  background: var(--background-0);
}

main textarea:focus {
  box-shadow: none !important;
}

.textarea-wrapper {
  display: flex;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.mod-actions {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 16px;
  gap: 10px;
}

footer {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: var(--background-40);
  padding: 24px 16px 96px 0px;
  gap: 24px;
  font-size: var(--font-s);
  width: 100%;
  box-sizing: border-box;
}

footer .links-container {
  display: flex;
  gap: 24px;
  padding: 10px;
}

footer .column-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

footer h3 {
  color: var(--content-primary);
}

footer .links-container a {
  color: var(--accent-primary);
  text-decoration: none;
  margin-left: 24px;
  text-wrap-style: balance;
}

footer span {
  font-size: var(--font-xxs);
  color: var(--background-80);
}

footer span a {
  color: var(--background-80);
  text-decoration: none;
}

@media (min-width: 720.02px) {
  footer .links-container {
      gap: 128px;
  }
}

footer:focus {
    box-shadow: none !important;
}

.context-menu {
  display: flex;
  flex-direction: column;
  background: var(--background-0);
  box-shadow: 0px 1px 6px rgba(70, 88, 114, 50);
  border-radius: 4px;
  user-select: none;
  z-index: 100;
}

.context-menu h3 {
  display: none;
}

@media (max-width: 720px) {
  .context-menu {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background-color: var(--background-0) !important;
    padding: 20px !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
    width: calc(100vw - 39px) !important;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    border-radius: 0;
  }

  .context-menu h3 {
    display: block;
    color: var(--accent-primary);
    text-transform: none;
    font-size: 16px;
    margin: 0 0 10px 0;
    border: none;
  }
}

.context-menu div {
  display: flex;
  flex-direction: row;
  padding: 10px 16px 10px 10px;
  font-size: var(--font-s);
  font-weight: bold;
  color: var(--content-secondary);
  cursor: pointer;
  align-items: center;
}

.context-menu div:hover {
  background: var(--background-20);
}

.context-menu div:not(:last-child) {
  border-bottom: 1px solid var(--background-40);
}

.context-menu .open-tab::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cg clip-path=%27url(%23clip0_640_3021)%27%3E%3Cpath d=%27M8.00002 4H4.00002C3.6464 4 3.30726 4.14048 3.05721 4.39052C2.80716 4.64057 2.66669 4.97971 2.66669 5.33333V12C2.66669 12.3536 2.80716 12.6928 3.05721 12.9428C3.30726 13.1929 3.6464 13.3333 4.00002 13.3333H10.6667C11.0203 13.3333 11.3594 13.1929 11.6095 12.9428C11.8595 12.6928 12 12.3536 12 12V8%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.33331 8.66675L13.3333 2.66675%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M10 2.66675H13.3333V6.00008%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27clip0_640_3021%27%3E%3Crect width=%2716%27 height=%2716%27 fill=%27white%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  background-size: contain;
}

.context-menu .copy-link::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cg clip-path=%27url(%23clip0_640_3026)%27%3E%3Cpath d=%27M4.66669 6.44475C4.66669 5.97319 4.85401 5.52095 5.18745 5.18751C5.52089 4.85407 5.97313 4.66675 6.44469 4.66675H12.222C12.4555 4.66675 12.6867 4.71274 12.9024 4.80209C13.1181 4.89144 13.3142 5.02241 13.4793 5.18751C13.6444 5.35261 13.7753 5.54862 13.8647 5.76434C13.954 5.98005 14 6.21126 14 6.44475V12.2221C14 12.4556 13.954 12.6868 13.8647 12.9025C13.7753 13.1182 13.6444 13.3142 13.4793 13.4793C13.3142 13.6444 13.1181 13.7754 12.9024 13.8647C12.6867 13.9541 12.4555 14.0001 12.222 14.0001H6.44469C6.2112 14.0001 5.97999 13.9541 5.76428 13.8647C5.54856 13.7754 5.35255 13.6444 5.18745 13.4793C5.02235 13.3142 4.89138 13.1182 4.80203 12.9025C4.71268 12.6868 4.66669 12.4556 4.66669 12.2221V6.44475Z%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M2.67467 11.158C2.47023 11.0415 2.30018 10.873 2.18172 10.6697C2.06325 10.4663 2.00057 10.2353 2 10V3.33333C2 2.6 2.6 2 3.33333 2H10C10.5 2 10.772 2.25667 11 2.66667%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27clip0_640_3026%27%3E%3Crect width=%2716%27 height=%2716%27 fill=%27white%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  background-size: contain;
}

.context-menu .share-link::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cg clip-path=%27url(%23clip0_640_3030)%27%3E%3Cpath d=%27M2 8C2 8.53043 2.21071 9.03914 2.58579 9.41421C2.96086 9.78929 3.46957 10 4 10C4.53043 10 5.03914 9.78929 5.41421 9.41421C5.78929 9.03914 6 8.53043 6 8C6 7.46957 5.78929 6.96086 5.41421 6.58579C5.03914 6.21071 4.53043 6 4 6C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8Z%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M10 4C10 4.53043 10.2107 5.03914 10.5858 5.41421C10.9609 5.78929 11.4696 6 12 6C12.5304 6 13.0391 5.78929 13.4142 5.41421C13.7893 5.03914 14 4.53043 14 4C14 3.46957 13.7893 2.96086 13.4142 2.58579C13.0391 2.21071 12.5304 2 12 2C11.4696 2 10.9609 2.21071 10.5858 2.58579C10.2107 2.96086 10 3.46957 10 4Z%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M5.79999 7.13337L10.2 4.8667%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M5.79999 8.8667L10.2 11.1334%27 stroke=%27%23B53030%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27clip0_640_3030%27%3E%3Crect width=%2716%27 height=%2716%27 fill=%27white%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  background-size: contain;
}

.button-expandable .view-preferences-wrapper {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  flex-direction: column;
  gap: 16px; 
  padding: 0 24px;
}

.button-expandable.expanded .view-preferences-wrapper {
  max-height: 500px;
  opacity: 1;
  padding: 24px 24px;
}

.view-preferences-loader {
  text-align: center;
}

.view-preferences-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.view-preferences-content>div{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.view-preferences-content .preference {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.view-preferences-content .preference span {
  width: 50%;
}

.view-preferences-content .label {
  font-size: var(--font-s);
  color: var(--content-secondary);
}

.view-preferences-content .value {
  position: relative;
}

.view-preferences-content .value::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 12px;
  width: 10px;
  height: 6px;
  background-color: var(--background-100);
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M9 1L5 5L1 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.view-preferences-content select {
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  color: var(--content-primary);
  height: 32px;
  border: solid 1px var(--background-60);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--background-0-input);
}

.bg1, .bg2, .bg3 {
  background-color: var(--background-0);
}

.content {
  color: var(--content-primary);
}

.post {
  border: none;
  border-radius: 3px;
}

.postprofile .avatar img, .postprofile .avatar {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .postprofile .avatar, .postprofile .avatar img {
    width: 32px;
    height: 32px;
    margin-bottom: 0;
  }
}

.postbody {
  color: var(--content-secondary);
}

.postprofile strong {
  color: var(--content-secondary);
}

.postprofile {
  color: var(--background-100);
  border-color: var(--background-40);
}

.reported {
    background-color: var(--accent-light);
}

.button {
  border-color: var(--background-80);
  background-color: var(--background-0);
  color: var(--accent-primary);
}

.dropdown .dropdown-contents {
  background: var(--background-0);
  border-color: var(--background-40);
}

.button:hover, .button:focus {
  background-color: var(--background-20);
}

.dropdown .pointer-inner {
  border-color: var(--background-60) var(--background-40);
}

blockquote {
  background-color: var(--background-20);
  border-color: var(--background-40);
}

blockquote blockquote {
  background-color: var(--background-0);
}

blockquote blockquote blockquote {
  background-color: var(--background-20);
}

.lightnav {
  border-bottom: 1px solid var(--background-40);
}

.headerwrap {
  background: var(--background-0);
}

.navbar-top {
  background-color: var(--background-0);
}

.lightheader {
  border-bottom: none;
}

.badge {
  background-color: var(--accent-secondary);
  color: var(--background-0-forced);
  border-color: var(--background-0);
}

main .postbody .content {
  font-size: var(--font-m);
}

.headerbar .button {
  border-color: var(--background-80);
  background-color: var(--background-0);
  color: var(--accent-primary);
}

.search-header {
  border: 1px solid var(--background-80);
}

.view-compact .post {
  margin-bottom: 6px;
}

.panel {
  background-color: var(--background-0);
  color: var(--content-primary);
  border-color: var(--background-40);
}

dd label {
  color: var(--content-secondary);
}

label {
  color: var(--content-secondary);
}

fieldset dl:hover dt label {
  color: var(--content-secondary);
}

.button:hover, .button:focus {
  border-color: var(--accent-secondary);
  background-color: var(--background-40);
}

div.rules {
  background-color: var(--background-0);
  color: var(--accent-primary);
  border-color: var(--background-40);
}

.dropdown-extended .header {
  background-color: var(--background-40);
}

.dropdown-extended .header, .dropdown-extended .footer {
  border-color: var(--background-60);
  color: var(--content-secondary);
}

.cp-mini {
  background-color: var(--background-0);
  border-color: var(--background-20);
}

dl.mini dt {
  color: var(--content-secondary);
}

.panel-container h2 {
  color: var(--content-primary);
}

.panel-container .panel {
  background-color: var(--background-0);
}

.panel-container .panel li.header dd, .panel-container .panel li.header dt {
  color: var(--content-primary);
}

.tabs .tab > a, .tabs .tab > a:focus {
  background: none;
  color: var(--background-80);
  border: none;
  text-transform: uppercase;
  font-size: var(--font-m);
  font-weight: bold;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: 0 1.5px 0 0 var(--background-40) !important;
  margin-bottom: 6px;
} 

.tabs .tab > a:hover, .tabs .tab > a:hover:focus {
  background: var(--accent-ternary);
  color: var(--accent-primary);
  border: none;
  box-shadow: 0 1.5px 0 0 var(--accent-primary) !important;
}

.tabs .activetab > a, .tabs .activetab > a:focus {
  color: var(--accent-primary);
  border-bottom-color: transparent;
  box-shadow: 0 1.5px 0 0 var(--accent-primary) !important;
  padding-bottom: 5px;
}


.tabs .activetab > a:hover, .tabs .activetab > a:hover:focus {
  color: var(--accent-primary);
  background-color: var(--accent-ternary);
  border-bottom-color: transparent;
  box-shadow: 0 1.5px 0 0 var(--accent-primary) !important;
}



.navigation .active-subsection a {
  background: var(--background-0);
  color: var(--accent-primary);
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
  #navigation a, .rtl #navigation a {
      border: 1px solid var(--background-40);
  }
}

.navigation a {
  color: var(--content-primary);
  background: var(--background-20);
  border-color: var(--background-0);
}

.cp-main .pm {
  background-color: var(--background-20);
}

h2 {
  color: var(--content-secondary);
}

dl.details dt {
  color: var(--content-secondary);
}

dl.details dd {
    color: var(--content-primary);
}

dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info {
  width: 250px;
  font-size: 1.1em;
}

.panel-container h3, .panel-container hr, .cp-menu hr {
  border-color: var(--background-40);
}

table.table1 tbody tr {
  border-color: var(--background-60) var(--background-40);
}

.panel-container table.table1 thead th {
  color: var(--content-primary);
  border-bottom-color: var(--background-40);
}

table.table1 td {
  color: var(--content-secondary);
}

.panel-container .panel li.row {
    border-bottom-color: var(--background-40);
    border-top-color: var(--background-20);
}

li.row:hover {
    background-color: var(--background-20);
}

ul.topiclist li {
  color: var(--content-secondary);
}

ul.cplist {
  border-top-color: var(--background-60);
}

ul.topiclist dd {
  border-left-color: var(--background-20);
}

.attachbox {
  background-color: var(--background-0);
  border-color: var(--background-40);
}

.attachbox dd {
  border-top-color: var(--background-40);
}

dl.file dd {
  color: var(--background-100);
}

.post:target .content {
  color: var(--content-primary);
}

.user-profile img.avatar {
  width: 64px;
  height: 64px;
}

.user-profile-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.user-profile-stats>div{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-stat {
  display: flex;
}

.user-stat .label, .user-stat-continued .label {
  width: 50%;
  color: var(--content-secondary);
  font-size: var(--font-s);
}

.user-stat .value {
  width: 50%;
  color: var(--content-primary);
  font-weight: bold;
  font-size: var(--font-s);
}

.user-stat-continued .value {
  width: 50%;
  color: var(--content-secondary);
  font-size: var(--font-xs);
  font-weight: normal;
}

.user-stat-continued {
  display: flex;
  justify-content: center;
  margin-top: -10px;
}

.user-stat-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.online, .online-big {
  position: relative;
}

.online:after, .online-big:after {
  content: '';
  position: absolute;
  background-color: var(--status-online);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  bottom: 0;
  right: 0;
}

.online:after {
  width: 8px;
  height: 8px;
}

.online-big:after {
  width: 16px;
  height: 16px;
}
.search-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radio-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.text-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.text-input label {
  font-size: var(--font-s);
  color: var(--content-primary);
  font-weight: bold;
}

.text-input input {
  height: 32px;
  border-radius: 3px;
  padding: 7px;
  font-size: var(--font-m);
  box-sizing: border-box;
  border: solid 1px var(--background-60);
  max-width: 400px;
  color: var(--content-primary);
  background-color: var(--background-0);
}

.text-input p {
  font-size: var(--font-s);
  color: var(--background-80);
}

.button-switch-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin: 16px;
}

.thread-section-wrapper, .thread-section-wrapper>div {
  overflow-y: hidden;
}

.slide-out-left {
  animation: fadeOutLeft 0.3s forwards ease;
}

.slide-in-right {
  animation: fadeInRight 0.15s forwards ease;
}

.slide-out-right {
  animation: fadeInRight 0.3s reverse ease;
}

.slide-in-left {
  animation: fadeOutLeft 0.3s reverse ease;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-30px);
  }
}


.avatar-delete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 24px 16px;
}

#avatar-preview {
  display: flex;
  justify-content: center;
}

#avatar-preview-canvas {
  border-radius: 50%;
}

.avatar-manager span {
  color: var(--background-80);
  font-size: var(--font-s);
}

.avatar-manager section {
  gap: 24px;
}

.avatar-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .avatar-buttons {
    flex-direction: column;
  }
}

#current-avatar img {
  width: 96px !important;
  height: 96px !important;
}

.signature-manager section{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.signature-manager p{
  font-size: var(--font-s);
  color: var(--background-80);
}

.signature {
  margin-top: 0;
}

.confirm-form, .info-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  align-items: center;
}

.confirm-form h1, .info-form h1 {
  color: var(--accent-primary);
  font-size: var(--font-xl);
  margin: 0 !important;
}

.confirm-form p, .info-form p {
  color: var(--content-primary);
  font-size: var(--font-m);
  margin: 0 !important;
}

.info-form a {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 16px;
  font-weight: bold;
  font-size: var(--font-s);
  text-transform: uppercase;
  line-height: 1;
  height: 30px;
  border-radius: 3px;
  white-space: nowrap;
  width: fit-content;
  text-decoration: none !important;
  color: var(--background-0);
  background-color: var(--accent-primary);
}


.onboarding-overlay {
  background-color: var(--accent-primary);
  color: var(--background-0);
  font-size: var(--font-m);
  padding: 10px;
  border-radius: 4px;
  width: 180px;
  box-shadow: var(--accent-light) 0 0 3px 3px;
  z-index: 999;
}

.onboarding-overlay div {
  padding-bottom: 16px;
}

.onboarding-overlay button {
  margin-right: 0;
  margin-left: auto;
}

.onboarding-overlay::after {
  content: "";
  position: absolute;
  bottom: -10px; /* Adjust this value to control the distance from the overlay */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* Adjust size of triangle */
  border-right: 10px solid transparent;
  border-top: 10px solid var(--accent-primary); /* The color and direction of the triangle */
}

.onboarding-overlay.arrow-up::after {
  content: "";
  position: absolute;
  top: -10px; /* Adjust this value to control the distance from the overlay */
  left: 87%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* Adjust size of triangle */
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--accent-primary); /* The color and direction of the triangle */
  border-top: 0;
}

#phpbb .pages-content h2 {
  color: var(--accent-primary);
  margin-top: 24px;
}