/* 
**
** Colors 
**
*/
:root {
  --death-knight-color: #c41e3a;
  --demon-hunter-color: #a330c9;
  --druid-color: #ff7c0a;
  --evoker-color: #33937f;
  --hunter-color: #aad372;
  --mage-color: #3fc7eb;
  --monk-color: #00ff98;
  --paladin-color: #f48cba;
  --priest-color: #ffffff;
  --rogue-color: #fff468;
  --shaman-color: #0070dd;
  --warlock-color: #8788ee;
  --warrior-color: #c69b6d;
  --battlenet-color: #0074e0;
  --blue_post_color: #06aeff;

  --item-rare: #00ff00;
  --item-superior: #0776eb;
  --item-epic: #bc01f2;
  --item-legendary: #ff8001;
  --item-artifact: #d3bd77;

  --background-over-icon: rgba(0, 0, 0, 0.5);

  --twitch_color: #9147ff;
}

/* 
**
** Sizes 
**
*/
:root {
  --widget-height: 420px;
  --chart-border-radius: 24px;
  --poppable_item_width: 360px;
  --poppable_item_fullscreen_width: 480px;
}

/* 
**
** Classes 
**
*/
.death-knight-color {
  color: var(--death-knight-color);
  --accent_color: var(--death-knight-color);
}

.death-knight-media {
  --media_object_media_border_color: var(--death-knight-color);
}

.demon-hunter-color {
  color: var(--demon-hunter-color);
  --accent_color: var(--demon-hunter-color);
}

.demon-hunter-media {
  --media_object_media_border_color: var(--demon-hunter-color);
}

.druid-color {
  color: var(--druid-color);
  --accent_color: var(--druid-color);
}

.druid-media {
  --media_object_media_border_color: var(--druid-color);
}

.evoker-color {
  color: var(--evoker-color);
  --accent_color: var(--evoker-color);
}

.evoker-media {
  --media_object_media_border_color: var(--evoker-color);
}

.hunter-color {
  color: var(--hunter-color);
  --accent_color: var(--hunter-color);
}

.hunter-media {
  --media_object_media_border_color: var(--hunter-color);
}

.mage-color {
  color: var(--mage-color);
  --accent_color: var(--mage-color);
}

.mage-media {
  --media_object_media_border_color: var(--mage-color);
}

.monk-color {
  color: var(--monk-color);
  --accent_color: var(--monk-color);
}

.monk-media {
  --media_object_media_border_color: var(--monk-color);
  --media_object_media_border_size: 1px;
}

.paladin-color {
  color: var(--paladin-color);
  --accent_color: var(--paladin-color);
}

.paladin-media {
  --media_object_media_border_color: var(--paladin-color);
}

.priest-color {
  color: var(--priest-color);
  --accent_color: var(--priest-color);
}

.priest-media {
  --media_object_media_border_color: var(--priest-color);
}

.rogue-color {
  color: var(--rogue-color);
  --accent_color: var(--rogue-color);
}

.rogue-media {
  --media_object_media_border_color: var(--rogue-color);
}

.shaman-color {
  color: var(--shaman-color);
  --accent_color: var(--shaman-color);
}

.shaman-media {
  --media_object_media_border_color: var(--shaman-color);
}

.warlock-color {
  color: var(--warlock-color);
  --accent_color: var(--warlock-color);
}

.warlock-media {
  --media_object_media_border_color: var(--warlock-color);
}

.warrior-color {
  color: var(--warrior-color);
  --accent_color: var(--warrior-color);
}

.warrior-media {
  --media_object_media_border_color: var(--warrior-color);
}

.battlenet-color {
  color: var(--battlenet-color);
}

.twitch-color {
  color: var(--twitch_color);
}

/* 
**
** Items 
**
*/
.common {
  --media_object_media_border_color: var(--text_color);
  color: var(--text_color) !important;
}

.rare {
  --media_object_media_border_color: var(--item-rare);
  color: var(--item-rare) !important;
}

.superior {
  --media_object_media_border_color: var(--item-superior);
  color: var(--item-superior) !important;
}

.epic {
  --media_object_media_border_color: var(--item-epic);
  color: var(--item-epic) !important;
}

.legendary {
  --media_object_media_border_color: var(--item-legendary);
  color: var(--item-legendary) !important;
}

.artifact {
  --media_object_media_border_color: var(--item-artifact);
  color: var(--item-artifact) !important;
}

/* 
**
** menu 
**
*/
.menu-socials {
  display: flex;
  align-items: center;
  gap: var(--media_object_gap_normal);
}

.header-media-top {
  --header_media_position: center top;
}

.menu-hero-header {
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  font-weight: var(--body_font_weight);
}

/* 
**
** Page Notifications 
**
*/
.page-notifications {
  gap: 24px !important;
}

.page-notification-item {
  position: relative;
  height: 90px;
  overflow: hidden;
}

.page-notification-item.page-notification-item-with-text {
  height: fit-content;
}

.page-notification-item>div:first-child {
  padding: 0 var(--box_padding);
}

.page-notification-item.page-notification-item-with-text>div:first-child {
  padding: var(--box_padding);
}

.page-notification-item .page-notification-item-delete-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  color: transparent;
  cursor: pointer;
}

.page-notification-item .page-notification-item-delete-button:hover {
  background-color: var(--error-color);
  color: var(--text_color);
}

/* 
**
** Ads
**
*/
.side-slot {
  margin-bottom: calc(196px / 2);
}

@media (max-height: 960px) {
  .side-slot {
    margin-bottom: 196px;
  }
}

/* 
**
** Skill Capped Affiliate
**
*/
.skill-capped-link {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.skill-capped-link>img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* 
**
** Lists
**
*/
.wow-equipment-slots {
  gap: 24px 12px !important;
}

/* 
**
**  Layout
**
*/
:root {
  --list_item_height: 84px;
}

main .vi-tiles {
  padding: var(--layout_content_section_spacing) 0;
}

.tiles-merge-start {
  padding: var(--layout_content_section_spacing) 0 0 !important;
}

.tiles-merge {
  padding: var(--tiles_gap) 0 0 !important;
}

.tiles-merge-separator {
  padding: calc(var(--tiles_gap) * 2) 0 var(--tiles_gap) !important;
}

.tiles-merge-end {
  padding: var(--tiles_gap) 0 var(--layout_content_section_spacing) !important;
}

.list-item-with-icon {
  --media_object_background_padding: 0 var(--box_padding);
  height: var(--list_item_height);
}

.vi-box.vi-box-with-background-img.list-item {
  --box_media_background_img_width: calc(var(--list_item_height) - 2px);
  height: calc(var(--list_item_height) - 2px);
}

.vi-box.vi-box-with-background-img.list-item>*:first-child {
  padding: 0 var(--box_padding) 0 3px;
}

.vi-box.vi-box-with-background-img.list-item>img {
  width: 66px;
  height: 66px;
  align-self: center;
  justify-self: center;
}

.footer {
  --box_gap: 6px 24px;
}

.footer>* {
  flex-shrink: 1;
  flex-grow: 0;
  user-select: none;
}

/* 
**
** Guide Top Ratings
**
*/
:root {
  --top_ratings_item_gap: 18px;
}

.top-ratings-item {
  display: grid;
  height: calc(var(--list_item_height) - 2px);
  padding: 0 0 0 var(--box_padding);
  grid-template-columns: 24px 1fr 1fr 1.5fr 48px;
  grid-template-rows: 100%;
  justify-content: stretch;
  gap: var(--top_ratings_item_gap);
}

.top-ratings-item img,
.top-ratings-item>div:nth-child(2) {
  width: 100%;
  height: 100%;
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
  object-fit: cover;
  object-position: center;
  background: linear-gradient(to right,
      var(--box_background),
      transparent,
      var(--box_background));
}

.top-ratings-item>div:nth-child(3) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  align-self: center;
  justify-self: center;
}

.top-ratings-item>div:nth-child(4) {
  grid-column: 2 / span 2;
  grid-row: 1 / span 1;
  align-self: center;
}

.top-ratings-item>div:nth-child(4)>div:last-child,
.top-ratings-item>div:nth-child(5)>div:nth-child(2) {
  font-size: 12px;
}

.top-ratings-item>div:nth-child(5) {
  grid-column: 5 / span 1;
  grid-row: 1 / span 1;
  padding-right: var(--box_padding);
  align-self: center;
  justify-self: right;
  text-align: right;
}

/* 
**
** Guide Stat Priority
**
*/
:root {
  --guide_stats_gap: 18px;
  --guide_stats_graph_bar_size: 6px;
  --guide_stats_graph_bar_radius: 6px;
  --guide_stats_graph_gap: 0 6px;
}

.guide-stats>h3 {
  text-align: center;
}

.guide-stats>ul {
  display: grid;
  grid-template-rows: 100%;
  gap: var(--guide_stats_gap) !important;
  height: 186px;
  list-style: none;
  justify-content: center;
  padding: 6px 3px 3px;
}

.guide-stats-size-3 {
  grid-template-columns: repeat(3, 1fr);
}

.guide-stats-size-4 {
  grid-template-columns: repeat(4, 1fr);
}

.guide-stats-chart-item {
  display: grid;
  grid-template-columns: var(--guide_stats_graph_bar_size) auto;
  grid-template-rows: auto min-content;
  gap: var(--guide_stats_graph_gap);
}

.guide-stats-chart-item>*:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: end;
  border-radius: var(--guide_stats_graph_bar_radius);
  background-color: currentColor;
}

.guide-stats-chart-item>*:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.guide-stats-chart-item>*:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.guide-stats>h4 {
  display: none;
}

.guide-stats>ol {
  border-top: 1px solid var(--line_color);
  padding-top: var(--box_gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.guide-stats>ol>li {
  flex-shrink: 0;
  flex-grow: 0;
}

.guide-stats>ol>li::after {
  content: ">";
  color: var(--text_color);
  margin: 0 9px;
}

.guide-stats>ol>li:last-child::after {
  content: initial;
  margin: 0;
}

/* 
**
** Horizontal Chart
**
*/
:root {
  --horizontal_chart_bar_height: 6px;
  --horizontal_char_bar_radius: 12px;
  --horizontal_chart_gap: 3px;
}

.horizontal-chart {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content min-content;
  padding: 0;
  margin: var(--horizontal_chart_gap) 0 0;
  gap: var(--horizontal_chart_gap);
  pointer-events: none;
}

.horizontal-chart>div:first-child {
  height: var(--horizontal_chart_bar_height);
  min-width: 1px;
  border-radius: var(--horizontal_char_bar_radius);
  background: currentColor;
}

.horizontal-chart>ul {
  justify-content: start;
}

/* 
**
** Talent Tree
**
*/
:root {
  --talent_tree_width: 840px;
  --talent_tree_tier_padding: 30px;
  --talent_border: 1px solid var(--line_color);
  --talent_tree_length: 9;
  --talent_tree_cell_width: 84px;
  --talent_tree_cell_gap: 6px;
  --talent_tree_talent_icon_size: 48px;
  --talent_tree_talent_padding: 6px;
  --talent_tree_talent_arrow_padding: 21px;
  --talent_tree_talent_background: var(--box_background);
  --talent_tree_talent_background_hover: var(--box_background_hover);
  --talent_tree_talent_border_radius: var(--box_content_border_radius);
  --talent_tree_talent_count_background: rgba(0, 0, 0, 0.5);
  --talent_tree_talent_count_border_radius: 12px;
}

.guide-talents>*:first-child>*:nth-child(2)>p {
  margin-top: var(--h2);
}

.guide-talents-legend>* {
  text-align: justify;
}

.guide-talents-legend>*:nth-child(1) {
  --media_object_media_color: var(--item-legendary);
}

.guide-talents-legend>*:nth-child(2) {
  --media_object_media_color: var(--item-epic);
}

.guide-talents-legend>*:nth-child(3) {
  --media_object_media_color: #282833;
}

.guide-talent-trees-view {
  max-width: 100%;
  width: var(--talent_tree_width);
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  gap: calc(var(--box_padding) * 2);
}

.guide-talent-trees-view>div {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: var(--talent_tree_width);
}

.guide-talent-trees-view>div.hero {
  --talent_tree_length: 3;
  --talent_tree_width: calc(var(--talent_tree_width) / 2);
}

.guide-talent-trees-view>div>ul {
  display: grid;
  grid-template-columns: repeat(var(--talent_tree_length),
      var(--talent_tree_cell_width));
  gap: var(--talent_tree_cell_gap);
  border-top: var(--talent_border);
  padding: var(--talent_tree_tier_padding) 0;
  justify-content: center;
  list-style: none;
}

.guide-talent-trees-view>div>ul:first-of-type {
  border-top: none;
}

.guide-talent-trees-view h3 {
  max-width: 100% !important;
}

/* ----------- */

.guide-talent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  min-width: 54px;
  padding: var(--talent_tree_talent_padding);
  border: var(--talent_border);
  border-radius: var(--talent_tree_talent_border_radius);
  overflow: hidden;
  background: var(--talent_tree_talent_background);
  transition: var(--media_object_button_transition);
}

.guide-talent:hover {
  background: var(--talent_tree_talent_background_hover);
  transform: var(--media_object_button_transform_hover);
}

.guide-talent:active {
  background: var(--talent_tree_talent_background_hover);
  transform: var(--media_object_button_transform_press);
}

.guide-talent-background,
.guide-talent-background:hover,
.guide-talent-background:active {
  background: currentColor;
}

.guide-talent>img {
  grid-column: 1 / span 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;

  width: calc(var(--talent_tree_talent_icon_size) - 2 * 1px);
  height: calc(var(--talent_tree_talent_icon_size) - 2 * 1px);
  border-radius: 50%;
  border: 1px solid var(--text_color);
  background-size: contain;
  background-position: center;
}

.guide-talent>.guide-talent-count {
  grid-column: 1 / span 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;

  display: flex;
  align-items: center;
  padding: 0 6px;
  border-radius: var(--talent_tree_talent_count_border_radius);
  gap: 3px;
  border: var(--text_color) solid 0.5px;
  background: var(--talent_tree_talent_count_background);
  color: var(--text_color);
  filter: var(--drop_shadow);
  transform: translate(15px, 3px);
  z-index: 1;
}

.guide-talent>svg:nth-child(3),
.guide-talent>svg:nth-child(4) {
  width: 24px;
  height: 24px;
  align-self: center;
  color: var(--text_color);
}

.guide-talent>svg:nth-child(3) {
  grid-column: 1;
  grid-row: 1;
  justify-self: right;
  transform: translate(calc(-1 * var(--talent_tree_talent_arrow_padding)));
}

.guide-talent>svg:nth-child(4) {
  grid-column: 2;
  grid-row: 1;
  justify-self: left;
  transform: translate(var(--talent_tree_talent_arrow_padding));
}

.guide-talent-activable {
  --media_object_media_border_radius: 0 !important;
  border-radius: 0 !important;
}

/* 
**
** Detailed item
**
*/
:root {
  --detail_table_column_key_width: 60px;
  --detail_table_column_value_width: auto;
}

.detail {
  width: var(--poppable_item_width);
  user-select: none;
}

.vi-layout-poppable-fullscreen .detail {
  width: var(--poppable_item_fullscreen_width);
}

.detail th {
  width: var(--detail_table_column_key_width);
  font-family: var(--body_font_family);
  font-size: var(--body_font_size);
  text-align: left;
  letter-spacing: initial;
}

.detail td {
  width: var(--detail_table_column_value_width);
  text-align: justify;
  white-space: pre-wrap;
}

.detail-list {
  padding: 0;
  list-style: none;
}

.details-drop {
  display: none;
}

.vi-layout-poppable-fullscreen .details-drop {
  display: table-row;
}

.detail-td-icon {
  --media_object_media_border_size: 1px;
  --media_object_media_size: 24px;
  --media_object_gap: 6px;
}

/* 
**
** Guide Equipment
**
*/
.guide-equipment-icon-set {
  width: var(--media_object_media_size);
  height: var(--media_object_media_size);
  position: relative;
}

.guide-equipment-icon-set>*:last-child {
  position: absolute;
  padding: 0 6px;
  border: 0.5px solid currentColor;
  border-radius: 9px;
  background: var(--background-over-icon);
  filter: var(--drop_shadow);
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 3px);
}

/* 
**
** Character
**
*/
.character-header-media>div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-size: 150%;
}

.character-header-media::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/web/art/v2/hallowfall.webp);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* 
**
** Meta
**
*/
.meta-ranks {
  --tiles_gap: 30px 12px;
}

.vi-box.vi-box-with-background-img.meta-item {
  height: calc(var(--list_item_height) - 2px);
}

.vi-box.vi-box-with-background-img.meta-item>*:first-child {
  padding: 0 var(--box_padding) 0 6px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: 100%;
  gap: 18px;
  align-items: center;
}

.vi-box.vi-box-with-background-img.meta-item>img {
  width: 66px;
  height: 66px;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
}



.vi-box.vi-box-with-background-img.meta-item>*:first-child>*:first-child {
  justify-self: center;
}

/* 
**
** Twitch Player
**
*/
.twitch-player {
  aspect-ratio: 16 / 9;
}

.twitch-player>*:nth-child(1) {
  border-radius: var(--box_border_radius);
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

/* 
**
** News item
**
*/
.home-news-poppup {
  width: var(--poppable_item_fullscreen_width);
}

.home-news-item {
  height: 100%;
}

.home-news-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-item>a,
.post-item img {
  display: block;
  padding: 0;
  margin: 0;
  height: 160px;
  min-height: 160px;
  width: 100%;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}

.post-item>.vi-box {
  height: 100%;
}

.post-item>.vi-box:nth-child(2) {
  --box_padding: 6px 18px 18px;
}

/* 
**
** Social Media Button
**
*/
:root {
  --social_button_background: var(--box_background);
}

.home-social-button:active,
.home-social-button:hover {
  --social_button_background: var(--box_background_hover);
}

.home-social-button>img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--box_border_radius);
}

.home-social-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--box_border_radius);
  background: linear-gradient(transparent, var(--social_button_background));
}

.home-social-button h3,
.home-social-button p {
  filter: var(--drop_shadow);
}

/* 
**
** Icon Highlight 
**
*/
.icon-highlight,
.icon-highlight-left {
  position: relative;
}

.icon-highlight::before,
.icon-highlight-left::before {
  content: "";
  background-color: var(--error-color);
  width: 10px;
  height: 10px;
  position: absolute;
  top: -2px;
  border-radius: 50%;
  animation: icon-highlight-anim 1s infinite alternate ease-in;
}

.icon-highlight::before {
  right: -2px;
}

.icon-highlight-left::before {
  left: -22px !important;
  top: 7px !important;
  z-index: 1;
}

.icon-highlight-left::before {
  content: "";
  background-color: var(--error-color);
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 6px;
  border-radius: 50%;
  animation: icon-highlight-anim 1s infinite alternate ease-in;
}

@keyframes icon-highlight-anim {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(1);
  }

  100% {
    transform: scale(2.1);
  }
}

/* 
**
** Post
**
*/
.post-form>input:nth-child(1) {
  font-family: var(--titles_font_family);
  font-size: var(--h2);
  font-weight: var(--titles_font_weight);
  letter-spacing: 4px;
}

.post-form>* {
  border-bottom: none;
}

.post-form>textarea {
  height: 150px;
  resize: vertical;
}

.post-form>div:nth-child(4) {
  font-size: 13px;
  text-align: right;
}

.post-form>div:nth-child(5) {
  text-align: center;
}

/* 
**
** Account 
**
*/
.account-character {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100%;
  min-height: var(--thumbnail_min_height);
}

.account-character>div:first-child {
  grid-column: 2 / span 3;
  grid-row: 1 / span 1;
  position: relative;
}

.account-character>div:first-child>img {
  position: relative;
  height: 100%;
  width: 100%;
  object-position: left;
  object-fit: cover;
}

.account-character>div:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--box_background), transparent);
}

.account-character>div:last-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  justify-self: left;
}

/* 
**
** Wiki 
**
*/
.wiki-quote {
  background: var(--box_background);
  padding: 3px 9px;
  border-radius: 6px;
}

.wiki-img {
  border-radius: var(--box_border_radius);
  max-width: 100%;
}

.wiki-section-begin,
.vi-tiles.wiki-section-begin {
  padding: var(--layout_content_section_spacing) 0 0;
}

.wiki-section-end {
  padding: var(--tiles_gap) 0 var(--layout_content_section_spacing);
}

.wiki-content {
  --tiles_gap: calc(var(--layout_content_section_spacing) * 2) 12px;
}

/* 
**
** Blue Post 
**
*/
.blue-post {
  color: var(--blue_post_color);
}

.blue-post .post strong,
.blue-post .post h2 {
  color: var(--blue_post_color);
  font-size: var(--h3);
  font-family: var(--titles_font_family);
  font-weight: var(--titles_font_weight);
  letter-spacing: 1px;
  margin: 24px 0 0 !important;
  display: inline-block;
}

.blue-post .post strong,
.blue-post .post ul h2 {
  margin-top: 12px !important;
}

.blue-post .post ul strong,
.blue-post .post h3 {
  color: var(--blue_post_color);
  font-size: var(--h4);
  margin-top: 6px;
}

.blue-post .post>*:first-child,
.blue-post .post>*:first-child>* {
  margin-top: 0;
}

.blue-post .post ul,
.blue-post .post ol {
  margin-top: 3px;
}