html,
body {
  background: #0b0c0e;
  padding: 0;
  margin: 0;
  font-family: OpenSans;
  font-size: 13px;
  color: #b4b5b7;
}

a {
  transition: 0.5s;
}
a:hover {
  transition: 0.5s;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #555;
}
::-webkit-scrollbar-thumb {
  background: #999;
}

.flex {
  display: flex;
}
.flex-b {
  display: flex;
  justify-content: space-between;
}
.flex-a {
  display: flex;
  justify-content: space-around;
}
.flex-c {
  display: flex;
  justify-content: center;
}

.wrapcontent {
  margin: 0 auto;
  background: #17181c;
  border: 4px solid #4f5257;
  border-radius: 3px;
}

header {
  background: #4f5257;
  padding: 5px 10px 7px 10px;
  color: #dadada;
}

.content {
}

footer {
  background: #0d0e10;
  padding: 5px 20px 5px 20px;
  border-top: 1px solid #36393c;
}

.topnav {
  border-bottom: 1px solid #1c1d1e;
  align-items: center;
  background: #0d0e10;
}

.topnav ul {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style: none;
}

.topnav ul li a {
  display: block;
  padding: 7px 15px 7px 15px;
  color: #b4b5b7;
  text-decoration: none;
  font-size: 13px;
}

.topnav ul li a:hover {
  background: #282a30;
  color: #fff;
}

.selectors {
  align-items: center;
  border-bottom: 1px solid #1c1d1e;
  background: linear-gradient(to top, #111316 0%, #17181c 100%);
}

.dots {
  display: flex;
  align-items: center;
  padding: 9px 10px 9px 10px;
  color: #5f6468;
  cursor: move;
}

.select,
.input {
  margin: 5px 15px 5px 5px;
}

.select select {
  padding: 3px 5px 3px 5px;
  background: #0c0d10;
  border: 1px solid #36393c;
  color: #888c95;
  display: block;
  font-size: 12px;
  transition: 0.3s;
}

.input input {
  padding: 4px 5px 4px 5px;
  background: #0c0d10;
  border: 1px solid #36393c;
  color: #fff;
  display: block;
  font-size: 12px;
  transition: 0.3s;
}

.inputLong input {
  padding: 4px 5px 4px 5px;
  background: #0c0d10;
  border: 1px solid #36393c;
  color: #fff;
  display: block;
  font-size: 12px;
  transition: 0.3s;
  width: 500px;
}

.select select:focus,
.input input:focus {
  outline: none;
  border: 1px solid #1c1d1e;
  box-shadow: 0px 0px 10px rgba(31, 89, 135, 0.5);
  transition: 0.3s;
}

.progress {
  border-bottom: 1px solid #1c1d1e;
  background: linear-gradient(to top, #111316 0%, #17181c 100%);
  align-items: center;
}

.progress > :nth-child(2) {
  color: #818181;
  display: flex;
  width: 50px;
}

.progress span p {
  margin: 0px 0px 0px 5px;
  color: #9b7b4c;
}

.ctitle {
  border-bottom: 1px solid #1c1d1e;
  background: linear-gradient(to top, #111316 0%, #17181c 100%);
  align-items: center;
  color: #858a91;
}

.cwide {
  border-bottom: 1px solid #1e2122;
  border-right: 1px solid #1e2122;
  width: 70%;
  max-width: 70%;
  border-left: none;
}

.cshort {
  border-bottom: 1px solid #1e2122;
  width: 30%;
  max-width: 30%;
  min-width: 300px;
  border-left: none;
  border-right: none;
}

.contentin {
}

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.row {
  display: table-row;
}

.cell {
  border: 1px solid #555252;
  padding: 3px 10px 3px 10px;
  display: table-cell;
  font-size: 12px;
  color: #dfdfdf;
  white-space: nowrap;
}

.row.headrow {
  background: #1f2126;
  color: #717276;
}

.row.headrow .cell {
  color: #fff;
}

.tabs {
  padding: 0px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap-reverse;
  height: 472px;
}

.ctabs {
  width: 100%;
}

.tabs > .ctabs > section {
  display: none;
  padding: 0px;
  max-height: 440px;
  min-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tabs > .ctabs > section::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.tabs > .ctabs > section::-webkit-scrollbar-track {
  background: #131416;
}
.tabs > .ctabs > section::-webkit-scrollbar-thumb {
  background: #36373c;
}
.tabs > .ctabs > section::-webkit-scrollbar-corner {
  background: #131416;
}

.tabs > input {
  display: none;
  position: absolute;
}

.tabs > label {
  display: inline-block;
  margin: 0px 0px -1px 0px;
  padding: 1px 13px;
  text-align: center;
  color: #666768;
  background: #0d0e10;
  font-size: 13px;
  border-right: 1px solid #202124;
  height: 27px;
}

.tabs > label:hover {
  color: #888;
  cursor: pointer;
}

.tabs > input:checked + label {
  color: #959595;
  background: #202124;
}

.tabs2 {
  padding: 0px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap-reverse;
}

.ctabs2 {
  width: 100%;
}

.tabs2 > .ctabs2 > section {
  display: none;
  padding: 0px;
  max-height: 225px;
  min-height: 225px;
  overflow-y: auto;
}

.tabs2 > .ctabs2 > section::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.tabs2 > .ctabs2 > section::-webkit-scrollbar-track {
  background: #131416;
}
.tabs2 > .ctabs2 > section::-webkit-scrollbar-thumb {
  background: #36373c;
}
.tabs2 > .ctabs2 > section::-webkit-scrollbar-corner {
  background: #131416;
}

.tabs2 > input {
  display: none;
  position: absolute;
}

.tabs2 > label {
  display: inline-block;
  margin: 0px 0px -1px 5px;
  padding: 5px 7px;
  text-align: center;
  color: #666768;
  background: #0d0e10;
  font-size: 15px;
  border-right: 1px solid #202124;
}

.tabs2 > label:hover {
  color: #888;
  cursor: pointer;
}

.tabs2 > input:checked + label {
  color: #959595;
  background: #202124;
}

.tabs3 {
  padding: 0px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap-reverse;
}

.ctabs3 {
  width: 100%;
}

.tabs3 > .ctabs3 > section {
  display: none;
  padding: 0px;
  max-height: 190px;
  min-height: 190px;
  overflow-y: auto;
  background: #0d0e10;
}

.tabs3 > .ctabs3 > section::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.tabs3 > .ctabs3 > section::-webkit-scrollbar-track {
  background: #131416;
}
.tabs3 > .ctabs3 > section::-webkit-scrollbar-thumb {
  background: #36373c;
}
.tabs3 > .ctabs3 > section::-webkit-scrollbar-corner {
  background: #131416;
}

.tabs3 > input {
  display: none;
  position: absolute;
}

.tabs3 > label {
  display: inline-block;
  margin: 0px 0px -1px 0px;
  padding: 4px 7px;
  text-align: center;
  color: #666768;
  background: #0d0e10;
  font-size: 11px;
  border-right: 1px solid #202124;
}

.tabs3 > label:hover {
  color: #888;
  cursor: pointer;
}

.tabs3 > input:checked + label {
  color: #959595;
  background: #202124;
}

.tabs4 {
  padding: 0px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap-reverse;
}

.ctabs4 {
  width: 100%;
  height: 450px;
}

.tabs4 > .ctabs4 > section {
  display: none;
  padding: 0px;
  height: 224px;
  overflow: hidden;
  background: #0d0e10;
}

.tabs4 > .ctabs4 > section::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.tabs4 > .ctabs4 > section::-webkit-scrollbar-track {
  background: #131416;
}
.tabs4 > .ctabs4 > section::-webkit-scrollbar-thumb {
  background: #36373c;
}
.tabs4 > .ctabs4 > section::-webkit-scrollbar-corner {
  background: #131416;
}

.tabs4 > input {
  display: none;
  position: absolute;
}

.tabs4 > label {
  display: inline-block;
  margin: 0px 0px -2px 0px;
  padding: 5px 7px;
  text-align: center;
  color: #666768;
  background: #0d0e10;
  font-size: 15px;
  border-right: 1px solid #202124;
}

.tabs4 > label:hover {
  color: #888;
  cursor: pointer;
}

.tabs4 > input:checked + label {
  color: #959595;
  background: #202124;
}

.tabs #tabChar:checked ~ .ctabs > #content-tabChar,
.tabs #tabParty:checked ~ .ctabs > #content-tabParty,
.tabs #tabInv:checked ~ .ctabs > #content-tabInv,
.tabs #tabSkills:checked ~ .ctabs > #content-tabSkills,
.tabs #tabBuffs:checked ~ .ctabs > #content-tabBuffs,
.tabs4 #tabMap:checked ~ .ctabs4 > #content-tabMap,
.tabs4 #tabCombat:checked ~ .ctabs4 > #content-tabCombat,
.tabs #tab1:checked ~ .ctabs > #content-tab1,
.tabs #tab2:checked ~ .ctabs > #content-tab2,
.tabs #tab3:checked ~ .ctabs > #content-tab3,
.tabs #tab4:checked ~ .ctabs > #content-tab4,
.tabs #tab5:checked ~ .ctabs > #content-tab5,
.tabs #tab6:checked ~ .ctabs > #content-tab6,
.tabs #tab7:checked ~ .ctabs > #content-tab7,
.tabs #tab8:checked ~ .ctabs > #content-tab8,
.tabs2 #tabPlayers:checked ~ .ctabs2 > #content-tabPlayers,
.tabs2 #tabMobs:checked ~ .ctabs2 > #content-tabMobs,
.tabs2 #tabNpc:checked ~ .ctabs2 > #content-tabNpc,
.tabs2 #tabItems:checked ~ .ctabs2 > #content-tabItems,
.tabs3 #tabSysChat:checked ~ .ctabs3 > #content-tabSysChat,
.tabs3 #tabAllChat:checked ~ .ctabs3 > #content-tabAllChat,
.tabs3 #tabPartyChat:checked ~ .ctabs3 > #content-tabPartyChat,
.tabs3 #tabClanChat:checked ~ .ctabs3 > #content-tabClanChat,
.tabs3 #tabTradeChat:checked ~ .ctabs3 > #content-tabTradeChat,
.tabs3 #tabAlianseChat:checked ~ .ctabs3 > #content-tabAlianseChat {
  display: block;
  z-index: 500;
}

.infolne {
  padding: 3px 10px 3px 10px;
  margin: 0px 0px 1px 0px;
  background: #111316;
  font-size: 12px;
  color: #838383;
}

.infolne span {
  display: block;
  margin: 0px 10px 0px 10px;
}

.infolne span p {
  margin: 0px 0px 0px 0px;
  color: #9b7b4c;
}

.bottom {
  padding: 7px 0px 2px 0px;
}

.bottom > :first-child {
  margin: 0px 10px 0px 15px;
}

.bottom > :last-child {
  width: 100%;
  margin: 0px 5px 0px 0px;
}

.fblock {
  font-size: 11px;
}

.fblock span {
  display: block;
  padding: 0px 10px 0px 10px;
  border-right: 1px solid #1e2122;
  border-left: 1px solid #1e2122;
  color: #5b8db7;
}

.buttons {
  align-items: center;
}

button:disabled {
  background: linear-gradient(to top, #0e0f12 0%, #e31f1f 100%) !important;
  color: #fff !important;
}

.buttons button {
  background: linear-gradient(to top, #0e0f12 0%, #25272e 100%);
  color: #838383;
  border: none;
  font-size: 12px;
  margin: 0px 2px 0px 2px;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
}

.buttons button:hover {
  background: #004a85;
  color: #fff;
  transition: 0.3s;
}

.selectors .input input {
  width: 100px;
}

.sel {
  background: linear-gradient(to top, #0e0f12 0%, #25272e 100%);
  color: #838383;
  border: none;
  font-size: 12px;
  margin: 0px 2px 0px 2px;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.sel i {
  margin: 0px 0px 0px 10px;
}

.sel:hover {
  background: #004a85;
  color: #fff;
  transition: 0.3s;
}

.popupnav {
  position: absolute;
  background: #0d0e10;
  top: 35px;
  right: 0px;
  z-index: 700;
  border-radius: 3px;
  display: none;
}

.popupnav.active {
  display: block;
}

.popupnav ul {
  list-style: none;
  padding: 15px;
  margin: 0px 0px 0px 0px;
  white-space: nowrap;
}

.popupnav ul li a {
  color: #838383;
  text-decoration: none;
  font-size: 12px;
  display: block;
  margin: 0px -15px 0px -15px;
  padding: 3px 15px 3px 15px;
}

.popupnav ul li a:hover {
  background: #17181c;
  color: #b7b7b7;
}

.popupnav:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #0d0e10;
  position: absolute;
  top: -5px;
  right: 9px;
}

.progressSmall {
  background: rgba(0, 0, 0, 0.3);
  width: 70px;
  height: 15px;
  margin: 0px 15px 0px 5px;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.progressin {
  background: rgba(0, 0, 0, 0.3);
  width: 130px;
  height: 15px;
  margin: 0px 15px 0px 5px;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.progress span {
  color: #818181;
  margin: -2px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.progressbar {
  height: 15px;
}

.red {
  background: #620000;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.4);
}

.blue {
  background: #003f70;
  box-shadow: inset 0px -3px 5px rgba(0, 0, 0, 0.4);
}

.yello {
  background: #683e00;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.4);
}

.silver {
  background: #4c4c4c;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.4);
}

.green {
  background: #025605;
  box-shadow: inset 0px -5px 5px rgba(0, 0, 0, 0.4);
}

.slidecontainer {
  width: 100%;
  position: absolute;
  bottom: 50px;
}

.slider {
  -webkit-appearance: none;
  width: 95%;
  height: 2px;
  display: block;
  background: #a76300;
  outline: none;
  margin: 0px auto;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff9800;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 10px;
  height: 25px;
  border-radius: 5%;
  background: #333;
  cursor: pointer;
}

#content-tabMap,
#mapcontainer {
  position: relative;
  width: 100%;
  height: 450px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 450px;
  overflow: hidden;
  z-index: 1;
}

.creature {
  position: absolute;
  width: 5px;
  height: 5px;
}

.creature.player {
  border: 2px solid red;
}

.creature.npc {
  border: 2px solid yellow;
}

.creature.selected {
  border: 2px solid #8785db;
}

#info {
  position: absolute;
  right: 0;
  bottom: 2.6rem;
  display: block;
  min-width: 16rem;
  background-color: rgba(70, 70, 70, 0.5);
  color: gold;
  padding: 0.5rem;
  margin: 0 1rem;
  font-size: 0.825rem;
  display: none;
}

#info dl {
  display: grid;
  grid-template-columns: 40% auto;
  margin: 0;
}

#info dt {
  grid-column: 1;
}

#info dd {
  grid-column: 2;
  text-align: right;
}

@media screen and (max-device-width: 380px) {
  #info {
    width: calc(100vw - 3rem);
  }
}
.chatAll {
  color: #fff;
}
.chatShout {
  color: #ff7100;
}
.chatParty {
  color: #efa2f7;
}
.chatClan {
  color: #7b75ff;
}
.chatAlliance {
  color: #73f79c;
}
.chatTrade {
  color: #efa2f7;
}
.chatSys {
  color: #808080;
}
.chatGM {
  color: #7bf7ff;
}

.chatBlock > input {
  width: 1000px;
}
.zoneFarm {
  position: absolute;
  width: 2px;
  height: 2px;
}

.zoneFarm.zone {
  border: 2px solid red;
}

.creature {
  position: absolute;
  width: 2px;
  height: 2px;
}

.creature.player {
  border: 2px solid red;
}

.creature.L2Character {
  border: 2px solid blue;
}
.creature.L2Mob {
  border: 2px solid green;
}
.creature.L2Npc {
  border: 2px solid yellow;
}

.creature.npc {
  border: 2px solid yellow;
}

.creature.selected {
  border: 2px solid pink;
}