/* 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;
  padding: 5px;
  height: 17px;
}
.user-tooltip-name {
  margin-left: 5px;
}
.user-tooltip-feedback {
  margin-left: auto;
  margin-right: 10px;
  padding-top: 2.5px;
}
.user-tooltip-badge-positive-feedback {
  color: #DAA520;
  background: rgba(218, 165, 32, 0.125);
  padding: 3px 2px 2px 2px;
  border: 1px solid #DAA520;
  border-radius: 5px;
}
.user-tooltip-badge-negative-feedback {
  margin-left: 3px;
  color: #B22222;
  background: rgba(178, 34, 34, 0.125);
  padding: 3px 2px 2px 2px;
  border: 1px solid #B22222;
  border-radius: 5px;
}
.user-tooltip-last-seen-stat,
.user-tooltip-created-at-stat {
  color: var(--grey-4);
  margin-left: 0.25em;
}
.user-tooltip-last-seen-item {
  padding-left: 10px;
}
.user-tooltip-header-top {
  margin: 4px 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  width: 350px;
}
.user-tooltip-header-bottom {
  display: flex;
  justify-content: center;
  margin: -1em 1em 0.5em 0.5em;
}
.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/tables.css */
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: rgb(230, 255, 230);
}
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;
}
#wiki-table {
  margin-left: 1em;
}
.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;
}

/* app/javascript/src/styles/companions.css */
.companion--block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.companion--container {
  width: 325px;
  border: 2px solid #FF761C;
  padding: 0 5px;
  margin: 5px 5px;
  border-radius: 3px;
}
.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 #FF761C;
  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;
}
.hidden {
  display: none;
}
.companion--toggle_button span img,
.companion--draggable_content span img {
  border: 1.75px solid #FF761C;
  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^="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: 50px;
  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 {
  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 {
  padding-right: 15px;
}
#p--tooltip-votes svg {
  margin-top: -1px;
}
#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;
}

/* app/javascript/application.less */
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%);
}
div.popup-menu a.default-popup-menu-button {
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.25rem;
  color: var(--muted-text-color);
}
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;
}
div.popup-menu ul.popup-menu-content li a .icon {
  width: 1rem;
  margin-right: 0.25rem;
  margin-top: -0.2em;
  margin-left: -1em;
}