.div-table {
  display: table;
  width: auto;
  /* background-color: #eee; */
  /* border: 1px solid #666666; */
   /* cellspacing:poor IE support for  this */
  margin-left: 2.3vh;
  margin-top: 0.1vh;
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col, .div-table-col-active {
  float: left; /* fix for  buggy browsers */
  display: table-column;
  position: relative;
  width: 8.3vh;
  margin: 0.65vh;
  height: 7.8vh;
  background-color: #56565614;
  border: 1px #0000000d solid;
  border-radius: 0.5vh;
}

.inventory {position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;width: 82vh;bottom: 21.7vh;/* overflow: hidden; */display: flex;}

.main_inventory {background-color: #ffffff;width: 47vh;height: 56.5vh;overflow: hidden;position: relative;border-radius: 1vh;}

.items_inventory {background-color: #ffffff;width: 33.8vh;height: 56.5vh;border-radius: 1vh;position: relative;overflow: visible;margin-left: 1.6vh;}

.current_outfit {
    margin-top: 1.1vh;
    margin-left: 32vh;
    position: absolute;
}

.char_state, .lina_arc_state, .lanaya_arc_state {width: 17vh;position: relative;top: 32vh;float: right;right: 1.5vh;display:none;white-space: nowrap;}


.state_label_lanaya {
  background-color: #e01dc4;
  margin-right: 1vh;
}

.state_label_luna {
  background-color: #524aff;
  margin-right: 1vh;
}

.state_label_alcohol {
  background-color: #46d9d5;
  margin-right: 1vh;
}


.state_label {color: white;font-weight: 600;border-radius: 0.5vh;display: inline-block;margin-top: 1vh;float: right;font-size: 2vh;padding: 0.8vh 1.7vh;box-shadow: 0.1vh 0.2vh 1vh #00000052;}

.state_label_lina {
  background-color: #ff7600;
  margin-right: 1vh;
}

.state_label_rylai {
  background-color: #00adff;
  margin-right: 1vh;
}

.state_label_rating {
  background-color: #ff00eb;
  margin-right: 1vh;
}

.green_label {
    background-color: #49d249;
    margin-right: 1vh;
}

.yellow_label {
  background-color: #f7b600;
  margin-right: 1vh;
}

.red_label {
  background-color: #fd3a3a;
  margin-right: 1vh;
}

.char_sprite, .char_emotion {
  position: absolute;
  height: 55vh;
  left: -14vh;
}

.char_emotion {
  transition: 0.5s;
  opacity: 0.0;
}

.coins {display: flex;justify-content: center;margin-top: 1vh;}

.coins_icon {background-image: url(../../static/images/interface/icons8-coins-100.webp);width: 5.5vh;background-size: 150%;background-position: center;}

.coins_text {
  line-height: 7vh;
  font-size: 2.2vh;
  font-weight: 600;
  margin-left: 1vh;
}

.menu_header_inventory {
  position: relative;
  display: flex;
  font-weight: 400;
  height: 7vh;
}

.outfit_container {display: flex;}

.type_icon {
  width: 3vh;
  background-size: contain;
  height: 3vh;
  margin-top: 3vh;
  filter: opacity(0.2);
  margin-right: 0.3vh;
}

.label_container {
  float: right;
  display: flex;
}

.thing {
  width: 7vh;
  height: 7vh;
  padding: 0.5vh;
}

.thing_menu {
  width: 32vh;
  /* height: 18.5vh; */
  background-color: white;
  position: relative;
  padding: 0 2vh 0 0;
  z-index: 101;
  border-radius: 0.8vh;
  margin-top: 0.5vh;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.thing_title {
  text-align: left;
  font-size: 2vh;
  font-weight: 600;
  padding: 1.5vh 2vh 0vh;
}

.thing_button {
  margin-top: 2vh;
  text-align: left;
  font-size: 2vh;
  padding: 2vh;
  padding-top: 0;
  z-index: 101;
  cursor: pointer;
}

.thing_line {
  margin-top: 1.5vh;
  border: #e4e4e4 1px solid;
  width: 105%;
}

.thing_description {
  text-align: left;
  margin-top: 1vh;
  margin-left: 2vh;
  font-size: 2vh;
  color: gray;
}

.arrow_up {
  background-image: url(../../static/images/interface/arrow_inventory.svg);
  width: 2vh;
  left: 0vh;
  height: 1vh;
  position: absolute;
  margin-top: -1vh;
  background-size: cover;
  margin-left: 3vh;
  filter: drop-shadow(0.1vh -0.1vh 0.1vh #90909059);
}

.thing_counter {
  position: absolute;
  right: -0.5vh;
  top: -0.5vh;
  font-size: 2vh;
  font-weight: 600;
  background-color: white;
  padding: 0.2vh 0.8vh;
  border-radius: 0.5vh;
  box-shadow: 0vh 0.2vh 0.4vh #00000059;
}


.clickable_overlay {

  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.left_notify {
  left: 19vh;
  right: initial;
}

.speech_bubble {
  transition: 0.5s;
  background-color: white;
  position: absolute;
  color: black;
  visibility: hidden;
  opacity: 0.0;
  box-shadow: 0.2vh 0.5vh 1vh #0000003b;
  padding: 2vh;
  background: #ffffff;
  z-index: 100500;
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  left: -35vh;
  right: 0;
  top: 50vh;
  width: fit-content;
  border-radius: 12vh;
  font-size: 2vh;
  width: max-content;
}

.speech_bubble:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 2.5vh solid transparent;
  border-bottom-color: #ffffff;
  border-top: 0;
  border-left: 0;
  margin-left: -1vh;
  margin-top: -2vh;
}

.free_inventory {
  left:17.5vh;
}