@font-face {
  font-family: "exocet";
  src: url("../data/fonts/exocet.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

.portal-logo {
  float:left;
  margin-left:5px;
  margin-right:5px; 
  margin-top:4px; 
  height:16px; 
}
#full_interface {
  width: 869px;
}
#side {
  margin-top: 4px;
  position: relative;
  float: right;
  color: white;
}
#interface {
  width: 869px;
}
.hidden {
  display: none;
}
.no_selection {
  -webkit-user-select: none;	/* for safari & chrome browsers */
  -moz-user-select: none;   	/* for mozilla browsers */
  -ms-user-select: none;    	/* for IE10+ */
}
.hover {
  position: absolute;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,0.85);
  padding: 5px;
  z-index: 7;
}
.hover-item {
  position: absolute;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,0.85);
  padding: 5px;
  z-index: 7;
  float: none;
  /*width: 288px;*/
}
.hover-effect {
  position: relative;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,0.85);
  padding: 5px;
  z-index: 7;
}
.point {
  position: absolute;
  text-align: center;
  color: white;
  width: 30px;
}
.inventory {
  position: relative;
  margin-right: 13px;
  float: right;
  z-index: 3;
}
.inv-charms {
  position: relative;
  margin-left:2px;
  width: 300px;
  height: 185px;
  float: left;
  z-index: 3;
}
.inv-equipment {
  position: relative;
  z-index: 3;
}
.text {
  position: absolute;
  text-align: center;
  color: white;
  width: 100px;
}
.green, .green-name {
  text-align: center;
  color: #00f000;
}
.gray {
  color: gray;
  z-index: 3;
}
.gray-all {
  color: #bbb;
  z-index: 3;
  background-color: #161616;
}
.background {
  font-family: "exocet", sans-serif;
    background-image: url(../images/bg2.jpg);
    margin:0
}
.dropdown-skill {
  background-color: black;
  color: #bbb;
  border-color: #333;
  min-width: 75px;
  padding: 1px 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.dropdown-skill:hover {
  background-color: #222;
}
.dropdown-character {
  color: #ddd;
  position: absolute;
  left: 68px;
  top: 14px;
  opacity: 0;
  border-color: black;
  background-color: black;
  padding: 0px;
  width: 97px;
  height: 38px;
  z-index: 4;
}
.dropdown select, .dropdown-corruption select {
  color: #ddd;
  background-color: black;
  padding-left: 7px;
  width: 200px;
  height: 29px;
  border-color: #333;
  z-index: 5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.dropdown-corruption select {
  width: 20px;
}
.dropdown-set, .dropdown-unique, .dropdown-magic, .dropdown-rare, .dropdown-craft, .dropdown-common, .dropdown-rw, .dropdown-debug, .dropdown:hover, .dropdown:focus {
  background-color: #222;
  z-index: 6;
}
.dropdown-set {
  color: #00f000;
}
.dropdown-unique {
  color: #928068;
}
.dropdown-magic {
  color: #8080ff;
}
.dropdown-rare {
  color: yellow;
}
.dropdown-craft {
  color: orange;
}
.dropdown-common {
  color: white;
}
.dropdown-rw {
  color: #b2a992;
}
.dropdown-debug {
  color: #ff8080;
}
.P {  
  position: absolute;
  text-align: center;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black, 2px 2px 3px black, -2px -2px 3px black, 2px -2px 3px black, -2px 2px 3px black;
  color: white;
  width: 30px;
  z-index: 4;
}
.Pa1 {left: 51px;}
.Pa2 {left: 120px;}
.Pa3 {left: 189px;}
.Pb1 {left: 283px;}
.Pb2 {left: 351px;}
.Pb3 {left: 420px;}
.Pc1 {left: 513px;}
.Pc2 {left: 582px;}
.Pc3 {left: 651px;}
.Py1 {top: 44px;}
.Py2 {top: 112px;}
.Py3 {top: 180px;}
.Py4 {top: 248px;}
.Py5 {top: 317px;}
.Py6 {top: 385px;}
.I {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.Ia1 {left: 14px;}
.Ia2 {left: 83px;}
.Ia3 {left: 152px;}
.Ib1 {left: 245px;}
.Ib2 {left: 314px;}
.Ib3 {left: 383px;}
.Ic1 {left: 476px;}
.Ic2 {left: 545px;}
.Ic3 {left: 614px;}
.Iy1 {top: 16px;}
.Iy2 {top: 84px;}
.Iy3 {top: 152px;}
.Iy4 {top: 220px;}
.Iy5 {top: 289px;}
.Iy6 {top: 357px;}
.cell {
  position:absolute;
}
.H {
  position: absolute;
  width: 29px;
  height: 29px;
  z-index: 3;
}
.Hx1 {left: 5px;}
.Hx2 {left: 34px;}
.Hx3 {left: 63px;}
.Hx4 {left: 92px;}
.Hx5 {left: 121px;}
.Hx6 {left: 150px;}
.Hx7 {left: 179px;}
.Hx8 {left: 208px;}
.Hx9 {left: 237px;}
.Hx10 {left: 266px;}
.Hy1 {top: 3px;}
.Hy2 {top: 32px;}
.Hy3 {top: 61px;}
.Hy4 {top: 90px;}
.effect, .effect-container {
  width: 36px;
  height: 36px;
  visibility: visible;
  display: block;
  z-index: 6;
}
.effect {
  position: absolute;
}
.hide {
  width: 36px;
  height: 0px;
  visibility: hidden;
  display: block;
  z-index: 1;
}
.flex-box {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
}
input[type="file"] {
    display: none;
}

/* Navbar container */

.navbar {
  overflow: hidden;
    background-image: url(../images/thin_bg.gif);
 /* font-family: Montserrat, sans-serif;*/
  min-width: 869px;
  max-width: 869px;
}

/* The dropdown container */

.nav-dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */

.nav-dropbtn, .nav-dropbtn a {
  margin: 0;
  border: none;
  color: #ddd;
  padding: 4px 16px;
  background-color: inherit;
 /* font-family: inherit;*/
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-dropbtn a {
  padding: 0;
}
/* Highlight navbar options on hover */
.nav-dropdown:hover, .nav-dropbtn:hover, .nav-dropbtn:hover a, .nav-dropdown-content-item:hover {
  background-color: #222;
  color: #fff;
}

/* Dropdown content (hidden by default) */

.nav-dropdown-content {
  display: none;
  position: absolute;
  color: #eee;
  background-color: #333;
  min-width: 100px;
  box-shadow: 0px 8px 12px 4px rgba(0,0,0,0.5);
  z-index: 9;
}
.nav-dropdown-content-item {
  font-size: 13px;
  border-top: 1px solid rgba(150, 150, 150, 0.15);
  margin: 0px 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.nav-dropdown-content-item:first-child {
  border-top: 0;
  margin-top: 2px;
}
.nav-dropdown-content-item:last-child {
  margin-bottom: 2px;
}
.nav-text {
  position: relative;
  height: 27px;
  top: 7px;
}
.nav-option {
  position: relative;
  height: 27px;
  top: 3px;
}
.nav-difficulty {
  position: relative;
  height: 44px;
  top: 4px;
}

/* Show the dropdown menu on hover */

.nav-dropdown:hover .nav-dropdown-content {
  display: block;
}
#class_name {
  left: 67px;
  top: 12px;
  font-size: 16px;
}

/* Firefox Fix */

@-moz-document url-prefix() {
  #class_name {
    font-size: 16px;
  }
}

/* Tooltip Hovers */

.inventory_container {
  display:flex;
  position:relative;
  width:910px;
}
.tooltip_item {
  display: block;
}

/* Inventory */

#tooltip_inventory {
  display: none;
}
#item_corruption {
  color: #cc6666;
}
#item_affixes {
  color:#8080ff;
}
#item_set_affixes {
  color: #00f000;
}
#item_socketed_affixes {
  color:#8080ff;
}
#item_group_affixes {
  color: #9b8c6d;
}

/* Effects (Skills) */

.effect_container {
  display: flex;
  justify-content: flex-end;
}
#tooltip_effect {
  display: none;
  top: 100px;
}
#effect_name {
  color: #00f000;
}
#effect_affixes {
  color: #8080ff;
}

/* Stats */
#gui {
  position: relative;
  height: 433px;
}
#gui_stats {
  position: relative;
  width: 175px;
  height: 433px;
  float: left; 
}
#level {
  left: 23px;
  top: 12px;
}
#remainingskills {
  left: 100px;
  top: 45px;
}
#remainingstats {
  left: 100px;
  top: 338px;
}
.stat-left {
  left: 85px;
}
#strength {
  top: 100px;
}
#dexterity {
  top: 162px;
}
#vitality {
  top: 224px;
}
#energy {
  top: 286px;
}

/* Skills */

.hidden_item {
  position: absolute;
  display: block;
}
#hide_skillpoints {
  left: 7px;
  top: 54px;
}
#hide_statpoints {
  left: 7px;
  top: 344px;
}
#hide_stats {
  left: 120px;
  top: 98px;
}
#gui_skills {
  position: relative;
  width: 694px;
  height: 433px;
  float: left;
}
#tooltip {
  display: none;
  pointer-events: none;
}

/* Equipment */

#equipment {
  float: right;
  width: 200px;
  height: 20px;
  margin-right: 2px;
  position: relative;
  z-index: 6;
}
.equipment {
  display: block;
}
#merc_space {
  display: none;
}
#golem {
  display: none;
}
.disabled_dropdown {
    pointer-events: none;
}
.disabled_dropdown_hide {
    opacity: 0;
    pointer-events: none;
}
/* Corruptions */

#equipment_corruptions {
  float: right;
  width: 20px;
  margin-right: 1px;
  position: relative;
  z-index: 6;
}
#equipment_grid {
  float: right;
}
#merc_equipment_grid {
  float: right;
}
.equipped_item {
  position: absolute;
  z-index: 2;
}
.equipped_helmet {
  width: 58px;
  height: 58px;
  left: 63px;
  top: 1px;
}
.equipped_armor {
  width: 58px;
  height: 88px;
  left: 122px;
  top: 1px;
}
#merc_gloves {
  width: 59px;
  left: 182px;
  top: 1px;
}
#merc_boots {
  width: 58px;
  height: 58px;
  left: 182px;
  top: 61px;
}
#merc_belt {
  width: 58px;
  height: 29px;
  left: 122px;
  top: 90px;
}
#gloves {
  width: 59px;
  left: 182px;
  top: 1px;
}
#boots {
  width: 58px;
  height: 58px;
  left: 182px;
  top: 61px;
}
#belt {
  width: 58px;
  height: 29px;
  left: 122px;
  top: 90px;
}
#amulet {
  width: 29px;
  height: 29px;
  left: 77px;
  top: 60px;
}
.equipped_ring {
  width: 28px;
  height: 29px;
  top: 90px; 
}
#ring1 {
  left: 63px;
}
#ring2 {
  left: 93px;
}
.equipped_weapon {
  width: 60px; 
  height: 118px;
  top: 1px;
  left: 1px;
}
.equipped_offhand {
  width: 60px;
  height: 118px;
  top: 1px;
  left: 242px;
}
.equipment_image {
  position: absolute;
  z-index: 3;
}
#weapon_image {
  z-index: 3;
}
.equipment_absolute {
  position: absolute;
  z-index: 4;
}

/* Skills */
#skill_details {
  display: block;
  height: 235px;
  width: 330px;
  position: relative;
}
#ar_spacing {
  display: none;
}
#skill_details_basic {
  margin-bottom: 15px;
}
#offhand_basic {
  display: none;
}
.skill_detail {
  height: 22px;
  position: relative;
  z-index: 3;
}
#skillDetail1 {
  margin-top: -5px;
}
#skillDetail2 {
  margin-top: 5px;
}
#offhand_skill1 {
  display: none;
}
#offhand_skill2 {
  display: none;
}
.skill_detail_wrapper a {
  color: gray;
}
#skill_details_inactive {
  display: none;
}
#stats_main_columns {
  position: relative;
  left: 3px;
}
#demons_and_undead {
  position: relative;
  top: -90px;
}

/* Lower Stat Text */

.stat-text-wrapper {
  position: absolute;
}
.stat-1 {
  left: 0px;
}
.stat-2 {
  left: 170px;
}
.stat-3 {
  left: 0px;
}
.stat-4 {
  left: 170px;
}
.stat-5 {
  left: 340px;
}
.stat-6 {
  left: 510px;
}
#stats_positioning_alignment {
  width: 869px;
}
#stats_column_5 {
  float: right;
  width: 195px;
}
#mercenary_spacing {
  display: none;
}
#mercenary_spacing2 {
  display: none;
}
#golem_spacing {
  display: none;
}
.flamme {
  margin-right: -100px;
}
.statlines {
  margin-right: -135px;
}
.ctc{
  margin-right: -155px;
}
.cskill {
  margin-right: -135px;
}