@charset "UTF-8";
html {
  background-color: hsl(250, 24%, 9%);
}

body {
  margin: 0;
  padding: 0;
  background-color: hsl(250, 24%, 9%);
  color: hsl(0, 0%, 100%);
}

.button-main, .button-cancel {
  background-color: hsl(270, 60%, 52%);
  color: hsl(0, 0%, 100%);
  font-weight: 500 !important;
  font-size: 0.75em;
  padding: 0.75em;
  border-radius: 5px;
  cursor: pointer;
}
.button-main:hover, .button-cancel:hover {
  background-color: hsl(270, 55%, 43%);
}

.button-cancel {
  background-color: hsl(180, 50%, 44%);
}
.button-cancel:hover {
  background-color: hsl(180, 50%, 38%);
}

.modal-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: hsla(250, 24%, 9%, 0.4);
}
.modal-container .forum-modals, .modal-container .thread-view-modal, .modal-container .form-modal {
  position: fixed;
  flex-direction: column;
  width: 50%;
  max-height: 90vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
  background-color: hsl(246, 11%, 22%);
  border-radius: 5px;
  box-shadow: 0 0 5px 0px hsl(246, 18%, 15%);
  overflow-y: scroll;
  gap: 1em;
}
.modal-container .forum-modals .content-editable, .modal-container .thread-view-modal .content-editable, .modal-container .form-modal .content-editable {
  min-height: 100px;
  padding: 0.5em;
  background-color: white;
  color: black;
  resize: vertical !important;
  border-radius: 3px;
  font-size: 0.95em;
}

.forum-main {
  flex-direction: column;
  width: 100%;
  padding-inline: 1rem;
  gap: 1.5em;
}
.forum-main .top-section {
  margin-top: 0.5em;
}
.forum-main .title-and-search, .forum-main .top-section {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1em;
}
.forum-main .title-and-search #title, .forum-main .top-section #title {
  font-size: 2em;
}
.forum-main .title-and-search .end-section, .forum-main .top-section .end-section {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: flex-grow 0.3s ease-in-out;
  gap: 1em;
}
.forum-main .title-and-search .end-section:has(.search-container #main-searchbox:focus), .forum-main .top-section .end-section:has(.search-container #main-searchbox:focus) {
  justify-content: flex-end;
  flex-grow: 1;
}
.forum-main .title-and-search .end-section:has(.search-container #main-searchbox:focus) .search-container, .forum-main .top-section .end-section:has(.search-container #main-searchbox:focus) .search-container {
  flex-grow: 1;
}
.forum-main .title-and-search .end-section .search-container, .forum-main .top-section .end-section .search-container {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0.25em;
  padding-inline: 0.5em;
  border: 1px solid hsl(246, 6%, 55%);
  border-radius: 5px;
  transition: flex-grow 0.3s ease-in-out;
  gap: 0.5em;
}
.forum-main .title-and-search .end-section .search-container .image-container, .forum-main .top-section .end-section .search-container .image-container {
  width: 25px;
  height: 25px;
  aspect-ratio: 1/1;
}
.forum-main .title-and-search .end-section .search-container .image-container img, .forum-main .top-section .end-section .search-container .image-container img {
  width: 100%;
  height: 100%;
}
.forum-main .title-and-search .end-section .search-container #main-searchbox, .forum-main .top-section .end-section .search-container #main-searchbox {
  background-color: hsl(250, 24%, 9%);
  font-size: 1.5em;
  color: hsl(0, 0%, 100%);
  border: none;
  outline: none;
}
.forum-main .title-and-search .end-section .search-container #main-searchbox::-moz-placeholder, .forum-main .top-section .end-section .search-container #main-searchbox::-moz-placeholder {
  color: hsl(246, 6%, 55%);
}
.forum-main .title-and-search .end-section .search-container #main-searchbox::placeholder, .forum-main .top-section .end-section .search-container #main-searchbox::placeholder {
  color: hsl(246, 6%, 55%);
}
.forum-main .title-and-search .end-section #new-thread-trigger, .forum-main .top-section .end-section #new-thread-trigger {
  cursor: pointer;
}
.forum-main .title-and-search {
  justify-content: flex-end;
}
.forum-main .thread-list-filters {
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.forum-main .thread-list-filters .thread-type-select {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.forum-main .thread-list-filters .thread-type-select .type-container {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  gap: 0.5em;
}
.forum-main .thread-list-filters .thread-type-select .type-container:hover .type {
  color: hsl(246, 6%, 78%);
}
.forum-main .thread-list-filters .thread-type-select .type-container .image-container {
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
}
.forum-main .thread-list-filters .thread-type-select .type-container .image-container img {
  width: 100%;
  height: 100%;
}
.forum-main .thread-list-filters .thread-type-select .type-container .type {
  font-size: 0.75em;
}
.forum-main .thread-list-filters .thread-type-select .selected-type {
  border: none;
}
.forum-main .thread-list-filters .thread-type-select .selected-type:hover .type {
  color: hsl(270, 60%, 52%);
}
.forum-main .thread-list-filters .thread-type-select .selected-type .type {
  color: hsl(270, 70%, 65%);
}
.forum-main .thread-list-filters .filtering {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.forum-main .thread-list-filters .filtering .status-container, .forum-main .thread-list-filters .filtering .sort-container {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.forum-main .thread-list-filters .filtering .status-container .image-container, .forum-main .thread-list-filters .filtering .sort-container .image-container {
  width: 18px;
  height: 28px;
  aspect-ratio: 1/1;
}
.forum-main .thread-list-filters .filtering .status-container .image-container img, .forum-main .thread-list-filters .filtering .sort-container .image-container img {
  width: 100%;
  height: 100%;
}
.forum-main .thread-list-filters .filtering .status-container .label, .forum-main .thread-list-filters .filtering .sort-container .label {
  color: hsl(246, 6%, 65%);
  font-size: 0.75em;
}
.forum-main .thread-list-filters .filtering .status-container {
  cursor: pointer;
}
.forum-main .thread-list-filters .filtering .status-container:hover .label {
  color: hsl(246, 6%, 55%);
}
.forum-main .thread-list-filters .filtering .sort-by-button {
  font-size: 0.75em;
  cursor: pointer;
}
.forum-main .thread-list-filters .filtering .sort-by-button:hover {
  color: hsl(246, 6%, 78%);
}
.forum-main .thread-list-filters .sort-by-dropdown {
  position: absolute;
  display: none;
  top: 100%;
  right: 0;
}
.forum-main .thread-list-filters .sort-by-dropdown .dropdown-button {
  padding: 0.75em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background-color: hsl(246, 11%, 22%);
  cursor: pointer;
}
.forum-main .thread-list-filters .sort-by-dropdown .dropdown-button:hover {
  background-color: hsl(246, 8%, 35%);
}
.forum-main .thread-list-filters .sort-by-dropdown .dropdown-button:first-child {
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.forum-main .thread-list-filters .sort-by-dropdown .dropdown-button:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.forum-main .thread-list-filters .sort-by-dropdown .selected-sort {
  background-color: hsl(246, 8%, 35%);
}
.forum-main .thread-list-filters .sort-by-dropdown .selected-sort:hover {
  background-color: hsl(246, 7%, 45%);
}
.forum-main .pinned-threads-title {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
}
.forum-main .pinned-threads-title .image-container {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
}
.forum-main .pinned-threads-title .image-container img {
  width: 100%;
  height: 100%;
}
.forum-main .pinned-threads-title .title {
  font-size: 0.9em;
  font-weight: 600;
}
.forum-main .pinned-threads, .forum-main .displayed-threads {
  gap: 1em;
}
.forum-main .pinned-threads .thread, .forum-main .displayed-threads .thread {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1em;
  background-color: hsl(270, 40%, 16%);
  border-radius: 5px;
  gap: 1em;
}
.forum-main .pinned-threads .thread .upvotes, .forum-main .pinned-threads .thread .priority, .forum-main .pinned-threads .thread .pin, .forum-main .pinned-threads .thread .resolve, .forum-main .displayed-threads .thread .upvotes, .forum-main .displayed-threads .thread .priority, .forum-main .displayed-threads .thread .pin, .forum-main .displayed-threads .thread .resolve {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.25em;
  border: 1px solid hsl(246, 6%, 55%);
  border-radius: 5px;
  cursor: pointer;
  gap: 0.25em;
}
.forum-main .pinned-threads .thread .upvotes #pin-toggle-label, .forum-main .pinned-threads .thread .upvotes #resolve-toggle-label, .forum-main .pinned-threads .thread .priority #pin-toggle-label, .forum-main .pinned-threads .thread .priority #resolve-toggle-label, .forum-main .pinned-threads .thread .pin #pin-toggle-label, .forum-main .pinned-threads .thread .pin #resolve-toggle-label, .forum-main .pinned-threads .thread .resolve #pin-toggle-label, .forum-main .pinned-threads .thread .resolve #resolve-toggle-label, .forum-main .displayed-threads .thread .upvotes #pin-toggle-label, .forum-main .displayed-threads .thread .upvotes #resolve-toggle-label, .forum-main .displayed-threads .thread .priority #pin-toggle-label, .forum-main .displayed-threads .thread .priority #resolve-toggle-label, .forum-main .displayed-threads .thread .pin #pin-toggle-label, .forum-main .displayed-threads .thread .pin #resolve-toggle-label, .forum-main .displayed-threads .thread .resolve #pin-toggle-label, .forum-main .displayed-threads .thread .resolve #resolve-toggle-label {
  font-size: 0.75em;
}
.forum-main .pinned-threads .thread .upvotes:hover, .forum-main .pinned-threads .thread .priority:hover, .forum-main .pinned-threads .thread .pin:hover, .forum-main .pinned-threads .thread .resolve:hover, .forum-main .displayed-threads .thread .upvotes:hover, .forum-main .displayed-threads .thread .priority:hover, .forum-main .displayed-threads .thread .pin:hover, .forum-main .displayed-threads .thread .resolve:hover {
  background-color: hsl(246, 6%, 78%);
}
.forum-main .pinned-threads .thread .upvotes .image-container, .forum-main .pinned-threads .thread .priority .image-container, .forum-main .pinned-threads .thread .pin .image-container, .forum-main .pinned-threads .thread .resolve .image-container, .forum-main .displayed-threads .thread .upvotes .image-container, .forum-main .displayed-threads .thread .priority .image-container, .forum-main .displayed-threads .thread .pin .image-container, .forum-main .displayed-threads .thread .resolve .image-container {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
}
.forum-main .pinned-threads .thread .upvotes .image-container img, .forum-main .pinned-threads .thread .priority .image-container img, .forum-main .pinned-threads .thread .pin .image-container img, .forum-main .pinned-threads .thread .resolve .image-container img, .forum-main .displayed-threads .thread .upvotes .image-container img, .forum-main .displayed-threads .thread .priority .image-container img, .forum-main .displayed-threads .thread .pin .image-container img, .forum-main .displayed-threads .thread .resolve .image-container img {
  width: 100%;
  height: 100%;
}
.forum-main .pinned-threads .thread .upvotes .value, .forum-main .pinned-threads .thread .priority .value, .forum-main .pinned-threads .thread .pin .value, .forum-main .pinned-threads .thread .resolve .value, .forum-main .displayed-threads .thread .upvotes .value, .forum-main .displayed-threads .thread .priority .value, .forum-main .displayed-threads .thread .pin .value, .forum-main .displayed-threads .thread .resolve .value {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.forum-main .pinned-threads .thread .resolve, .forum-main .displayed-threads .thread .resolve {
  background-color: hsl(1, 62%, 44%);
}
.forum-main .pinned-threads .thread .upvotes.triggered, .forum-main .displayed-threads .thread .upvotes.triggered {
  background-color: hsl(152, 38%, 42%);
}
.forum-main .pinned-threads .thread .priority.triggered, .forum-main .displayed-threads .thread .priority.triggered {
  background-color: hsl(44, 74%, 52%);
}
.forum-main .pinned-threads .thread .resolve.triggered, .forum-main .displayed-threads .thread .resolve.triggered {
  background-color: hsl(152, 38%, 42%);
}
.forum-main .pinned-threads .thread .content, .forum-main .displayed-threads .thread .content {
  flex-grow: 1;
}
.forum-main .pinned-threads .thread .content .thread-title, .forum-main .displayed-threads .thread .content .thread-title {
  margin: 0;
  font-size: 1.15em;
  font-weight: 500;
  cursor: pointer;
}
.forum-main .pinned-threads .thread .content .thread-title:hover, .forum-main .displayed-threads .thread .content .thread-title:hover {
  color: hsl(246, 6%, 87%);
}
.forum-main .pinned-threads .thread .content .body-preview, .forum-main .displayed-threads .thread .content .body-preview {
  font-size: 0.75em;
  color: hsl(246, 6%, 65%);
}
.forum-main .pinned-threads .thread .content .main-meta, .forum-main .displayed-threads .thread .content .main-meta {
  flex-direction: row;
  gap: 1em;
}
.forum-main .pinned-threads .thread .content .main-meta .meta, .forum-main .displayed-threads .thread .content .main-meta .meta {
  font-size: 0.75em;
}
.forum-main .pinned-threads {
  flex-direction: row;
  flex-wrap: wrap;
}
.forum-main .pinned-threads .thread {
  width: 49%;
  background-color: hsl(246, 11%, 22%);
}
.forum-main .pinned-threads .thread .body-preview {
  display: none;
}
.form-modal .top-options, .form-modal .bottom-options {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transition: background-color 0.3s ease-in-out;
  gap: 1em;
}
.form-modal .top-options .selected, .form-modal .bottom-options .selected {
  background-color: hsl(246, 7%, 45%) !important;
  border: 1px solid hsl(0, 0%, 100%) !important;
}
.form-modal .top-options .button-main, .form-modal .top-options .button-cancel {
  background-color: transparent;
  border: 1px solid hsl(246, 8%, 35%);
}
.form-modal .top-options .button-main:hover, .form-modal .top-options .button-cancel:hover {
  background-color: hsl(246, 8%, 35%);
}
.form-modal .bottom-options {
  justify-content: flex-end;
}
.form-modal .thread-title-textbox {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1.25em;
}

.thread-view-modal {
  width: 75vw;
  top: 2em;
  transform: translateX(-50%);
}
.thread-view-modal #exit-thread {
  align-self: flex-end;
  font-size: 2em !important;
  cursor: pointer;
}
.thread-view-modal .thread-general-info {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75em;
}
.thread-view-modal .thread-general-info .info-items {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25em;
}
.thread-view-modal .thread-general-info .info-items .info {
  flex-direction: row;
  gap: 0.25em;
}
.thread-view-modal .thread-general-info .info-items .info::after {
  content: "·" !important;
}
.thread-view-modal .thread-general-info .info-items .info:last-child::after {
  content: "" !important;
}
.thread-view-modal .title-section {
  padding-top: 1em;
  border-top: 1px solid hsl(246, 7%, 45%);
}
.thread-view-modal .title-section .title {
  font-size: 1.4em;
}
.thread-view-modal .body-section {
  padding-inline: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid hsl(246, 7%, 45%);
}
.thread-view-modal .body-section .body {
  font-size: 0.85em;
}
.thread-view-modal .replies-list {
  padding-bottom: 1em;
  border-bottom: 1px solid hsl(246, 7%, 45%);
  gap: 1em;
}
.thread-view-modal .replies-list .reply .main-reply {
  flex-direction: row;
  flex: 3;
  gap: 0.5em;
}
.thread-view-modal .replies-list .reply .main-reply .user {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5em;
  border-right: 1px solid hsl(246, 7%, 45%);
  gap: 0.5em;
}
.thread-view-modal .replies-list .reply .main-reply .user .image-container {
  width: 35px;
  height: 35px;
  aspect-ratio: 1/1;
}
.thread-view-modal .replies-list .reply .main-reply .user .image-container img {
  border: 2px solid hsl(246, 7%, 45%);
  border-radius: 500%;
}
.thread-view-modal .replies-list .reply .main-reply .user .name, .thread-view-modal .replies-list .reply .main-reply .user .date {
  font-size: 0.75em;
}
.thread-view-modal .replies-list .reply .main-reply .user .name {
  font-weight: bold;
}
.thread-view-modal .replies-list .reply .main-reply .content {
  flex: 7;
}
.thread-view-modal .replies-list .reply .main-reply .content .body {
  font-size: 0.85em;
}
.thread-view-modal .replies-list .reply .main-reply .content .body quote {
  margin-bottom: 2em;
  padding: 0.25em;
  font-size: 0.85em;
  border: 1px solid hsl(0, 0%, 100%);
  border-radius: 3px;
}
.thread-view-modal .replies-list .reply .content-controls {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.thread-view-modal .replies-list .reply .content-controls .control-button {
  font-size: 0.75em;
  cursor: pointer;
}
.thread-view-modal .replies-list .reply .content-controls .control-button:hover {
  text-decoration: underline !important;
}
.thread-view-modal .replies-form {
  gap: 0.5em;
}
.thread-view-modal .replies-form .content-editable-inactive {
  min-height: 0px;
  height: auto !important;
  background-color: hsl(246, 11%, 22%);
}
.thread-view-modal .replies-form .content-editable-inactive .reply-trigger {
  color: hsl(220, 80%, 75%);
  cursor: pointer;
  text-decoration: underline !important;
}
.thread-view-modal .replies-form .content-editable-inactive .reply-trigger:hover {
  color: hsl(220, 80%, 85%);
}
.thread-view-modal .replies-form #submit-thread-reply {
  display: none;
}/*# sourceMappingURL=forum.css.map */