/* app/javascript/src/styles/user-tooltips.css */
.user-tooltip {
  min-width: 400px;
}
.user-tooltip span {
  max-width: 400px;
  font-size: 11.5px;
  overflow-x: auto;
}
.user-tooltip-badge {
  margin-left: 0.5em;
  height: 15px;
  overflow: hidden;
}
.user-tooltip-name {
  margin-left: 5px;
}
.user-tooltip-feedback {
  display: inline-flex;
  gap: 0.5em;
  height: 22px;
  margin: 0 0 -1px 1em;
}
.user-tooltip-badge-positive-feedback {
  color: #DAA520;
  background: rgba(218, 165, 32, 0.125);
  padding: 0 2px 0 0;
  border: 1px solid #DAA520;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.user-tooltip-badge-negative-feedback {
  color: #B22222;
  background: rgba(178, 34, 34, 0.125);
  padding: 0 2px 0 0;
  border: 1px solid #B22222;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.user-tooltip-last-seen-stat,
.user-tooltip-created-at-stat {
  color: var(--grey-4);
}
.user-tooltip-header {
  overflow: hidden;
}
.user-tooltip-header-top {
  margin: 0;
  display: flex;
  width: 350px;
  align-items: center;
}
.user-tooltip-header-top > span:not(.user-tooltip-avatar),
.user-tooltip-header-top > div {
  margin-top: -3em;
}
.user-tooltip-header-top .popup-menu {
  order: 1;
  margin-left: auto;
}
.user-tooltip-header-bottom {
  display: flex;
  flex-direction: column;
  margin: -4.5em 1em 0.5em 5.25em;
}
.user-tooltip-stats {
  display: grid;
  grid: auto / repeat(3, 1fr);
  column-gap: 0.25em;
  row-gap: 0.5em;
  text-align: center;
  max-height: 90px;
  overflow: scroll;
}
.user-tooltip-stats .user-tooltip-stat-name {
  text-decoration: underline;
}

/* app/javascript/src/styles/companions.css */
.companion--block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.companion--container {
  width: 325px;
  border: 2px solid #444;
  padding: 0 5px;
  margin: 5px 5px;
  border-radius: 3px;
}
.companion--container span.thumb {
  margin: 0;
}
.companion--upper_half {
  display: flex;
}
.companion--top_right {
  margin-top: 10px;
  width: 200px;
}
.companion--middle_right {
  height: 55px;
}
.companion--start_chat {
  float: right;
  background: #FF761C;
  border-radius: 25px;
  margin: 7.5px 0;
}
.companion--start_chat a.companion--chat_link {
  color: #DDD;
}
.companion--start_chat:hover {
  background: #FFA971;
  color: #DDDD;
}
.companion--start_chat:hover a.companion--chat_link {
  color: #222;
}
.companion--extras {
  margin-top: 5px;
  display: flex;
}
.companion--tags {
  margin-top: 5px;
  word-break: break-all;
  overflow-y: auto;
  max-height: 50px;
}
.companion--draggable_element {
  position: fixed;
  top: 100px;
  left: 100px;
  border: 2px solid #444;
  background-color: #EEE;
  cursor: grab;
  z-index: 1000000;
  max-height: 350px;
  overflow-y: auto;
}
.companion--draggable_content {
  padding: 10px 0 5px 10px;
}
.companion--lcol_content {
  display: flex;
  align-items: center;
  max-width: 250px;
  min-width: 250px;
  padding-bottom: 5px;
}
.companion--lcol_content h3 {
  padding-left: 5px;
}
.companion--toggle_button {
  cursor: pointer;
  background-color: #DDD;
  padding: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  max-width: 250px;
}
.companion--toggle_button svg.svg-x {
  height: auto;
  width: 35px;
}
.hidden {
  display: none;
}
.companion--toggle_button span img,
.companion--draggable_content span img {
  border: 1.75px solid #444;
  border-radius: 50%;
}
.companion--row {
  display: flex;
  padding: 0 4px;
  overflow-y: hidden;
  text-align: left;
  font-size: 12px;
}
.companion--row::-webkit-scrollbar {
  height: 7.5px;
}
.companion--row::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
  background: #f2b16b;
  border-radius: 5px;
}
.companion--row::-webkit-scrollbar-thumb {
  height: 5px;
  background-color: #FF761C;
  border-radius: 5px;
}
.companion--row::-webkit-scrollbar-thumb:hover {
  background-color: #f1db9d;
}
.companion--row::-webkit-scrollbar:vertical,
.companion--draggable_element::-webkit-scrollbar:vertical {
  display: none;
}

/* node_modules/tippy.js/dist/tippy.css */
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}
[data-tippy-root] {
  max-width: calc(100vw - 10px);
}
.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property:
    transform,
    visibility,
    opacity;
}
.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}
.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}
.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}
.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}
.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}
.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}
.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
}
.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}
.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}
.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}

/* app/javascript/src/styles/tooltip-base.css */
.tippy-box {
  border: 1px solid #444;
  background: #222;
}
.tippy-content {
  padding-right: 0;
  padding-bottom: 0;
}
.tippy-content a {
  font-size: 11px;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: #222;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow::after {
  border-bottom-color: #555;
  border-width: 0 7px 7px;
  top: -8px;
  left: 1px;
}
.tippy-box[data-placement^=top] > .tippy-arrow::before {
  border-top-color: #222;
}
.tippy-box[data-placement^=top] > .tippy-arrow::after {
  border-top-color: #555;
  border-width: 7px 7px 0;
  top: 17px;
  left: 1px;
}
.tippy-box[data-placement^=left] > .tippy-arrow::before {
  border-left-color: #222;
}
.tippy-box[data-placement^=left] > .tippy-arrow::after {
  border-left-color: #555;
  border-width: 8px 8px 8px 8px;
  right: -16px;
}
.tippy-box[data-placement^=right] > .tippy-arrow:before {
  border-right-color: #222;
}
.tippy-box[data-placement^=right] > .tippy-arrow::after {
  border-right-color: #555;
  border-width: 8px 8px 8px 0;
  left: -8px;
}
.tippy-box > .tippy-arrow::after {
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  content: "";
  position: absolute;
  z-index: -1;
}

/* app/javascript/src/styles/post-tooltips.css */
.post-tooltip span:not([class^="user-tooltip"], [class^="avatar"], [class^="tag-tooltip"], [class^="t--tooltip"], [class^="rating-"]) {
  display: flex;
  align-items: center;
  max-width: 375px;
  flex-wrap: wrap;
  font-size: 11px;
  padding-bottom: 0.4px;
}
.post--tooltip span:not([class="p--tooltip_bottom"]) {
  margin-right: 7.5px;
}
.p--tooltip_bottom {
  max-height: 80px;
  overflow: auto;
  margin-top: 0.75em;
}
.p--tooltip_bottom span {
  margin-right: 5px;
}
.p--tooltip_bottom span[id^=p] {
  align-self: flex-start;
  position: relative;
}
#p--tooltip-date,
#p--tooltip-wh {
  color: var(--grey-4);
  padding-left: 7.5px;
  font-size: 10.5px;
  margin-right: 7.5px;
}
.p--tooltip_secondary {
  margin-top: 0.75em;
}
#p--tooltip-svg-f,
#p--tooltip-svg-c,
#p--tooltip-svg-n,
#p--tooltip-svg-r {
  padding-right: 2.5px;
  margin-top: -1px;
}
#p--tooltip-svg-v {
  padding-right: 2.5px;
  margin-top: -2px;
}
#p--tooltip-favs,
#p--tooltip-votes,
#p--tooltip-notes,
#p--tooltip-comments {
  padding-right: 15px;
}
#p--tooltip-votes svg {
  margin-top: -1px;
}
a:has(#p--tooltip-rating) {
  margin-left: auto;
  margin-right: 10px;
  font-size: 10px;
}

/* app/javascript/src/styles/tag-tooltips.css */
.tag-tooltip {
  display: block;
  padding: 2.5px 10px 5px 0;
  font-size: 12px;
}
.tag-tooltip a {
  font-size: 12px;
}
.tag-tooltip > .t--tooltip-rating {
  margin-right: 5px;
}
.t-tooltip-details {
  display: inline-flex;
  gap: 2.5px;
  align-items: center;
}

/* app/components/carousel_component/carousel_component.css */
.carousel {
  padding: 2.5px;
  margin: 5px;
  background: #FAFAFA;
  border: 2px solid #DDD;
  text-align: center;
  border-radius: 10px;
}
.carousel-content {
  display: flex;
  padding: 0 4px;
  overflow-y: hidden;
  text-align: left;
  font-size: 12px;
}
.content .carousel {
  margin: 1.25em 5px;
}
button.carousel-hide {
  padding: 3px 0.15em 0.15em 0.15em;
  margin-top: -0.5em;
  margin-right: -0.5em;
  position: relative;
  z-index: 1;
}
#popular-preview .carousel {
  border: 2px solid goldenrod;
  border-radius: 10px;
}
.carousel .thumb {
  margin: 0 1em;
}
.carousel-hide {
  float: right;
  margin: -15px;
  border-radius: 3px;
  cursor: pointer;
}
.carousel-title h5 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* app/javascript/src/styles/articles.css */
.article--container {
  display: flex;
  border: 2px solid #444;
  margin: 2.5px 2.5px;
  border-radius: 10px;
}
.article--top_left {
  width: 251.5px;
  padding: 1px 0 0 0;
}
.article--top_right {
  padding: 0 5px;
  text-align: center;
}
.article--top_left span.thumb {
  width: 252.5px;
  height: 130px;
  margin: 0;
}
.article--top_left .thumb img {
  border-radius: 10px;
}
.article--tags {
  margin-top: 5px;
  word-break: break-all;
  overflow-y: auto;
  max-height: 30px;
  margin-left: 10px;
}

/* node_modules/highlight.js/styles/github-dark-dimmed.css */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
.hljs {
  color: #adbac7;
  background: #22272e;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #f47067;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #dcbdfb;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: #6cb6ff;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  color: #96d0ff;
}
.hljs-built_in,
.hljs-symbol {
  color: #f69d50;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  color: #768390;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  color: #8ddb8c;
}
.hljs-subst {
  color: #adbac7;
}
.hljs-section {
  color: #316dca;
  font-weight: bold;
}
.hljs-bullet {
  color: #eac55f;
}
.hljs-emphasis {
  color: #adbac7;
  font-style: italic;
}
.hljs-strong {
  color: #adbac7;
  font-weight: bold;
}
.hljs-addition {
  color: #b4f1b4;
  background-color: #1b4721;
}
.hljs-deletion {
  color: #ffd8d3;
  background-color: #78191b;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
}

/* app/javascript/application.less */
table {
  margin-bottom: 1em;
  border: 2px solid #DDD;
}
table.form p {
  font-size: 0.8em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
table.form th {
  color: black;
  white-space: normal;
  padding-right: 1em;
  text-align: right;
  background: #FAFAFA;
}
table.highlightable > tbody > tr:hover {
  background: #EEE;
}
table.highlightable th {
  color: #333;
}
table.highlightable td {
  margin: 0;
}
table.highlightable th {
  margin: 0;
}
table thead {
  border-bottom: 2px solid #DDD;
  background: #FAFAFA;
  font-weight: bold;
}
table tfoot {
  background: #FAFAFA;
}
table td {
  padding: 1px 4px;
  border: 1px solid #EAEAEA;
}
table th {
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
  padding: 0.2em 0.5em;
  white-space: nowrap;
}
table tbody tr {
  color: #666;
}
table tbody tr:nth-child(even) {
  background: #FAFAFA;
}
table tr.good {
  background: #e6ffe6;
}
table tr.selected {
  background: #ffcc89 !important;
}
table tr.highlight {
  background: #FAFAFA;
}
table tr.pending-tag:nth-child(odd) {
  background: ghostwhite;
}
table tr.pending-tag:nth-child(even) {
  background: lavender;
}
[action^="/tag_"]:not([action*="translation"]) .highlightable td:nth-child(2) > a,
[action^="/tag_"]:not([action*="translation"]) .highlightable td:nth-child(3) > a {
  word-break: break-all;
}
[action^="/tag_"]:not([action*="translation"]) .highlightable thead th:nth-of-type(2),
[action^="/tag_"]:not([action*="translation"]) .highlightable thead th:nth-of-type(3) {
  width: 25%;
}
[action^="/tag_"]:not([action*="translation"]) .highlightable thead th:nth-of-type(5) {
  width: unset;
}
div#artist-index > table td {
  white-space: nowrap;
}
div#forum > table th:first-child {
  text-align: left;
}
div#forum > table td:first-child {
  text-align: left;
}
div#user-record > table > tbody > tr.positive-record {
  background: #EFE;
}
div#user-record > table > tbody > tr.negative-record {
  background: #FEE;
}
.table--premium {
  margin: 0 auto;
  text-align: center;
  border: none;
  border-collapse: collapse;
}
.table--premium th:first-child {
  border-left: 1px solid #EAEAEA;
}
.table--premium thead {
  border: none;
}
.table--premium thead tr th {
  padding: 7.5px 35px 7.5px 35px;
  text-align: center;
}
.table--premium tbody tr td {
  padding: 7.5px 0 7.5px 0;
  font-size: 20px;
  background: #EAEAEA;
  border: 1px solid #EAEAEA;
}
.table--premium td:nth-child(2) {
  background: #444;
  color: #999;
}
.table--premium thead {
  background: #EAEAEA;
}
thead[align=left] th,
tbody[align=left] th,
thead tr[align=left] th,
tbody tr[align=left] th,
tr[align=left] th,
thead[align=left] td,
tbody[align=left] td,
thead tr[align=left] td,
tbody tr[align=left] td,
tr[align=left] td {
  text-align: left;
}
thead[align=right] th,
tbody[align=right] th,
thead tr[align=right] th,
tbody tr[align=right] th,
tr[align=right] th,
thead[align=right] td,
tbody[align=right] td,
thead tr[align=right] td,
tbody tr[align=right] td,
tr[align=right] td {
  text-align: right;
}
thead[align=center] th,
tbody[align=center] th,
thead tr[align=center] th,
tbody tr[align=center] th,
tr[align=center] th,
thead[align=center] td,
tbody[align=center] td,
thead tr[align=center] td,
tbody tr[align=center] td,
tr[align=center] td {
  text-align: center;
}
thead[align=justify] th,
tbody[align=justify] th,
thead tr[align=justify] th,
tbody tr[align=justify] th,
tr[align=justify] th,
thead[align=justify] td,
tbody[align=justify] td,
thead tr[align=justify] td,
tbody tr[align=justify] td,
tr[align=justify] td {
  text-align: justify;
}
td[align=left],
th[align=left] {
  text-align: left !important;
}
td[align=right],
th[align=right] {
  text-align: right !important;
}
td[align=center],
th[align=center] {
  text-align: center !important;
}
td[align=justify],
th[align=justify] {
  text-align: justify !important;
}
html {
  --grey-0: #f6f6f8;
  --grey-1: #e8e8ec;
  --grey-2: #d1d1da;
  --grey-3: #ababbc;
  --grey-4: #9192a7;
  --grey-5: #777892;
  --grey-6: #5b5c79;
  --grey-7: #3f4058;
  --grey-8: #2c2d3f;
  --grey-9: #1e1e2c;
  --red-0: #fff4f4;
  --red-1: #fbe3e3;
  --red-2: #ffc3c3;
  --red-3: #ff8a8b;
  --red-4: #ff5a5b;
  --red-5: #ed2426;
  --red-6: #c00004;
  --red-7: #861011;
  --red-8: #5c1313;
  --red-9: #391313;
  --orange-0: #fff4f0;
  --orange-1: #ffe2d5;
  --orange-2: #ffc5a5;
  --orange-3: #fd9200;
  --orange-4: #d97c00;
  --orange-5: #b56700;
  --orange-6: #8d4f00;
  --orange-7: #653700;
  --orange-8: #482500;
  --orange-9: #331900;
  --yellow-0: #fdf6e6;
  --yellow-1: #f7e7c3;
  --yellow-2: #ead084;
  --yellow-3: #ccaa00;
  --yellow-4: #ae9100;
  --yellow-5: #917800;
  --yellow-6: #705d00;
  --yellow-7: #504100;
  --yellow-8: #382d00;
  --yellow-9: #271f04;
  --green-0: #e8fce9;
  --green-1: #cbf2ce;
  --green-2: #93e49a;
  --green-3: #35c64a;
  --green-4: #00ab2c;
  --green-5: #008e23;
  --green-6: #006e19;
  --green-7: #004e0f;
  --green-8: #003708;
  --green-9: #002604;
  --azure-0: #f1f7ff;
  --azure-1: #d9eaff;
  --azure-2: #afd5ff;
  --azure-3: #4bb4ff;
  --azure-4: #009be6;
  --azure-5: #0081c0;
  --azure-6: #006496;
  --azure-7: #00466b;
  --azure-8: #00314d;
  --azure-9: #002237;
  --blue-0: #f4f6ff;
  --blue-1: #e1e8ff;
  --blue-2: #c3d0ff;
  --blue-3: #8caaff;
  --blue-4: #5d8fff;
  --blue-5: #0075f8;
  --blue-6: #005ac3;
  --blue-7: #003f8d;
  --blue-8: #002c66;
  --blue-9: #001e4a;
  --purple-0: #f9f5ff;
  --purple-1: #ece5f8;
  --purple-2: #ddc9fb;
  --purple-3: #c797ff;
  --purple-4: #b871ff;
  --purple-5: #ab3fff;
  --purple-6: #9000df;
  --purple-7: #6700a1;
  --purple-8: #421765;
  --purple-9: #2f0e49;
  --magenta-0: #fff3ff;
  --magenta-1: #f8e1f8;
  --magenta-2: #fabefb;
  --magenta-3: #fd78ff;
  --magenta-4: #fd23ff;
  --magenta-5: #d700d9;
  --magenta-6: #a800aa;
  --magenta-7: #79007a;
  --magenta-8: #4f1450;
  --magenta-9: #380c39;
  --white: #ffffff;
  --black: #000000;
  --shadow-lg: 0 10px 15px -3px rgba(0 0 0 / 10%), 0 4px 6px -2px rgba(0 0 0 / 5%);
  --sankaku-orange: #ff761c;
  --sankaku-orange-light: #ffa971;
  --rating-s-color: #39eb15;
  --rating-s-color-light: #83f36d;
  --rating-q-color: #fa32e9;
  --rating-q-color-light: #fc7ff1;
  --rating-e-color: #ff0a0e;
  --rating-e-color-light: #ff6669;
  --default-text-color-dark: #fff;
  --focus-outline-color-dark: #fff;
  --default-text-color-light: #000;
  --focus-outline-color-light: #000;
  --default-outline-color-dark: #606060;
  --panel-l1-color-dark: #333;
  --panel-l2-color-dark: #444;
  --default-outline-color-light: #999;
  --panel-l1-color-light: #EEE;
  --panel-l2-color-light: #DDD;
  --default-outline-color-amoled: #232323;
  --panel-l1-color-amoled: #222;
  --panel-l2-color-amoled: #333;
}
div.popup-menu a.default-popup-menu-button {
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.25rem;
}
div.popup-menu a.default-popup-menu-button[aria-expanded=true] {
  @include active-link;
}
div.popup-menu a.default-popup-menu-button:not([aria-expanded="true"]) {
  @include inactive-link;
}
div.popup-menu ul.popup-menu-content {
  display: none;
  list-style: none;
  padding: 0 1em 0.5em 0;
  margin-bottom: -0.4em;
}
div.popup-menu ul.popup-menu-content li a {
  display: flex;
  padding: 0.125em 0 0.25em 0;
  align-items: center;
}
div.popup-menu ul.popup-menu-content li a .icon {
  width: 1rem;
  margin-right: 0.25rem;
  margin-top: -0.1em;
  margin-left: -1em;
}
.reactions-tooltip {
  margin: -4px 0 0 0;
  padding: 5px 5px 5px 0px;
  max-height: 265px;
  overflow: auto;
}
.reactions-tooltip .reacters {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.favorites-tooltip {
  margin: -4px 0 0 0;
  padding: 5px 5px 5px 0px;
  max-height: 265px;
  overflow: auto;
}
.favorites-tooltip .favoriters {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.favorites-tooltip .favoriters i {
  font-size: 11px;
}
.votes-tooltip {
  margin: -4px 0 0 0;
  padding: 5px 5px 5px 0px;
  max-height: 265px;
  overflow: auto;
}
.votes-tooltip .voters {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.votes-tooltip .voters i {
  font-size: 11px;
}
.votes-tooltip .vote {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.votes-tooltip .vote p {
  margin-left: 1em;
  font-size: 13px;
  margin-bottom: -3.5px;
}
.feedbacks-tooltip {
  margin: -4px 0 0 0;
  padding: 5px 5px 5px 0px;
  max-height: 265px;
  overflow: auto;
}
.feedbacks-tooltip .feedbackers {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.feedbacks-tooltip .feedback {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.c-dmails-a-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.c-dmails-a-index .dmail-preview-container {
  width: 32%;
}
@media screen and (max-width: 1080px) {
  .c-dmails-a-index .dmail-preview-container {
    width: 48%;
  }
}
@media screen and (max-width: 800px) {
  .c-dmails-a-index .dmail-preview-container {
    width: 100%;
  }
}
.dmail-preview-container {
  display: inline-flex;
  flex-direction: column;
  border: 2px solid #333;
  border-radius: 10px;
  margin: 0.25em;
}
.dmail-preview-container .dmail-preview-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.25em 0.25em 0.15em 0.5em;
}
.dmail-preview-container .dmail-preview-title svg {
  min-width: 2em;
}
.dmail-preview-container .dmail-preview-users {
  margin: 0.5em 0 0 1em;
}
.dmail-preview-container .dmail-preview-header {
  margin-top: 0.5em;
  color: var(--grey-3);
  border-bottom: 2px solid #222;
  height: 21px;
}
.dmail-preview-container .dmail-preview-header .popup-menu {
  float: right;
}
.gap-2 {
  gap: 10px;
}
.post-gallery-grid .posts-container {
  display: grid;
  margin-bottom: 10px;
}
.post-gallery-grid .post-preview-container {
  display: flex;
  place-items: flex-end;
}
.post-gallery-inline .posts-container {
  overflow-x: auto;
  white-space: nowrap;
}
.post-gallery-inline article.post-preview {
  display: inline-block;
  padding: 0.5rem;
  vertical-align: top;
}
.post-gallery-inline article.post-preview .hidden {
  display: none;
}
div.user--profile_posts div.carousel .hidden {
  display: none;
}
@media screen and (min-width: 660px) {
  .post-gallery-grid.post-gallery-150 .post-preview-container {
    height: 150px;
  }
  .post-gallery-grid.post-gallery-180 .post-preview-container {
    height: 180px;
  }
  .post-gallery-grid.post-gallery-270 .post-preview-container {
    height: 270px;
  }
  .post-gallery-grid.post-gallery-150 .posts-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .post-gallery-grid.post-gallery-180 .posts-container {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .post-gallery-grid.post-gallery-225 .posts-container {
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  }
  .post-gallery-grid.post-gallery-270 .posts-container {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }
}
@media screen and (max-width: 660px) {
  .post-gallery-grid.post-gallery-150 .posts-container {
    grid-template-columns: repeat(3, minmax(0, 150px));
  }
  .post-gallery-grid.post-gallery-180 .posts-container {
    grid-template-columns: repeat(2, auto);
  }
  .post-gallery-grid.post-gallery-225 .posts-container {
    grid-template-columns: repeat(2, auto);
  }
  .post-gallery-grid.post-gallery-270 .posts-container {
    grid-template-columns: repeat(1, auto);
  }
}
article.post-preview .post-preview-link {
  display: block;
  position: relative;
  margin: 0 auto;
}
.post-preview-image {
  max-width: 100%;
  height: auto;
}
.post-preview-150 .post-preview-image {
  max-height: 150px;
  width: auto;
}
.post-preview-180 .post-preview-image {
  max-height: 180px;
  width: auto;
}
.post-preview-225 .post-preview-image {
  max-height: 225px;
  width: auto;
}
.post-preview-270 .post-preview-image {
  max-height: 270px;
  width: auto;
}
div.mail .received {
  color: #000;
}
div.mail .sent {
  color: #666;
}
div#mail-show div.message {
  margin-bottom: 4em;
}
div#mail-conversation div.message {
  margin-bottom: 0.5em;
}
div#mail-conversation {
  overflow-y: auto;
  padding-top: 1.25em;
  position: fixed;
  width: 99.5vw;
}
@media screen and (max-width: 800px) {
  div#mail-conversation {
    width: 98vw;
  }
}
.message-user {
  float: left;
  margin: 1em;
  text-align: center;
  color: #666;
  font-weight: bold;
  clear: both;
}
.message-user a {
  font-size: 1.25em;
}
.message-user-conversation {
  margin: 1em;
  color: #777;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  max-height: 50px;
  gap: 5px;
}
.message-top-bar {
  display: inline-flex;
  flex-direction: column;
}
.message .action-row-m {
  float: left;
  margin: 0 -1.75em;
}
.message h5 {
  margin-bottom: 0.5em;
  padding-top: 1em;
  align-items: center;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}
.message-group {
  border-bottom: 2px solid #666;
  padding: 0.5em 0 0.5em 0;
}
.message-body {
  width: 95vw;
  min-height: 35px;
}
.messages .message .message-body {
  width: 50vw;
}
.messages .message .action-row {
  display: none;
  float: right;
}
.messages .message:hover .action-row {
  display: flex;
  margin-top: -0.375em;
}
.message-group {
  display: flex;
}
.message-threader,
.message-return {
  border: 2px solid #DDD;
  border-radius: 15px;
  background: #EEE;
  padding: 7px 10px 7px 10px;
  display: flex;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  align-items: center;
}
.message-return + .message-group .messages {
  margin-top: 1em;
}
.thread-from {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.thread-preview {
  display: inline-flex;
  flex-direction: column;
  margin-top: 1px;
}
.thread-preview a {
  max-width: 10px;
}
.message-return {
  position: fixed;
}
.message-return + .message-group {
  padding-top: 3em;
}
.thread-expand {
  margin-left: auto;
  margin-top: 3px;
}
div.has-mail {
  border: 2px solid #DDD;
  padding: 0.25em;
  margin: 0.25em;
  background: #FAFAFA;
  font-size: 1.5em;
  text-align: center;
}
#mail-responder {
  position: fixed;
  bottom: 0px;
  background: #FAFAFA;
  border: 2px solid #DDD;
  padding-left: 15px;
}
#mail-responder input[type=button] {
  margin-left: 25px;
}
.thread-title {
  text-align: center;
  margin-top: -1em;
}
form.inline-form {
  display: table;
  width: 100%;
}
form.inline-form > div.input {
  display: table-row;
  line-height: 2em;
}
form.inline-form > div.input label {
  text-align: right;
  padding-right: 1em;
  white-space: nowrap;
  width: 1%;
}
form.inline-form > div.input label,
form.inline-form > div.input input {
  display: table-cell;
  line-height: 1em;
}
/*!
  Theme: GitHub Dark Dimmed
  Description: Dark dimmed theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Colors taken from GitHub's CSS
*/