@font-face {
  font-family: "Arial Narrow";
  src: url("../fonts/arialn.ttf") format("truetype"); }
@font-face {
  font-family: "Friz Quadrata TT";
  src: url("../fonts/frizqt__.ttf") format("truetype"); }
* {
  scrollbar-width: thin;
  scrollbar-color: #4a4644 #161211; }
  *::-webkit-scrollbar {
    width: 16px; }
    *::-webkit-scrollbar-track {
      background: #161211; }
    *::-webkit-scrollbar-thumb {
      background-color: #4a4644;
      border: 4px solid #161211; }

input[type="number"] {
  -moz-appearance: textfield; }
  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }

body {
  align-items: center;
  background-color: #060100;
  color: #EEE;
  display: flex;
  font: 16px sans-serif;
  min-height: 400px;
  height: 100vh;
  margin: 0; }
  body a {
    color: #EEE; }

.main {
  background-color: #393433;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0 auto;
  min-height: 400px;
  max-height: 800px;
  max-width: 1050px;
  user-select: none;
  width: 100%; }
  @media screen and (max-width: 600px) {
    .main {
      max-height: none; } }
  .main .search-bar {
    display: flex;
    margin: 8px 8px 0; }
    .main .search-bar > * {
      flex: 1 1;
      margin: 8px; }
    .main .search-bar select, .main .search-bar input[type="text"], .main .search-bar input[type="number"], .main .search-bar > div.filter, .main .search-bar button {
      font: 12.8px "Friz Quadrata TT", sans-serif; }
    .main .search-bar select, .main .search-bar input[type="text"] {
      background-color: #282322;
      border: 2px solid;
      border-color: #060100 #060100 #4a4644;
      border-radius: 8px;
      color: #EEE;
      padding: 4px; }
    .main .search-bar div.text-container {
      flex: 5 1;
      position: relative; }
      .main .search-bar div.text-container .text-reset {
        background-image: url("../images/clear-search.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        opacity: 0.5;
        position: absolute;
        right: 4px;
        top: 0;
        width: 1em;
        z-index: 10; }
        .main .search-bar div.text-container .text-reset:hover {
          opacity: 1; }
      .main .search-bar div.text-container input[type="text"] {
        background-image: linear-gradient(rgba(40, 35, 34, 0.5), rgba(40, 35, 34, 0.5)), url("../images/eyeglass.png");
        background-position: 3px center;
        background-repeat: no-repeat;
        background-size: 1.25em;
        box-sizing: border-box;
        height: 100%;
        padding-left: 2em;
        width: 100%; }
        .main .search-bar div.text-container input[type="text"]:placeholder-shown + .text-reset {
          display: none; }
      .main .search-bar div.text-container .datalist {
        background-color: rgba(1, 7, 33, 0.8);
        border: 1px solid;
        border-color: #cfcfcf #777 #7f7f7f;
        border-radius: 4px;
        box-shadow: 0 0 1px 1px black;
        padding: 8px;
        z-index: 10;
        background-color: #282322;
        box-sizing: border-box;
        display: none;
        font: 12.8px "Friz Quadrata TT", sans-serif;
        max-height: calc((1.333em + 8px) * 4 + 1px * 2);
        left: 2em;
        overflow-y: auto;
        padding: 0;
        position: absolute;
        top: calc(100% + 2px);
        width: calc(100% - 2em); }
        .main .search-bar div.text-container .datalist div {
          cursor: pointer;
          overflow: hidden;
          padding: 4px 8px;
          padding-left: 35px;
          position: relative;
          text-overflow: ellipsis;
          white-space: nowrap; }
          .main .search-bar div.text-container .datalist div:empty {
            display: none; }
          .main .search-bar div.text-container .datalist div.selected {
            background-color: #393433;
            font-weight: bold; }
          .main .search-bar div.text-container .datalist div img {
            border: 1px solid #808080;
            border-right-color: #555;
            border-bottom-color: #555;
            border-radius: 4px;
            height: 16px;
            left: 12px;
            position: absolute;
            top: 3px;
            width: 16px; }
      .main .search-bar div.text-container[data-with-focus] .datalist[data-with-items] {
        display: block; }
    .main .search-bar button, .main .search-bar > div.filter, .main .search-bar > div.favorite {
      background-color: #282322;
      border: 2px solid;
      border-color: #393433 #312c2a #161211;
      border-radius: 6px;
      color: #EEE;
      font: 12.8px "Friz Quadrata TT", sans-serif;
      text-shadow: 1px 1px 2px #000;
      max-width: 10em; }
      .main .search-bar button:hover, .main .search-bar > div.filter:hover, .main .search-bar > div.favorite:hover {
        background-color: #8080ff;
        box-shadow: inset 0 0 10px 10px #282322; }
      .main .search-bar button.favorite, .main .search-bar > div.filter.favorite, .main .search-bar > div.favorite.favorite {
        background-image: url("../images/favorite-star-off.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: calc(100% - 2px);
        flex: 0 0 auto;
        width: 2em;
        height: 2em; }
        .main .search-bar button.favorite[data-enabled], .main .search-bar > div.filter.favorite[data-enabled], .main .search-bar > div.favorite.favorite[data-enabled] {
          background-image: url("../images/favorite-star.png"); }
        .main .search-bar button.favorite:hover, .main .search-bar > div.filter.favorite:hover, .main .search-bar > div.favorite.favorite:hover {
          background-color: #282322;
          box-shadow: none; }
      .main .search-bar button.search, .main .search-bar > div.filter.search, .main .search-bar > div.favorite.search {
        background-color: #282322;
        border: 2px solid;
        border-color: #393433 #312c2a #161211;
        border-radius: 6px;
        color: #EEE;
        font: 12.8px "Friz Quadrata TT", sans-serif;
        text-shadow: 1px 1px 2px #000;
        background-color: #640000;
        border-color: #6e1414 #6e1414 #460000;
        color: #ffd100;
        font-size: 17.6px; }
        .main .search-bar button.search:hover, .main .search-bar > div.filter.search:hover, .main .search-bar > div.favorite.search:hover {
          background-color: #8080ff;
          box-shadow: inset 0 0 10px 10px #282322; }
        .main .search-bar button.search:hover, .main .search-bar > div.filter.search:hover, .main .search-bar > div.favorite.search:hover {
          background-color: #6c0d0d;
          box-shadow: none;
          color: #EEE; }
      .main .search-bar button.filter, .main .search-bar > div.filter.filter, .main .search-bar > div.favorite.filter {
        align-items: center;
        display: flex;
        justify-content: center;
        line-height: 2;
        min-width: 5em;
        padding-right: 1em;
        position: relative; }
        @media screen and (max-height: 500px) {
          .main .search-bar button.filter, .main .search-bar > div.filter.filter, .main .search-bar > div.favorite.filter {
            line-height: 1; } }
        .main .search-bar button.filter::after, .main .search-bar > div.filter.filter::after, .main .search-bar > div.favorite.filter::after {
          background-image: url("../images/triangle-arrow.png");
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
          bottom: 0;
          content: "";
          position: absolute;
          right: 4px;
          top: 0;
          width: 0.666em; }
        .main .search-bar button.filter div, .main .search-bar > div.filter.filter div, .main .search-bar > div.favorite.filter div {
          background-color: rgba(1, 7, 33, 0.8);
          border: 1px solid;
          border-color: #cfcfcf #777 #7f7f7f;
          border-radius: 4px;
          box-shadow: 0 0 1px 1px black;
          padding: 8px;
          z-index: 10;
          display: none;
          min-width: 15em;
          position: absolute;
          right: calc(-100% - 24px);
          text-align: left;
          top: calc(100% + 4px);
          width: calc(200% + 4px); }
          .main .search-bar button.filter div input, .main .search-bar > div.filter.filter div input, .main .search-bar > div.favorite.filter div input {
            margin: 0;
            position: relative;
            top: 2px; }
          .main .search-bar button.filter div input[type="number"], .main .search-bar > div.filter.filter div input[type="number"], .main .search-bar > div.favorite.filter div input[type="number"] {
            background-color: #282322;
            border: 2px solid;
            border-color: #060100 #060100 #4a4644;
            border-radius: 8px;
            color: #EEE;
            padding: 0 0.5em;
            text-align: right;
            width: 3em; }
          .main .search-bar button.filter div table.rarity td:first-child, .main .search-bar > div.filter.filter div table.rarity td:first-child, .main .search-bar > div.favorite.filter div table.rarity td:first-child {
            text-align: right; }
    @media screen and (max-width: 700px) {
      .main .search-bar {
        flex-flow: row wrap; }
        .main .search-bar > div.filter.filter div {
          left: -100%;
          right: 0;
          width: unset; }
        .main .search-bar > select {
          order: 1; }
        .main .search-bar > div.filter.filter {
          order: 2; }
        .main .search-bar > div.favorite {
          order: 3; }
        .main .search-bar > div.text-container {
          order: 4;
          min-width: 50%; }
        .main .search-bar > button.search {
          order: 5; } }
  .main .main-result {
    display: flex;
    flex: 1 1; }
    @media screen and (max-width: 550px) {
      .main .main-result {
        flex-direction: column; } }
    .main .main-result > div {
      margin: 8px; }
    .main .main-result .categories {
      bottom: 4px;
      left: 4px;
      overflow-y: auto;
      position: absolute;
      right: 4px;
      top: 4px; }
      .main .main-result .categories::-webkit-scrollbar-thumb {
        border-right: 0;
        border-left-width: 6px; }
      .main .main-result .categories-parent {
        background-color: #161211;
        border: 2px solid;
        border-color: #060100 #161211 #4a4644;
        border-radius: 8px;
        flex: 2 1;
        position: relative;
        margin: 8px 0 8px 8px;
        max-width: 200px;
        min-width: 150px; }
        @media screen and (max-width: 600px) {
          .main .main-result .categories-parent {
            max-width: calc(100% - 20px);
            margin-bottom: 0; } }
      .main .main-result .categories > div {
        background-color: #282322;
        border: 2px solid;
        border-color: #393433 #282322 #161211;
        border-radius: 8px;
        color: #CA4;
        cursor: pointer;
        font: 13.6px "Friz Quadrata TT", sans-serif;
        margin: 4px 0;
        overflow: hidden;
        padding: 4px 6px;
        text-overflow: ellipsis;
        text-shadow: 1px 1px 1px #000;
        white-space: nowrap; }
        .main .main-result .categories > div:first-child {
          margin-top: 0; }
        .main .main-result .categories > div[data-selected] {
          box-shadow: inset 0 0 8px 2px #ff6; }
        .main .main-result .categories > div:hover {
          border-color: #aaf;
          box-shadow: inset 0 0 20px 2px #8080ff;
          color: #EEE; }
        @media screen and (max-width: 550px) {
          .main .main-result .categories > div {
            font-size: 11.2px; } }
      .main .main-result .categories .subcategory, .main .main-result .categories .subsubcategory {
        color: #DDD;
        margin-left: 16px; }
        .main .main-result .categories .subcategory:not([data-visible]), .main .main-result .categories .subsubcategory:not([data-visible]) {
          display: none; }
      .main .main-result .categories .subsubcategory {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        padding-left: 16px;
        position: relative; }
        .main .main-result .categories .subsubcategory:after {
          background-image: url("../images/subsub.png");
          background-repeat: no-repeat;
          background-size: contain;
          bottom: 4px;
          content: '';
          left: 4px;
          position: absolute;
          top: 4px;
          width: 8px; }
        .main .main-result .categories .subsubcategory[data-selected] {
          box-shadow: none;
          background: linear-gradient(90deg, rgba(230, 179, 53, 0.1) 0%, rgba(230, 179, 53, 0.6) 40%, rgba(230, 179, 53, 0.6) 60%, rgba(230, 179, 53, 0.1) 100%); }
        .main .main-result .categories .subsubcategory:hover {
          box-shadow: none;
          background: linear-gradient(90deg, rgba(128, 128, 255, 0.1) 0%, rgba(128, 128, 255, 0.6) 40%, rgba(128, 128, 255, 0.6) 60%, rgba(128, 128, 255, 0.1) 100%); }
    .main .main-result .welcome {
      bottom: 4px;
      font: 16px "Friz Quadrata TT", sans-serif;
      left: 4px;
      overflow-y: auto;
      position: absolute;
      right: 4px;
      text-align: center;
      top: 4px; }
      .main .main-result .welcome h1:first-child {
        margin-top: 0; }
      .main .main-result .welcome div {
        margin: 2em 0; }
      .main .main-result .welcome div:last-child {
        margin-top: 5em; }
      .main .main-result .welcome .full-screen button {
        background-color: #282322;
        border: 2px solid;
        border-color: #393433 #312c2a #161211;
        border-radius: 6px;
        color: #EEE;
        font: 12.8px "Friz Quadrata TT", sans-serif;
        text-shadow: 1px 1px 2px #000;
        margin: 0 2em;
        padding: 8px; }
        .main .main-result .welcome .full-screen button:hover {
          background-color: #8080ff;
          box-shadow: inset 0 0 10px 10px #282322; }
    .main .main-result .search-result, .main .main-result .item {
      flex: 7 1;
      font: 19px "Arial Narrow", sans-serif;
      position: relative; }
    .main .main-result .search-result {
      background-color: #161211;
      background: linear-gradient(180deg, #161211 0%, #201b1a 100%);
      border: 2px solid;
      border-color: #060100 #161211 #4a4644;
      border-radius: 8px; }
      .main .main-result .search-result .search-result-border {
        border: 1px solid #393433;
        border-top: 0;
        border-radius: 4px;
        bottom: 4px;
        left: 4px;
        overflow-y: auto;
        position: absolute;
        right: 4px;
        top: 4px; }
        .main .main-result .search-result .search-result-border:empty {
          display: none; }
      @media screen and (max-width: 750px) {
        .main .main-result .search-result {
          font-size: 80%; } }
      .main .main-result .search-result table {
        border-radius: 8px 8px 0 0;
        border-spacing: 0;
        width: 100%; }
        .main .main-result .search-result table thead {
          background-color: #282322;
          border-radius: 8px 8px 0 0;
          font: 12.8px "Friz Quadrata TT", sans-serif; }
          .main .main-result .search-result table thead td {
            border: 1px solid #4a4644;
            border-bottom-color: #393433;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            padding: 4px 0 4px 4px; }
            .main .main-result .search-result table thead td:first-child {
              border-left: 0; }
            .main .main-result .search-result table thead td:last-child {
              border-right: 0; }
            .main .main-result .search-result table thead td[data-sort]::after {
              background-image: url("../images/sort-arrow.png");
              background-repeat: no-repeat;
              background-size: contain;
              content: "";
              display: inline-block;
              height: 1em;
              margin-left: 0.25em;
              position: relative;
              top: 2px;
              width: 1em; }
            .main .main-result .search-result table thead td[data-sort="asc"]::after {
              transform: scaleY(-1); }
            .main .main-result .search-result table thead td:hover {
              background-color: #8080ff;
              box-shadow: inset 0 0 10px 10px #282322; }
        .main .main-result .search-result table tbody tr.vendor-flip {
          background: linear-gradient(90deg, rgba(230, 179, 53, 0.1) 0%, rgba(230, 179, 53, 0.6) 40%, rgba(230, 179, 53, 0.6) 60%, rgba(230, 179, 53, 0.1) 100%); }
        .main .main-result .search-result table tbody tr:hover {
          background: linear-gradient(90deg, rgba(128, 128, 255, 0) 0%, rgba(128, 128, 255, 0.6) 20%, rgba(128, 128, 255, 0.6) 80%, rgba(128, 128, 255, 0) 100%); }
          .main .main-result .search-result table tbody tr:hover span.favorite {
            visibility: visible !important; }
        .main .main-result .search-result table tbody tr:not(.message):nth-child(n+500) {
          display: none; }
        .main .main-result .search-result table tbody tr.message td {
          padding: 16px;
          text-align: center; }
        .main .main-result .search-result table tbody tr.message:hover {
          background: unset; }
        .main .main-result .search-result table tbody td {
          padding: 2px 8px; }
          .main .main-result .search-result table tbody td.price {
            text-align: right;
            width: 175px;
            padding-top: 0; }
            .main .main-result .search-result table tbody td.price .silver {
              display: inline-block;
              width: 1.75em; }
            .main .main-result .search-result table tbody td.price > * {
              position: relative;
              top: 2px; }
            .main .main-result .search-result table tbody td.price > a {
              height: calc(1.25em + 4px);
              left: 0;
              position: absolute;
              right: 0;
              top: unset;
              z-index: 5; }
          .main .main-result .search-result table tbody td.name {
            max-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 50%; }
            .main .main-result .search-result table tbody td.name a {
              text-decoration: none; }
            .main .main-result .search-result table tbody td.name img {
              border: 1px solid #808080;
              border-right-color: #555;
              border-bottom-color: #555;
              border-radius: 4px;
              height: 1em;
              margin-right: 6px;
              position: relative;
              top: 2px;
              width: 1em; }
          .main .main-result .search-result table tbody td.quantity {
            padding-right: 1em;
            position: relative; }
            .main .main-result .search-result table tbody td.quantity .delta-timestamp {
              font-size: 70%;
              padding-left: 1em;
              white-space: nowrap; }
            .main .main-result .search-result table tbody td.quantity span.favorite {
              background-image: url("../images/favorite-star-off.png");
              background-position: center center;
              background-repeat: no-repeat;
              background-size: contain;
              bottom: 0;
              position: absolute;
              right: 0;
              top: 0;
              visibility: hidden;
              width: calc(1em + 2px);
              z-index: 10; }
              .main .main-result .search-result table tbody td.quantity span.favorite[data-favorite] {
                background-image: url("../images/favorite-star.png");
                visibility: visible; }
        .main .main-result .search-result table tbody[data-side-icon] td.name img {
          margin-left: calc(1em + 8px); }
        .main .main-result .search-result table tbody[data-side-icon] td.name[data-side-icon] img {
          margin-left: 0; }
    .main .main-result .item {
      display: none;
      flex-direction: column; }
      .main .main-result .item button {
        background-color: #282322;
        border: 2px solid;
        border-color: #393433 #312c2a #161211;
        border-radius: 6px;
        color: #EEE;
        font: 12.8px "Friz Quadrata TT", sans-serif;
        text-shadow: 1px 1px 2px #000;
        background-color: #640000;
        border-color: #6e1414 #6e1414 #460000;
        color: #ffd100;
        font-size: 17.6px;
        padding: 0 3em; }
        .main .main-result .item button:hover {
          background-color: #8080ff;
          box-shadow: inset 0 0 10px 10px #282322; }
        .main .main-result .item button:hover {
          background-color: #6c0d0d;
          box-shadow: none;
          color: #EEE; }
      .main .main-result .item .back-bar {
        align-items: flex-end;
        display: flex;
        justify-content: space-between;
        margin: 8px; }
        @media screen and (max-width: 600px) {
          .main .main-result .item .back-bar {
            margin-top: 0; } }
        .main .main-result .item .back-bar .alt-realm {
          flex: 1 1;
          margin: 0 8px;
          text-shadow: 1px 1px 1px #000; }
        .main .main-result .item .back-bar .available {
          color: #CA4;
          font: 14.4px "Friz Quadrata TT", sans-serif;
          text-shadow: 1px 1px 1px #000; }
      .main .main-result .item .panels {
        display: flex;
        flex: 1 1; }
        @media screen and (max-width: 700px) {
          .main .main-result .item .panels {
            flex-direction: column;
            font-size: 80%; } }
        .main .main-result .item .panels > div {
          border: 2px solid;
          border-color: #060100 #161211 #4a4644;
          border-radius: 8px;
          padding: 4px;
          position: relative; }
          .main .main-result .item .panels > div .scroller {
            bottom: 4px;
            left: 4px;
            overflow-y: auto;
            position: absolute;
            right: 4px;
            top: 4px; }
          .main .main-result .item .panels > div.details {
            background-color: #282322;
            flex: 14 1; }
            .main .main-result .item .panels > div.details .title {
              align-items: center;
              background-color: #201b1a;
              border: 2px solid;
              border-color: #060100 #161211 #4a4644;
              border-radius: 8px;
              display: flex;
              font: 28px "Friz Quadrata TT", sans-serif;
              margin: 16px;
              padding: 16px; }
              @media screen and (max-width: 700px) {
                .main .main-result .item .panels > div.details .title {
                  font-size: 20px; } }
              .main .main-result .item .panels > div.details .title a {
                text-decoration: none; }
              .main .main-result .item .panels > div.details .title .icon {
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
                border-radius: 2em;
                display: inline-block;
                height: 2em;
                margin-right: 0.75em;
                position: relative;
                width: 2em; }
                .main .main-result .item .panels > div.details .title .icon:after {
                  background-image: url("../images/ring-1.png");
                  background-position: center center;
                  background-repeat: no-repeat;
                  background-size: contain;
                  bottom: -0.5em;
                  content: "";
                  left: -0.5em;
                  position: absolute;
                  right: -0.5em;
                  top: -0.5em; }
                .main .main-result .item .panels > div.details .title .icon[data-quality="0"]:after {
                  background-image: url("../images/ring-0.png"); }
                .main .main-result .item .panels > div.details .title .icon[data-quality="2"]:after {
                  background-image: url("../images/ring-2.png"); }
                .main .main-result .item .panels > div.details .title .icon[data-quality="3"]:after {
                  background-image: url("../images/ring-3.png"); }
                .main .main-result .item .panels > div.details .title .icon[data-quality="4"]:after {
                  background-image: url("../images/ring-4.png"); }
                .main .main-result .item .panels > div.details .title .icon[data-quality="5"]:after {
                  background-image: url("../images/ring-5.png"); }
            .main .main-result .item .panels > div.details .framed {
              border-top: 2px solid #393433;
              margin: 32px 8px;
              padding: 16px 4px 4px;
              position: relative; }
              .main .main-result .item .panels > div.details .framed .frame-title {
                background-color: #282322;
                color: #DDD;
                font: 15.2px "Arial Narrow", sans-serif;
                left: 8px;
                line-height: 1.25em;
                padding: 0 8px;
                position: absolute;
                top: -0.625em; }
            .main .main-result .item .panels > div.details .quantity-calc table, .main .main-result .item .panels > div.details .base-stats table {
              margin: 0 auto; }
              .main .main-result .item .panels > div.details .quantity-calc table td, .main .main-result .item .panels > div.details .base-stats table td {
                text-align: right;
                width: 7em; }
                .main .main-result .item .panels > div.details .quantity-calc table td:first-child, .main .main-result .item .panels > div.details .base-stats table td:first-child {
                  padding: 0.25em 1em 0.25em 0; }
              .main .main-result .item .panels > div.details .quantity-calc table tr.header td, .main .main-result .item .panels > div.details .quantity-calc table td:first-child, .main .main-result .item .panels > div.details .base-stats table tr.header td, .main .main-result .item .panels > div.details .base-stats table td:first-child {
                color: #CA4;
                font: 16px "Friz Quadrata TT", sans-serif;
                vertical-align: middle;
                width: auto; }
                @media screen and (max-width: 700px) {
                  .main .main-result .item .panels > div.details .quantity-calc table tr.header td, .main .main-result .item .panels > div.details .quantity-calc table td:first-child, .main .main-result .item .panels > div.details .base-stats table tr.header td, .main .main-result .item .panels > div.details .base-stats table td:first-child {
                    font-size: 12.8px; } }
            .main .main-result .item .panels > div.details .quantity-calc input, .main .main-result .item .panels > div.details .base-stats input {
              background-color: #161211;
              border: 5px double;
              border-color: #4a4644;
              border-radius: 8px;
              box-sizing: border-box;
              color: #EEE;
              font: 19px "Arial Narrow", sans-serif;
              padding: 4px 8px;
              width: 100%; }
            .main .main-result .item .panels > div.details .quantity-calc .price, .main .main-result .item .panels > div.details .base-stats .price {
              display: inline-block;
              text-align: right; }
            .main .main-result .item .panels > div.details .quantity-calc .silver, .main .main-result .item .panels > div.details .base-stats .silver {
              display: inline-block;
              width: 1.75em; }
            .main .main-result .item .panels > div.details .charts-container {
              margin: 8px; }
              .main .main-result .item .panels > div.details .charts-container .chart-wrapper {
                background-color: #201b1a;
                border: 2px solid;
                border-color: #060100 #161211 #4a4644;
                border-radius: 8px;
                box-sizing: border-box;
                overflow: hidden;
                position: relative; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper svg {
                  height: 100%;
                  position: absolute;
                  top: 2px;
                  width: 100%; }
                  .main .main-result .item .panels > div.details .charts-container .chart-wrapper svg * {
                    pointer-events: none; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper line, .main .main-result .item .panels > div.details .charts-container .chart-wrapper polyline {
                  stroke-width: 15; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper polyline.price {
                  fill: none;
                  stroke: #88F; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper polygon.price {
                  fill: rgba(136, 136, 255, 0.5); }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper polyline.quantity {
                  fill: none;
                  stroke: #F88; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper polygon.quantity {
                  fill: rgba(255, 136, 136, 0.5);
                  stroke: #F88; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper line.hover {
                  stroke: #CA4;
                  visibility: hidden; }
                .main .main-result .item .panels > div.details .charts-container .chart-wrapper:hover line.hover {
                  visibility: visible; }
            .main .main-result .item .panels > div.details .other-realms-container .check-container {
              text-align: right; }
            .main .main-result .item .panels > div.details .other-realms-container .list {
              background-color: #201b1a;
              border: 2px solid;
              border-color: #060100 #161211 #4a4644;
              border-radius: 8px;
              max-height: 18em;
              overflow: auto;
              width: 100%; }
            .main .main-result .item .panels > div.details .other-realms-container table {
              border-collapse: collapse;
              position: relative;
              width: 100%; }
              .main .main-result .item .panels > div.details .other-realms-container table thead {
                background-color: #282322;
                border-radius: 8px 8px 0 0;
                font: 12.8px "Friz Quadrata TT", sans-serif; }
                .main .main-result .item .panels > div.details .other-realms-container table thead td {
                  border: 1px solid #4a4644;
                  border-bottom-color: #393433;
                  border-radius: 4px 4px 0 0;
                  cursor: pointer;
                  padding: 4px 0 4px 4px; }
                  .main .main-result .item .panels > div.details .other-realms-container table thead td:first-child {
                    border-left: 0; }
                  .main .main-result .item .panels > div.details .other-realms-container table thead td:last-child {
                    border-right: 0; }
                  .main .main-result .item .panels > div.details .other-realms-container table thead td[data-sort]::after {
                    background-image: url("../images/sort-arrow.png");
                    background-repeat: no-repeat;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 1em;
                    margin-left: 0.25em;
                    position: relative;
                    top: 2px;
                    width: 1em; }
                  .main .main-result .item .panels > div.details .other-realms-container table thead td[data-sort="asc"]::after {
                    transform: scaleY(-1); }
                  .main .main-result .item .panels > div.details .other-realms-container table thead td:hover {
                    background-color: #8080ff;
                    box-shadow: inset 0 0 10px 10px #282322; }
              .main .main-result .item .panels > div.details .other-realms-container table tbody tr:hover {
                background: linear-gradient(90deg, rgba(128, 128, 255, 0) 0%, rgba(128, 128, 255, 0.6) 20%, rgba(128, 128, 255, 0.6) 80%, rgba(128, 128, 255, 0) 100%); }
              .main .main-result .item .panels > div.details .other-realms-container table tbody td {
                overflow: hidden;
                padding-left: 8px;
                text-align: right;
                text-overflow: ellipsis;
                white-space: nowrap; }
                .main .main-result .item .panels > div.details .other-realms-container table tbody td:first-child {
                  font: 16px "Friz Quadrata TT", sans-serif;
                  text-align: left; }
                  @media screen and (max-width: 700px) {
                    .main .main-result .item .panels > div.details .other-realms-container table tbody td:first-child {
                      font-size: 12.8px; } }
                  .main .main-result .item .panels > div.details .other-realms-container table tbody td:first-child > a {
                    height: 1.25em;
                    left: 0;
                    position: absolute;
                    right: 0;
                    z-index: 5; }
                .main .main-result .item .panels > div.details .other-realms-container table tbody td:last-child {
                  padding-right: 8px; }
              .main .main-result .item .panels > div.details .other-realms-container table:not([data-with-connected-realms]) tr[data-connected-realm] {
                display: none; }
            .main .main-result .item .panels > div.details .other-realms-container .silver {
              display: inline-block;
              width: 1.75em; }
          .main .main-result .item .panels > div.auctions {
            background-color: #161211;
            flex: 6 1;
            margin-left: 8px; }
            @media screen and (max-width: 700px) {
              .main .main-result .item .panels > div.auctions {
                margin-left: 0; } }
            .main .main-result .item .panels > div.auctions table {
              border-collapse: collapse;
              width: 100%; }
              .main .main-result .item .panels > div.auctions table tr {
                background: linear-gradient(180deg, #161211 0%, #201b1a 100%); }
                .main .main-result .item .panels > div.auctions table tr[data-selected] {
                  background: linear-gradient(90deg, rgba(230, 179, 53, 0.1) 0%, rgba(230, 179, 53, 0.6) 40%, rgba(230, 179, 53, 0.6) 60%, rgba(230, 179, 53, 0.1) 100%); }
                .main .main-result .item .panels > div.auctions table tr[data-selected="part"] {
                  background: linear-gradient(90deg, rgba(230, 179, 53, 0.1) 0%, rgba(230, 179, 53, 0.34) 40%, rgba(230, 179, 53, 0.34) 60%, rgba(230, 179, 53, 0.1) 100%); }
                .main .main-result .item .panels > div.auctions table tr:hover {
                  background: linear-gradient(90deg, rgba(128, 128, 255, 0) 0%, rgba(128, 128, 255, 0.6) 20%, rgba(128, 128, 255, 0.6) 80%, rgba(128, 128, 255, 0) 100%); }
              .main .main-result .item .panels > div.auctions table td {
                text-align: right;
                width: 50%; }
                .main .main-result .item .panels > div.auctions table td .silver {
                  display: inline-block;
                  width: 1.75em; }
                .main .main-result .item .panels > div.auctions table td a {
                  display: block; }
    .main .main-result[data-detail-mode] .item {
      display: flex; }
    .main .main-result[data-detail-mode] .search-result {
      display: none; }
  .main .bottom-bar {
    display: flex;
    font-size: 75%;
    justify-content: space-between;
    margin: 8px;
    margin-top: 0;
    color: #CCC; }
    .main .bottom-bar a {
      color: #CCC; }
    .main .bottom-bar select {
      background-color: #282322;
      border: 2px solid;
      border-color: #060100 #060100 #4a4644;
      border-radius: 8px;
      color: #EEE;
      font: 12.8px "Friz Quadrata TT", sans-serif;
      padding: 0 4px; }
    .main .bottom-bar .last-updated {
      margin-left: 2em;
      text-align: right; }

.main .gold, .main .silver, .main .copper, .shatari-tooltip .gold, .shatari-tooltip .silver, .shatari-tooltip .copper {
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-right: 1em; }
.main .gold, .shatari-tooltip .gold {
  background-image: url("../images/coin-gold.png"); }
.main .silver, .shatari-tooltip .silver {
  background-image: url("../images/coin-silver.png"); }
.main .copper, .shatari-tooltip .copper {
  background-image: url("../images/coin-copper.png"); }

.shatari-tooltip .gold, .shatari-tooltip .silver, .shatari-tooltip .copper {
  background-position: right center; }
.shatari-tooltip .silver, .shatari-tooltip .copper {
  display: inline-block;
  min-width: 1.5em; }

.wowhead-tooltip td .shatari-tooltip {
  min-width: 15em; }
  .wowhead-tooltip td .shatari-tooltip td.date {
    padding-bottom: 0.5em; }
  .wowhead-tooltip td .shatari-tooltip td.price {
    color: #88F; }
  .wowhead-tooltip td .shatari-tooltip td.quantity {
    color: #F88; }
  .wowhead-tooltip td .shatari-tooltip td:nth-child(2) {
    text-align: right; }
.wowhead-tooltip td .battle-pet-tooltip {
  display: flex;
  justify-content: space-between; }
  .wowhead-tooltip td .battle-pet-tooltip > div:first-child {
    margin-right: 30px; }
    .wowhead-tooltip td .battle-pet-tooltip > div:first-child img {
      height: 16px;
      margin-top: 2px;
      vertical-align: text-bottom;
      width: 16px; }
  .wowhead-tooltip td .battle-pet-tooltip > div:last-child {
    margin-left: 30px;
    text-align: right; }
    .wowhead-tooltip td .battle-pet-tooltip > div:last-child img {
      height: 39px;
      margin-top: 4px;
      width: 39px; }

picture.model-thumbnail img {
  background-color: #161211; }

body > .wowhead-tooltip {
  max-width: 320px !important;
  width: auto !important; }
  body > .wowhead-tooltip .wowhead-tooltip-powered {
    display: none !important; }

/*# sourceMappingURL=main.css.map */
