:root {
  --size-max-width: 1366px;
  --size-navbar-height: 50px;
  --size-footer-height: 138px;
  --color-black: #111;
  --color-whitest: #fff;
  --color-white: #dfdfe5;
  --color-light-gray: #9b9ba2;
  --color-gray: #74747d;
  --color-yellow: #e6c800;
  --color-blue-darkest: #0e2332;
  /* #0a1634 */
  --color-blue-dark: #14344a;
  --color-blue-bg: #00132e;
  --color-red-bg: #3b0000;
  --color-dranemir: #ffd683;
  --color-background: #14344a;
  --color-accent: #bfb48f;
  --color-primary: #0a2360;
  --color-primary-hover: #0f348e;
  --color-good: #007107;
  --color-good-hover: #00a40a;
  --color-warning: #d18c00;
  --color-warning-hover: #ffac05;
  --color-bad: #9c1410;
  --color-bad-hover: #ca1a15;
  --color-bar-empty: #000;
  --color-bar: #000;
  /*--color-bar-hover: #000;*/
  --color-hp-empty: #670010;
  --color-hp: #ff0028;
  /*--color-hp-hover: #ff4e4e;*/
  --color-rhun-empty: #33104c;
  --color-rhun: #861ad0;
  --color-exp-empty: #675600;
  --color-exp: #ffd700;
  /*--color-exp-hover: #ffe34d;*/
  --color-barrier: #88d9ff;
  --color-dodge: #7cfc00;
  --color-restoration: #fcbe40;
  --color-lifesteal: #66ffc4;
  --color-stun: #ffa500;
  --color-physical: #ffa500;
  --color-magical: #861ad0;
  --color-critical: #ff0000;
  --color-block: #fff;
  --color-str: #f32e2e;
  --color-str-bg: #800000;
  --color-vit: #b3b3b3;
  --color-vit-bg: #808080;
  --color-dex: #0aca0a;
  --color-dex-bg: #008000;
  --color-int: #0000ff;
  --color-int-bg: #000080;
  --color-cha: #ecc258;
  --color-cha-bg: #daa520;
  --color-legion: #3667b1;
  --color-oath: #dd2d26;
  --color-repeatable: #0e824f;
  --color-story: #ad8400;
  --color-epic: #911eb4;
  --color-mythical: #e6194b;
  --color-hard: #e71924;
  /*--color-hard-empty: #a31119;*/
  --color-soft: #19e7dc;
  /*--color-soft-empty: #13bab1;*/
  --color-brittle: #681a1a;
  /*--color-brittle-empty: #3f1010;*/
  --color-flexible: #20bd2b;
  /*--color-flexible-empty: #157c1c;*/
  --color-magical: #861ad0;
  /*--color-magical-empty: #6914a3;*/
  --color-resistant: #9a9a9a;
  /*--color-resistant-empty: #808080;*/
  --color-fuel: #f89c21;
  /*--color-fuel-empty: #c67406;*/
  --color-poisonous: #c2fb00;
  /*--color-poisonous-empty: #9bc800;*/
  --color-neutralizing: #bfb48f;
  /*--color-neutralizing-empty: #d4c567;*/
  --color-healing: #ec40ac;
  /*--color-healing-empty: #e21796;*/
  --color-strengthening: #f32e2e;
  /*--color-strengthening-empty: #e10d0d;*/
  --color-quicken: #0aca0a;
  /*--color-quicken-empty: #089908;*/
  --color-invigorate: #b3b3b3;
  /*--color-invigorate-empty: #9a9a9a;*/
  --color-focus: #0000ff;
  /*--color-focus-empty: #0000cc;*/
  --color-aromatic: #ecc258;
  /*--color-aromatic-empty: #e7b12a;*/
  --color-gold: #ffd700;
  --color-silver: #d0d0d0;
  --color-bronze: #cd7f32;
  --color-red: #e6194b;
  --color-green: #3cb44b;
  --color-yellow: #ffe119;
  --color-blue: #4363d8;
  --color-orange: #f58231;
  --color-purple: #911eb4;
  --color-cyan: #00eeff;
  --color-magenta: #f032e6;
  --color-lime: #bfef45;
  --color-pink: #fabed4;
  --color-teal: #469990;
  --color-lavender: #dcbeff;
  --color-brown: #9a6324;
  --color-beige: #fffac8;
  --color-maroon: #800000;
  --color-mint: #aaffc3;
  --color-olive: #808000;
  --color-apricot: #ffd8b1;
  --color-navy: #000075;
  --color-grey: #a9a9a9;
}

@font-face {
  font-family: "nunito-sans";
  src: url("../font/NunitoSans-Regular.ttf");
}

@font-face {
  font-family: "nunito-sans-bold";
  src: url("../font/NunitoSans-Bold.ttf");
}

@font-face {
  font-family: "nunito-sans-lite";
  src: url("../font/NunitoSans-Light.ttf");
}

@font-face {
  font-family: "nunito-sans-black";
  src: url("../font/NunitoSans-Black.ttf");
}

* {
  box-sizing: border-box;
  font-family: nunito-sans;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: var(--color-black);
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 4px;
  background-color: var(--color-background);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--color-accent);
}

html {
  font-size: 16px;
  margin: 0;
  padding: 0;
  max-width: 100vw;
  background: linear-gradient(10deg,
      var(--color-blue-darkest),
      var(--color-background));
  height: auto;
  color: var(--color-white);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  background-color: transparent;
  height: auto;
  min-height: 100vh;
}

/*STANDARD COMPONENT START*/
str {
  font-family: nunito-sans-black;
  color: var(--color-str);
}

vit {
  font-family: nunito-sans-black;
  color: var(--color-vit);
}

dex {
  font-family: nunito-sans-black;
  color: var(--color-dex);
}

int {
  font-family: nunito-sans-black;
  color: var(--color-int);
}

cha {
  font-family: nunito-sans-black;
  color: var(--color-cha);
}

dranemir {
  display: inline-grid;
  grid-gap: 3px;
  grid-template-columns: 1fr 25px;
  color: var(--color-dranemir);
  align-items: center;
  font-family: "nunito-sans-bold";
  font-size: 0.85rem;
}

dranemir.headerbar {
  width: 100%;
}

dranemir:after {
  content: "";
  display: inline-grid;
  background-image: url(../image/ui/dranemir.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  width: 25px;
  height: 25px;
}

bonds {
  display: inline-grid;
  grid-gap: 3px;
  grid-template-columns: 1fr 25px;
  color: var(--color-dranemir);
  align-items: center;
  font-family: "nunito-sans-bold";
  font-size: 0.85rem;
}

bonds:after {
  content: "";
  display: inline-grid;
  /* background-color: pink; */
  background-image: url(../image/ui/bonds.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  width: 25px;
  height: 25px;
}

topupbonds {
  display: inline-grid;
  grid-gap: 3px;
  grid-template-columns: 20px 1fr 25px;
  color: var(--color-dranemir);
  align-items: center;
  font-family: "nunito-sans-bold";
  font-size: 0.85rem;
  gap: 8px;
}

topupbonds:before {
  content: "";
  display: inline-grid;
  background-color: var(--color-good);
  background-image: url("../image/ui/plus.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  width: 20px;
  cursor: pointer;
  height: 20px;
}

topupbonds:after {
  content: "";
  display: inline-grid;
  /*background-color: pink;*/
  background-image: url(../image/ui/bonds.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  width: 25px;
  height: 25px;
}

topupbonds a {
  color: var(--color-dranemir) !important;
}

physical {
  color: var(--color-physical);
}

critical {
  color: var(--color-critical);
}

block {
  color: var(--color-block);
}

magical {
  color: var(--color-magical);
}

barrier {
  color: var(--color-barrier);
}

dodge {
  color: var(--color-dodge);
}

stun {
  color: var(--color-stun);
}

restoration {
  color: var(--color-restoration);
}

lifesteal {
  color: var(--color-lifesteal);
}

.do-page-wrapper {
  display: block;
  max-width: var(--size-max-width);
  margin: 0 auto;
}

.do-section {
  position: relative;
  min-height: 400px;
  display: inline-block;
  width: 100%;
}

.do-section.banner {
  margin-top: var(--size-navbar-height);
  background-color: var(--color-black);
}

.do-section.faction {
  background: linear-gradient(10deg,
      var(--color-blue-darkest),
      var(--color-background));
}

.do-section.role {
  background: linear-gradient(-190deg,
      var(--color-blue-darkest),
      var(--color-background));
}

.do-section.race {
  background: linear-gradient(180deg,
      var(--color-background),
      var(--color-blue-darkest));
}

.do-section.footer {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../image/public/game-map.jpg");
  position: relative;
  min-height: 200px;
}

.do-section.credit {
  min-height: calc(100vh - var(--size-navbar-height) - var(--size-footer-height));
  padding: 100px 0 50px;
  background: linear-gradient(var(--color-background), #000c1d);
}

.do-section.tos {
  min-height: calc(100vh - var(--size-navbar-height) - var(--size-footer-height));
  padding: 100px 0 50px;
  background: linear-gradient(var(--color-background), #000c1d);
}

.do-section.forgot-password {
  padding: 140px 0 60px;
  background: linear-gradient(var(--color-background), #000c1d);
}

.do-tab-nav-container {
  display: flex;
  align-items: flex-end;
}

.do-tab-nav-container.max-content {
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 0 0 3px;
}

.do-tab-nav-button {
  font-family: "nunito-sans-bold";
  padding: 5px 10px;
  display: inline-block;
  color: var(--color-gray);
  border: solid 2px var(--color-accent);
  border-bottom: none;
  margin-right: 5px;
  transition: all 0.375s ease;
  cursor: pointer;
  position: relative;
}

.do-tab-nav-button.active {
  color: var(--color-white);
  position: relative;
  background-color: var(--color-blue-bg);
}

.do-tab-nav-button.active:after {
  content: "";
  width: 100%;
  height: 5px;
  background-color: var(--color-blue-bg);
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  z-index: 1;
}

.do-tab-page {
  display: none;
}

.do-tab-page.active {
  display: block;
  position: relative;
  padding: 25px 10px;
  width: 100%;
  min-height: 200px;
  color: var(--color-white);
  border: solid 2px var(--color-accent);
  background-color: var(--color-blue-bg);
}

.do-tab-page.active:before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-tab-page.active:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 3px;
  left: 3px;
}

.do-input-group {
  display: grid;
  color: var(--color-white);
  margin: 0 0 5px;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: left;
}

.do-input-group.side {
  grid-template-columns: 100px 1fr;
}

.do-input-group.append {
  grid-template-columns: 1fr 40px;
  gap: 5px;
}

.do-input-group.append>.do-input {
  min-height: 40px;
}

.do-input-group.checkbox {
  grid-template-columns: 30px 1fr;
  text-align: left;
  position: relative;
  cursor: pointer;
  margin: 10px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.do-input.checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.do-input-group.checkbox .do-checkmark {
  height: 25px;
  width: 25px;
  background-color: var(--color-black);
  cursor: pointer;
  border: solid 2px var(--color-accent);
  transition: all 0.375s ease;
}

.do-input-group.checkbox .do-checkmark:hover,
.do-input-group.checkbox input:focus+.do-checkmark {
  background-color: var(--color-gray);
}

.do-input-group.checkbox input:checked~.do-checkmark {
  background-color: var(--color-black);
}

.do-input-group.checkbox .do-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.do-input-group.checkbox input:checked~.do-checkmark:after {
  display: block;
}

.do-input-group.checkbox .do-checkmark:after {
  left: 9px;
  top: 5px;
  width: 4px;
  height: 9px;
  border: solid var(--color-accent);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.do-input {
  padding: 5px;
  color: var(--color-whitest);
  border: solid 2px var(--color-accent);
  background-color: var(--color-black);
}

::placeholder {
  letter-spacing: 0.5px;
  color: var(--color-light-gray);
}

::-webkit-input-placeholder {
  letter-spacing: 0.5px;
  color: var(--color-light-gray);
}

::-ms-input-placeholder {
  letter-spacing: 0.5px;
  color: var(--color-light-gray);
}

.do-button {
  position: relative;
  text-align: center;
  border: solid 2px var(--color-accent);
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: "nunito-sans-black";
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px;
  min-width: 120px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.375s ease;
  user-select: none;
}

.do-button.decorated:before {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-button.decorated:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 3px;
  left: 3px;
}

.do-button:hover {
  background-color: var(--color-gray);
}

.do-button.decorated:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.do-button.primary {
  background-color: var(--color-primary);
}

.do-button.primary:hover {
  background-color: var(--color-primary-hover);
}

.do-button.good {
  background-color: var(--color-good);
}

.do-button.good:hover {
  background-color: var(--color-good-hover);
}

.do-button.warning {
  background-color: var(--color-warning);
}

.do-button.warning:hover {
  background-color: var(--color-warning-hover);
}

.do-button.bad {
  background-color: var(--color-bad);
}

.do-button.bad:hover {
  background-color: var(--color-bad-hover);
}

.do-button.search {
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../image/ui/search.png);
  min-width: 0;
  width: 40px;
  height: 40px;
}

.do-button p {
  margin: 0;
}

a {
  color: var(--color-white);
  font-family: "nunito-sans-bold";
}

a:visited {
  color: var(--color-white);
}

.do-decor-1 {
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
}

.do-decor-2 {
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-02.png");
}

.do-decor-3 {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-03.png");
}

.small {
  width: 15px;
  height: 15px;
}

.extra-small {
  width: 6px;
  height: 6px;
}

.top-left {
  top: 10px;
  left: 10px;
}

.top-right {
  top: 10px;
  right: 10px;
}

.bottom-left {
  bottom: 10px;
  left: 10px;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
}

.rotate-90 {
  transform: rotateZ(90deg);
}

.rotate-180 {
  transform: rotateZ(180deg);
}

.rotate-270 {
  transform: rotateZ(270deg);
}

.do-standard-container {
  display: block;
  position: relative;
  z-index: 0;
  padding: 30px 10px;
  min-height: 200px;
  max-width: 400px;
  margin: 0 auto;
  color: var(--color-white);
  border: solid 2px var(--color-accent);
}

.do-standard-container:before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-standard-container:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 3px;
  left: 3px;
}

.do-standard-container.medium {
  max-width: 800px;
}

.do-standard-container.wide {
  max-width: 1200px;
}

.do-standard-container.full {
  max-width: 100%;
}

.do-standard-container.center {
  text-align: center;
}

.do-container-title {
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
  font-family: nunito-sans-bold;
  color: var(--color-accent);
}

.do-bar-wrapper {
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 60px 1fr;
}

.do-bar-wrapper label {
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-family: "nunito-sans-bold";
}

.do-bar-wrapper p {
  margin: 0;
  padding: 0;
}

.do-bar {
  background-color: var(--color-bar-empty);
  text-align: center;
  position: relative;
  height: 22px;
  margin: 5px 0px;
  padding: 0;
  transition: all 0.375s ease;
  border: solid 2px var(--color-accent);
}

.do-bar span {
  background-color: var(--color-bar);
  display: inline-block;
  width: 0;
  height: 100%;
  margin: 0 0 5px;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.do-bar span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  display: none;
}

.do-bar:hover span:after {
  display: block;
}

.do-bar p {
  position: absolute;
  top: 1px;
  left: 3px;
  margin: 0;
  color: var(--color-white);
}

.do-bar-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  right: 0;
  width: auto;
  min-width: 50px;
  padding: 5px;
  font-size: 0.8rem;
  background-color: var(--color-blue-darkest);
  border: solid 2px var(--color-accent);
  color: var(--color-white);
  z-index: 50;
  display: none;
}

.do-bar:hover .do-bar-tooltip {
  display: block;
}

.do-gauge-wrapper {
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 60px 1fr;
}

.do-gauge-wrapper label {
  margin: 0;
  padding: 0;
}

.do-gauge-wrapper p {
  margin: 0;
  padding: 0;
}

.do-gauge {
  background-color: var(--color-bar-empty);
  text-align: center;
  position: relative;
  height: 12px;
  margin: 5px 0px;
  padding: 0;
  transition: all 0.375s ease;
  border: solid 2px var(--color-accent);
}

.do-gauge:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  height: 100%;
  background-color: #fff;
}

.do-gauge span {
  background-color: var(--color-bar);
  display: inline-block;
  min-width: 1px !important;
  width: 3px !important;
  height: 100%;
  margin: 0 0 5px;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.do-gauge span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  display: none;
}

.do-gauge:hover span:after {
  display: block;
}

.do-gauge-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  width: auto;
  min-width: 10px;
  padding: 5px;
  font-size: 0.8rem;
  background-color: var(--color-blue-darkest);
  border: solid 2px var(--color-accent);
  color: var(--color-white);
  z-index: 50;
  display: none;
}

.do-gauge-wrapper:hover .do-gauge-tooltip {
  display: block;
}

.do-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
}

.do-popup-overlay.hidden {
  display: none;
}

.do-popup-wrapper {
  position: relative;
  padding: 50px 20px;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
  max-width: 90%;
  max-height: 90vh;
  margin: 40px auto;
  overflow: auto;
}

.do-popup-wrapper h1 {
  text-align: center;
  color: var(--color-accent);
  font-size: 1.2rem;
  margin: 5px 0 15px;
}

.do-popup-scroller {
  overflow: auto;
  max-height: calc(640px - 110px);
  max-width: 100%;
  text-align: center;
}

.do-popup-title {
  font-size: 1.2rem;
  font-family: "nunito-sans-bold";
  color: var(--color-accent);
  position: relative;
}

.do-popup-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
}

.do-popup-body {
  margin: 20px 0;
  max-height: 400px;
}

.do-popup-button-container>.do-button {
  margin-right: 10px;
}

.do-popup-message {
  font-size: 1rem;
}

.do-popup-close-button,
.do-popup-close-button.cross {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-image: url("../image/cross-red.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.do-popup-footer {
  text-align: center;
}

.do-pagination-container {
  font-size: 1.7rem;
  text-align: center;
  color: var(--color-white);
  display: inline-block;
  padding: 5px;
  width: 30px;
  height: 30px;
  border: solid 1px var(--color-accent);
  margin: 0 5px;
  text-decoration: none;
  cursor: pointer;
}

.do-pagination-container:hover,
.do-pagination-button.active {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.do-pagination-button,
.do-pagination-button-LF {
  display: inline-block;
  padding: 3px;
  border: solid 1px var(--color-accent);
  cursor: pointer;
  margin: 5px 5px 0 0;
  min-width: 25px;
  text-align: center;
  text-decoration: none;
  color: var(--color-white);
}

.do-pagination-button:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.do-pagination-current {
  display: inline-block;
  padding: 3px;
}

.do-skill-icon-container {
  padding: 10px 0;
  /* width: calc((5 * 55px) + (4 * 5px)); */
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.do-skill-icon {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px 5px 0;
  background-color: var(--color-blue-bg);
  text-align: left;
  border: solid 2px var(--color-accent);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.do-skill-icon:before {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 1px;
  right: 1px;
}

.do-skill-icon:after {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 1px;
  left: 1px;
}

.do-item-icon {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: calc(100% - 4px);
  height: 0;
  margin: 0;
  background-color: var(--color-black);
  text-align: left;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 2px var(--color-accent);
  order: 1;
}

.do-item-icon.hidden {
  display: none;
}

.do-item-icon.fade-out {
  filter: brightness(0.3);
}

.do-item-icon.epic {
  border: solid 2px var(--color-epic);
}

.do-item-icon.mythical {
  border: solid 2px var(--color-mythical);
}

.do-item-icon:before {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-item-icon:after {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 3px;
  left: 3px;
}

.do-item-icon.locked:before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/decoration new.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-item-icon.locked:after {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/decoration new.png");
  bottom: 3px;
  left: 3px;
}

.do-item-icon .do-tooltip>h2.epic {
  color: var(--color-epic);
}

.do-item-icon .do-tooltip>h2.mythical {
  color: var(--color-mythical);
}

.do-item-icon .do-tooltip>p {
  margin: 0;
}

.do-item-icon .do-tooltip>p.accent {
  color: var(--color-accent);
}

.do-item-icon .do-tooltip>p.cyan {
  color: #00d3c3;
}

.do-item-icon .do-tooltip>p.orange {
  color: #ffae00;
}

.do-item-icon .do-tooltip>p.restriction {
  color: var(--color-orange);
}

.do-item-icon .do-tooltip>p.label {
  color: var(--color-white);
}

.do-item-icon.axe {
  background-image: url("../image/ui/axe.png");
}

.do-item-icon.boots {
  background-image: url("../image/ui/boots.png");
}

.do-item-icon.belt {
  background-image: url("../image/ui/belt.png");
}

.do-item-icon.bow {
  background-image: url("../image/ui/bow.png");
}

.do-item-icon.bracers {
  background-image: url("../image/ui/bracers.png");
}

.do-item-icon.chest {
  background-image: url("../image/ui/chest.png");
}

.do-item-icon.dagger {
  background-image: url("../image/ui/dagger.png");
}

.do-item-icon.gloves {
  background-image: url("../image/ui/gloves.png");
}

.do-item-icon.helm {
  background-image: url("../image/ui/helm.png");
}

.do-item-icon.material {
  background-image: url("../image/ui/material.png");
}

.do-item-icon.necklace {
  background-image: url("../image/ui/necklace.png");
}

.do-item-icon.pants {
  background-image: url("../image/ui/pants.png");
}

.do-item-icon.shield {
  background-image: url("../image/ui/shield.png");
}

.do-item-icon.spear {
  background-image: url("../image/ui/spear.png");
}

.do-item-icon.staff {
  background-image: url("../image/ui/staff.png");
}

.do-item-icon.sword {
  background-image: url("../image/ui/sword.png");
}

.do-item-icon.wand {
  background-image: url("../image/ui/wand.png");
}

.do-item-icon.orb {
  background-image: url("../image/ui/orb.png");
}

.do-item-icon.tome {
  background-image: url("../image/ui/tome.png");
}

.do-item-icon.crossbow {
  background-image: url("../image/ui/crossbow.png");
}

.do-item-icon.polearm {
  background-image: url("../image/ui/polearm.png");
}

.do-item-icon.consumable {
  background-image: url("../image/ui/consumable.png");
}

.do-item-icon.currency {
  background-image: url("../image/ui/currency.png");
}

.do-item-icon.ring {
  background-image: url("../image/ui/ring.png");
}

.do-item-icon.trinket {
  background-image: url("../image/ui/trinket.png");
}

.do-item-icon.container {
  background-image: url("../image/ui/container.png");
}

.do-item-icon.mace {
  background-image: url("../image/ui/mace.png");
}

.do-item-icon.blueprint {
  background-image: url("../image/ui/blueprint.png");
}

.do-item-icon.pet {
  background-image: url("../image/ui/pet.png");
}

.do-item-icon.other {
  background-image: url("../image/ui/other.png");
}

.do-item-icon.quest.item {
  background-image: url("../image/ui/quest-item.png");
}

.do-item-icon.mount {
  background-image: url("../image/ui/mount.png");
}

.do-item-tag {
  padding: 3px 5px;
  border: solid 1px var(--color-accent);
  display: inline-block;
  margin: 3px;
}

.do-simple-tooltip {
  position: relative;
  display: inline-block;
  background-color: var(--color-blue-bg);
  border: solid 1px var(--color-accent);
  color: var(--color-accent);
  font-weight: bold;
  min-width: 25px;
  min-height: 10px;
  border-radius: 3px;
  text-align: center;
  padding: 2px;
  cursor: pointer;
  margin-left: 3px;
}

.do-simple-tooltip:hover:after {
  position: absolute;
  content: attr(tooltip);
  display: block;
  padding: 5px;
  min-width: 100px;
  font-size: 0.7rem;
  text-align: center;
  color: var(--color-caption-text);
  opacity: 1;
  bottom: calc(100% + 5px);
  border-radius: 4px;
  border: solid 1px var(--color-accent);
  background-color: var(--color-blue-bg);
}

.do-tooltip {
  display: none;
  position: absolute;
  background-color: var(--color-blue-bg);
  color: var(--color-white);
  padding: 15px 10px;
  width: 200px;
  z-index: 99;
  /*bottom: calc(100% + 18px);*/
  /*left: -18px;*/
  border: solid 2px var(--color-accent);
}

.do-tooltip.wide {
  width: 200px;
}

.do-tooltip.epic {
  border: solid 2px var(--color-epic);
}

.do-tooltip.mythical {
  border: solid 2px var(--color-mythical);
}

.do-tooltip:before {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-tooltip:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 3px;
  left: 3px;
}

.do-tooltip.active {
  display: block;
}

.do-tooltip.show {
  display: block;
}

.do-tooltip h1 {
  color: var(--color-white);
  font-size: 0.9rem;
  margin: 0;
}

.do-tooltip h2 {
  color: var(--color-light-gray);
  font-size: 0.8rem;
  margin: 0;
}

.do-tooltip p {
  color: var(--color-light-gray);
  font-size: 0.75rem;
  margin: 0;
}

.do-tooltip-arrow {
  position: absolute;
  display: block;
  width: 100%;
  height: 21.5px;
  background-image: url(../image/ui/tooltip-arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 15% center;
  bottom: -20px;
  left: 0;
}

.epic .do-tooltip-arrow {
  background-image: url(../image/ui/tooltip-arrow-epic.png);
}

.mythical .do-tooltip-arrow {
  background-image: url(../image/ui/tooltip-arrow-mythical.png);
}

.do-tooltip.pos-right {
  left: auto;
  right: 5px;
}

.do-tooltip.right .do-tooltip-arrow {
  background-position: 85% center;
}

.do-tooltip-action-container {
  text-align: center;
  margin-top: 5px;
}

.do-tooltip .do-button {
  font-size: 0.6rem;
  margin: 5px auto;
  padding: 10px;
  min-width: 100px;
  display: inline-block;
  text-align: center;
}

/*STANDARD COMPONENT END*/
/*PUBLIC CLASS START*/
.do-home-banner-wrapper {
  display: grid;
  align-items: center;
}

.do-home-banner-decoration-container {
  background-size: 120%;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-image: url(../image/public/khrox-transparent.png);
  min-height: 400px;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.do-home-banner-decoration-container h1 {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../image/public/border-overlay-black.png);
  text-align: center;
  padding: 15px;
  margin-top: 200px;
  font-size: 1.2rem;
  font-family: "nunito-sans-bold";
  text-transform: uppercase;
  letter-spacing: 1px;
}

.do-home-banner-decoration-container p {
  text-align: center;
}

.do-home-banner-login-wrapper {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  margin: 0 auto 0;
  text-align: center;
}

.do-login-message {
  color: var(--color-warning-hover);
}

.do-home-divider {
  display: block;
  background-image: url("../image/public/divider.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 50px;
  width: 90%;
  margin: 0 auto;
  transform: translateY(-25px);
}

.do-home-faction-container {
  width: 100%;
  min-height: 400px;
}

.do-home-faction-item {
  display: grid;
  text-align: center;
  color: var(--color-white);
}

.do-home-faction-logo {
  max-width: 250px;
  text-align: center;
  margin: 0 auto -175px;
  z-index: 2;
}

.do-home-faction-logo img {
  max-width: 100%;
  filter: drop-shadow(2px 4px 6px black);
}

.do-home-faction-text-container {
  display: block;
  position: relative;
  border: solid 2px var(--color-accent);
  background-color: var(--color-black);
  margin: 20px;
  padding: 150px 25px 25px;
}

.do-home-faction-text-container.silver-legion {
  background-color: var(--color-blue-bg);
}

.do-home-faction-text-container.oathbound {
  background-color: var(--color-red-bg);
}

.do-home-faction-text-container h2 {
  text-transform: uppercase;
  font-family: "nunito-sans-bold";
  letter-spacing: 1px;
}

.do-home-faction-text-container p {
  font-family: "nunito-sans-lite";
}

.do-home-role-container {
  width: 100%;
  min-height: 400px;
  display: grid;
  text-align: center;
  grid-gap: 20px;
}

.do-home-role-decoration-container {
  position: relative;
  min-height: 400px;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 15px;
}

.do-home-role-decoration-container h1 {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../image/public/border-overlay-black.png);
  text-align: center;
  padding: 25px 15px;
  font-size: 1.2rem;
  font-family: "nunito-sans-bold";
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-white);
}

.do-home-role-decoration-1 {
  display: inline-block;
  position: absolute;
  top: 120px;
  left: 0px;
  width: 200px;
  height: 200px;
  z-index: 2;
  background-image: url("../image/public/shillouette-archer.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.375s ease;
}

.do-home-role-decoration-2 {
  display: inline-block;
  position: absolute;
  top: 80px;
  right: 0px;
  width: 250px;
  height: 250px;
  z-index: 1;
  background-image: url("../image/public/shillouette-tank.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.375s ease;
}

.do-home-role-decoration-container p {
  color: var(--color-white);
  margin-top: 250px;
}

.do-home-role-item-container {
  display: grid;
  grid-gap: 10px;
  align-items: flex-start;
  justify-items: center;
  text-align: center;
}

.do-home-role-item {
  color: var(--color-white);
  text-align: center;
  margin-bottom: 50px;
  min-width: 100px;
  padding: 0 20px;
}

.do-home-role-icon {
  border: solid 2px var(--color-accent);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
}

.do-home-role-icon.warrior {
  background-image: url("../image/public/role-icon-01.png");
  background-size: 50%;
}

.do-home-role-icon.craftsman {
  background-image: url("../image/public/role-icon-02.png");
  background-size: 70%;
}

.do-home-role-icon.merchant {
  background-image: url("../image/public/role-icon-03.png");
  background-size: 60%;
}

.do-home-role-icon.scholar {
  background-image: url("../image/public/role-icon-04.png");
  background-size: 60%;
}

.do-home-role-icon.politican {
  background-image: url("../image/public/role-icon-05.png");
  background-size: 75%;
  background-position: 58% 55%;
}

.do-home-role-item h2 {
  letter-spacing: 1px;
}

.do-home-race-container {
  text-align: center;
  color: var(--color-white);
  max-width: 800px;
  margin: 0 auto;
}

.do-home-race-container h1 {
  font-size: nunito-sans-black;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.do-home-race-container p {
  font-size: nunito-sans-lite;
}

.do-home-race-image-wrapper {
  display: inline-block;
  position: relative;
  padding: 10px;
  z-index: 2;
  max-width: 240px;
}

.do-home-race-image-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  top: 118px;
  width: calc((100vw - 320px) / 2);
  border-bottom: solid 2px var(--color-accent);
  right: calc(100% + 20px);
}

.do-home-race-image-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  top: 118px;
  width: calc((100vw - 320px) / 2);
  border-bottom: solid 2px var(--color-accent);
  left: calc(100% + 20px);
}

.do-home-slider-nav {
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../image/public/slider-nav.png");
  cursor: pointer;
}

.do-home-slider-nav.left {
  top: 105px;
  right: calc(100% - 7px);
}

.do-home-slider-nav.right {
  top: 105px;
  left: calc(100% - 7px);
  transform: rotateZ(180deg);
}

.do-home-race-image-sleeve {
  padding: 10px;
}

.do-home-race-image-item {
  position: relative;
  border: solid 2px var(--color-accent);
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.1);
}

.do-home-race-image-item img {
  text-align: center;
}

.do-home-race-image-item img.aluash {
  position: absolute;
  top: -24%;
  left: -10%;
  width: 120%;
}

.do-home-race-image-item img.aviaran {
  position: absolute;
  top: -20%;
  left: 0;
  width: 105%;
}

.do-home-race-image-item img.dwarf {
  position: absolute;
  top: -63%;
  left: -40%;
  width: 180%;
}

.do-home-race-image-item img.elf {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
}

.do-home-race-image-item img.human {
  position: absolute;
  top: -26%;
  left: -5%;
  width: 120%;
}

.do-home-race-image-item img.shayike {
  position: absolute;
  top: -40%;
  left: -23%;
  width: 145%;
}

.do-home-race-image-item img.veskar {
  position: absolute;
  top: -44%;
  left: -38%;
  width: 150%;
}

.do-home-race-image-item img.xeltar {
  position: absolute;
  top: -5%;
  left: 9%;
  width: 90%;
}

.do-home-race-text-wrapper {
  position: relative;
  border: solid 2px var(--color-accent);
  border-top: none;
  padding-top: 122px;
  transform: translateY(-122px);
  z-index: 1;
  margin: 0 20px;
}

.do-home-race-text-item {
  padding: 0 20px 20px;
}

.do-home-race-text-item p {
  color: var(--color-light-gray);
  font-size: 1rem;
  line-height: 1rem;
}

.do-tos-container {
  text-align: center;
  color: var(--color-white);
  padding: 0 10px;
  position: relative;
  margin: 0 auto;
}

.do-tos-container img {
  max-width: 250px;
}

.do-tos-container h1 {
  font-size: 1.5rem;
  color: var(--color-accent);
  margin: 0;
}

.do-tos-container h2 {
  font-family: nunito-sans-lite;
  font-size: 0.85rem;
  color: var(--color-gray);
  margin: 0;
}

.do-tos-list {
  text-align: left;
}

.do-tos-list h3 {
  font-weight: normal;
  margin: 0 0 10px;
  font-size: 1rem;
}

.do-tos-list p {
  font-weight: normal;
  margin: 0 0 10px;
  color: var(--color-light-gray);
  font-size: 0.85rem;
}

.do-tos-list ul li {
  list-style-type: circle;
  margin: 0 0 10px;
  color: var(--color-light-gray);
  font-size: 0.85rem;
}

.do-tos-list-story::marker {
  display: block;
  font-weight: normal;
  margin: 0 0 10px;
  color: var(--color-light-gray);
  font-size: 0.85rem;
}

.do-credits-container {
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--color-white);
  padding: 0 10px;
  gap: 20px;
}

.do-credits-container img {
  max-width: 400px;
}

.do-credits-container h2 {
  letter-spacing: 1px;
  font-family: "nunito-sans-black";
}

.do-credits-section {
  display: grid;
  gap: 5px;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: 10px;
  border-bottom: solid 1px var(--color-accent);
}

.do-credits-section h3:before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-04.png");
  transform: rotateZ(180deg);
  top: 0;
  right: 0;
}

.do-credits-section h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-04.png");
  bottom: 0;
  top: 0;
}

.do-credits-section h3 {
  font-family: "nunito-sans-bold";
}

.do-credits-section p {
  font-family: "nunito-sans-lite";
}

/* 
.do-home-footer-overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
    top: 0;
    left: 0;
}

.do-home-footer-container {
    position: relative;
    text-align: center;
    padding: 100px;
    z-index: 2;
    color: var(--color-white);
}

.do-footer {
    background-color: var(--color-blue-darkest);
    margin: 0;
    display: flex;
    width: 100%;
}

.do-footer-disclaimer {
    text-align: center;
    padding: 10px;
    margin: 0;
    background-color: var(--color-warning);
    color: var(--color-black);
}

.do-footer-copyright {
    padding: 10px;
    text-align: center;
    color: var(--color-white);
} */

.do-forgot-password-container {
  padding: 50px;
}

.do-forgot-password-container h3 {
  margin: 0 0 20px;
}

.do-register-container {
  padding: 15px;
}

.do-register-container h3 {
  margin: 0 0 20px;
}

/*PUBLIC CLASS END*/
/*GAME CLASS START*/
.do-game-wrapper {
  width: 100%;
  max-width: var(--size-max-width);
  margin: 0 auto;
}

.do-account-bar {
  display: grid;
  grid-template-columns: 1fr 155px;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 2px var(--color-accent);
}

.do-account-bar a {
  display: inline-block;
  font-family: "nunito-sans-lite";
  padding-right: 5px;
  border-right: solid 1px var(--color-accent);
  margin: 5px 0;
  letter-spacing: 0.5px;
}

.do-account-bar a:last-child {
  border-right: none;
}

.do-statusbar-wrapper {
  background: linear-gradient(180deg,
      var(--color-background),
      var(--color-black));
  padding: 10px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 10px;
}

.do-statusbar-container {
  display: grid;
  align-items: flex-start;
  position: relative;
}

.do-statusbar-container.left {
  grid-template-columns: 1fr 4fr;
  grid-gap: 10px;
}

.do-statusbar-container.right {
  text-align: right;
}

.do-statusbar-level-up-icon {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 5px;
  left: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/ui/level-up-icon.png");
  cursor: pointer;
  z-index: 5;
}

.do-standard-container.do-statusbar-portrait {
  background-color: var(--color-blue-darkest);
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  min-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  justify-self: center;
}

.do-standard-container.do-statusbar-portrait:before {
  width: 10px;
  height: 10px;
}

.do-standard-container.do-statusbar-portrait:after {
  width: 10px;
  height: 10px;
}

.do-statusbar-faction {
  background-color: var(--color-blue-darkest);
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 0 8px;
  min-height: 0;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 2px var(--color-accent);
}

.do-statusbar-faction.oath {
  background-image: url("../image/ui/oathbound-logo.png");
  background-size: 15px;
}

.do-statusbar-faction.legion {
  background-image: url("../image/ui/silver-legion-logo.png");
  background-size: 20px;
}

.do-statusbar-name h2 {
  margin: 0;
  font-family: "nunito-sans-bold";
  letter-spacing: 0.2px;
}

.do-statusbar-name p {
  margin: 0;
  font-family: "nunito-sans-lite";
}

.do-statusbar-bar-container {
  grid-column-start: span 2;
  height: max-content;
}

.do-statusbar-ap-container h3 {
  background-color: var(--color-blue-darkest);
  padding: 10px;
  margin: 5px 0;
  min-height: 0;
  text-align: center;
  border: solid 2px var(--color-accent);
}

.do-statusbar-ap-container p {
  margin: 2px 0;
  font-size: 0.65rem;
  text-align: center;
}

.do-statusbar-region-container {
  text-align: center;
  grid-column-start: span 2;
  background: linear-gradient(0deg,
      var(--color-background),
      var(--color-black));
}

.do-statusbar-region-container.oath {
  background: linear-gradient(0deg, var(--color-oath), var(--color-black));
}

.do-statusbar-region-container.legion {
  background: linear-gradient(0deg, var(--color-legion), var(--color-black));
}

.do-statusbar-region-container h2 {
  margin: 1px;
  font-family: "nunito-sans-lite";
  font-size: 0.85rem;
  color: var(--color-white);
}

.do-game-nav-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

.do-game-nav-container .do-button {
  min-width: 0;
  width: 100%;
  font-size: 0.6rem;
  padding: 12px 0;
}

.do-error-message {
  padding: 10px;
  text-align: center;
  font-size: 1.3rem;
  color: var(--color-accent);
}

.do-start-wrapper {
  text-align: center;
}

.do-start-title {
  font-family: "nunito-sans-bold";
  text-align: center;
  font-size: 1.5rem;
  border-bottom: solid 2px var(--color-accent);
  border-top: 2px solid var(--color-accent);
  padding: 10px;
  margin: 15px 0;
}

.do-faction-picker-wrapper {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.do-faction-button {
  -webkit-user-select: none;
  user-select: none;
}

.do-faction-button.selected span.do-standard-container {
  width: 70%;
  padding-bottom: 70%;
  box-shadow: 0px 0px 12px;
}

.do-faction-button span.do-standard-container {
  width: 60%;
  padding: 0;
  padding-bottom: 60%;
  height: 0;
  margin: 0 auto;
  display: block;
  background-size: cover;
  transition: all 0.375s ease;
  cursor: pointer;
  min-height: 0;
}

.do-faction-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: bold;
}

.do-faction-button.oath {
  text-align: center;
}

.do-faction-button.oath span.do-standard-container {
  background-image: url("../image/oathbound-logo-transparent.png");
}

.do-faction-button.legion {
  text-align: center;
}

.do-faction-button.legion span.do-standard-container {
  background-image: url("../image/legion-logo-transparent.png");
}

.do-faction-preview {
  grid-column-start: 1;
  grid-column-end: span 2;
  text-align: center;
  font-family: "nunito-sans-lite";
  margin: 10px 0;
}

.do-faction-preview p {
  font-size: 1rem;
  color: var(--color-light-gray);
}

.do-start-wrapper .do-home-race-text-wrapper {
  margin: 0 0 -150px;
}

.do-start-wrapper .do-home-race-image-wrapper {
  max-width: 235px;
}

.do-start-wrapper .do-home-race-image-wrapper:before {
  width: calc((100vw - 340px) / 2);
  right: calc(100% + 30px);
}

.do-start-wrapper .do-home-race-image-wrapper:after {
  width: calc((100vw - 340px) / 2);
  left: calc(100% + 30px);
}

.do-start-wrapper .do-home-race-text-item {
  margin: 0 10px;
}

.do-account-container {
  display: grid;
}

.do-account-container .do-home-divider {
  transform: none;
}

.do-journal-wrapper,
.do-journal-wrapper.vote {
  display: grid;
  padding: 10px;
}

.do-journal-wrapper .do-tab-nav-button {
  color: var(--color-gray);
  padding: 10px;
}

.do-journal-wrapper .do-tab-nav-button.active {
  color: var(--color-white);
}

.do-journal-container {
  padding: 10px;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
}

.do-equipment-wrapper+.do-journal-container {
  margin: 10px;
}

.do-message-of-the-day-container {
  background-color: var(--color-accent);
  padding: 5px;
  margin-bottom: 10px;
}

.do-message-of-the-day-container p {
  font-size: 0.9rem;
  color: var(--color-black);
  margin: 0;
}

.do-message-of-the-day-container a {
  color: var(--color-blue-bg);
}

.do-message-of-the-day-container a:hover {
  color: var(--color-blue-dark);
}

.do-journal-title {
  font-size: 1.5rem;
  font-family: "nunito-sans-bold";
  text-align: center;
}

.do-journal-empty {
  text-align: center;
  color: var(--color-gray);
  padding: 10px;
  border: 2px solid var(--color-accent);
  margin: 15px auto;
  font-size: 1rem;
}

.do-journal-item {
  padding: 10px 0;
  color: var(--color-light-gray);
  width: auto;
  display: grid;
  grid-template-columns: 60px 1fr;
  font-size: 1rem;
  border-top: solid 1px var(--color-gray);
  border-bottom: solid 1px var(--color-black);
}

.do-journal-item.good .do-journal-symbol {
  color: var(--color-good);
}

.do-journal-item.bad .do-journal-symbol {
  color: var(--color-bad);
}

.do-journal-symbol {
  font-size: 3rem;
  text-align: center;
}

.do-journal-text-container {
  font-size: 0.9rem;
}

.do-journal-date {
  color: var(--color-accent);
}

.do-journal-reference {
  grid-column-start: span 2;
  padding: 5px;
  text-align: center;
  margin: 0 auto;
}

.do-journal-reference a {
  color: var(--color-white);
}

.do-journal-reference a:hover {
  color: var(--color-accent);
}

.do-journal-pagination-wrapper {
  text-align: center;
}

.do-story-message-container {
  font-size: 1rem;
  padding: 5px;
  background-color: var(--color-blue-dark);
  border: solid 2px var(--color-accent);
  text-align: center;
}

.do-story-message-container a {
  color: var(--color-accent);
}

.do-quest-guide-container h2 {
  margin: 0 0 10px;
  text-align: center;
  color: var(--color-accent);
}

.do-quest-container {
  padding: 10px;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
  display: grid;
  gap: 10px;
}

.do-quest-title {
  font-size: 1rem;
  font-family: "nunito-sans-bold";
  text-align: center;
}

.do-quest-empty {
  text-align: center;
  color: var(--color-gray);
  padding: 10px;
  border: 2px solid var(--color-accent);
  margin: 15px auto;
  font-size: 1rem;
}

.do-quest-item {
  height: 40px;
  overflow: hidden;
  transition: all 0.375s ease;
}

.do-quest-item.expanded {
  height: auto;
}

.do-quest-item-header {
  display: grid;
  grid-template-columns: 1fr 70px;
  padding: 5px;
  cursor: pointer;
  border: solid 2px var(--color-accent);
  align-items: center;
}

.do-quest-item-label {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 5px 2px;
  color: var(--color-white);
  border: solid 2px var(--color-accent);
  font-family: nunito-sans-bold;
  font-size: 0.6rem;
}

.do-quest-item-label:before {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 0;
  right: 0;
}

.do-quest-item-label:after {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 0;
  left: 0;
}

.do-quest-item-label.repeatable {
  background-color: var(--color-repeatable);
}

.do-quest-item-label.story {
  background-color: var(--color-story);
}

.do-quest-item-title h3 {
  font-size: 0.7rem;
  display: inline-block;
  margin: 0 0 0 5px;
}

.do-quest-item-min-level {
  font-size: 1rem;
  text-align: right;
  color: var(--color-light-gray);
}

.do-quest-item-info {
  padding: 10px;
  border: solid 2px var(--color-accent);
  border-top: none;
  background-color: var(--color-black);
}

.do-quest-item-action-container {
  display: grid;
  border-top: solid 1px var(--color-accent);
  margin-top: 10px;
  align-items: flex-start;
}

.do-quest-item-requirement-container {
  padding: 5px 0;
  color: var(--color-orange);
}

.do-quest-reward-container h3 {
  margin: 5px 0;
  color: var(--color-light-gray);
}

.do-quest-reward-container ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.do-quest-reward-container li {
  display: flex;
  align-items: center;
  min-height: 25px;
}

.do-quest-reward-container li .do-item-icon {
  max-width: 80px;
  padding-bottom: min(100%, 80px);
  margin: 0 5px 5px 0;
}

.do-popup-wrapper.daily-reward {
  padding: 10px;
  text-align: center;
}

.do-daily-reward-table {
  display: grid;
  min-width: 300px;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  text-align: center;
}

.do-daily-reward-icon {
  position: relative;
  opacity: .25;
}

.do-daily-reward-icon.today {
  opacity: 1;
}

.do-daily-reward-icon.claimed {
  opacity: .75;
}

.do-daily-reward-icon.claimed::after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 2px;
  width: 30px;
  height: 30px;
  background-image: url("../image/checklist-yellow.png");
  background-size: cover;
  background-repeat: no-repeat;
  background--position: center;
}

.do-daily-reward-icon.today::after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 2px;
  width: 30px;
  height: 30px;
  background-image: url("../image/checklist-yellow.png");
  background-size: cover;
  background-repeat: no-repeat;
  background--position: center;
}

.do-daily-reward-icon p {
  margin: 2px 0;
}

.do-daily-reward-icon dranemir {
  display: grid;
  justify-items: center;
  width: 100%;
  height: calc(100% - 23px);
  grid-template-columns: 1fr;
  text-align: center;
  font-size: 0.7rem;
  border: solid 2px var(--color-accent);
  padding: 3px;
}

.do-daily-reward-icon dranemir:after {
  order: -1;
  display: block;
  width: 45px;
  height: 45px;
}

.do-daily-reward-icon bonds {
  display: grid;
  justify-items: center;
  width: 100%;
  height: calc(100% - 23px);
  grid-template-columns: 1fr;
  text-align: center;
  font-size: 0.7rem;
  border: solid 2px var(--color-accent);
  padding: 3px;
}

.do-daily-reward-icon bonds:after {
  order: -1;
  display: block;
  width: 45px;
  height: 45px;
}

.do-bestiary-wrapper,
.do-collection-wrapper {
  position: relative;
  border: solid 2px var(--color-accent);
  padding: 35px 20px;
  background-color: var(--color-blue-bg);
  overflow: hidden;
}

.do-collection-container {
  display: grid;
}

.do-collection-image {
  margin: 10px auto 0;
  width: 100px;
  height: 100px;
  font-size: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.do-collection-group h2 {
  margin: 5px 0;
  text-align: center;
  color: var(--color-accent);
}

.do-collection-group h3 {
  margin: 5px 0;
  text-align: center;
  color: var(--color-gray);
  font-weight: bold;
}

.do-collection-group p {
  margin: 5px 0;
  text-align: center;
  color: var(--color-gray);
}

.do-collection-tag {
  margin: 5px 3px 0 0;
  display: inline-block;
  text-align: center;
  color: var(--color-accent);
  font-weight: bold;
  padding: 3px;
  border-radius: 4px;
  border: solid 1px var(--color-accent);
}

.do-collection-donate-container {}

.do-collection-stats-container {
  display: grid;
}

.do-collection-stats-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 3px 0;
  color: var(--color-accent);
}

.do-collection-stats-row>label {
  margin: 0;
  font-weight: bold;
}

.do-collection-stats-row>p {
  margin: 0;
}

.do-collection-reward-label {
  text-align: center;
  font-weight: bold;
  font-size: .9rem;
  color: var(--color-gold);
}

.do-collection-guide-title {
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-accent);
  font-weight: bold;
  margin: 5px 0;
}

.do-collection-guide-subtitle {
  text-align: left;
  font-size: .8rem;
  color: var(--color-white);
  margin: 5px 0;
}

.do-collection-guide-info {
  text-align: left !important;
  color: var(--color-gray);
  margin: 0;
  max-height: 200px;
  overflow: auto;
}

.do-bestiary-empty-placeholder {
  text-align: center;
  color: var(--color-gray);
  padding: 10px;
  border: 2px solid var(--color-accent);
  margin: 15px auto;
  font-size: 1rem;
}

.do-bestiary-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.do-bestiary-item {
  position: relative;
  border: solid 2px var(--color-accent);
  text-align: center;
  padding-bottom: 10px;
}

.do-bestiary-item h3 {
  font-size: 1rem;
  margin: 5px;
  color: var(--color-white);
}

.do-bestiary-item h4 {
  font-size: 0.8rem;
  margin: 5px;
  color: var(--color-light-gray);
}

.do-bestiary-image {
  position: relative;
  max-width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.do-bestiary-icon {
  position: absolute;
  top: 10px;
  width: 30px;
  height: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.do-bestiary-icon span {
  display: none;
}

.do-bestiary-icon:hover span {
  position: absolute;
  display: block;
  width: 100%;
  min-width: 150px;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: solid 1px var(--color-copper);
}

.do-bestiary-icon.loot {
  left: 10px;
  background-image: url("../image/icon-loot.png");
}

.do-bestiary-icon.medal {
  left: 50px;
  background-image: url("../image/icon-medal.png");
}

.do-bestiary-pagination-container {
  text-align: center;
  margin-top: 10px;
}

.do-bestiary-item .do-bar-wrapper {
  grid-template-columns: 1fr;
  padding: 0 5px;
}

.do-bestiary-item .do-bar-wrapper p {
  margin: 0;
  color: var(--color-accent) !important;
}

.do-bestiary-item .do-bar p {
  margin: 0;
  color: var(--color-white) !important;
}

.do-bestiary-item .do-button {
  margin-top: 5px;
}

.do-bestiary-detail-container {
  display: grid;
}

.do-bestiary-general-info {
  margin-top: 10px;
}

.do-bestiary-general-info p {
  color: var(--color-light-gray);
  margin: 0 0 5px;
}

.do-bestiary-detailed-info {
  padding-bottom: 30px;
}

.do-bestiary-info {
  display: grid;
  grid-template-columns: 125px 1fr;
  font-size: 0.8rem;
  align-items: center;
  color: var(--color-white);
  align-items: flex-start;
  text-align: left;
}

.do-bestiary-info p {
  margin: 0;
  color: var(--color-light-gray);
}

.do-equipment-wrapper>.do-decor-2 {
  display: none;
}

.do-equipment-wrapper>.do-tab-nav-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  z-index: 0;
}

.do-equipment-wrapper>.do-tab-nav-container .do-tab-nav-button {
  text-align: center;
  padding: 10px;
  margin: 0;
  font-size: 1rem;
}

.do-equipment-wrapper>.do-tab-page {
  z-index: 1;
}

.do-equipment-wrapper>.do-tab-page.active:before {
  content: "";
  width: calc(50% - 7px);
  height: 5px;
  background-color: var(--color-blue-bg);
  display: block;
  position: absolute;
  top: -3px;
  z-index: 1;
  background-image: none;
}

.do-equipment-wrapper>.do-tab-page.left.active:before {
  left: 0;
}

.do-equipment-wrapper>.do-tab-page.right.active:before {
  right: 0;
}

.do-equipment-wrapper>.do-tab-page:before,
.do-equipment-wrapper>.do-tab-page:after {
  content: none;
}

.do-equipment-container {
  display: grid;
  position: relative;
  z-index: 2;
  padding: 40px 0;
}

.do-explore-middle-decor {
  display: block;
  width: 340px;
  height: 100px;
  top: -51.5px;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.do-explore-middle-decor.right,
.do-explore-middle-decor.left {
  width: 0;
  top: auto;
}

.do-explore-middle-decor.bottom {
  top: auto;
  bottom: -52.5px;
}

.do-explore-decor {
  display: block;
  width: 150px;
  height: 150px;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* background-image: url("../image/profile-frame-reduced/frame-2/reduced-frame.png"); */
  top: -31px;
  left: -31.5px;
}

.do-explore-decor.right-up {
  right: -31px;
  top: -31.5px;
  left: auto;
}

.do-explore-decor.right-bottom {
  right: -31.5px;
  bottom: -31px;
  top: auto;
  left: auto;
}

.do-explore-decor.left-bottom {
  right: auto;
  top: auto;
  bottom: -31.5px;
  left: -31px;
}

.do-full-equipment-wrapper {
  position: relative;
  border: solid 2px var(--color-accent);
  background-color: var(--color-blue-bg);
}

.do-player-status-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.do-profile-secondary-stats-container {
  display: grid;
  grid-gap: 10px;
  padding: 20px;
  margin: 10px;
}

.do-profile-player-info-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  overflow: hidden;
  margin: 0;
}

.do-profile-player-identity {
  display: grid;
  grid-template-columns: 0.5fr 2fr 0.5fr 0.5fr;
  align-items: center;
  gap: 8px;
  justify-items: start;
}

.do-profile-badge-list-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 10px;
  gap: 10px;
}

.do-profile-banner-icon-container {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  gap: 10px;
  grid-column: 1 / span 2;
}

.do-profile-banner-icon {
  height: 30px;
  width: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-black);
  border-radius: 50%;
  cursor: pointer;
}

.do-profile-banner-icon.active {
  border: 2px solid var(--color-accent);
}

.do-profile-frame-icon,
.do-profile-avatar-icon {
  height: 100px;
  width: 100px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-black);
  border-radius: 4%;
  cursor: pointer;
}

.do-profile-frame-icon.active,
.do-profile-avatar-icon.active {
  border: 2px solid var(--color-accent);
}

.do-profile-player-status-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-accent);
}

.do-profile-player-status-detail-container {
  font-size: 0.6rem;
}

.do-profile-player-status-info {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  align-items: center;
}

.do-profile-equipment-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-gap: 5px;
  grid-template-rows: repeat(6, 50px);
  padding: 20px 0;
  background-color: var(--color-blue-bg);
  justify-content: center;
}

.do-profile-pv-label {
  position: absolute;
  top: -20px;
  right: 10px;
  background-color: var(--color-black);
  border: solid 2px var(--color-accent);
  z-index: 0;
  padding: 5px;
}

.do-profile-pv-label>p {
  margin: 0;
}

.do-profile-equipment-slot {
  background-color: var(--color-black);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.do-profile-equipment-slot.helm {
  grid-column-start: 3;
  grid-row-start: 1;
  background-image: url("../image/ui/helm-empty.png");
}

.do-profile-equipment-slot.necklace {
  grid-column-start: 3;
  grid-row-start: 2;
  background-image: url("../image/ui/necklace-empty.png");
}

.do-profile-equipment-slot.chest {
  grid-column-start: 3;
  grid-row-start: 3;
  background-image: url("../image/ui/chest-empty.png");
}

.do-profile-equipment-slot.belt {
  grid-column-start: 3;
  grid-row-start: 4;
  background-image: url("../image/ui/belt-empty.png");
}

.do-profile-equipment-slot.pants {
  grid-column-start: 3;
  grid-row-start: 5;
  background-image: url("../image/ui/pants-empty.png");
}

.do-profile-equipment-slot.boots {
  grid-column-start: 3;
  grid-row-start: 6;
  background-image: url("../image/ui/boots-empty.png");
}

.do-profile-equipment-slot.bracers {
  grid-column-start: 2;
  grid-row-start: 3;
  background-image: url("../image/ui/bracers-empty.png");
}

.do-profile-equipment-slot.gloves {
  grid-column-start: 4;
  grid-row-start: 3;
  background-image: url("../image/ui/gloves-empty.png");
}

.do-profile-equipment-slot.trinket-1 {
  grid-column-start: 1;
  grid-row-start: 4;
  background-image: url("../image/ui/trinket-empty.png");
}

.do-profile-equipment-slot.trinket-2 {
  grid-column-start: 2;
  grid-row-start: 4;
  background-image: url("../image/ui/trinket-empty.png");
}

.do-profile-equipment-slot.trinket-3 {
  grid-column-start: 1;
  grid-row-start: 5;
  background-image: url("../image/ui/trinket-empty.png");
}

.do-profile-equipment-slot.trinket-4 {
  grid-column-start: 2;
  grid-row-start: 5;
  background-image: url("../image/ui/trinket-empty.png");
}

.do-profile-equipment-slot.ring-1 {
  grid-column-start: 4;
  grid-row-start: 4;
  background-image: url("../image/ui/ring-empty.png");
}

.do-profile-equipment-slot.ring-2 {
  grid-column-start: 5;
  grid-row-start: 4;
  background-image: url("../image/ui/ring-empty.png");
}

.do-profile-equipment-slot.ring-3 {
  grid-column-start: 4;
  grid-row-start: 5;
  background-image: url("../image/ui/ring-empty.png");
}

.do-profile-equipment-slot.ring-4 {
  grid-column-start: 5;
  grid-row-start: 5;
  background-image: url("../image/ui/ring-empty.png");
}

.do-profile-equipment-slot.main-hand {
  grid-column-start: 1;
  grid-row-start: 2;
  background-image: url("../image/ui/sword-empty.png");
}

.do-profile-equipment-slot.off-hand {
  grid-column-start: 5;
  grid-row-start: 2;
  background-image: url("../image/ui/shield-empty.png");
}

.do-profile-equipment-slot.mount {
  grid-column-start: 1;
  grid-row-start: 1;
  background-image: url("../image/ui/mount-empty.png");
}

.do-profile-equipment-slot.pet {
  grid-column-start: 5;
  grid-row-start: 1;
  background-image: url("../image/ui/pet-empty.png");
}

.do-profile-equipment-slot.consumable-1 {
  grid-column-start: 1;
  grid-row-start: 6;
  background-image: url("../image/ui/consumable-empty.png");
}

.do-profile-equipment-slot.consumable-2 {
  grid-column-start: 2;
  grid-row-start: 6;
  background-image: url("../image/ui/consumable-empty.png");
}

.do-standard-container.do-profile-faction-crest {
  width: 70px;
  height: 70px;
  margin: 0;
  display: inline-block;
  padding: 0;
  min-height: 0;
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
}

.do-standard-container.do-profile-faction-crest.oath {
  background-image: url("../image/ui/oathbound-logo.png");
}

.do-standard-container.do-profile-faction-crest.legion {
  background-image: url("../image/ui/silver-legion-logo.png");
}

.do-standard-container.do-profile-faction-crest:before,
.do-standard-container.do-profile-faction-crest:after,
.do-standard-container.do-profile-avatar:before,
.do-standard-container.do-profile-avatar:after {
  width: 10px;
  height: 10px;
}

.do-profile-status-title h1 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-white);
  font-family: "nunito-sans-bold";
}

.do-profile-status-title span {
  font-size: 0.9rem;
  color: var(--color-accent);
  margin-left: 5px;
  font-family: "nunito-sans-lite";
}

.do-skill-point-text {
  padding: 5px;
  width: 100%;
  background-color: var(--color-accent);
  color: var(--color-black);
  font-family: "nunito-sans-bold";
  margin: 10px 0;
}

.do-skill-point-text p {
  display: inline-block;
  margin: 0 5px 0;
}

.do-skill-point-text span {
  display: inline-block;
  font-family: "nunito-sans-black";
}

.do-profile-primary-stats-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  margin: 0 0 10px;
}

.do-profile-primary-stats {
  position: relative;
  text-align: center;
  border: solid 1px var(--color-accent);
  padding: 5px;
  font-size: 1rem;
  cursor: pointer;
}

.do-profile-primary-stats.str:hover {
  background-color: var(--color-str-bg);
}

.do-profile-primary-stats.vit:hover {
  background-color: var(--color-vit-bg);
}

.do-profile-primary-stats.dex:hover {
  background-color: var(--color-dex-bg);
}

.do-profile-primary-stats.int:hover {
  background-color: var(--color-int-bg);
}

.do-profile-primary-stats.cha:hover {
  background-color: var(--color-cha-bg);
}

.do-profile-primary-stats span {
  display: block;
  font-size: 1rem;
  margin-top: 5px;
  border-bottom: solid 2px transparent;
}

.do-profile-primary-stats:hover span {
  border-bottom: solid 2px var(--color-accent);
}

.do-profile-primary-stats>p {
  display: block;
  margin: 5px;
  min-height: 22px;
}

.do-profile-primary-stats.small p {
  margin: 2px;
  font-size: 1.1rem;
  padding: 2px;
}

.do-profile-primary-stats p.detail {
  display: none;
}

.do-profile-primary-stats:hover p.summary {
  display: none;
}

.do-profile-primary-stats:hover p.detail {
  display: block;
  font-size: 0.85rem;
}

.do-skill-point-spend-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 5px 0;
}

.do-skill-point-spend {
  display: block;
  background-color: var(--color-accent);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../image/ui/add_black.svg);
  height: 20px;
  padding: 5px;
  color: var(--color-black);
  text-align: center;
  cursor: pointer;
}

.do-skill-point-spend.min {
  background-image: url(../image/ui/min_black.png);
}

.do-skill-point-save {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.do-profile-secondary-divider {
  font-size: 1rem;
  color: var(--color-white);
  text-align: center;
  border-bottom: solid 1px var(--color-accent);
}

.do-profile-secondary-stats {
  font-size: 1rem;
  padding: 0;
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  cursor: pointer;
  border-bottom: solid 1px transparent;
}

.do-profile-secondary-stats:hover {
  border-bottom: solid 1px var(--color-accent);
}

.do-profile-secondary-stats span {
  color: var(--color-accent);
}

.do-profile-secondary-stats>p {
  color: var(--color-white);
  margin: 0;
  text-align: right;
}

.do-inventory-wrapper {
  position: relative;
  min-height: 200px;
  margin: 10px;
  z-index: 2;
}

.do-inventory-wrapper .do-tab-nav-button {
  font-size: 1.5rem;
  font-family: ui-sans-serif;
  min-width: 50px;
  text-align: center;
}

.do-inventory-wrapper .do-tab-nav-button.active {
  color: var(--color-accent);
}

.do-tab-page.do-inventory-tab.active {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

.do-inventory-search-container .do-input {
  min-height: 40px;
}

.do-inventory-empty {
  background-color: var(--color-black);
  padding-bottom: 100%;
  order: 1;
}

.do-button.add {
  position: relative;
  background-size: 10%;
  background-position: 95%;
  background-repeat: no-repeat;
  background-image: url(../image/ui/add_white.svg);
  background-color: var(--color-good);
  width: 200px;
  text-align: left;
  min-height: 39px;
}

.do-tab-nav-button.add {
  position: relative;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/ui/add_white.svg");
  background-color: var(--color-good);
  min-height: 39px;
}

.do-tab-nav-button.add:hover {
  background-color: var(--color-good-hover);
}

.do-region-detail-wrapper {
  position: relative;
  margin: 10px;
  border: solid 2px var(--color-accent);
  padding: 20px 10px;
  background-color: var(--color-blue-bg);
}

.do-region-detail-wrapper h1 {
  font-family: "nunito-sans-bold";
  margin: 0;
  text-align: center;
}

.do-region-detail-container {
  display: grid;
  /*grid-template-columns: 1fr;*/
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
  position: relative;
}

.do-region-leader-photo-container {
  grid-row-start: span 2;
  order: 1;
  position: relative;
  width: auto;
  bottom: auto;
  left: auto;
}

.do-region-detail-info-container {
  order: 1;
}

.do-region-leader-photo-container h2 {
  margin: 0;
  color: var(--color-accent);
  font-family: "nunito-sans";
  font-size: 1rem;
  text-align: center;
}

.do-region-leader-photo {
  position: relative;
  background-color: var(--color-black);
  width: 100%;
  margin: 0;
  height: 0;
  padding-bottom: calc(100% - 4px);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../image/ally/default.png);
  border: solid 2px var(--color-accent);
}

.do-region-leader-photo:before {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 2%;
  right: 2%;
}

.do-region-leader-photo:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 2%;
  left: 2%;
}

.do-region-leader-photo.vorax,
.do-region-leader-photo.ally-2 {
  background-image: url("../image/ally/vorax.png");
}

.do-region-leader-photo.blaine,
.do-region-leader-photo.ally-3 {
  background-image: url("../image/ally/default.png");
}

.do-region-leader-photo.thane,
.do-region-leader-photo.ally-4 {
  background-image: url("../image/ally/default.png");
}

.do-region-leader-photo.corzala,
.do-region-leader-photo.ally-5 {
  background-image: url("../image/ally/default.png");
}

.do-region-leader-photo.tharani,
.do-region-leader-photo.ally-6 {
  background-image: url("../image/ally/tharani.png");
}

.do-region-leader-photo.glaurund,
.do-region-leader-photo.ally-7 {
  background-image: url("../image/ally/glaurund.png");
}

.do-region-leader-photo.khrox,
.do-region-leader-photo.ally-8 {
  background-image: url("../image/ally/khrox.jpg");
}

.do-region-leader-photo.talara,
.do-region-leader-photo.ally-9 {
  background-image: url("../image/ally/talara.png");
}

.do-region-leader-photo.jura,
.do-region-leader-photo.ally-10 {
  background-image: url("../image/ally/default.png");
}

.do-region-leader-photo.arlena,
.do-region-leader-photo.ally-11 {
  background-image: url("../image/ally/default.png");
}

.do-region-leader-photo.shyrel,
.do-region-leader-photo.ally-12 {
  background-image: url("../image/ally/shyrel.png");
}

.do-region-leader-photo.terranas,
.do-region-leader-photo.ally-13 {
  background-image: url("../image/ally/terranas.png");
}

.do-region-leader-photo.naxari,
.do-region-leader-photo.ally-14 {
  background-image: url("../image/ally/naxari.png");
}

.do-region-finance-container h3 {
  margin: 0;
  font-family: "nunito-sans-bold";
  letter-spacing: 0.2px;
}

.do-region-finance-container h3.oath {
  color: var(--color-oath);
}

.do-region-finance-container h3.legion {
  color: var(--color-legion);
}

.do-region-finance-container span {
  text-align: left;
  font-family: "nunito-sans";
  color: var(--color-white);
}

.do-region-finance-container p {
  margin: 0;
  color: var(--color-light-gray);
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  font-size: 0.75rem;
  border-bottom: solid 2px transparent;
  text-align: right;
}

.do-region-finance-container p:hover {
  border-bottom: solid 2px var(--color-accent);
}

.do-region-finance-container dranemir {
  font-size: 0.75rem;
  grid-template-columns: 1fr 20px;
}

.do-region-finance-container dranemir:after {
  width: 20px;
  height: 20px;
}

.do-region-reputation-container h3 {
  margin: 0;
  font-family: "nunito-sans-bold";
  letter-spacing: 0.2px;
}

.do-region-reputation-container span {
  text-align: left;
  font-family: "nunito-sans";
  color: var(--color-white);
}

.do-region-reputation-container p {
  margin: 0;
  color: var(--color-light-gray);
  display: grid;
  grid-template-columns: 100px 1fr;
  min-height: 25px;
  align-items: center;
  font-size: 0.75rem;
  border-bottom: solid 2px transparent;
  text-align: right;
}

.do-region-reputation-container p:hover {
  border-bottom: solid 2px var(--color-accent);
}

.do-region-bar-container {
  grid-column-start: span 2;
}

.do-region-detail-wrapper .do-bar-wrapper {
  grid-template-columns: 1fr;
}

.do-region-detail-wrapper .do-gauge-wrapper {
  grid-template-columns: 1fr;
}

.do-building-wrapper {
  display: grid;
  gap: 10px;
  margin: 10px;
}

.do-building-header-container {
  padding: 10px;
  background-color: rgba(0, 0, 0, .75);
  border: solid 2px var(--color-accent);
  position: relative;
}

.do-building-background {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: black;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: grid;
  align-content: space-between;
  background-image: url(../image/avrael-tavern.png);
  z-index: -1;
  top: 0;
  left: 0;
}

.do-building-header-container h1 {
  margin: 0;
}

.do-building-influence-container {}

.do-building-endorse-container {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 5px;
}

.do-building-interaction-container {}

.do-building-menu-container {
  display: flex;
  gap: 5px;
  max-width: calc(100vw - 20px);
  overflow: auto;
}

.do-building-menu-button {
  font-size: 0.7rem;
  font-family: "nunito-sans-bold";
  border: solid 2px var(--color-accent);
  padding: 10px;
  cursor: pointer;
  min-width: 120px;
  text-align: center;
  align-items: center;
  display: flex;
  line-height: 0.7rem;
  justify-content: center;
  transition: all .375s ease;
}

.do-building-menu-button:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.do-building-interaction-module {
  margin: 10px 0;
  background-color: var(--color-blue-bg);
  padding: 10px;
  border: solid 2px var(--color-accent);
}

.do-region-building-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin: 10px 0;
  background-color: var(--color-blue-bg);
}

.do-region-building-container.do-standard-container {
  padding: 20px 10px;
}

.do-standard-container.do-building-icon {
  text-align: center;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 10px;
}

.do-standard-container.do-building-icon:hover {
  background-color: var(--color-blue-dark);
}

.do-building-icon i {
  font-size: 2rem;
}

.do-building-icon h2 {
  color: var(--color-accent);
  margin: 10px 0;
}

.do-building-icon p {
  color: var(--color-light-gray);
  margin: 0;
}

.do-explore-progress-container .do-bar-wrapper {
  grid-template-columns: 1fr;
}

.do-explore-progress-container .do-bar-wrapper>p {
  color: var(--color-accent);
}

.do-node-container {
  text-align: center;
  color: var(--color-white);
  max-width: 800px;
  margin: 0 auto;
}

.do-node-container h1 {
  font-size: nunito-sans-black;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.do-node-container p {
  font-size: nunito-sans-lite;
}

.do-node-image-wrapper {
  display: inline-block;
  position: relative;
  padding: 10px;
  z-index: 2;
  max-width: 240px;
}

.do-node-image-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  top: 118px;
  width: calc((100vw - 325px) / 2);
  border-bottom: solid 2px var(--color-accent);
  right: calc(100% + 20px);
}

.do-node-image-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  top: 118px;
  width: calc((100vw - 325px) / 2);
  border-bottom: solid 2px var(--color-accent);
  left: calc(100% + 20px);
}

.do-node-slider-nav {
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../image/public/slider-nav.png");
  cursor: pointer;
}

.do-node-slider-nav.left {
  top: 105px;
  right: calc(100% - 7px);
}

.do-node-slider-nav.right {
  top: 105px;
  left: calc(100% - 7px);
  transform: rotateZ(180deg);
}

.do-node-image-sleeve {
  padding: 10px;
}

.do-node-image-item {
  position: relative;
  border: solid 2px var(--color-accent);
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  display: grid;
  align-items: center;
  font-size: 0.6rem;
  color: var(--color-accent);
  padding: 10px;
}

.do-node-image-item img {
  text-align: center;
}

.do-node-image-item img.aluash {
  position: absolute;
  top: -24%;
  left: -10%;
  width: 120%;
}

.do-node-image-item img.aviaran {
  position: absolute;
  top: -20%;
  left: 0;
  width: 105%;
}

.do-node-image-item img.dwarf {
  position: absolute;
  top: -63%;
  left: -40%;
  width: 180%;
}

.do-node-image-item img.elf {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
}

.do-node-image-item img.human {
  position: absolute;
  top: -26%;
  left: -5%;
  width: 120%;
}

.do-node-image-item img.shayike {
  position: absolute;
  top: -40%;
  left: -23%;
  width: 145%;
}

.do-node-image-item img.veskar {
  position: absolute;
  top: -44%;
  left: -38%;
  width: 150%;
}

.do-node-image-item img.xeltar {
  position: absolute;
  top: -5%;
  left: 9%;
  width: 90%;
}

.do-node-detail-wrapper {
  position: relative;
  border: solid 2px var(--color-accent);
  border-top: none;
  padding-top: 122px;
  transform: translateY(-122px);
  z-index: 1;
  margin: 0;
}

.do-node-detail-item {
  padding: 10px;
}

.do-node-detail-item h2 {
  margin: 0;
}

.do-node-detail-item>h3 {
  margin: 0;
  color: var(--color-orange);
  font-size: 1rem;
}

.do-node-detail-item>p {
  color: var(--color-light-gray);
  font-size: 1rem;
  line-height: 1rem;
  margin: 0 0 10px;
}

.do-node-enemy-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  padding: 10px 0px 10px;
}

.do-node-enemy-item {
  position: relative;
  border: solid 2px var(--color-accent);
  width: 100%;
  height: 0;
  padding-bottom: calc(100% - 4px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 45px;
  background-color: var(--color-black);
}

.do-node-enemy-item:before {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  transform: rotateZ(180deg);
  top: 3px;
  right: 3px;
}

.do-node-enemy-item:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 3px;
  left: 3px;
}

.do-node-enemy-item p {
  position: absolute;
  top: calc(100% + 5px);
  width: 100%;
  margin: 0;
  font-size: 0.6rem;
  text-align: center;
}

.do-node-enemy-empty {
  padding: 10px;
  color: var(--color-light-gray);
  text-align: center;
}

.do-node-action-container {
  display: grid;
  grid-template-columns: 120px 120px;
  grid-gap: 10px;
  align-items: flex-end;
  max-width: 250px;
  margin: 0 auto;
}

.do-node-retreat-input input {
  min-width: auto;
  width: 120px;
  min-height: 40px;
}

.do-node-retreat-input label {
  font-size: 0.8rem;
}

.do-explore-result-title {
  font-size: 1.2rem;
  margin: 10px 0;
}

.do-explore-result {
  color: var(--color-light-gray);
}

.do-explore-result>p {
  margin: 0 0 5px;
}

.do-explore-result>p.accent {
  color: var(--color-accent);
  margin: 20px 0 5px;
}

.do-explore-reward-container {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 5;
  grid-gap: 10px;
}

.do-explore-action-container .do-button {
  font-size: 0.8rem;
  font-family: "nunito-sans-bold";
  margin: 0 10px 10px 0;
}

.do-explore-result .do-statusbar-wrapper {
  padding: 5px;
  background-color: transparent;
  background: none;
  border: solid 2px var(--color-accent);
  text-align: left;
  font-size: 0.6rem;
  grid-template-columns: 2fr 1fr;
  grid-gap: 5px;
}

.do-explore-result .do-bar p {
  font-size: 0.8rem;
}

.do-tavern-header {
  position: relative;
  margin: 10px;
  border: solid 2px var(--color-accent);
  background-color: var(--color-blue-bg);
}

.do-tavern-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-accent);
}

.do-tavern-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-light-gray);
}

.do-tavern-upper-part {
  display: grid;
  padding: 20px 10px;
}

.do-tavern-rumor-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  margin: 10px 0;
  padding: 10px 0;
  padding-left: 10px;
}

.do-tavern-rumor-message {
  text-align: left;
  font-size: 1rem;
  color: var(--color-copper);
}

.do-tavern-rumor-interface .do-button {
  margin-right: 10px;
}

.do-tavern-rumor-interface .do-button dranemir {
  font-size: 0.75rem;
  grid-template-columns: 1fr 15px;
}

.do-tavern-rumor-interface .do-button dranemir:after {
  width: 15px;
  height: 15px;
}

.do-tavern-button-container {
  display: grid;
  margin: 0 10px;
  grid-gap: 10px;
  align-items: center;
  justify-content: center;
  align-content: center;
  grid-template-columns: 1fr;
}

.do-additional-custom-tavern-button {
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  grid-gap: 5px;
}

.do-button.vote {
  display: grid;
  justify-content: center;
  justify-items: center;
  min-width: 60px;
}

.vote-image {
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../image/ui/bonds.png);
}

.do-tavern-quest-wrapper {
  margin: 10px;
}

.do-tavern-quest-wrapper .do-tab-nav-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.do-tavern-quest-wrapper .do-tab-nav-button {
  margin: 0;
  padding: 10px;
  text-align: center;
}

.do-low-level-quest-trigger {
  font-size: 1rem;
  color: var(--color-accent);
  padding: 10px 0;
}

.do-empty-quest {
  text-align: center;
  padding: 20px 10px;
  border: solid 2px var(--color-accent);
  color: var(--color-light-gray);
}

.do-building-info-container {
  position: relative;
  margin: 10px;
  padding: 45px 10px;
  border: solid 1px var(--color-accent);
  background-color: var(--color-blue-bg);
}

.do-building-info-container>h1 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--color-accent);
}

.do-building-info-container>p {
  font-size: 1rem;
  margin: 0px;
  color: var(--color-light-gray);
}

.do-travel-wrapper {
  position: relative;
  overflow: auto;
  width: 100%;
  padding: 10px;
}

.do-travel-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
}

.do-map-wrapper {
  background-color: var(--color-blue-bg);
  overflow: hidden;
  width: 100%;
  max-height: 500px;
}

.do-map {
  background-image: url("../image/map.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 3000px;
  height: 1500px;
  display: grid;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: repeat(60, 1fr);
}

.do-map.animate {
  transition: all 0.375s ease;
}

.do-travel-grid {
  padding-bottom: 100%;
  position: relative;
  font-family: josefin;
  cursor: pointer;
}

.do-travel-grid:hover:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.do-travel-grid.oath {
  color: #ce1d1d;
}

.do-travel-grid.legion {
  color: #3496ff;
}

.do-travel-grid.neutral {
  color: #000000;
}

.do-travel-grid.current {
  color: #ffff00;
}

.do-travel-icon {
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: -18px;
  bottom: -18px;
  border: solid 4px #fff;
  cursor: pointer;
}

.do-travel-grid:hover .do-travel-icon:after,
.do-travel-icon:hover:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

.do-travel-icon.oath {
  background-color: rgba(206, 29, 29, 0.5);
  border-color: #ce1d1d;
}

.do-travel-icon.legion {
  background-color: rgba(52, 150, 255, 0.5);
  border-color: #3496ff;
}

.do-travel-icon.neutral {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #000000;
}

.do-travel-icon.current {
  border-color: #ffff00;
}

.do-travel-label {
  position: absolute;
  background: var(--color-dark);
  padding: 5px;
  color: #fff;
  min-width: 120px;
  text-align: center;
  top: -200%;
  left: -45px;
  z-index: 200;
}

.do-travel-grid.selected .do-travel-info,
.do-travel-grid:hover .do-travel-info {
  display: block;
  position: absolute;
  width: 120px;
  z-index: 900;
  margin-left: -45px;
  margin-top: 30px;
}

.do-travel-grid.selected .do-travel-info span,
.do-travel-grid:hover .do-travel-info span {
  display: block;
  width: 70px;
}

.do-travel-grid.selected.current .do-travel-info {
  text-align: center;
  bottom: calc(100% + 20px);
}

.do-map-commodity-title {
  text-align: center;
  font-size: 0.8rem;
  margin: 0 0 5px;
  font-family: "nunito-sans-lite";
  color: var(--color-accent);
}

.do-map-commodity-container {
  text-align: left;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 500px;
  margin: 0 auto 10px;
  grid-gap: 10px;
}

.do-local-resource {
  display: grid;
}

.do-local-resource p,
.do-local-resource p dranemir {
  font-size: 0.7rem;
  margin: 0;
  order: 2;
}

.do-local-resource dranemir:after {
  height: 20px;
  width: 20px;
}

.do-map-info {
  display: none;
  color: var(--color-white);
  text-align: right;
  padding: 40px 10px;
  position: absolute;
  width: 90%;
  max-width: 800px;
  top: min(25%, 250px);
  left: calc(50% - min(45%, 400px));
  margin: 0 auto;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
}

.do-map-info.visible {
  display: block;
}

.do-map-popup-close {
  display: block;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 35px;
  height: 35px;
  max-width: 60px;
  max-height: 60px;
  text-align: right;
  background-image: url(../image/ui/close-2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  cursor: pointer;
}

.do-map-region-name {
  text-align: left;
  font-size: 1.5rem;
  font-family: "nunito-sans-bold";
  color: var(--color-accent);
}

.do-map-region-name span {
  display: block;
  font-size: 1rem;
  border-top: 2px solid var(--color-accent);
  width: 95%;
}

.do-map-region-controller {
  text-align: left;
}

.do-map-region-controller p {
  display: block;
  margin: 0;
  line-height: 15px;
  color: var(--color-light-gray);
}

.do-map-flavour-text {
  padding: 10px 0;
  color: var(--color-light-gray);
  font-size: 0.9rem;
  text-align: left;
}

.do-map-button-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  padding: 10px;
  background-color: var(--color-blue-dark);
}

.do-map-travel-option {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  background-color: var(--color-blue-dark);
  border: solid 2px var(--color-accent);
}

.do-map-travel-info.time {
  text-align: left;
  width: max-content;
}

.do-map-travel-info.cost {
  text-align: right;
}

.do-map-travel-option .do-button {
  grid-column-start: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.do-vendor-wrapper {
  margin: 10px;
}

.do-vendor-wrapper .do-tab-nav-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 6px;
  text-align: center;
  z-index: 0;
}

.do-vendor-wrapper .do-tab-nav-button {
  padding: 10px;
  margin: 0;
}

.do-vendor-wrapper .do-tab-page {
  z-index: 1;
}

.do-vendor-wrapper .do-tab-page:before {
  content: "";
  width: calc((100% - 20px) / 3);
  height: 5px;
  background-color: var(--color-blue-bg);
  display: block;
  position: absolute;
  top: -3px;
  z-index: 1;
  background-image: none;
}

.do-vendor-wrapper>.do-tab-page.left.active:before {
  left: 0;
}

.do-vendor-wrapper>.do-tab-page.mid.active:before {
  left: calc(((100% - 20px) / 3) + 10px);
}

.do-vendor-wrapper>.do-tab-page.right.active:before {
  right: 0;
}

.do-vendor-container {
  display: grid;
  grid-gap: 10px;
  overflow: auto;
}

.do-vendor-item {
  border: solid 2px var(--color-accent);
  padding: 10px;
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-gap: 5px;
}

.do-vendor-item.fade-out {
  filter: brightness(0.3);
}

.do-vendor-item>h2 {
  margin: 0;
  font-size: 1rem;
  grid-column-start: span 2;
}

.do-vendor-item-left .do-item-icon {
  max-width: 84px;
  padding-bottom: min(100%, 76px);
}

.do-vendor-item-left .do-item-icon:before {
  width: 10px;
  height: 10px;
}

.do-vendor-item-left .do-item-icon:after {
  width: 10px;
  height: 10px;
}

.do-vendor-item-left>p {
  margin: 0;
  text-align: center;
}

.do-vendor-item-right {
  text-align: right;
}

.do-vendor-item-right p {
  margin: 3px 0 5px;
}

.do-vendor-item-right .do-input {
  max-width: 120px;
  min-height: 40px;
  margin-bottom: 5px;
}

.do-vendor-search-indicator {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-accent);
}

.do-combat-summary-container {
  margin: 10px;
}

.do-combat-summary-container h1 {
  margin: 0 0 5px;
  text-align: center;
  font-size: 1rem;
}

.do-combat-portrait-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  grid-gap: 5px;
  align-items: center;
  text-align: center;
}

.do-standard-container.do-combat-portrait {
  width: 100%;
  max-width: 150px;
  height: 0;
  min-height: 0;
  padding: 0;
  padding-bottom: min(100%, 150px);
  background-color: var(--color-black);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.do-combat-unit-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  grid-gap: 5px;
  align-items: center;
  text-align: center;
}

.do-combat-unit-container {
  position: relative;
}

.do-combat-unit-container>.do-bar-wrapper {
  grid-template-columns: 1fr;
}

.do-combat-unit-wrapper .do-profile-primary-stats-container {
  grid-template-columns: 1fr;
}

.do-combat-unit-wrapper .do-profile-primary-stats-container.left {
  right: calc(100% + 5px);
}

.do-combat-unit-wrapper .do-profile-primary-stats-container.right {
  left: calc(100% + 5px);
}

.do-combat-unit-wrapper .do-profile-primary-stats-container .do-profile-primary-stats {
  padding: 2px;
}

.do-combat-unit-wrapper .do-profile-primary-stats-container .do-profile-primary-stats>span {
  font-size: 0.9rem;
  margin-top: 2px;
}

.do-combat-unit-wrapper .do-profile-primary-stats-container .do-profile-primary-stats>p {
  font-size: 0.7rem;
  margin: 2px;
  min-height: 15px;
}

.do-combat-unit-wrapper .do-profile-primary-stats-container .do-profile-primary-stats .do-tooltip .do-tooltip-arrow {
  background-position: 2% center;
}

.do-combat-unit-wrapper .do-profile-primary-stats-container .do-profile-primary-stats .do-tooltip.right .do-tooltip-arrow {
  background-position: 98% center;
}

.do-combat-status-wrapper {
  position: relative;
  background-color: var(--color-blue-bg);
  padding: 30px 20px;
  margin-bottom: 10px;
  border: solid 2px var(--color-accent);
}

.do-combat-status-container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 125px 1fr;
  font-size: 0.75rem;
  margin: 0 0 5px;
  border-bottom: solid 1px transparent;
}

.do-combat-status-container:hover {
  border-bottom: solid 1px var(--color-accent);
}

.do-combat-status-container p {
  margin: 0;
}

.do-combat-status-container p:nth-child(1) {
  text-align: left;
}

.do-combat-status-container p:nth-child(2) {
  text-align: center;
}

.do-combat-status-container p:nth-child(3) {
  text-align: right;
}

.do-combat-reward-container {
  font-size: 1rem;
  text-align: center;
  border: solid 2px var(--color-accent);
  padding: 10px;
  background-color: var(--color-blue-bg);
}

.do-combat-reward-container p {
  margin: 0;
}

.do-combat-log-container {
  margin: 10px;
  border: solid 2px var(--color-accent);
  padding: 10px;
  color: var(--color-light-gray);
  background-color: var(--color-blue-bg);
  text-align: center;
}

.do-combat-log-container h2 {
  text-align: center;
  margin: 5px 0;
  color: var(--color-accent);
}

.do-combat-log-container p {
  margin: 0 0 5px;
  text-align: left;
  padding: 0 50px 0 0;
}

.do-combat-loot-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  padding: 0 20px;
}

.do-crafting-wrapper {
  position: relative;
  margin: 10px;
}

.do-crafting-wrapper>.do-tab-nav-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.do-crafting-wrapper>.do-tab-nav-container>.do-tab-nav-button {
  padding: 10px;
  margin: 0;
  font-size: 1rem;
  text-align: center;
}

.do-crafting-wrapper .do-tab-nav-button.active:after {
  content: none;
}

.do-crafting-wrapper>.do-tab-page.active .do-tab-page-decal {
  width: calc(50% - 7px);
  height: 5px;
  background-color: var(--color-blue-bg);
  display: block;
  position: absolute;
  right: auto;
  left: 0;
  top: -3px;
  z-index: 1;
}

.do-crafting-wrapper>.do-tab-page.active .do-tab-page-decal.right {
  right: 0;
  left: auto;
}

.do-recipe-container {
  position: relative;
  display: grid;
  grid-gap: 10px;
  background-color: var(--color-blue-bg);
  top: auto;
  left: 0;
  transition: all 0.375s ease;
}

.do-recipe-container>h2 {
  margin: 0;
  color: var(--color-accent);
  border-bottom: solid 1px var(--color-accent);
}

.do-recipe-group {
  display: grid;
  grid-template-columns: 1fr;
}

.do-recipe-item {
  display: grid;
  grid-template-columns: 50px 1fr 80px;
  grid-gap: 5px;
  min-height: 0;
  width: 100%;
  text-align: left;
  align-items: center;
}

.do-recipe-item>.do-button {
  min-width: 0;
}

.do-recipe-item.hidden {
  display: none;
}

.do-recipe-icon-container {
  width: 100%;
  max-width: 100px;
}

.do-recipe-info-container h3 {
  margin: 0 0 5px;
}

.do-crafting-interface {
  position: relative;
  top: auto;
  left: 0;
  margin: 10px;
  padding: 10px;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
  transition: all 0.375s ease;
  width: calc(100% - 20px);
}

.do-crafting-preview-placeholder {
  border: solid 1px var(--color-accent);
  padding: 40px;
  text-align: center;
  font-size: 1rem;
  color: var(--color-accent);
}

.do-crafting-preview-wrapper {
  margin: 10px 0 0;
}

.do-crafting-preview-container>h2 {
  margin: 5px 0;
  font-size: 1rem;
  font-family: "nunito-sans-bold";
  color: var(--color-orange);
}

.do-crafting-preview-result {
  display: grid;
  grid-template-columns: 75px 1fr;
  grid-gap: 5px;
}

.do-crafting-preview-text h2 {
  margin: 0;
  color: var(--color-accent);
}

.do-crafting-preview-text p {
  margin: 0;
  color: var(--color-light-gray);
}

.do-crafting-preview-material-needed {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
}

.do-crafting-bar-container {
  padding: 10px 0;
  display: grid;
  grid-gap: 3px;
}

.do-crafting-bar {
  position: relative;
  width: 100%;
  border: solid 1px var(--color-accent);
  min-height: 20px;
  background-color: rgba(0, 0, 0, 0.7);
}

.do-crafting-bar>span {
  display: block;
  min-height: 18px;
}

.do-crafting-bar>label {
  margin: 0;
  padding: 1px 3px;
  min-width: 90px;
  position: absolute;
  top: 0;
  font-size: 0.75rem;
  left: 2px;
  color: var(--color-white);
}

.do-crafting-bar>p {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  font-size: 0.75rem;
  right: 2px;
  color: var(--color-white);
}

.do-crafting-bar.hard span {
  background-color: var(--color-hard);
}

.do-crafting-bar.soft span {
  background-color: var(--color-soft);
}

.do-crafting-bar.brittle span {
  background-color: var(--color-brittle);
}

.do-crafting-bar.flexible span {
  background-color: var(--color-flexible);
}

.do-crafting-bar.magical span {
  background-color: var(--color-magical);
}

.do-crafting-bar.resistant span {
  background-color: var(--color-resistant);
}

.do-crafting-bar.fuel span {
  background-color: var(--color-fuel);
}

.do-crafting-bar.poisonous span {
  background-color: var(--color-poisonous);
}

.do-crafting-bar.neutralizing span {
  background-color: var(--color-neutralizing);
}

.do-crafting-bar.healing span {
  background-color: var(--color-healing);
}

.do-crafting-bar.strengthening span {
  background-color: var(--color-strengthening);
}

.do-crafting-bar.quicken span {
  background-color: var(--color-quicken);
}

.do-crafting-bar.invigorate span {
  background-color: var(--color-invigorate);
}

.do-crafting-bar.focus span {
  background-color: var(--color-focus);
}

.do-crafting-bar.aromatic span {
  background-color: var(--color-aromatic);
}

.do-crafting-interface .do-inventory-wrapper {
  margin: 0;
}

.do-crafting-preview-material-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  padding: 5px;
  border: solid 2px var(--color-accent);
  margin: 0 0 10px;
  order: 1;
}

.do-crafting-preview-material-container>h1 {
  grid-column-start: span 4;
  margin: 0;
  text-align: center;
  padding: 10px;
  background-color: var(--color-blue-dark);
  font-size: 1rem;
  font-family: "nunito-sans-bold";
}

.do-crafting-preview-material-placeholder {
  grid-column-start: span 4;
  margin: 0;
  padding: 10px;
  border: solid 1px var(--color-accent);
  text-align: center;
  color: var(--color-light-gray);
}

.do-crafting-material-input {
  position: relative;
  max-width: 100%;
}

.do-input.do-crafting-material-qty {
  width: 100%;
}

.do-material-remove-button {
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: center;
  border-radius: 50%;
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/cross-red.png");
}

.do-crafting-action-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin: 0 0 10px;
  order: 1;
}

.do-upgrade-input-group {
  border: solid 2px var(--color-accent);
  padding: 10px;
  background-color: var(--color-blue-bg);
}

.do-upgrade-input-group h3 {
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
  font-family: "nunito-sans-bold";
  color: var(--color-accent);
}

.do-upgrade-input-group h4 {
  margin: 5px 0;
  text-align: center;
  font-size: 1rem;
  color: var(--color-light-gray);
}

.do-upgrade-item-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  max-height: 500px;
  overflow: auto;
}

.do-upgrade-interface-wrapper {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 5px;
  order: 1;
}

.do-upgrade-preview-container h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-accent);
}

.do-crafting-bar-container.upgrade {
  padding: 0;
}

.do-upgrade-input-group .do-crafting-preview-material-container {
  margin: 10px 0;
}

.do-marketplace-wrapper {
  margin: 10px;
}

.do-marketplace-wrapper>.do-tab-nav-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.do-marketplace-wrapper>.do-tab-nav-container>.do-tab-nav-button {
  padding: 10px;
  text-align: center;
  margin: 0;
}

.do-marketplace-search-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

.caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--color-white);
  margin-left: 5px;
  display: inline-block;
}

.do-market-table,
.do-table {
  border-collapse: collapse;
  min-width: 100%;
}

.do-market-table .do-input,
.do-table .do-input {
  max-width: 60px;
}

.do-market-table .do-button,
.do-table .do-button {
  padding: 2px;
  min-width: 80px;
  font-size: 0.75rem;
  line-height: 1.5rem;
}

.do-market-table th,
.do-table th {
  background-color: var(--color-blue-dark);
  padding: 10px;
  text-align: left;
  font-size: 0.9rem;
}

.do-market-table tr:hover,
.do-table tr:hover {
  background-color: var(--color-blue);
}

.do-market-table td,
.do-table td {
  padding: 5px;
  font-size: 0.9rem;
}

.do-market-table .do-item-icon,
.do-table .do-item-icon {
  min-width: 80px;
  width: min(100%, 80px);
  padding-bottom: min(100%, 76px);
}

.do-active-listing-table {
  border-collapse: collapse;
  min-width: 100%;
  border: 2px solid var(--color-accent);
}

.do-active-listing-table th {
  background-color: var(--color-blue-dark);
  padding: 5px;
  font-size: 0.9rem;
  border: 2px solid var(--color-accent);
}

.do-active-listing-table td {
  padding: 5px;
  font-size: 0.9rem;
  border: 2px solid var(--color-accent);
  text-align: center;
}

.do-active-listing-table .do-item-icon {
  min-width: 80px;
  width: min(100%, 80px);
  padding-bottom: min(100%, 76px);
}

.do-market-input {
  display: grid;
  grid-template-columns: 50px 120px;
  grid-gap: 5px;
}

.do-market-add-container {
  display: grid;
  grid-template-columns: 1fr;
}

.do-market-add-preview {
  max-width: 200px;
}

.do-arena-wrapper {
  margin: 10px;
}

.do-arena-hall-of-fame-wrapper {
  position: relative;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
  padding: 40px 10px;
  text-align: center;
  margin-bottom: 10px;
}

.do-arena-hall-of-fame-wrapper h3 {
  font-size: 1.2rem;
  margin: 10px 0;
  color: var(--color-accent);
  font-family: "nunito-sans-bold";
}

.do-arena-hall-of-fame-container {
  display: grid;
  grid-gap: 5px;
}

.do-arena-hall-of-fame-container a {
  display: grid;
  border: solid 2px var(--color-accent);
  padding: 10px;
  color: var(--color-light-gray);
  grid-template-columns: 30px 1fr 50px;
  align-items: center;
}

.do-arena-hall-of-fame-container a:nth-child(1) {
  color: var(--color-gold);
}

.do-arena-hall-of-fame-container a:nth-child(2) {
  color: var(--color-silver);
}

.do-arena-hall-of-fame-container a:nth-child(3) {
  color: var(--color-bronze);
}

.do-arena-hall-of-fame-container a:nth-child(1) span {
  background-color: var(--color-gold);
  color: var(--color-black);
}

.do-arena-hall-of-fame-container a:nth-child(2) span {
  background-color: var(--color-silver);
  color: var(--color-black);
}

.do-arena-hall-of-fame-container a:nth-child(3) span {
  background-color: var(--color-bronze);
  color: var(--color-black);
}

.do-arena-hall-of-fame-container a span {
  background-color: var(--color-blue-bg);
  color: var(--color-light-gray);
  font-family: "nunito-sans-black";
  font-size: 1.2rem;
  border: solid 2px var(--color-accent);
  min-width: 30px;
  height: 30px;
}

.do-arena-hall-of-fame-container a label {
  text-align: right;
  font-family: "nunito-sans-lite";
}

.do-arena-player-count {
  text-align: center;
  border-bottom: solid 1px var(--color-accent);
  padding: 5px;
  margin: 0;
}

.do-arena-list-container {
  border: solid 2px var(--color-accent);
  margin: 10px 0;
}

.do-arena-list-container h3 {
  text-align: center;
  font-size: 1rem;
  color: var(--color-accent);
}

.do-arena-list-item {
  border: solid 2px var(--color-accent);
  margin: 5px;
  padding: 5px;
  display: grid;
  grid-template-columns: 50px 1fr 100px;
  align-items: center;
  color: var(--color-white);
  font-size: 0.9rem;
  cursor: pointer;
}

.do-arena-list-item:hover {
  background-color: var(--color-blue-darkest);
}

.do-arena-list-item span {
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  min-height: 50px;
}

.do-arena-list-item span.oath {
  background-image: url("../image/ui/oathbound-logo.png");
}

.do-arena-list-item span.legion {
  background-image: url("../image/ui/silver-legion-logo.png");
}

.do-arena-list-item .do-button {
  min-width: 0;
  font-size: 0.7rem;
  padding: 10px;
}

.do-arena-wrapper .do-tab-nav-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  grid-gap: 10px;
}

.do-arena-wrapper .do-tab-nav-container .do-tab-nav-button {
  padding: 10px;
  font-size: 1rem;
  margin: 0;
}

.do-arena-wrapper .do-trade-search-container {
  margin: 10px 0;
}

.do-arena-wrapper .do-exchange-wrapper {
  margin: 0;
  padding: 0;
  border: none;
}

.do-arena-wrapper .do-exchange-wrapper .do-decor-2 {
  display: none;
}

.do-arena-wrapper .do-exchange-wrapper .do-error-message {
  margin: 0 0 10px;
}

.do-arena-inspect-container .do-equipment-wrapper {
  margin: 0 0 10px;
}

.do-arena-inspect-container .do-profile-secondary-stats {
  padding: 0;
}

.do-trade-search-container {
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-gap: 10px;
  margin: 0 0 10px;
}

.do-exchange-wrapper {}

.do-exchange-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

.do-exchange-container .do-vendor-item {
  grid-template-columns: 80px 1fr;
}

.do-exchange-container .do-vendor-item .do-item-icon {
  max-width: 80px;
  padding-bottom: min(100%, 76px);
}

.do-exchange-container .do-vendor-item-right .do-item-icon {
  max-width: 50px;
  padding-bottom: min(100%, 46px);
}

.do-mylist-add-row {
  position: relative;
  background-color: var(--color-good);
  cursor: pointer;
}

.do-mylist-add-row:hover {
  background-color: var(--color-good-hover);
}

.do-mylist-row {
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/ui/add_white.svg");
  min-height: 30px;
  text-align: center;
}

.do-topup-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
  place-items: center;
  padding: 2rem 0;
  border: solid 2px var(--color-accent);
  background-color: var(--color-blue-bg);
  margin: 10px;
  position: relative;
}

.do-topup-item {
  position: relative;
  border: 2px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 260px;
  height: 190px;
  cursor: pointer;
}

.do-topup-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  width: 100%;
}

.do-topup-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.5px;
  width: 100%;
  background-color: var(--color-accent);
}

.do-topup-title p {
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.do-topup-title p>b {
  margin-left: 2px;
  color: var(--color-warning);
}

.do-topup-image {
  width: 45%;
  pointer-events: none;
}

.do-topup-price {
  min-height: 40px;
  background-color: var(--color-good);
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
}

.do-topup-price:active {
  pointer-events: none;
}

.do-topup-price:hover {
  background-color: var(--color-good-hover);
}

.do-topup-discount {
  position: absolute;
  top: -20px;
  right: 4px;
  height: 40px;
  width: 70px;
  background-color: rgb(180, 21, 16);
  border: 2px solid var(--color-accent);
}

.do-topup-discount-container {
  height: 100%;
  width: 100%;
  position: relative;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-warning);
  font-weight: bold;
}

.do-topup-discount-container .bottom-left {
  left: 1px;
  bottom: 1px;
}

.do-topup-discount-container .top-right {
  top: 1px;
  right: 1px;
}

.do-topup-discount-container .extra-small {
  width: 6px;
  height: 6px;
}

.do-topup-option {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 15px 0;
}

.do-select-input {
  width: 60%;
  height: 30px;
  background-color: var(--color-blue-bg);
  color: white;
  border: 2px solid var(--color-accent);
}

.do-topup-payment {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem;
  gap: 30px;
}

.do-separator {
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
}

.midtrans-container {
  width: 100%;
  background-color: #0079c1;
  border-radius: 5px;
  height: 40px;
  color: white;
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
  cursor: pointer;
}

.midtrans-container:hover {
  background-color: #00467c;
}

.card-fields-container {
  background-color: #fff;
  padding: 10px;
}

.extra-small {
  width: 10px;
  height: 10px;
}

.quest-notification {
  position: fixed;
  bottom: 50px;
  left: 5px;
  background-color: var(--color-blue-bg);
  height: max-content;
  width: max-content;
  z-index: 20;
}

.close-notif {
  position: absolute;
  top: 0px;
  right: 0px;
  color: var(--color-bad);
  cursor: pointer;
  font-size: 1rem;
  border: 2px solid var(--color-accent);
  padding: 0 8px;
}

.do-tooltip.tutorial-tool-arrow .do-tooltip-arrow {
  top: -21px;
  background-image: url(../image/ui/tooltip-arrow-up.png);
}

.do-tooltip-action-container.flex {
  display: flex;
  justify-content: space-around;
}

.do-tooltip-action-container.consumable {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.do-tooltip-action-container.consumable .do-button,
.do-tooltip .do-button.tutorial {
  min-width: 80px;
}

.region {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  height: 50px;
}

.region.tavern {
  background-image: url(../image/ui/Tavern.png);
}

.region.alchemist {
  background-image: url(../image/ui/Alchemist.png);
}

.region.arena {
  background-image: url(../image/ui/Arena.png);
}

.region.artificer {
  background-image: url(../image/ui/Artificer.png);
}

.region.command_center {
  background-image: url(../image/ui/Command-Center.png);
}

.region.enchanter {
  background-image: url(../image/ui/Enchanter.png);
}

.region.expedition_camp {
  background-image: url(../image/ui/Expedition-Camp.png);
}

.region.guild_hall {
  background-image: url(../image/ui/Guild-Hall.png);
}

.region.leatherwork {
  background-image: url(../image/ui/Leatherwork.png);
}

.region.locksmith {
  background-image: url(../image/ui/Locksmith.png);
}

.region.marketplace {
  background-image: url(../image/ui/Marketplace.png);
}

.region.salvage_yard {
  background-image: url(../image/ui/Salvage-Yard.png);
}

.region.smithy {
  background-image: url(../image/ui/Smithy.png);
}

.region.stable {
  background-image: url(../image/ui/Stable.png);
}

.region.tailor {
  background-image: url(../image/ui/Tailor.png);
}

.region.trade_hall {
  background-image: url(../image/ui/Tradehall.png);
}

.region.workshop {
  background-image: url(../image/ui/Workshop.png);
}

.do-friends-container {
  position: relative;
  min-height: 400px;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--color-blue-bg);
  border: 2px solid var(--color-accent);
  padding: 10px;
  gap: 15px;
}

.do-friends-container .do-decor-2 {
  display: none;
}

.do-friend-list-container {
  border: 2px solid var(--color-accent);
}

.do-add-friend-container {
  border: 2px solid var(--color-accent);
}

.do-friend-filter-input {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  width: 100%;
  border-bottom: 2px solid var(--color-accent);
}

.do-friend-filter-input.add-friend {
  grid-template-columns: 1fr 40px;
}

.do-friend-filter-input.add-friend .do-friend-button {
  border-right: 0;
}

.do-input.friend {
  padding: 10px 5px;
  border: 0;
}

.do-friend-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 2px solid var(--color-accent);
  border-top: 0;
  border-bottom: 0;
  cursor: pointer;
}

.do-friend-button i {
  font-size: 1.1rem;
  color: var(--color-accent);
  user-select: none;
}

.do-friend-button .top-right {
  top: 0;
  right: 0;
}

.do-friend-button .bottom-left {
  bottom: 0;
  left: 0;
}

.do-friend-list {
  padding: 10px;
  min-height: 230px;
}

.do-friend-list .title {
  text-align: center;
  font-size: 1.3rem;
  text-transform: uppercase;
  font-weight: 600;
}

.do-friend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 0.8rem;
  border-top: 2px solid var(--color-accent);
  margin-top: 10px;
}

.do-friend-username {
  font-weight: 600;
  width: 20%;
  overflow-wrap: break-word;
}

.do-friend-faction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 30%;
}

.do-friend-faction img {
  width: 30px;
}

.do-friend-level {
  width: 25%;
}

.do-friend-row .do-button {
  min-width: 70px;
  font-size: 0.6rem;
  display: none;
}

.do-party-container {
  position: relative;
  min-height: 400px;
  display: block;
  text-align: center;
  background-color: var(--color-blue-bg);
  border: 2px solid var(--color-accent);
  padding: 10px;
}

.do-party-title {
  font-size: 1rem;
  text-align: center;
  color: var(--color-accent);
  margin: 0;
}

.do-party-detail-container {
  margin: 0 0 10px;
  padding: 10px;
  border: solid 2px var(--color-accent);
}

.do-party-detail-container textarea {
  width: 100%;
}

.do-party-detail-container>p {
  color: var(--color-light-gray);
  text-align: left;
}

.do-party-fund-label {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-gap: 0.5em;
  align-items: center;
  text-align: left;
  color: var(--color-accent);
}

.do-party-mercenary-warning {
  color: var(--color-accent);
  font-size: 12px;
}

.do-mercenary-setting-icon {
  background-color: var(--color-gold);
  display: block;
  border: solid 1px var(--color-accent);
  width: 30px;
  height: 30px;
  padding-bottom: calc(100% - 2px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/mercenary.png);
  cursor: pointer;
}

.do-party-mercenary-settings {
  min-height: 250px;
  min-width: 300px;
}

.do-party-location {
  text-align: right;
}

.do-party-mercenary-container {
  align-items: center;
  justify-content: space-between;
}

.do-party-mercenary-container>.do-party-payout-label {
  border: 2px solid var(--color-accent);
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.do-party-mercenary-list {
  color: var(--color-accent);
}

.do-party-mercenary-list>.do-party-title {
  padding-top: 10px;
}

.do-party-mercenary-warning {
  padding-bottom: 10px;
  margin: 0px;
}

.do-party-mercenary-info-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  border: 2px solid var(--color-accent);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.do-party-mercenary-details {
  text-align: left;
}

.do-mercenary-setting-stop {
  background-color: var(--color-bad);
  display: block;
  border: solid 1px var(--color-accent);
  width: 30px;
  height: 30px;
  padding-bottom: calc(100% - 2px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/cross-red.png);
  cursor: pointer;
}

.do-party-role-selection-container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.do-party-change-role {
  background-color: var(--color-good);
  display: block;
  border: solid 1px var(--color-accent);
  width: 30px;
  height: 30px;
  padding-bottom: calc(100% - 2px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/add_white.svg);
  cursor: pointer;
}

.do-party-payout-label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
  color: var(--color-accent);
}

.do-party-payout-label>input {
  max-width: 120px;
}

.do-party-action-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.do-party-invite-container {
  display: grid;
}

.do-party-invite-container h3 {
  color: var(--color-accent);
}

.do-party-invite-item {
  display: grid;
  border: solid 2px var(--color-accent);
  padding: 5px;
  position: relative;
}

.do-party-invite-info-container {
  text-align: left;
}

.do-party-invite-info-container h3 {
  margin: 0;
}

.do-party-invite-info-container h4 {
  color: var(--color-gray);
  margin: 0;
}

.do-party-invite-info-container label {
  color: var(--color-gold);
  margin: 0;
}

.do-party-invite-info-container span {
  margin: 0;
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--color-accent);
}

.do-party-invite-info-container p {
  margin: 0;
  color: var(--color-light-gray);
}

.do-party-invite-action-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.do-party-empty-placeholder {
  font-size: 1rem;
  color: var(--color-gray);
}

.do-party-member-list {
  text-align: center;
  font-family: "nunito-sans-bold";
  color: var(--color-accent);
}

.do-party-role-container {
  margin: 10px 0;
  display: grid;
}

.do-party-role-container>h3 {
  margin: 0 0 5px;
}

.do-party-role-placeholder {
  padding: 10px;
  text-align: center;
  color: var(--color-light-gray);
  border: solid 2px var(--color-accent);
}

.do-party-member-item {
  display: grid;
  padding: 5px;
  grid-template-columns: 50px 4fr;
  gap: 2px;
  border: solid 1px var(--color-accent);
}

.do-party-member-portrait {
  display: block;
  width: 50px;
  height: 0;
  padding-bottom: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.do-party-member-info-container {
  text-align: left;
  position: relative;
}

.do-party-member-info-container h4 {
  margin: 0;
}

.do-party-member-info-container h5 {
  margin: 0;
}

.do-party-member-info-container p {
  margin: 0;
}

.do-party-member-info-container span {
  margin: 0;
  position: absolute;
  top: 0px;
  right: 0px;
}

.do-party-member-mercenary-block {
  grid-column-start: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr 50px 30px;
  gap: 2px;
  align-items: center;
}

.do-party-member-mercenary-block>.do-close-button {
  background-color: var(--color-gold);
  display: block;
  border: solid 2px var(--color-accent);
  height: 0;
  padding-bottom: calc(100% - 2px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/cross-red.png);
}

.do-party-member-mercenary-block span {
  color: var(--color-copper);
  font-family: nunito-sans-bold;
}

.do-party-member-mercenary-block label {
  text-align: right;
  padding: 0 5px;
}

.do-party-member-mercenary-block>.do-button {
  grid-column-start: span 4;
  font-size: 0.7rem;
  padding: 7px;
}

.do-party-member-action-container {
  grid-column-start: span 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2px;
  align-content: center;
}

.do-party-member-action-container>.do-button {
  font-size: 0.7rem;
  padding: 7px;
}

.do-mobile-button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--color-accent);
}

.do-mobile-button.bad {
  background-color: var(--color-bad);
}

.do-mobile-button i {
  font-size: 1rem;
  color: var(--color-whitest);
  user-select: none;
}

.do-table-add-friend {
  width: 100%;
  border-collapse: collapse;
}

.do-table-add-friend tr:nth-child(odd) {
  background: var(--color-blue-darkest);
}

.do-table-add-friend td {
  border-bottom: 2px solid var(--color-accent);
  padding: 10px 0;
}

.do-table-add-friend.request td {
  border-bottom: 0;
  border-top: 2px solid var(--color-accent);
}

.do-table-add-friend td img {
  width: 30px;
}

.do-table-add-friend .do-button {
  min-width: 0;
  padding: 5px;
}

.empty-row {
  background: var(--color-blue-darkest);
  font-size: 1rem;
  color: var(--color-light-gray);
  text-align: center;
  display: block;
}

table .empty-row {
  display: table-cell;
}

.empty-row.hidden {
  display: none;
}

.no-friend {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 170px;
}

.no-friend p {
  font-size: 1rem;
  color: var(--color-light-gray);
}

.explore-container {
  background: var(--color-blue-bg);
  border: 2px solid var(--color-accent);
  width: 100%;
  margin: 10px 0;
}

.explore-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.questline-title-container,
.node-title-container {
  width: 100%;
  position: relative;
  border-top: 2px solid var(--color-accent);
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  align-items: center;
  background-color: var(--color-blue-darkest);
}

.questline-title-container h1,
.node-title-container h1 {
  font-size: 1.1rem;
  font-family: nunito-sans-lite;
  color: var(--color-accent);
}

.questline-title-container h2,
.node-title-container h2 {
  font-size: 0.8rem;
  color: var(--color-orange);
}

.questline-detail-container {
  border-top: 2px solid var(--color-accent);
  display: none;
  padding: 10px;
  height: 100%;
}

.node-detail-container {
  /* padding: 20px 15px; */
  /* border-top: 2px solid var(--color-accent); */
  display: none;
}

.node-image-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.node-image-container:before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 208px;
  height: 208px;
  top: -4px;
  left: -4px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

.node-image-container img {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  transform-origin: center;
  transition: 0.5s;
  border-radius: 50%;
  z-index: 2;
}

.node-detail-container h2 {
  text-align: right;
  color: var(--color-warning);
  font-size: 0.9rem;
  margin: 0;
}

.node-detail-container h3 {
  text-align: left;
  color: var(--color-light-gray);
  line-height: 1.5;
  font-size: 0.9rem;
}

.do-node-terrain-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  color: var(--color-accent);
}

.do-node-terrain-block span {
  text-align: left;
  font-size: 1rem;
}

.node-detail-container .subtitle {
  width: 100%;
  margin: 0 auto;
  border: 2px solid var(--color-accent);
  border-left: 0;
  border-right: 0;
  color: var(--color-white);
  padding: 5px 0;
  font-weight: 600;
  font-size: 1rem;
  font-family: nunito-sans-lite;
}

.do-explore-node-enemy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}

.retreat-input-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  align-items: center;
}

.retreat-input-field p {
  margin: 0;
}

.auto-discard {
  display: grid;
  /* grid-template-columns: 130px 1fr; */
  grid-gap: 10px;
  align-items: center;
}

.auto-discard p {
  margin: 0;
}

.auto-discard .dropdown {
  grid-template-columns: 1fr;
}

.button-action-container {
  display: grid;
  grid-gap: 10px;
  padding: 10px 0;
  width: 100%;
  align-items: center;
}

.questline-title-container:first-child,
.node-title-container:first-child {
  border-top: 0;
}

.questline-title-container.active,
.node-title-container.active {
  background-color: var(--color-blue-bg);
}

.questline-detail-container.active,
.node-detail-container.active {
  display: block;
}

.notification-baloon {
  position: absolute;
  top: -15px;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--color-bad);
  color: var(--color-white);
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.do-standard-container.do-vendor-timer-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  background-color: var(--color-blue-bg);
  min-height: 0;
  margin-bottom: 10px;
  max-width: none;
}

.do-standard-container.do-vendor-timer-container h3 {
  margin: 0;
}

.do-market-listing-menu-group {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-accent);
}

.do-market-listing-menu-action {
  font-size: 0.8rem;
}

.do-market-add-showcase {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  min-height: 400px;
}

.do-market-buy-container,
.do-market-inventory,
.do-market-form-group {
  display: none;
}

.do-market-inventory,
.do-market-form-group,
.do-market-buy-container {
  min-height: 400px;
  padding-top: 35px;
  position: relative;
}

.arrow-back {
  position: absolute;
  top: -10px;
  left: 0;
  cursor: pointer;
  font-size: 20px;
  text-align: left;
  color: var(--color-accent);
  text-transform: none;
}

.arrow-back.do-button {
  min-width: 100px;
  padding: 2px 5px;
}

.do-buy-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.do-buy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.void {
  display: none;
}

.present {
  display: block;
}

.do-form-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.do-buy-items.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 290px;
  border: 2px solid var(--color-accent);
}

.do-buy-item-name {
  padding: 5px 0;
  color: var(--color-accent);
}

#advanceCraftForm {
  display: none;
}

.simple-craft-container {
  width: 100%;
  margin: 0 auto;
  min-height: 400px;
  position: relative;
}

.simple-craft-title {
  border-bottom: 2px solid var(--color-accent);
  padding: 10px 0;
  font-size: 1rem;
  text-align: center;
}

.simple-craft-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 10px;
  gap: 20px;
  border: 2px solid var(--color-accent);
  margin: 10px 0;
  background: var(--color-blue-dark);
}

.simple-craft-material-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 60px;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 2px solid var(--color-accent);
}

.simple-craft-material-grid h3 {
  align-self: end;
}

.simple-craft-container .simple-craft-material-grid:last-child {
  border-bottom: 0;
}

.material-input {
  width: 100%;
  background: transparent;
  outline: none;
  padding: 5px;
  color: white;
}

.material-input.normal {
  border: 2px solid var(--color-accent);
  border-top: 0;
}

.material-input.epic {
  border: 2px solid var(--color-epic);
  border-top: 0;
}

.material-input.mythical {
  border: 2px solid var(--color-mythical);
  border-top: 0;
}

.simple-craft-subtitle {
  margin: 0;
  color: var(--color-orange);
}

.simple-craft-info {
  text-align: center;
  font-size: 1rem;
  padding: 10px;
}

.simple-craft-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.craft-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.do-map-region-name-wrapper {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 10px;
}

.do-map-region-name-wrapper img {
  width: 100%;
}

.do-map-construction-wrapper,
.do-map-commodity-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.do-map-construction-title {
  text-align: center;
  padding: 10px 0px;
  border-bottom: 2px solid var(--color-accent);
  font-size: 1rem;
  color: var(--color-accent);
}

.construction-ref {
  position: relative;
}

.do-map-construction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 2px solid var(--color-accent);
}

.do-map-construction-row p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-accent);
}

.do-map-construction-block {
  display: inline-block;
  padding: 5px;
  border: 2px solid var(--color-accent);
  margin: 5px;
  text-align: left;
}

.do-map-construction-block p {
  margin: 0;
  font-size: 0.8rem;
}

#localBuildings {
  text-align: left;
}

.do-start-wrapper.new-player {
  overflow-x: hidden;
}

.do-redeem-label {
  margin: 0;
}

.do-redeem-container {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-accent);
}

.do-redeem-input-group {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 120px;
  margin: 10px 0;
  gap: 10px;
}

.do-redeem-link {
  cursor: pointer;
  text-decoration: underline;
  align-self: flex-end;
  color: var(--color-light-gray);
}

.do-redeem-link:hover {
  color: white;
}

.do-guild-filter-container,
.do-compendium-filter-container,
.do-bestiary-filter-container {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
  gap: 10px;
}

.do-guild-filter-container .do-filter-button,
.do-compendium-filter-container .do-filter-button,
.do-bestiary-filter-container .do-filter-button {
  display: flex;
  justify-content: center;
  align-content: center;
  background: var(--color-primary);
  padding: 10px;
  border: 2px solid var(--color-accent);
  width: 40%;
  margin: 0 0 0 auto;
  cursor: pointer;
}

.do-compendium-filter-container .do-filter-button i,
.do-bestiary-filter-container .do-filter-button i {
  font-size: 1.1rem;
}

.do-guild-filter-container .do-filter-button {
  font-size: 1rem;
  font-weight: bold;
}

.do-bestiary-list-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px 0;
}

.do-bestiary-list,
.do-collection-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.do-collection-item {
  position: relative;
}

notif {
  position: absolute;
  top: -5px;
  left: -5px;
  display: grid;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: var(--color-black);
  text-align: center;
  z-index: 9;
  align-items: center;
  font-weight: bold;
}

.do-bestiary-separator {
  display: none;
}

.do-compendium-item-image,
.do-bestiary-item-image,
.do-collection-item-image {
  position: relative;
  max-width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--color-accent);
  cursor: pointer;
  background-color: var(--color-black);
}

.do-compendium-item-image::after,
.do-bestiary-item-image::after {
  content: "";
  position: absolute;
  top: var(--y-axis);
  right: var(--x-axis);
  width: var(--size-border);
  height: var(--size-border);
  background-image: var(--border);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}

.do-compendium-item-image::before,
.do-bestiary-item-image::before {
  content: "";
  position: absolute;
  bottom: var(--y-axis);
  left: var(--x-axis);
  width: var(--size-border);
  height: var(--size-border);
  transform: rotate(180deg);
  background-image: var(--border);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}

.do-bestiary-item-image.info,
.do-collection-item-image.info {
  max-width: 400px;
  width: 80%;
  border: 3px solid var(--color-accent);
  padding-bottom: 70%;
  margin: 0 auto;
  margin-top: 20px;
  cursor: initial;
}

.do-bestiary-item-name,
.do-collection-item-name {
  text-align: center;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
}

.do-bestiary-information {
  border-top: 2px solid var(--color-accent);
  margin-top: 20px;
}

.do-compendium-item-image.info {
  width: 60%;
  border: 3px solid var(--color-accent);
  padding-bottom: 60%;
  margin: 0 auto;
  margin-top: 20px;
  cursor: initial;
}

.do-bestiary-information>h4,
.do-bestiary-information>h3,
.do-bestiary-information>h2 {
  text-align: center;
}

.do-bestiary-information h3 {
  color: var(--color-light-gray);
  font-family: nunito-sans-lite;
}

.do-bestiary-information h4 {
  margin: 5px;
}

.do-bestiary-information .do-level {
  text-align: center;
  color: var(--color-accent);
}

.do-bestiary-information .progress-label {
  font-size: 0.8rem;
  margin-bottom: 10px;
  margin-top: 5px;
}

.do-bestiary-progress-bar,
.do-collection-progress-bar {
  position: relative;
  width: 100%;
  padding: 2px 0;
  border: 2px solid var(--color-accent);
  background-color: var(--color-blue-dark);
  margin-bottom: 5px;
}

.do-progress-indicator,
.do-progress-label {
  position: absolute;
}

.do-progress-indicator {
  background-image: url(../image/progress-indicator.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  width: 20px;
  height: 28px;
  z-index: 3;
}

.do-progress-label {
  bottom: -20px;
  font-size: 0.7rem;
}

.do-progress-indicator.phase-1 {
  left: 3%;
}

.do-progress-indicator.compen-1 {
  left: -2%;
}

.do-progress-label.label-compen-1 {
  left: -3%;
}

.do-progress-label.label-1 {
  left: 0;
}

.do-progress-indicator.compen-2 {
  left: 2%;
}

.do-progress-label.label-compen-2 {
  left: 5%;
}

.do-progress-indicator.phase-2,
.do-progress-label.label-2 {
  left: 8%;
}

.do-progress-label.label-3,
.do-progress-indicator.phase-3 {
  left: 18.2%;
}

.do-progress-indicator.phase-4,
.do-progress-label.label-4 {
  left: 38%;
}

.do-progress-indicator.compen-3 {
  left: 47%;
}

.do-progress-label.label-compen-3 {
  left: 40%;
}

.do-progress-indicator.phase-5,
.do-progress-label.label-5 {
  left: 58%;
}

.do-progress-indicator.compen-4 {
  left: 72%;
}

.do-progress-label.label-compen-4 {
  left: 68%;
}

.do-progress-indicator.phase-6 {
  left: 78%;
}

.do-progress-label.label-6 {
  left: 74%;
}

.do-progress-indicator.compen-5,
.do-progress-indicator.phase-7 {
  left: 97%;
}

.do-progress-label.label-compen-5 {
  left: 90%;
}

.do-progress-label.label-7 {
  left: 95%;
}

.do-bestiary-progress-bar::after,
.do-collection-progress-bar::after {
  content: "";
  position: absolute;
  height: 100%;
  width: var(--progress);
  top: 0;
  left: 0;
  z-index: 2;
  background-color: var(--color-cyan);
}

.do-collection-progress-bar span {
  position: relative;
  z-index: 7;
  color: var(--color-black);
  text-align: center;
  width: 100%;
  display: inline-block;
  font-weight: bold;
}

.do-bestiary-statistic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  margin-bottom: 12px;
}

.do-bestiary-statistic-row p {
  margin: 0;
  font-size: 0.8rem;
}

.do-bestiary-loot-container {
  border: 2px solid var(--color-accent);
  padding: 10px 20px;
  margin-top: 30px;
  min-height: 150px;
  width: 100%;
}

.do-bestiary-loot-container h2 {
  text-align: center;
  margin: 0;
  margin-bottom: 15px;
}

.do-bestiary-loot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.do-bestiary-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 20px;
}

.do-bestiary-new-icon {
  position: relative;
  width: 30px;
  height: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.do-bestiary-new-icon.loot {
  background-image: url("../image/icon-loot.png");
}

.do-bestiary-new-icon.medal {
  background-image: url("../image/icon-medal.png");
}

.do-bestiary-new-icon span {
  display: none;
}

.do-bestiary-new-icon:hover span {
  position: absolute;
  display: block;
  width: 100%;
  min-width: 150px;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: solid 1px var(--color-copper);
}

.do-bestiary-item-image:hover {
  border: 2px solid var(--color-apricot);
}

.do-bestiary-item-image.info:hover {
  border: 3px solid var(--color-apricot);
}

.do-compendium-item-image.info:hover {
  border: 3px solid var(--color-apricot);
}

.do-compendium-donate-wrapper {
  display: grid;
  width: 100%;
  margin: 5px auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.do-compendium-donate-wrapper.non-tier {
  grid-template-columns: 1fr;
}

.do-compendium-donate-wrapper.non-tier .overlay-badge {
  justify-self: center;
}

.do-compendium-donate-wrapper img {
  width: 50%;
  margin: 10px 0;
  filter: brightness(30%);
}

.overlay-badge.active img {
  filter: brightness(100%);
}

.overlay-badge {
  display: grid;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 2px solid var(--color-accent);
  max-width: 160px;
  justify-items: center;
}

.overlay-badge .do-button {
  min-width: unset;
}

.do-badge-collected {
  font-size: .75rem;
  text-align: center;
  padding-bottom: 5px;
  color: var(--color-gold);
}

.do-badge-not-owned {
  font-size: .8rem;
  padding-bottom: 5px;
  color: var(--color-gray);
}

.badge-label {
  padding: 5px;
  border-bottom: 2px solid var(--color-accent);
  width: 100%;
  text-align: center;
  position: relative;
}

.badge-label .do-decor-2 {
  display: none;
}

.overlay-badge .do-button {
  width: 100%;
  border: none;
}

.badge-label .label {
  font-weight: 600;
  color: var(--color-accent);
}

.do-item-icon.tooltip-only {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: calc(100% - 4px);
  height: 0;
  margin: 0;
  background-color: unset;
  text-align: left;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  background-image: unset !important;
}

.do-recipe-item.cant-equip,
.do-recipe-type-label.cant-equip,
.do-recipe-group.cant-equip,
.do-vendor-item.no-own {
  display: none;
}

.do-recipe-group.cant-equip.show,
.do-recipe-item.cant-equip.show,
.do-vendor-item.no-own.show {
  display: grid;
}

.do-recipe-type-label.cant-equip.show {
  display: inline-block;
}

.do-recipe-tooltip {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
}

.do-recipe-material-tooltip {
  height: 40px;
  width: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-accent);
  position: relative;
  margin-right: 5px;
}

.do-recipe-material-tooltip.available {
  border: 2px solid var(--color-good-hover);
}

.do-recipe-tooltip .label {
  position: absolute;
  color: white;
  top: 0;
  left: 1px;
}

.do-account-social-container {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  height: 40px;
  order: 2;
}

.do-account-social-container .instagram,
.do-account-social-container .discord,
.do-account-social-container .facebook,
.do-account-social-container .fandom,
.do-account-social-container .world-anvil {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 50%;
  margin: auto 0;
  cursor: pointer;
}

.do-account-social-container .instagram {
  background-image: url("../image//public/instagram.png");
}

.do-account-social-container .discord {
  background-image: url("../image//public/discord.png");
}

.do-account-social-container .facebook {
  background-image: url("../image/public/facebook.png");
}

.do-account-social-container .fandom {
  background-image: url("../image/public/fandom.png");
}

.do-account-social-container .world-anvil {
  background-image: url("../image/public/world-anvil.jpg");
  border-right: 2px solid var(--color-accent);
}

.do-news {
  grid-column-start: span 2;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  overflow: hidden;
  order: 3;
}

.do-news .news-row {
  height: 40px;
  transition: all ease 0.5s;
  width: 100%;
}

.do-news .news {
  font-size: 0.85rem;
  display: flex;
  height: 40px;
  align-items: center;
}

.do-news .news p {
  margin: 0;
}

.do-news .news-control {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  width: 90px;
}

.do-news .news-control i {
  font-size: 1rem;
  cursor: pointer;
}

.do-news .news-control i:hover {
  color: var(--color-orange);
}

.account-setting {
  order: 1;
  grid-column-start: span 2;
  text-align: right;
}


.do-log-consumable {
  border: 2px solid var(--color-accent);
  padding: 10px;
  width: max-content;
  max-width: 90%;
  margin: 0 auto 10px auto;
}

.do-arena-limit {
  display: flex;
  justify-content: end;
  align-items: center;
  color: var(--color-orange);
  font-size: 0.9rem;
  padding: 5px;
}

.do-arena-limit-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-blue-bg);
  min-height: 0;
  margin-bottom: 15px;
  max-width: none;
  padding: 10px;
  color: var(--color-white);
  border: solid 2px var(--color-accent);
}

.do-arena-limit-timer h3 {
  margin: 0;
}

.do-arena-limit-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.do-tab-nav-container.side {
  overflow-x: auto;
  overflow-y: initial;
}

.do-questline-quest-title {
  background-color: var(--color-blue-dark);
  padding: 10px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.do-questline-quest-row {
  margin: 15px 0;
  border: 2px solid var(--color-accent);
}

.do-quest-row-info {
  display: none;
}

.do-quest-row-info.show {
  display: block;
}

.quest-row-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

.quest-row-subtitle h3 {
  margin: 10px 0;
}

.quest-row-subtitle .do-decor-2.middle-left {
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
}

.quest-row-subtitle .do-decor-2.middle-right {
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}

.do-quest-brief-text {
  padding: 10px;
  letter-spacing: 1px;
  font-size: 0.8rem;
  text-align: justify;
}

.do-button.patreon {
  margin-bottom: 10px;
  background-color: #141518;
  min-width: 200px;
  padding-left: 38px;
}

.do-button.patreon:hover {
  background-color: #f16552;
}

.do-button.patreon::before {
  content: "";
  background-image: url("../image/public/patreon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

.do-button.patreon.connected {
  cursor: default;
  color: #fff;
  background-color: rgb(255, 66, 77);
}

.do-welcome-message {
  font-size: 1rem;
}

.do-faction-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px auto;
  max-width: 1000px;
}

.do-faction-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border-bottom: 2px solid var(--color-accent);
}

.do-faction-item.no-border {
  border-bottom: 0;
}

.do-faction-flavour {
  font-size: 1rem;
  color: var(--color-light-gray);
}

.do-race-picker {
  display: grid;
  grid-template-columns: 1fr;
}

.do-race-image {
  display: none;
}

.do-race-image.active {
  display: block;
}

.do-race-image span.do-standard-container {
  width: 70%;
  padding: 0;
  padding-bottom: 100%;
  height: 0;
  margin: 0 auto;
  display: block;
  background-size: cover;
  background-position: center;
  border: solid 2px var(--color-accent);
  transition: all 0.375s ease;
  cursor: pointer;
  min-height: 0;
  box-shadow: 0px 0px 8px;
  background-color: #1a2b43;
}

.do-race-image.human .do-standard-container {
  background-image: url("../image/race/race-1.png");
}

.do-race-image.elf .do-standard-container {
  background-image: url("../image/race/race-2.png");
}

.do-race-image.dwarf .do-standard-container {
  background-image: url("../image/race/race-3.png");
}

.do-race-image.aviaran .do-standard-container {
  background-image: url("../image/race/race-4.png");
}

.do-race-image.aluash .do-standard-container {
  background-image: url("../image/race/race-5.png");
}

.do-race-image.veskar .do-standard-container {
  background-image: url("../image/race/race-6.png");
}

.do-race-image.shayike .do-standard-container {
  background-image: url("../image/race/race-7.png");
}

.do-race-image.xeltar .do-standard-container {
  background-image: url("../image/race/race-8.png");
}

.do-race-info {
  text-align: left;
}

.do-race-info-container {
  display: grid;
  gap: 5px;
}

.do-race-info-container p {
  margin: 0;
  color: var(--color-light-gray);
}

.do-input-username {
  padding: 10px;
  color: var(--color-whitest);
  border: solid 2px var(--color-accent);
  background-color: var(--color-black);
  margin-bottom: 15px;
}

.do-profile-backstory {
  padding: 5px;
  border: 2px solid var(--color-accent);
  color: var(--color-light-gray);
}

.do-profile-party-indicator {
  border: solid 2px var(--color-accent);
  text-align: center;
  padding: 5px;
  color: var(--color-light-gray);
  margin: 0 0 10px;
}

.do-quest-redeem-reward-container {
  display: grid;
  margin: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.do-map-cancel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--color-blue-dark);
}

.do-setting-container {
  padding: 40px 10px;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
  position: relative;
}

.do-setting-container h1 {
  text-align: center;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 10px;
}

.do-profile-setting-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.do-setting-card {
  background-color: var(--color-blue-dark);
  padding: 10px;
  border: 2px solid var(--color-accent);
  position: relative;
  display: grid;
  align-content: space-between;
  margin: 10px;
}

.do-setting-field {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  margin: 5px;
  align-items: center;
}

.do-setting-field.main {
  grid-template-columns: 80px 1fr 20px;
}

.do-setting-field p {
  font-size: 0.8rem;
  font-weight: bold;
}

.do-setting-field .radio-fields {
  display: flex;
  justify-content: start;
  align-items: center;
}

.radio-fields .field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.radio-fields .field img {
  display: none;
  margin-left: 5px;
}

.do-setting-description {
  color: var(--color-light-gray);
  text-align: center;
}

.do-username-field {
  position: relative;
}

.do-username-field small {
  position: absolute;
  bottom: -17px;
  left: 0;
  font-size: 11px;
  font-weight: bold;
}

.do-setting-card .label {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: bold;
}

.do-setting-submit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.do-setting-field.location-info {
  grid-template-columns: 100px 10px 1fr;
}

.do-setting-field .mono {
  color: var(--color-light-gray);
  font-weight: normal;
}

.do-badge-setting-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  align-items: center;
}

.do-badge-image {
  max-width: 90px;
  border-radius: 50%;
}

.do-badge-wrapper.selected .do-badge-image {
  box-shadow: 0px 0px 10px var(--color-green);
}

.do-badge-image img {
  width: 100%;
}

.util-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.do-badge-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.do-badge-wrapper p {
  margin: 0;
  font-weight: bold;
}

.do-badge-wrapper.selected p {
  margin: 5px 0 0;
}

.validation-info img {
  width: 100%;
}

.do-endorse-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.do-button.disabled {
  pointer-events: none;
  background-color: #808080;
}

.do-bar-increment {
  background-color: var(--color-light-gray);
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0.3;
}

.do-effect-line {
  /* background-color: var(--color-yellow); */
  position: absolute;
  border: 2px solid var(--color-yellow);
  height: 100%;
  width: 15px;
  left: var(--hiddenPercent);
  top: 0;
  z-index: 3;
  text-align: center;
}

.do-effect-line::after {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

.do-scroll-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center;
}

.do-scroll-item {
  max-width: 150px;
}

.do-buff-container {
  border: 2px solid var(--color-accent);
  padding: 5px;
  cursor: help;
}

.do-buff-container h3 {
  font-size: 1rem;
  margin: 0;
}

.do-buff-container p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: var(--color-accent);
  font-size: 12px;
  margin: 0;
  text-align: left;
}

.do-buff-container p:hover {
  border-bottom: 2px solid var(--color-accent);
}

.guild-table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.do-skill-table,
.do-guild-table {
  border-collapse: collapse;
  margin-top: 10px;
  white-space: nowrap;
  width: 100%;
}

.do-skill-table th {
  padding: 15px 10px;
  font-size: 0.9rem;
  border: 2px solid var(--color-accent);
  border-collapse: collapse;
  text-align: center;
  background-color: var(--color-background);
}

.do-guild-table th {
  padding: 15px 10px;
  font-size: 0.9rem;
  border: 2px solid var(--color-accent);
  border-left: 0;
  border-right: 0;
  border-collapse: collapse;
  text-align: left;
}

.do-skill-table td {
  padding: 5px 10px;
  font-size: 0.9rem;
  border-collapse: collapse;
  border: 2px solid var(--color-accent);
  white-space: normal;
  position: relative;
}

.do-skill-table td.inactive::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

.do-skill-table td.inactive::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background-image: url(../image/ui/lock.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.do-skill-table td h2 {
  margin: 0;
  margin-bottom: 10px;
  font-size: 1rem;
}

.do-skill-table td p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--color-light-gray);
}

.do-guild-table td {
  padding: 5px 10px;
  font-size: 0.9rem;
  border-collapse: collapse;
  border-bottom: 2px solid var(--color-accent);
}

.do-guild-table td img {
  width: 35px;
}

.do-create-guild-input {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
}

.do-create-guild-input p {
  margin: 0;
}

.do-guild-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.do-guild-logo {
  width: 150px;
  margin: 0 auto;
}

.do-guild-logo img {
  width: 100%;
  border: 2px solid var(--color-accent);
}

.do-guild-status,
.do-guild-info h3 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.do-guild-info h3 span {
  margin-left: 10px;
  font-size: 1.3rem;
  color: var(--color-accent);
  cursor: pointer;
}

.do-guild-info h3 span:hover {
  color: var(--color-orange);
}

.do-guild-backstory {
  color: var(--color-light-gray);
}

.do-guild-wealth,
.do-guild-level {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light-gray);
}

.do-guild-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.do-guild-actions .do-button {
  min-width: unset;
}

.do-guild-body {
  overflow-x: scroll;
}

.do-guild-navigation {
  display: flex;
  background-color: var(--color-blue-darkest);
  border-left: 2px solid var(--color-accent);
  border-top: 2px solid var(--color-accent);
}

.do-guild-navbar.active {
  background-color: var(--color-blue-bg);
}

.do-guild-navbar.active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--color-blue-bg);
  left: 0;
  bottom: -2px;
  position: absolute;
}

.do-guild-navigation>div {
  padding: 10px 10px;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-accent);
  border-right: 2px solid var(--color-accent);
  width: 100%;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.do-guild-tab {
  border: 2px solid var(--color-accent);
  padding: 5px;
  width: 100%;
  display: none;
}

.do-guild-tab.active {
  display: block;
}

.do-pending-member-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.do-guild-donation-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.do-guild-donation-path-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.do-guild-donation-level-container {
  border: 2px solid var(--color-accent);
  background-color: var(--color-blue-darkest);
  position: relative;
}

.do-guild-donation-level {
  padding: 10px;
}

.do-guild-donation-level-title {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid var(--color-accent);
  font-size: 1.3rem;
  padding-bottom: 5px;
}

.do-guild-donation-level-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  font-size: 5rem;
  font-weight: bold;
}

.do-guild-donation-level-body.path {
  font-size: 4rem;
}

.do-guild-donation-level-wealth {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  width: 100%;
  background-color: var(--color-blue-dark);
}

.do-guild-donation-path {
  border: 2px solid var(--color-accent);
}

.do-guild-donation-path.active {
  background-color: var(--color-background);
}

.do-guild-level-bar {
  position: relative;
  width: 100%;
  background-color: var(--color-blue-dark);
  padding: 6px 0;
  border: 2px solid var(--color-accent);
  border-left: 0;
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.do-guild-level-bar::after {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: var(--progress-level);
  top: 0;
  z-index: 2;
  background-color: #00eeff;
}

.do-guild-level-label {
  color: var(--color-brown);
  z-index: 3;
  font-weight: bold;
}

.do-guild-level-input {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.do-guild-level-input input {
  padding: 5px;
  /* width: 100px; */
  outline: none;
  background-color: var(--color-blue-bg);
  border: 2px solid var(--color-accent);
  color: white;
}

.do-guild-donation-level-wealth-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.do-buff-activation-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.do-guild-wealth-label {
  display: none;
}

.do-guild-donation-level-wealth .do-decor-2 {
  display: none;
}

.do-quest-item-reputation-requirement {
  padding-top: 5px;
}

.do-quest-item-reputation-requirement p {
  margin: 0;
}

.do-destroy-checker {
  visibility: hidden;
  color: var(--color-bad);
}

.do-combat-party-container {
  display: grid;
  grid-template-columns: 1fr;
}

.do-combat-round-counter {
  text-align: center;
}

.do-combat-map-wrapper {
  width: 100%;
  overflow: auto;
  display: grid;
  gap: 5px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
}

.do-combat-map {
  background-image: url("");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 400px;
  display: grid;
  transition: all 0.375s ease;
  position: relative;
  background-color: var(--color-blue-bg);
  border: solid 2px var(--color-accent);
  margin: 0 auto;
}

.do-combat-map-unit {
  position: absolute;
  cursor: pointer;
  transition: all 0.375s ease;
}

.do-combat-object-info {
  text-align: center;
  transition: all 0.375s ease;
  /* visibility: hidden; */
}

.do-combat-object-icon,
.do-combat-object-icon::after,
.do-combat-object-icon::before {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: solid 2px var(--color-accent);
  cursor: pointer;
  transition: all 0.375s ease;
}

.do-combat-map-state-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.do-combat-map-state-prev {
  text-align: right;
  background-color: var(--color-gold);
  display: block;
  border: solid 1px var(--color-accent);
  width: 30px;
  height: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/stories/left-rec.png);
  cursor: pointer;
}

.do-combat-map-state-next {
  text-align: right;
  background-color: var(--color-gold);
  display: block;
  border: solid 1px var(--color-accent);
  width: 30px;
  height: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/stories/right-rec.png);
  cursor: pointer;
}

.do-combat-card {
  display: grid;
  grid-template-columns: 100px 2fr;
  gap: 5px;
  align-items: center;
  padding: 5px 0;
}

.do-combat-card>.do-standard-container {
  min-height: 0;
}

.do-combat-card-portrait {
  width: 100px;
  height: 100px;
  background-color: black;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.do-combat-object-icon.do-combat-card-portrait {
  width: 5px;
  height: 5px;
}

.do-combat-object-icon {
  /* animation-name: attack_range; change based on attack?*/
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes attack_range {
  40% {
    transform: translate3d(0, 4px, 0);
  }

  50% {
    transform: translate3d(0, -2px, 0);
  }

  90% {
    transform: translate3d(0, -1px, 0);
  }
}

@keyframes attack_melee {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(0, -1px, 0);
  }

  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}

.do-combat-card-info {
  cursor: pointer;
}

.do-combat-party-attacker>h2,
.do-combat-party-defender>h2 {
  text-align: center;
  font-family: nunito-sans-bold;
  font-size: 1.3rem;
  color: var(--color-accent);
  margin: 0;
}

.do-combat-card-info>.do-bar-wrapper {
  grid-template-columns: 1fr;
}

.do-combat-card-attackingType {
  display: grid;
  grid-template-columns: 1fr;
}

.do-combat-card-damage {
  grid-column-start: span 2;
  order: 3;
}

.do-combat-card-damage .do-bar {
  margin: 0;
}

.do-combat-card-damage,
.do-combat-card-total-damage {
  cursor: help;
}

.do-combat-party-attacker {
  order: 1;
}

.do-combat-party-defender {
  order: 3;
}

.do-combat-card-total-damage.attacker {
  order: 2;
}

.do-combat-card-total-damage.defender {
  order: 4;
}

.do-combat-card-damage>.do-bar-wrapper,
.do-combat-card-total-damage>.do-bar-wrapper {
  grid-template-columns: 1fr;
}

.do-combat-card-damage>.do-bar-wrapper>.do-bar {
  height: 12px;
  border: none;
}

.do-combat-card-damage>.do-bar-wrapper .do-bar-tooltip,
.do-combat-card-total-damage>.do-bar-wrapper .do-bar-tooltip {
  text-align: left;
}

.do-combat-card-loot {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-start: span 2;
  column-gap: 5px;
  order: 4;
}

.do-combat-card-loot>.do-explore-reward-container {
  margin: 0;
  grid-template-columns: repeat(5, 1fr);
}

.do-combat-card-loot>.do-explore-reward-container>.do-item-icon {
  width: 60px;
  height: 60px;
  padding-bottom: 0;
}

.do-combat-party-combatants-detail {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  column-gap: 10px;
  align-items: center;
}

.do-combat-card-total-damage-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 2px solid var(--color-accent);
  border-left: 0;
  border-right: 0;
}

.do-combat-card-total-damage-number {
  display: grid;
  grid-template-columns: 1fr auto;
}

.do-combat-card-total-damage-number physical,
.do-combat-card-total-damage-number magical {
  font-size: 1rem;
  font-family: nunito-sans-bold;
}

.do-combat-card-total-damage-detail>h2,
.do-combat-card-total-damage-number>h3 {
  margin: 5px;
}

.do-combat-party-combatants-detail>.do-standard-container.do-profile-faction-crest {
  width: 35px;
  height: 35px;
  position: unset;
}

.do-combat-card-stats-info-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
  padding: 10px;
}

.do-combat-card-stats-info-container>.do-standard-container {
  min-height: 100px;
}

.do-combat-card-stat-portrait {
  width: 100px;
  height: 100px;
  background-color: black;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.do-secondary-stats-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.do-stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.questButton {
  margin-bottom: 10px;
}

.do-lock-item {
  position: absolute;
  right: 15px;
  bottom: 20px;
  border: solid 2px var(--color-accent);
  text-align: center;
  max-width: 30px;
  min-height: 30px;
  transition: all 0.375s ease;
}

.do-lock-item>p {
  color: var(--color-accent);
  position: relative;
  text-align: center;
  top: -20px;
}

.do-lock-item.bad {
  background-color: var(--color-black);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/unlocked.png");
}

.do-lock-item.bad:hover {
  background-color: var(--color-gray);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/locked.png");
}

.do-lock-item.good {
  background-color: var(--color-black);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/locked.png");
}

.do-lock-item.good:hover {
  background-color: var(--color-gray);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/unlocked.png");
}

.do-massive-salvage {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 30px;
  min-height: 30px;
  border: solid 2px var(--color-accent);
  transition: all 0.375s ease;
  cursor: pointer;
}

.do-massive-salvage.bad {
  background-color: var(--color-black);
}

.do-massive-salvage.bad:hover {
  background-color: var(--color-gray);
}

.do-massive-salvage.good {
  /* background-color: var(--color-red-bg); */
  background-color: var(--color-black);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/checklist-brown.png");
  border-radius: 50%;
}

.do-massive-salvage.good:hover {
  background-color: rgb(127, 127, 102);
}

.do-massive-salvage-item-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

.do-massive-salvage-button {
  display: flex;
  justify-content: center;
  max-width: 200px;
  margin: 0 auto;
}

.do-button.explore-result-button-hidden {
  display: none;
}

.do-button.explore-result-button-hidden>p {
  display: none;
}

.explore-result-button-right {
  min-width: 40px;
  min-height: 40px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/ui/close-2.png");
  z-index: 99;
}

.do-explore-close-button-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.do-popup-wrapper.explore-result-wrapper {
  padding: 15px;
  min-width: 60%;
}

.massContainer.hidden {
  display: none;
}

.do-show-artificer {
  visibility: hidden;
}

.node-info-container {
  display: grid;
  align-items: start;
}

.node-explore-leaderboard {
  padding: 5px;
  margin: 0;
  min-width: 200px;
  font-size: 0.6rem;
}

.do-explore-leaderboard-detail {
  display: flex;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  padding: 3px 10px;
  gap: 5px;
}

.do-explore-leaderboard-detail p {
  margin: 0;
}

.do-quick-equip-input {
  padding: 5px;
  color: var(--color-whitest);
  border: solid 2px var(--color-accent);
  background-color: var(--color-black);
}

.do-profile-quick-equip {
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr 1fr;
  position: relative;
  order: 0;
}

.do-profile-quick-equip-dropdown {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 5px;
  grid-column-start: span 2;
}

.do-profile-quick-equip>.primary {
  grid-column-start: span 2;
}

.do-purchase-set-button {
  width: 40px;
  height: 40px;
  border: solid 2px var(--color-accent);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../image/ui/add_white.svg);
  background-color: var(--color-good);
}

.do-purchase-set-button .do-tooltip {
  margin-left: -23px;
}

.do-quick-equip-insert-name {
  display: grid;
}

.do-crafting-preview-result>.do-item-icon,
.simple-craft-item>.do-item-icon {
  order: 0;
}

.artificer-hidden-container {
  display: grid;
}

.do-artificer-show-bonus {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-gap: 5px;
  transition: all 0.375s ease;
  margin: 8px;
}

.do-show-artificer-bonus-box {
  border: 2px solid var(--color-yellow);
  font-size: 1.2rem;
  height: 30px;
  width: 30px;
  text-align: center;
  display: none;
}

.do-show-artificer-bonus-box.good {
  background-color: var(--color-black);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/checklist-brown.png");
}

.container-content-containe,
.item-source-container {
  font-size: 0.8rem;
  color: var(--color-accent);
}

.container-content {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;
  align-items: center;
  justify-content: start;
  justify-items: start;
}

.container-content>p {
  color: var(--color-white);
}

.container-content-info {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;
  align-items: center;
  justify-content: start;
  justify-items: start;
  border-bottom: 1px solid var(--color-accent);
}

.container-content-info>p,
.container-content-info>a {
  color: var(--color-gray);
}

.item-source {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: start;
  justify-items: start;
}

.item-source>p {
  color: var(--color-white);
}

.item-source-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: start;
  justify-items: start;
  border-bottom: 1px solid var(--color-accent);
}

.item-source-info>p,
.item-source-info>a {
  color: var(--color-gray);
}

.do-item-icon.do-item-quest-drop-only {
  border-bottom: solid 2px var(--color-cyan);
}

.do-item-icon.do-item-limited:before {
  background-image: url(../image/frame-3.png);
  width: 40%;
  height: 40%;
  top: -2.5px;
  right: -2.5px;
  transform: none;
}

.do-item-icon.do-item-heritage:after {
  background-image: url(../image/frame-1.png);
  width: 20%;
  height: 20%;
  bottom: 10px;
  left: 5px;
  transform: rotateZ(135deg);
}

.do-bar-text-explore {
  text-align: left;
  background-color: rgba(0, 0, 0, 0.7);
  display: inline-block;
  padding: 3px;
  font-weight: bold;
  letter-spacing: 0.3px;
  border-radius: 2px;
}

.do-title-explore {
  display: grid;
  justify-items: center;
}

.do-title-explore h2 {
  margin: 0;
  color: var(--color-accent);
  font-size: 1.4rem;
  font-family: nunito-sans-bold;
}

.do-explore-node-content-info {
  display: grid;
}

.node-explore-leaderboard-container {
  border: 2px solid var(--color-accent);
  order: 1;
}

.node-explore-leaderboard-border {
  font-size: 1rem;
  border-bottom: 2px solid var(--color-accent);
  margin: 5px 10px;
}

.do-explore-enemy-container {
  order: 2;
  margin-top: 10px;
}

.do-max-qty-trade-hall {
  background: none;
  color: white;
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  padding: 0 3px;
  min-width: 20px;
}

.do-region-current-info {
  margin-top: 10px;
}

.do-region-text-controlled {
  border-bottom: 2px solid var(--color-accent);
}

.do-region-background {
  min-height: 500px;
  width: 100%;
  position: relative;
  /* box-shadow: 0px 0px 16px 16px var(--color-blue-bg) inset; */
  background-color: black;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: grid;
  align-content: space-between;
  background-image: url(../image/placeholder-area.png);
  z-index: 0;
}

.do-region-background:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0), var(--color-blue-bg));
  z-index: 98;
}

.do-region-background:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.4),
      var(--color-blue-bg));
  z-index: 98;
}

.do-dragable-quest-container {
  height: auto;
  cursor: pointer;
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: flex-end;
  gap: 2px;
  position: fixed;
  left: 5px;
  bottom: var(--size-navbar-height);
  order: 1;
  z-index: 99;
}

.do-available-quest-popup-detail {
  height: 90px;
  width: 100%;
  position: relative;
  display: none;
  grid-template-columns: 65px 1fr;
  grid-gap: 5px;
  background-color: var(--color-blue-bg);
  border: 2px solid var(--color-accent);
  overflow: hidden;
  order: 2;
}

.do-available-quest-popup-top {
  display: grid;
  grid-template-columns: 1fr 20px;
}

.do-available-quest-popup-description {
  font-size: 0.65rem;
}

.do-available-quest-popup-hide {
  min-width: 20px;
  min-height: 20px;
  background-image: url(../image/ui/minimize.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
}

.do-available-quest-popup {
  height: 40px;
  width: 100%;
  order: 2;
  position: relative;
  display: none;
  align-self: flex-end;
  align-items: center;
  padding: 5px;
  background-color: var(--color-black);
  border: 2px solid var(--color-accent);
}

.do-available-quest-popup-text {
  color: var(--color-accent);
  font-weight: bold;
  font-size: 1rem;
}

.do-available-quest-popup-text span {
  font-weight: normal;
  font-size: 0.8rem;
  margin-left: 5px;
}

.do-dragable-quest {
  border: 2px solid var(--color-accent);
  height: 60px;
  width: 60px;
  text-align: center;
  background-image: url(../image/ui/quest-2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 65%;
  background-color: var(--color-black);
}

.game-popup-quest-container {
  min-width: 80%;
}

.do-popup-scroller .do-quest-item {
  text-align: left;
  font-size: 0.7rem;
}

.do-my-quest-popup>h3 {
  font-size: 1.2rem;
  font-family: "nunito-sans-bold";
  color: var(--color-accent);
  font-weight: 900;
  border-bottom: 2px solid var(--color-accent);
}

.do-quest-detail-container {
  text-align: left;
  font-size: 0.7rem;
}

.do-quest-detail-background {
  min-height: 300px;
  /* box-shadow: 0px 0px 16px 16px var(--color-blue-bg) inset; */
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.6),
      var(--color-blue-bg));
  /*background-color: black;*/
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* background-image: url(../image/ui/default-image.png); */
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

.do-quest-detail-background:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.4),
      var(--color-blue-bg));
  z-index: 5;
}

.do-quest-detail-background-barrier {
  min-height: 220px;
}

.do-quest-item-detail-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  padding: 10px;
}

.do-quest-detail-item>.do-quest-item-info {
  border: none;
  background-color: var(--color-blue-bg);
}

.do-available-quest-detail-icon {
  background-image: url(../image/QuestGiver.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.do-available-quest-detail-icon.overlay {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 200px;
  left: 25px;
  /*this z-index is set so it's above .do-quest-detail-background:after*/
  z-index: 6;
  border: solid 2px var(--color-accent);
}

.do-available-quest-detail-icon:after {
  content: "";
  position: absolute;
  right: 0;
  width: 10%;
  height: 100%;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.4),
      var(--color-blue-bg));
  z-index: 999;
}

.do-available-quest-popup-info {
  display: grid;
  align-content: space-around;
}

.do-available-quest-popup-title {
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.do-available-quest-popup-button {
  display: grid;
  grid-template-columns: 0.4fr 1fr 0.2fr;
}

.do-available-quest-detail-button {
  background-color: var(--color-primary);
  border: 2px solid var(--color-accent);
  text-align: center;
  position: relative;
  width: 60px;
}

.do-available-quest-detail-button:before {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../image/public/decor-01.png);
  transform: rotateZ(180deg);
  top: 1px;
  right: 1px;
}

.do-available-quest-detail-button:after {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../image/public/decor-01.png");
  bottom: 1px;
  left: 1px;
}

.do-available-quest-PN-container {
  display: flex;
  gap: 10px;
  padding-right: 10px;
}

.do-available-quest-popup-prev,
.do-available-quest-popup-next {
  min-height: 20px;
  min-width: 20px;
  background-color: var(--color-blue-bg);
  background-size: 75%;
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-accent);
}

.do-available-quest-popup-prev {
  background-image: url(../image/ui/left.png);
}

.do-available-quest-popup-next {
  background-image: url(../image/ui/right.png);
}

.do-chat-toggle {
  border: 2px solid var(--color-accent);
  height: 60px;
  width: 60px;
  text-align: center;
  position: fixed;
  background-image: url(../image/icon-chat.png);
  right: 5px;
  bottom: var(--size-navbar-height);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  order: 1;
  z-index: 101;
  background-color: var(--color-black);
  cursor: pointer;
}

.do-chat-notif {
  background-color: var(--color-red);
  border-radius: 5px;
  padding: 2px;
  min-width: 20px;
  display: inline-block;
  font-weight: bold;
  color: var(--color-white);
  position: absolute;
  left: 5px;
  top: 5px;
}

.do-chat-wrapper {
  display: none;
}

.do-chat-wrapper.expanded {
  display: block;
  min-height: 500px;
  position: fixed;
  width: 90%;
  left: 5%;
  bottom: calc(var(--size-navbar-height) + 65px);
  background-color: var(--color-blue-bg);
  z-index: 1000;
  padding: 5px;
  border: solid 1px var(--color-accent);
}

.do-chat-header {
  display: grid;
  grid-template-columns: 1fr 1fr 30px;
  gap: 5px;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--color-accent);
  align-items: center;
  justify-content: space-between;
}

.do-chat-title {
  font-size: 1rem;
  color: var(--color-accent);
}

.do-chat-player-count {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.do-chat-player-count p,
.do-chat-player-count span {
  color: var(--color-dodge);
  margin: 5px 0;
}

.do-chat-minimize-button {
  display: grid;
  align-items: center;
  text-align: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-image: url(../image/cross-red.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.do-chat-bubble-wrapper {
  overflow: auto;
  height: 400px;
  display: grid;
  padding-right: 5px;
  padding-top: 5px;
}

.do-chat-bubble {
  display: grid;
  margin: 0 0 5px;
  position: relative;
  font-size: 0.8rem;
  border-radius: 4px;
  text-align: right;
  color: var(--color-black);
  justify-self: flex-end;
  width: 90%;
}

.do-chat-bubble.oath {
  background-color: #ffc6c6;
}

.do-chat-bubble.legion {
  background-color: #94c5ff;
}

.do-chat-bubble.self {
  background-color: var(--color-accent);
}

.do-chat-bubble.self {
  justify-self: flex-start;
}

.do-chat-bubble-name-container {
  padding: 0 5px;
  align-items: center;
  color: var(--color-black);
  text-align: right;
  display: flex;
  flex-direction: row-reverse;
  gap: 3px;
}

.self .do-chat-bubble-name-container {
  text-align: left;
  flex-direction: row;
}

.do-chat-bubble-name-container a {
  color: var(--color-black);
}

.do-chat-bubble-name-container lv {
  font-weight: 900;
  font-size: 0.6rem;
  border-radius: 4px;
  background-color: var(--color-gold);
  padding: 0 2px;
  border: solid 1px black;
}

gm-orb {
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-cyan);
  border-radius: 50%;
  border: solid 2px black;
}

.do-chat-bubble-name-container date {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.6rem;
  opacity: 0.7;
}

.self .do-chat-bubble-name-container date {
  left: auto;
  right: 2px;
}

.do-chat-bubble-name-container h4 {
  margin: 0;
}

.do-chat-bubble-faction-crest {
  width: 35px;
  height: 100%;
  margin: 0 5px;
  padding: 0;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 10%;
}

.self .do-chat-bubble-faction-crest {
  right: 2px;
  left: auto;
}

.do-chat-bubble-faction-crest.oath {
  background-image: url("../image/ui/oathbound-logo.png");
}

.do-chat-bubble-faction-crest.legion {
  background-image: url("../image/ui/silver-legion-logo.png");
  background-size: 130%;
}

.do-chat-message {
  padding: 2px 5px;
  font-size: 0.8rem;
  text-align: right;
  word-break: break-word;
}

.self .do-chat-message {
  text-align: left;
}

.do-chat-input-container {
  position: absolute;
  bottom: 5px;
  width: calc(100% - 10px);
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 5px;
}

.do-toggle-salvaged {
  display: flex;
  margin-bottom: 5px;
  max-width: 200px;
  justify-content: center;
}

.do-profile-title-list-container {
  margin: 20px 0;
  display: grid;
}

.do-profile-player-honorific {
  display: flex;
  align-items: center;
  gap: 5px;
}

.do-badge-reward-icon-container {
  display: grid;
  grid-template-columns: 0.2fr 1fr;
  justify-items: end;
  align-items: center;
}

.do-badge-reward-icon {
  height: 30px;
  width: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4%;
  cursor: pointer;
}

.do-inventory-extra-info-container {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  flex-direction: column;
}

.do-redeem-result-container {
  display: grid;
  justify-items: center;
}

.do-redeem-result-container>.do-item-icon {
  width: 100px;
  height: 100px;
  padding-bottom: 0;
}

.do-popup-scroller>.do-equipment-decor-wrapper {
  padding: 0;
}

.do-popup-scroller>.do-equipment-decor-wrapper>.do-full-equipment-wrapper {
  padding: 0;
  border: 0;
}

/* .do-mass-toggle-container, .do-mass-open-container {
    display: none;
} */
/*GAME CLASS END*/
/* REDEEM START */
.do-section.redeem {
  margin: 100px 0 50px;
}

.do-input-group.redeem {
  margin: 0 0 15px;
}

.do-redeem-title {
  text-align: center;
  margin: 40px 0 20px;
}

.do-redeem-content-container {
  text-align: left;
}

.do-redeem-content-container h1 {
  margin: 10px 0;
  color: var(--color-accent);
}

.do-redeem-content-container p {
  margin: 5px 0;
  font-size: 1rem;
  color: #d1d1d1;
  font-weight: 500;
}

.do-redeem-button-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 10px 0;
  font-size: 0.8rem;
}

/* REDEEM END */
/* VOTE BANNER START */
.do-vote-banner-container {
  padding: 10px 0;
  display: grid;
  gap: 10px;
}

.do-vote-banner-container a {}

.do-vote-banner {}

.do-vote-banner img {
  width: 100%;
}

.do-vote-word {
  background-color: var(--color-blue-bg);
  text-align: center;
  padding: 10px;
  border: solid 2px var(--color-accent);
}

/* VOTE BANNER END */
/*JOURNAL EVENT BANNER START*/
.do-journal-event-link {
  margin: 0 0 10px;
}

.do-journal-event-banner {
  background-color: transparent;
  min-height: 120px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.do-journal-event-banner.hotna {
  background-image: url("../image/hotna/hotna-banner-mobile.png");
}

.do-journal-event-banner.yinreki {
  background-image: url("../image/yinreki/yinreki-banner-mobile.png");
}

/*JOURNAL EVENT BANNER END*/
.do-statusbar-region-container.area-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.do-statusbar-region-container.area-image h2 {
  background-color: rgba(0, 0, 0, 0.7);
  margin: 15px;
  padding: 3px;
  letter-spacing: 0.5px;
}

/* quest dialogue */
.do-quest-dialogue-buttons-container {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.do-quest-dialogue-ally {
  min-height: 100%;
  /* box-shadow: 0px 0px 16px 16px var(--color-blue-bg) inset; */
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.6),
      var(--color-blue-bg));
  background-color: black;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  max-width: 300px;
  background-image: url(../image/ui/default-image.png);
  position: absolute;
  width: 100%;
  top: 20%;
  z-index: 1;
}

@media screen and (min-width: 768px) {

  .do-profile-badge-list-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .do-account-social-container {
    order: 1;
  }

  .do-dragable-quest-container,
  .do-chat-toggle {
    bottom: 10px;
  }

  .do-chat-wrapper.expanded {
    min-height: 650px;
    bottom: 80px;
    width: 80%;
    left: 10%;
  }

  .do-chat-bubble-wrapper {
    height: 530px;
  }

  .do-chat-header {
    grid-template-columns: 1fr 1fr 50px;
  }

  .do-chat-minimize-button {
    width: 50px;
    height: 50px;
  }

  .do-chat-bubble {
    width: 80%;
  }

  .do-daily-reward-table {
    grid-template-columns: repeat(7, 1fr);
    min-width: 600px;
  }

  .do-collection-container {
    grid-template-columns: 2fr 3fr;
    gap: 10px;
  }

  .do-collection-image {
    width: 150px;
    height: 150px;
  }

  .do-collection-image .do-item-icon:before,
  .do-collection-image .do-item-icon:after {
    width: 10px;
    height: 10px;
  }

  .do-collection-group.summary {
    order: 3;
  }

  .do-collection-group.progress {
    order: 2;
  }

  .do-collection-stats-container {
    order: 4;
  }

  .do-collection-group.enemy-source {
    order: 5;
    grid-column-start: span 2;
  }

  .do-collection-group.node-source {
    order: 6;
    grid-column-start: span 2;
  }

  .do-collection-group.container-source {
    order: 7;
    grid-column-start: span 2;
  }

  .do-collection-group.quest-source {
    order: 8;
    grid-column-start: span 2;
  }

  .do-collection-group.exchange-source {
    order: 9;
    grid-column-start: span 2;
  }

  .do-collection-group.iap-source {
    order: 10;
    grid-column-start: span 2;
  }

  .do-collection-group.content {
    order: 11;
    grid-column-start: span 2;
  }

  .do-tos-container img {
    max-width: 400px;
  }

  .do-section {
    min-height: 400px;
  }

  .do-tab-nav-container.side {
    flex-direction: column;
    overflow-x: initial;
  }

  .do-tab-nav-container.side .do-tab-nav-button {
    margin: 0;
    margin-bottom: 5px;
    display: inline-block;
    border: solid 2px var(--color-accent);
    border-bottom: solid 2px var(--color-accent);
    border-right: none;
    min-width: 100px;
    font-size: 1rem;
  }

  .do-tab-nav-container.side .do-tab-nav-button.active {
    border-right: none;
    border-bottom: solid 2px var(--color-accent);
    width: 100%;
  }

  .do-tab-nav-container.side .do-tab-nav-button.active:after {
    content: "";
    width: 5px;
    height: 100%;
    background-color: var(--color-blue-bg);
    display: block;
    position: absolute;
    right: -3px;
    left: auto;
    top: 0;
    z-index: 1;
  }

  .do-navbar-trigger {
    display: none;
  }

  .do-navbar-title {
    display: block;
  }

  .do-navbar-container {
    position: relative;
    transform: translate3d(0, 0, 0);
    top: 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    width: 100%;
    background: none;
  }

  .do-navbar-button {
    display: inline-block;
    border-bottom: none;
    padding: 10px;
  }

  .do-home-banner-wrapper {
    grid-template-columns: 3fr 2fr;
  }

  .do-home-banner-decoration-container {
    min-height: 400px;
  }

  .do-home-banner-login-wrapper {
    margin: 0 auto;
  }

  .do-home-faction-item {
    margin-bottom: 50px;
    align-items: center;
    justify-items: center;
  }

  .do-home-faction-item.left {
    grid-template-columns: 2fr 1fr;
  }

  .do-home-faction-item.right {
    grid-template-columns: 1fr 2fr;
  }

  .do-home-faction-logo {
    margin: 0;
    padding: 25px;
    order: 2;
  }

  .do-home-faction-text-container {
    padding: 25px;
  }

  .do-home-faction-text-container.silver-legion {
    order: 1;
  }

  .do-home-faction-text-container.oathbound {
    order: 3;
  }

  .do-home-role-container {
    padding: 0 50px;
  }

  .do-home-role-decoration-1 {
    left: 70px;
  }

  .do-home-role-decoration-2 {
    right: 70px;
  }

  .do-home-role-item-container {
    grid-gap: 20px;
  }

  .do-home-role-item-container.column-2 {
    grid-template-columns: 1fr 1fr;
    padding: 0 50px;
  }

  .do-home-role-item-container.column-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .do-home-role-item {
    padding: 0;
  }

  .do-home-race-image-wrapper:before {
    width: calc((min(100vw, 800px) - 320px) / 2);
  }

  .do-home-race-image-wrapper:after {
    width: calc((min(100vw, 800px) - 320px) / 2);
  }

  .do-home-race-text-item {
    padding: 0 50px 50px;
  }

  .do-statusbar-wrapper {
    grid-template-columns: 1fr 1fr 120px;
  }

  .do-statusbar-container.left {
    order: 1;
  }

  .do-statusbar-container.right {
    order: 3;
  }

  .do-statusbar-bar-container {
    order: 2;
  }

  .do-statusbar-region-container {
    order: 4;
  }

  .do-standard-container.do-statusbar-portrait {
    width: 100px;
    height: 100px;
  }

  .do-statusbar-ap-container h3 {
    font-size: 1.2rem;
  }

  .do-statusbar-bar-container {
    grid-column-start: 2;
  }

  .do-statusbar-region-container {
    grid-column-start: span 3;
    display: grid;
    align-items: center;
    border: solid 2px var(--color-accent);
    padding: 5px;
  }

  .do-statusbar-region-container h2 {
    color: var(--color-white);
  }

  .do-game-nav-container {
    grid-gap: 5px;
    position: relative;
    padding: 10px;
    z-index: 2;
  }

  .do-game-nav-container .do-button {
    font-size: 1rem;
  }

  .do-popup-wrapper {}

  .do-popup-scroller {
    max-height: min(calc(100vh - 110px), calc(1024px - 110px));
  }

  .do-start-wrapper {
    display: grid;
    grid-template-columns: 350px 350px;
    grid-gap: 20px;
  }

  .do-start-wrapper .do-home-race-text-item {
    margin: 0 30px;
    padding: 0;
  }

  .do-start-wrapper .do-home-race-image-wrapper:before {
    width: calc((100% - 190px) / 2);
    right: calc(100% + 35px);
  }

  .do-start-wrapper .do-home-race-image-wrapper:after {
    width: calc((100% - 190px) / 2);
    left: calc(100% + 35px);
  }

  .do-account-container {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }

  .do-account-container .do-home-divider {
    display: none;
  }

  .do-journal-wrapper {
    grid-template-columns: 120px 1fr;
    padding: 0;
  }

  .do-journal-wrapper.vote {
    grid-template-columns: 120px 2fr 271px;
  }

  .do-message-of-the-day-container {
    grid-column-start: span 3;
  }

  .do-journal-item {
    grid-template-columns: 60px 1fr 100px;
  }

  .do-journal-reference {
    grid-column-start: 3;
  }

  .do-quest-item-action-container {
    grid-template-columns: 1fr 150px;
    grid-gap: 10px;
  }

  .do-quest-reward-container {
    display: grid;
    text-align: right;
  }

  .do-quest-reward-container li {
    flex-direction: row-reverse;
  }

  .do-bestiary-detail-container {
    grid-template-columns: 2fr 3fr;
    grid-gap: 10px;
  }

  .do-bestiary-detailed-info {
    grid-column-start: 2;
  }

  .do-bestiary-general-info p {
    text-align: left;
  }

  .do-bestiary-item .do-bar-wrapper {
    grid-template-columns: 60px 1fr;
  }

  .do-bestiary-general-info>p {
    font-size: 1rem;
  }

  .do-bestiary-info {
    font-size: 1rem;
  }

  .do-skill-icon {
    width: 50px;
    height: 50px;
  }

  .do-inventory-search-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }

  .do-region-finance-container dranemir {
    font-size: 1rem;
    grid-template-columns: 1fr 25px;
  }

  .do-region-finance-container dranemir:after {
    width: 25px;
    height: 25px;
  }

  .do-region-detail-container {
    grid-template-columns: 150px 1fr;
  }

  .do-region-building-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .do-region-building-container>a.do-standard-container {
    padding: 20px 10px;
  }

  .do-region-detail-info-container {
    order: 2;
  }

  .do-region-bar-container {
    grid-column-start: 2;
  }

  .do-region-bar-container label {
    font-size: 1rem;
  }

  .do-region-finance-container h3 {
    font-size: 1.1rem;
  }

  .do-region-finance-container span {
    font-size: 1rem;
  }

  .do-region-finance-container p {
    font-size: 1rem;
    grid-template-columns: 200px 1fr;
  }

  .do-region-reputation-container h3 {
    font-size: 1.1rem;
    margin-top: 10px;
  }

  .do-region-reputation-container span {
    font-size: 1rem;
  }

  .do-region-reputation-container p {
    font-size: 1rem;
    grid-template-columns: 200px 1fr;
  }

  .do-node-image-wrapper {
    max-width: 285px;
  }

  .do-node-image-wrapper:before {
    top: 142px;
    width: calc((min(100vw, 1024px) - 370px) / 2);
  }

  .do-node-image-wrapper:after {
    top: 142px;
    width: calc((min(100vw, 1024px) - 370px) / 2);
  }

  .do-node-slider-nav.left {
    top: 130px;
  }

  .do-node-slider-nav.right {
    top: 130px;
  }

  .do-node-image-item {
    width: 250px;
    height: 250px;
  }

  .do-node-detail-wrapper {
    padding-top: 142px;
    transform: translateY(-147px);
  }

  .do-node-detail-item {
    padding: 0 20px 20px;
  }

  .do-node-enemy-container {
    grid-template-columns: repeat(10, 1fr);
  }

  .do-explore-result .do-statusbar-wrapper {
    grid-template-columns: 1fr 1fr 120px;
  }

  .do-explore-reward-container {
    grid-template-columns: repeat(8, 1fr);
  }

  .do-map-wrapper {
    max-height: 750px;
  }

  .do-map-button-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .do-map-button-container.aviaran {
    grid-template-columns: 1fr 1fr;
  }

  .do-vendor-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-vendor-container.list {
    grid-template-columns: 1fr;
  }

  .do-vendor-search-container {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 150px;
    grid-gap: 10px;
  }

  .do-bestiary-search-container {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 150px;
    grid-gap: 10px;
  }

  .do-vendor-search-container .do-input {
    min-height: 40px;
  }

  .do-combat-portrait-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .do-standard-container.do-combat-portrait {
    max-width: 200px;
    padding-bottom: min(100%, 200px);
  }

  .do-combat-unit-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .do-combat-unit-wrapper .do-profile-primary-stats-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .do-combat-status-wrapper {
    max-width: 600px;
    margin: 0 auto 10px;
  }

  .do-combat-reward-container {
    max-width: 600px;
    margin: 0 auto 10px;
  }

  .do-combat-log-container {
    max-width: 672px;
    margin: 0 auto 10px;
  }

  .do-crafting-interface {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }

  .do-building-nav-container {
    grid-column-start: span 2;
  }

  .do-crafting-preview-material-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .do-recipe-container {
    width: 100%;
  }

  .do-recipe-group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    align-items: flex-start;
  }

  .do-recipe-item {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .do-recipe-icon-container {
    max-width: none;
  }

  .do-recipe-item h3 {
    margin: 0;
    min-height: 40px;
    font-size: 0.7rem;
  }

  .do-recipe-item>.do-button {
    width: 100%;
  }

  .do-recipe-search-container {
    grid-template-columns: 1fr 1fr;
    display: grid;
    grid-gap: 10px;
  }

  .do-recipe-search-container .do-input {
    min-height: 40px;
  }

  .do-upgrade-interface-wrapper {
    grid-template-columns: 150px 1fr;
  }

  .do-arena-wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-gap: 10px;
  }

  .do-exchange-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-topup-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    padding: 40px 20px;
    margin: 0 auto;
  }

  .notification-baloon {
    right: auto;
    top: -9px;
    left: -10px;
  }

  .do-topup-payment {
    grid-template-columns: 1fr 2px 1fr;
  }

  .do-separator {
    width: 100%;
    height: 100%;
  }

  .do-tooltip.wide {
    width: 500px;
  }

  .do-explore-node-enemy-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .do-buy-items {
    grid-template-columns: repeat(4, 1fr);
  }

  .do-market-add-showcase .do-button {
    width: 200px;
  }

  .do-form-group-grid {
    grid-template-columns: 1fr 2fr;
  }

  .do-form-group-grid .do-input {
    width: 80%;
  }

  .simple-craft-container {
    width: 80%;
  }

  .do-map-construction-wrapper,
  .do-map-commodity-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }

  .do-map-construction-wrapper {
    margin-bottom: 20px;
  }

  .construction-ref::after {
    content: "";
    position: absolute;
    right: -25px;
    top: 40px;
    width: 2px;
    height: 90%;
    background: var(--color-accent);
  }

  .do-map-info {
    padding: 15px 15px;
  }

  .do-marketplace-search-group {
    grid-template-columns: 1fr 1fr 1fr 120px;
  }

  .do-redeem-container {
    padding-bottom: 5px;
  }

  .do-redeem-link {
    margin: 10px 0;
  }

  .do-bestiary-filter-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 80px;
    margin-top: 15px;
  }

  .do-guild-filter-container {
    grid-template-columns: 1fr 1fr 120px;
    margin-top: 15px;
  }

  .do-compendium-filter-container {
    grid-template-columns: 1fr 1fr 1fr 80px;
    margin-top: 15px;
  }

  .do-guild-filter-container .do-filter-button,
  .do-compendium-filter-container .do-filter-button,
  .do-bestiary-filter-container .do-filter-button {
    width: 100%;
  }

  .do-bestiary-list-container {
    grid-template-columns: 1fr 30px 1fr;
  }

  .do-bestiary-separator {
    display: block;
    width: 100%;
    height: 100%;
  }

  .do-bestiary-information {
    border-top: 0;
    margin-top: 0;
  }

  .do-compendium-donate-wrapper img {
    width: 40%;
  }

  .do-account-bar {
    display: flex;
  }

  .do-news {
    order: 2;
    flex: 2;
  }

  .account-setting {
    order: 3;
    min-width: 155px;
  }

  .do-progress-label.label-compen-2 {
    left: 10%;
  }

  .do-progress-indicator.compen-3 {
    left: 46%;
  }

  .do-progress-label.label-compen-3 {
    left: 34%;
  }

  .do-progress-indicator.compen-4 {
    left: 71%;
  }

  .do-progress-label.label-compen-4 {
    left: 66%;
  }

  .do-progress-indicator.compen-5 {
    left: 96.5%;
  }

  .do-progress-label.label-compen-5 {
    left: 91%;
  }

  .do-bestiary-list {
    gap: 15px;
  }

  .do-collection-list {
    gap: 15px;
    grid-template-columns: repeat(5, 1fr);
  }

  .do-faction-container {
    grid-template-columns: 1fr 1fr;
    gap: 100px;
  }

  .do-faction-item {
    border-bottom: 0;
  }

  .do-race-picker {
    grid-template-columns: 1fr 1fr;
  }

  .do-quest-redeem-reward-container {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .do-progress-indicator.compen-1 {
    left: -2.6%;
  }

  .do-progress-indicator.compen-2 {
    left: 1.5%;
  }

  .do-progress-label.label-compen-1 {
    left: -5%;
  }

  .do-progress-label.label-compen-2 {
    left: 5%;
  }

  .do-profile-setting-container {
    grid-template-columns: 1fr 1fr;
  }

  .radio-fields .field img {
    display: inline-block;
    width: 20px;
  }

  .do-scroll-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .do-guild-header {
    grid-template-columns: 120px 1fr 100px;
  }

  .do-guild-logo {
    width: initial;
    margin: 0;
  }

  .do-guild-status,
  .do-guild-info h3 {
    justify-content: flex-start;
    margin-top: 0;
  }

  .do-guild-info h3 {
    margin-bottom: 0;
  }

  .do-guild-status {
    margin-bottom: 5px;
  }

  .do-guild-backstory {
    margin: 0;
  }

  .do-guild-level {
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .do-guild-wealth {
    justify-content: start;
  }

  .do-guild-actions {
    display: block;
  }

  .do-guild-actions>div {
    margin-bottom: 10px;
  }

  .do-guild-actions .do-button {
    width: 100%;
  }

  .do-guild-body {
    overflow-x: auto;
  }

  .do-guild-navigation>div {
    min-width: 140px;
  }

  .do-guild-navigation {
    width: max-content;
  }

  .do-guild-donation-wrapper {
    grid-template-columns: 1fr 2fr;
  }

  .do-guild-donation-path-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .do-guild-wealth-label {
    display: block;
    position: absolute;
    left: 50%;
    font-size: 1rem;
    bottom: 45px;
    transform: translateX(-50%);
  }

  .do-guild-donation-level-wealth .do-decor-2 {
    display: block;
  }

  .do-party-role-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-party-role-container h3 {
    grid-column-start: span 2;
  }

  .do-party-role-placeholder {
    grid-column-start: span 2;
  }

  .do-party-invite-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .do-party-invite-container h3 {
    grid-column-start: span 2;
    color: var(--color-accent);
  }

  .do-party-mercenary-settings {
    min-width: 500px;
  }

  .do-combat-party-container {
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    max-width: 672px;
    margin: 0 auto;
  }

  .do-combat-card.attacker .do-combat-card-portrait {
    order: 1;
  }

  .do-combat-card.defender .do-combat-card-portrait {
    order: 2;
  }

  .do-combat-card.attacker .do-combat-card-info {
    order: 2;
  }

  .do-combat-card.defender .do-combat-card-info {
    order: 1;
    text-align: right;
  }

  .do-combat-card.attacker {
    grid-template-columns: 1fr 2fr;
  }

  .do-combat-card.defender {
    grid-template-columns: 2fr 1fr;
  }

  .do-combat-card-portrait {
    width: 110px;
    height: 110px;
  }

  .do-combat-card-loot>.do-explore-reward-container {
    grid-template-columns: repeat(6, 1fr);
  }

  .do-combat-card-loot>.do-explore-reward-container>.do-item-icon {
    width: 40px;
    height: 40px;
    padding-bottom: 0;
  }

  .do-combat-map {
    width: 100%;
    max-width: 800px;
    height: 0;
    padding-bottom: 100%;
  }

  .do-combat-object-icon.do-combat-card-portrait {
    width: 60px;
    height: 60px;
  }

  .node-info-container {
    grid-template-columns: 3fr 1fr;
  }

  .node-explore-leaderboard {
    min-width: 250px;
  }

  .do-profile-quick-equip {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 545px;
    width: 100%;
    margin: 0 auto;
  }

  .do-profile-quick-equip-dropdown {
    grid-column-start: span 3;
  }

  .do-profile-quick-equip>.primary {
    grid-column-start: 1;
  }

  .do-tab-nav-container.max-content {
    padding: 0;
  }

  .do-combat-party-attacker {
    order: 1;
  }

  .do-combat-party-defender {
    order: 2;
  }

  .do-combat-card-total-damage.attacker {
    order: 3;
  }

  .do-combat-card-total-damage.defender {
    order: 4;
  }

  .node-explore-leaderboard {
    margin: 0;
  }

  .do-explore-enemy-container {
    margin-top: 0;
    order: 1;
  }

  .node-explore-leaderboard-container {
    margin-left: 10px;
    order: 2;
  }

  .do-explore-node-content-info {
    grid-template-columns: 1fr 0.5fr;
  }

  .button-action-container {
    /*
        Old Spacing (Without auto discard)
        grid-template-columns: 1fr 0.24fr 0.24fr;
        */
    grid-template-columns: 1fr 1fr 0.48fr 0.48fr;
  }

  .do-region-current-info {
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    grid-gap: 10px;
  }

  .do-tavern-upper-part {
    grid-template-columns: 1fr 0.2fr;
  }

  .do-available-quest-popup-detail {
    width: 400px;
  }

  .do-dragable-quest-container {
    left: 10px;
  }

  .do-available-quest-popup {
    max-width: 250px;
  }

  .do-status-container {
    order: 0;
  }

  .do-profile-secondary-stats-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-explore-decor {
    width: 250px;
    height: 250px;
    top: -51.5px;
    left: -52px;
  }

  .do-explore-decor.right-up {
    right: -51.5px;
    top: -52px;
  }

  .do-explore-decor.right-bottom {
    right: -52px;
    bottom: -51.5px;
  }

  .do-explore-decor.left-bottom {
    bottom: -52px;
    left: -52px;
  }

  .do-explore-middle-decor {
    width: 300px;
    height: 100px;
    top: -50px;
    left: calc(50% - 150px);
  }

  .do-explore-middle-decor.left {
    width: 1000px;
    height: 500px;
    right: auto;
    left: -501px;
    bottom: 372px;
  }

  .do-explore-middle-decor.right {
    width: 1000px;
    height: 500px;
    left: auto;
    right: -501px;
    bottom: 372px;
  }

  .do-explore-middle-decor.bottom {
    top: auto;
    left: calc(50% - 150px);
    bottom: -50px;
  }

  .do-tab-page.do-inventory-tab.active {
    grid-template-columns: repeat(10, 1fr);
  }

  .do-player-status-container {
    width: 370px;
    padding-top: 50px;
  }

  .do-equipment-decor-wrapper {
    padding: 10px 10px 15px;
  }

  .do-badge-reward-icon-container {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
    justify-items: end;
  }

  .do-inventory-extra-info-container {
    flex-direction: row;
  }

  /* VOTE BANNER START */
  .do-vote-banner-container {
    padding: 0;
    display: block;
  }

  .do-vote-banner {
    margin: 0 0 10px 10px;
  }

  .do-vote-banner img {}

  .do-vote-word {
    font-size: 0.7rem;
  }

  /* VOTE BANNER END */
  .do-game-wrapper.topup {
    display: grid;
    grid-template-columns: 1fr 282px;
  }

  .do-journal-container,
  .do-party-container {
    min-height: 500px;
  }

  .do-top-scroll-button-container {
    gap: 2px;
  }

  .do-journal-event-link {
    grid-column-start: span 3;
  }

  .do-journal-event-banner {
    min-height: 150px;
  }

  .do-journal-event-banner.hotna {
    background-image: url("../image/hotna/hotna-banner.png");
  }

  .do-journal-event-banner.yinreki {
    background-image: url("../image/yinreki/yinreki-banner.png");
  }

  .do-vendor-search-indicator {
    grid-column-start: span 2;
  }
}

@media screen and (min-width: 1024px) {
  .do-building-wrapper {
    margin: 0;
    grid-template-columns: 4fr 6fr;
  }

  .do-collection-list {
    grid-template-columns: repeat(8, 1fr);
  }

  .do-collection-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-collection-group.enemy-source {
    order: 5;
    grid-column-start: 1;
  }

  .do-collection-group.node-source {
    order: 6;
    grid-column-start: 2;
  }

  .do-collection-group.container-source {
    order: 7;
    grid-column-start: 1;
  }

  .do-collection-group.quest-source {
    order: 8;
    grid-column-start: 2;
  }

  .do-collection-group.exchange-source {
    order: 9;
    grid-column-start: 1;
  }

  .do-collection-group.iap-source {
    order: 10;
    grid-column-start: 2;
  }

  .do-collection-group.content {
    order: 11;
    grid-column-start: 1;
  }

  .do-home-banner-decoration-container {
    min-height: 600px;
  }

  .do-home-banner-decoration-container h1 {
    margin-top: 350px;
  }

  .do-popup-scroller {
    max-height: min(calc(100vh - 110px), calc(1366px - 110px));
  }

  .do-start-wrapper {
    display: grid;
    grid-template-columns: 1fr 500px;
    grid-gap: 20px;
  }

  .do-start-wrapper .do-home-race-image-wrapper {
    max-width: 235px;
  }

  .do-start-wrapper .do-home-race-image-wrapper:before {
    width: calc((100% - 30px) / 2);
    right: calc(100% + 30px);
  }

  .do-start-wrapper .do-home-race-image-wrapper:after {
    width: calc((100% - 30px) / 2);
    left: calc(100% + 30px);
  }

  .do-faction-picker-wrapper {
    min-width: 400px;
  }

  .do-bestiary-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .do-equipment-wrapper>.do-decor-2 {
    display: block;
  }

  .do-equipment-wrapper>.do-tab-nav-container {
    display: none;
  }

  .do-equipment-wrapper>.do-tab-page {
    display: block;
    border: none;
    padding: 0;
  }

  .do-equipment-container>.do-decor-2 {
    display: none;
  }

  .do-equipment-wrapper>.do-tab-page.left.active:before {
    content: none;
  }

  .do-equipment-container {
    padding: 0;
  }

  .do-profile-equipment-grid {
    grid-template-columns: repeat(5, 80px);
    grid-template-rows: repeat(6, 80px);
    grid-gap: 10px;
  }

  .do-equipment-wrapper>.do-tab-page.left {
    z-index: 1;
  }

  .do-item-icon:before {
    width: 10px;
    height: 10px;
  }

  .do-item-icon:after {
    width: 10px;
    height: 10px;
  }

  .do-node-image-wrapper:before {
    width: calc((min(100vw, 1024px) - 368px) / 2);
  }

  .do-node-image-wrapper:after {
    width: calc((min(100vw, 1024px) - 368px) / 2);
  }

  .do-explore-reward-container {
    grid-template-columns: repeat(10, 1fr);
  }

  .do-vendor-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .do-vendor-item {
    grid-template-columns: 104px 1fr;
  }

  .do-vendor-item-left .do-item-icon {
    max-width: 104px;
    padding-bottom: min(100%, 96px);
  }

  .do-combat-portrait-wrapper {
    max-width: 800px;
  }

  .do-combat-unit-wrapper {
    max-width: 800px;
  }

  .do-combat-status-wrapper {
    max-width: 800px;
  }

  .do-combat-reward-container {
    max-width: 800px;
  }

  .do-combat-loot-container {
    grid-template-columns: repeat(8, 1fr);
  }

  .do-combat-log-container {
    max-width: 800px;
  }

  .do-crafting-interface {
    grid-template-columns: 2fr 3fr;
  }

  .do-crafting-preview-material-container {
    grid-template-columns: repeat(6, 1fr);
  }

  .do-crafting-preview-material-container>h1 {
    grid-column-start: span 6;
  }

  .do-crafting-preview-material-placeholder {
    grid-column-start: span 6;
  }

  .do-recipe-group {
    grid-template-columns: repeat(8, 1fr);
  }

  .do-upgrade-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    gap: 10px;
  }

  .do-exchange-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-topup-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: unset;
    padding: 40px 20px;
    margin: 0 auto;
  }

  .do-topup-item {
    /* width: 210px;
        height: 23 0px; */
  }

  .do-topup-title p {
    font-size: 14px;
  }

  .quest-notification {
    bottom: 20px;
  }

  .do-friends-container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    padding: 10px;
    background-color: var(--color-blue-bg);
    border: solid 2px var(--color-accent);
    gap: 20px;
  }

  .explore-grid {
    grid-template-columns: 350px 1fr;
  }

  .questline-title-container,
  .node-title-container {
    border-bottom: 2px solid var(--color-accent);
    border-top: 0;
    cursor: pointer;
  }

  .questline-title-container:hover,
  .node-title-container:hover {
    background-color: var(--color-blue-dark);
  }

  .questline-title-container.active::after,
  .node-title-container.active::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    right: -2px;
    top: 0;
    background: var(--color-blue-bg);
  }

  .questline-title-container.active:hover::after,
  .node-title-container.active:hover::after {
    background-color: var(--color-blue-dark);
  }

  .questline-detail-container,
  .node-detail-container {
    /* border-left: 2px solid var(--color-accent); */
    border-top: 0;
  }

  .do-friends-container {
    grid-template-columns: 3fr 2fr;
    padding: 30px;
    min-height: 500px;
  }

  .do-friends-container .do-decor-2 {
    display: block;
  }

  .do-mobile-button {
    display: none;
  }

  .do-friend-row {
    padding: 10px 0;
  }

  .do-friend-row .do-button {
    display: block;
  }

  .do-friend-faction {
    justify-content: flex-start;
  }

  .do-buy-items {
    grid-template-columns: repeat(6, 1fr);
  }

  .simple-craft-container {
    width: 40%;
  }

  .do-tooltip.wide {
    width: 600px;
  }

  .do-progress-indicator.phase-7 {
    left: 98.4%;
  }

  .badge-label .do-decor-2 {
    display: block;
  }

  .do-decor-2.middle-left,
  .badge-label .do-decor-2.middle-left {
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
  }

  .do-decor-2.middle-right,
  .badge-label .do-decor-2.middle-right {
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
  }

  .do-progress-indicator.compen-1 {
    left: -1.5%;
  }

  .do-progress-indicator.compen-2 {
    left: 2.5%;
  }

  .do-progress-label.label-compen-2 {
    left: 8%;
  }

  .do-progress-indicator.compen-3 {
    left: 47.4%;
  }

  .do-progress-label.label-compen-3 {
    left: 41%;
  }

  .do-progress-indicator.compen-4 {
    left: 72%;
  }

  .do-progress-label.label-compen-4 {
    left: 68%;
  }

  .do-progress-indicator.compen-5 {
    left: 97.7%;
  }

  .do-progress-label.label-compen-5 {
    left: 93%;
  }

  .do-faction-flavour {
    margin: 0;
    text-align: center;
  }

  .do-race-picker {
    gap: 10px;
  }

  .do-race-image span.do-standard-container {
    width: 100%;
    padding-bottom: 190%;
  }

  .do-faction-name {
    text-align: center;
  }

  .do-map-button-container.aviaran {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .radio-fields .field img {
    width: 40px;
  }

  .do-scroll-item {
    max-width: 150px;
    min-width: 150px;
  }

  .do-combat-card-portrait {
    width: 150px;
    height: 150px;
  }

  .do-massive-salvage-item-container {
    grid-template-columns: repeat(10, 1fr);
  }

  .do-combat-map-wrapper {
    grid-template-columns: 1fr 800px 1fr;
  }

  .do-combat-party-container {
    max-width: 800px;
  }

  .do-region-building-container>a.do-standard-container {
    padding: 20px 10px;
  }

  .do-region-building-container {
    grid-template-columns: repeat(6, 1fr);
  }

  .do-skill-icon-container {
    width: calc((5 * 100px) + (4 * 10px));
  }

  .do-explore-middle-decor {
    left: calc((100vw - 538px) / 2);
  }

  .do-explore-middle-decor.bottom {
    top: auto;
    left: calc((100vw - 538px) / 2);
  }

  .do-explore-middle-decor.left {
    top: auto;
    right: auto;
    bottom: 450px;
  }

  .do-explore-middle-decor.right {
    top: auto;
    left: auto;
    bottom: 450px;
  }

  .do-vendor-search-indicator {
    grid-column-start: span 3;
  }
}

@media screen and (min-width: 1366px) {

  .do-setting-card {
    margin: 0;
  }

  .do-popup-wrapper.explore-result-wrapper {
    padding: 15px;
    width: 60%;
    margin-left: 20px;
  }

  .do-chat-wrapper.expanded {
    height: 400px;
    width: 30%;
    left: auto;
    right: 70px;
    bottom: 10px;
  }

  .do-home-role-container {
    grid-template-columns: 2fr 3fr;
  }

  .do-home-race-container {
    max-width: 1000px;
  }

  .do-home-race-text-wrapper {
    padding-top: 175px;
    transform: translateY(-175px);
  }

  .do-home-slider-nav.left {
    top: 173px;
  }

  .do-home-slider-nav.right {
    top: 173px;
  }

  .do-home-race-image-wrapper:before {
    top: 185px;
    width: calc((min(100vw, 1000px) - 480px) / 2);
    right: calc(100% + 35px);
  }

  .do-home-race-image-wrapper:after {
    top: 185px;
    width: calc((min(100vw, 1000px) - 480px) / 2);
    left: calc(100% + 35px);
  }

  .do-home-race-image-wrapper {
    padding: 20px;
    max-width: 370px;
  }

  .do-home-race-image-item {
    width: 300px;
    height: 300px;
  }

  .do-home-race-text-item {
    padding: 0 100px 50px;
  }

  .do-statusbar-wrapper {
    grid-template-columns: 1fr 1fr 120px 120px;
  }

  .do-statusbar-container.left {
    order: 1;
  }

  .do-statusbar-container.right {
    order: 3;
  }

  .do-statusbar-bar-container {
    order: 2;
  }

  .do-statusbar-region-container {
    order: 4;
  }

  .do-statusbar-region-container {
    grid-column-start: 4;
  }

  .do-popup-wrapper {
    max-width: 1366px;
  }

  /* .do-popup-scroller {
          max-height: calc(640px - 110px);
      } */
  .do-start-wrapper {
    display: grid;
    grid-template-columns: 1fr 800px;
    grid-gap: 20px;
  }

  .do-start-wrapper .do-home-race-image-wrapper {
    max-width: 365px;
  }

  .do-start-wrapper .do-home-race-image-wrapper:before {
    width: calc(50%);
    right: calc(100% + 35px);
  }

  .do-start-wrapper .do-home-race-image-wrapper:after {
    width: calc(50%);
    left: calc(100% + 35px);
  }

  .do-region-building-container {
    grid-template-columns: repeat(7, 1fr);
  }

  .do-node-container {
    max-width: 1000px;
  }

  .do-node-slider-nav.left {
    top: 173px;
  }

  .do-node-slider-nav.right {
    top: 173px;
  }

  .do-node-image-item {
    width: 300px;
    height: 300px;
  }

  .do-node-detail-wrapper {
    padding-top: 175px;
    transform: translateY(-175px);
  }

  .do-node-detail-item {
    padding: 0 100px 50px;
  }

  .do-node-image-wrapper {
    padding: 20px;
    max-width: 366px;
  }

  .do-node-image-wrapper:before {
    top: 180px;
    width: calc((1366px - 455px) / 2);
  }

  .do-node-image-wrapper:after {
    top: 180px;
    width: calc((1366px - 455px) / 2);
  }

  .do-node-slider-nav.left {
    top: 168px;
  }

  .do-node-slider-nav.right {
    top: 168px;
  }

  .do-node-image-item {
    width: 300px;
    height: 300px;
  }

  .do-node-detail-wrapper {
    padding-top: 175px;
    transform: translateY(-180px);
  }

  .do-node-detail-item {
    padding: 0 20px 20px;
  }

  .do-node-enemy-container {
    grid-template-columns: repeat(15, 1fr);
  }

  .do-vendor-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .do-crafting-preview-material-container {
    grid-template-columns: repeat(8, 1fr);
  }

  .do-crafting-preview-material-container>h1 {
    grid-column-start: span 8;
  }

  .do-crafting-preview-material-placeholder {
    grid-column-start: span 8;
  }

  .do-upgrade-item-container {
    grid-template-columns: repeat(7, 1fr);
  }

  .do-exchange-container {
    grid-template-columns: 1fr 1fr;
  }

  .do-explore-node-enemy-grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .do-buy-items {
    grid-template-columns: repeat(9, 1fr);
  }

  .do-quest-container {
    grid-template-columns: 1fr 350px;
  }

  .do-compendium-item-image.info {
    width: 35%;
    padding-bottom: 35%;
  }

  .do-compendium-donate-wrapper {
    gap: 50px;
  }

  .do-account-social-container {
    display: grid;
  }

  .account-setting {
    display: inline-block;
  }

  .do-news {
    margin-right: 10px;
    border-right: 2px solid var(--color-accent);
  }

  .do-news .news-control {
    width: 60px;
  }

  .do-progress-indicator.compen-1 {
    left: -0.5%;
  }

  .do-progress-label.label-compen-1 {
    left: -2%;
  }

  .do-progress-indicator.compen-2 {
    left: 3.2%;
  }

  .do-progress-label.label-compen-2 {
    left: 3%;
  }

  .do-progress-indicator.compen-3 {
    left: 48%;
  }

  .do-progress-label.label-compen-3 {
    left: 43%;
  }

  .do-progress-indicator.compen-4 {
    left: 73.3%;
  }

  .do-progress-label.label-compen-4 {
    left: 71%;
  }

  .do-progress-indicator.compen-5 {
    left: 98.4%;
  }

  .do-progress-label.label-compen-5 {
    left: 94%;
  }

  .do-bestiary-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .do-compendium-item-image,
  .do-bestiary-item-image {}

  .do-race-picker {
    grid-template-columns: 1fr 3fr;
  }

  .do-race-info-container {
    text-align: center;
    gap: 10px;
  }

  .do-race-image span.do-standard-container {
    padding-bottom: 130%;
  }

  .do-party-role-container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .do-party-role-container h3 {
    grid-column-start: span 3;
  }

  .do-party-role-placeholder {
    grid-column-start: span 3;
  }

  .do-party-invite-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .do-party-invite-container h3 {
    grid-column-start: span 3;
    color: var(--color-accent);
  }

  .do-party-mercenary-settings {
    min-width: 600px;
  }

  .do-combat-card-portrait {
    width: 120px;
    height: 120px;
  }

  .do-combat-card-loot>.do-explore-reward-container>.do-item-icon {
    width: 55px;
    height: 55px;
    padding-bottom: 0;
  }

  .do-region-building-container>a.do-standard-container {
    padding: 20px 10px;
  }

  .do-game-nav-container {
    padding: 10px 0;
  }

  .do-region-detail-wrapper {
    margin: 0;
  }

  .do-journal-wrapper {
    padding: 0;
  }

  .do-equipment-wrapper {
    margin: 0;
  }

  .do-inventory-wrapper {
    margin: 10px 0;
  }

  .do-travel-wrapper {
    padding: 0;
  }

  .do-tavern-header {
    margin: 0;
  }

  .do-building-info-container {
    margin: 0;
  }

  .do-arena-wrapper {
    margin: 10px 0;
  }

  .do-vendor-wrapper {
    margin: 0;
  }

  .do-upgrade-wrapper {
    padding: 10px 0;
  }

  .do-crafting-wrapper {
    margin: 10px 0;
  }

  .do-trade-search-container {
    margin: 10px 0;
  }

  .do-exchange-wrapper {
    margin: 10px 0;
  }

  .do-marketplace-wrapper {
    margin: 10px 0;
  }

  .do-explore-middle-decor {
    left: calc((100vw - 38vw) / 2);
  }

  .do-explore-middle-decor.bottom {
    top: auto;
    left: calc((100vw - 38vw) / 2);
  }

  .do-equipment-decor-wrapper {
    padding: 10px 10px 15px;
  }

  .do-journal-wrapper,
  .do-journal-wrapper.vote {
    padding: 0;
  }

  .do-journal-event-banner.hotna {
    background-image: url("../image/hotna/hotna-banner-wide.png");
  }

  .do-journal-event-banner.yinreki {
    background-image: url("../image/yinreki/yinreki-banner-wide.png");
  }

  .do-statusbar-region-container.area-image h2 {
    margin: 0px;
  }

  .do-vendor-search-indicator {
    grid-column-start: span 4;
  }
}

@media screen and (min-width: 1440px) {
  .do-explore-middle-decor {
    left: calc((100vw - 43vw) / 2);
  }

  .do-explore-middle-decor.bottom {
    top: auto;
    left: calc((100vw - 43vw) / 2);
  }
}

@media screen and (min-width: 1920px) {}