body{
  color:white;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#1d262f;
}
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  border-radius:3px;
  -webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb{
  border-radius:3px;
  background-color:white;
  outline:1px solid slategrey;
}
.world{
  width:100vw;
  height:100vh;
}
.healthBar{
  position:absolute;
  margin-top:4px;
  margin-left:6px;
  width:36vw;
  max-width:300px;
  height:10px;
  background:#FFDFEF;
  border-radius:5px;
  overflow:hidden;
}
.healthFill{
  width:36vw;
  height:100%;
  background:#FF3FB9;
  transition:all 0.2s;
}
.staminaBar{
  position:absolute;
  margin-top:4px;
  margin-left:6px;
  width:30vw;
  max-width:280px;
  height:10px;
  background:#BBFFFF;
  border-radius:5px;
  overflow:hidden;
}
.staminaFill{
  width:30vw;
  height:100%;
  background:#1BAFFF;
  transition:all 0.2s;
}
.progressBar{
  display:none;
  position:absolute;
  width:214px;
  height:18px;
  background:#FF3FB9;
  border-radius:7px;
  overflow:hidden;
}
.progressFill{
  width:0%;
  height:100%;
  background:#1BAFFF;
  transition:all 0.2s;
}
.progressText{
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  font:bold 14px"Quicksand",sans-serif;
  color:#ffffff;
}
.appWindow{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
::placeholder{
  color:white;
}
.container{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  position:absolute;
  left:0px;
  top:0px
}
.dialogcontainer{
  display:flex;
  justify-content:center;
  flex-direction:column;
}
.dialogbox{
  margin:12px;
  margin-top:3px;
  margin-bottom:9px;
  padding:10px;
  padding-right:0px;
  max-width:74vw;
  max-height:76vh;
  white-space:nowrap;
  overflow-y:scroll;
  border:solid;
  border-width:thin;
  border-color:white;
  border-radius:5px;
}
.avatarframe{
  display:flex;
  flex-wrap:wrap;
  margin:4px;
  padding:10px;
  padding-right:0px;
  max-width:74vw;
  max-height:50vh;
  justify-content:center;
  align-items:center;
  overflow-x:hidden;
  overflow-y:scroll;
  border:solid;
  border-width:thin;
  border-color:white;
  border-radius:5px;
}
.avatarimage{
  margin:2px;
  cursor:pointer;
  border-style:solid;
  border-width:thin;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.survivorimage{
  margin:2px;
  margin-right:9px;
  width:56px;
  height:56px;
  border-style:solid;
  border-width:thin;
  object-fit:cover;
  opacity:.86;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  cursor:pointer;
}
.chatMessageList{
  display:flex;
  margin:0px;
  margin-top:58px;
  padding:0px;
  height:50vh;
  flex-flow:column nowrap;
  overflow-y:scroll;
}
.chatMessageBubble{
  margin:6px;
  padding-top:3.6px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:5px;
  max-width:40vw;
  font-size:14px;
  white-space:normal;
  overflow-wrap:break-word;
  border:solid;
  border-width:thin;
  border-color:white;
  border-radius:5px;
}
.dialogMessage{
  margin:0px;
  padding:0px;
  padding-left:12px;
  padding-right:12px;
  max-height:66vh;
  white-space:normal;
  overflow-y:scroll;
  overflow-wrap:break-word;
}
.linkInput{
  display:block;
  margin:auto;
  width:100%;
  font-size:15px;
  background:transparent;
  border:none;
  outline:none;
  color:white;
}
.chatInput{
  display:block;
  margin:0px;
  position:absolute;
  left:42px;
  width:36vw;
  font-size:15px;
  background:transparent;
  border:none;
  outline:none;
  color:white;
}
.buttonContainer{
  display:flex;
  justify-content:center;
  cursor:pointer;
}
/* LEFT ICON */
.topLeftIcon{
  position:absolute;
  left:10px;
  top:10px;
  z-index:1;
}
.topLeftSecondIcon{
  position:absolute;
  left:10px;
  top:54px;
  z-index:1;
}
.topLeftThirdIcon{
  position:absolute;
  left:10px;
  top:98px;
  z-index:1;
}
.topLeftNextAIcon{
  position:absolute;
  left:54px;
  top:10px;
  z-index:1;
}
.topLeftNextSecondIcon{
  position:absolute;
  left:54px;
  top:54px;
  z-index:1;
}
.actionLeftIconB{
  position:absolute;
  left:36px;
  bottom:176px;
  z-index:1;
}
.actionLeftIconA{
  position:absolute;
  left:102px;
  bottom:166px;
  z-index:1;
}
/* RIGHT ICON */
.topRightIcon{
  position:absolute;
  right:10px;
  top:10px;
  z-index:1;
}
.topRightSecondIcon{
  position:absolute;
  right:10px;
  top:54px;
  z-index:1;
}
.topRightNextAIcon{
  position:absolute;
  right:54px;
  top:10px;
  z-index:1;
}
.topRightNextBIcon{
  position:absolute;
  right:98px;
  top:10px;
  z-index:1;
}
.topRightNextCIcon{
  position:absolute;
  right:142px;
  top:10px;
  z-index:1;
}
.topRightNextDIcon{
  position:absolute;
  right:186px;
  top:10px;
  z-index:1;
}
.topRightNextEIcon{
  position:absolute;
  right:230px;
  top:10px;
  z-index:1;
}
.topRightNextSecondIcon{
  position:absolute;
  right:54px;
  top:54px;
  z-index:1;
}
.actionRightIconB{
  position:absolute;
  right:36px;
  bottom:176px;
  z-index:1;
}
.actionRightIconA{
  position:absolute;
  right:102px;
  bottom:166px;
  z-index:1;
}
/* STICK */
.stickBase{
  width:128px;
  position:absolute;
  bottom:10px;
}
.stickEdge{
  position:absolute;
  bottom:117px;
}
.stickTop{
  position:absolute;
  bottom:134px;
}
.stickSide{
  position:absolute;
  bottom:96px;
}
.contactProfileImage{
  margin:-20px;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:thin;
  border-color:white;
  border-radius:50%;
  transform:scale(.6,.6);
  object-fit:cover;
}
.chatProfileImage{
  margin:-16px;
  width:80px;
  height:80px;
  border-style:solid;
  border-width:thin;
  border-color:white;
  border-radius:50%;
  transform:scale(.6,.6);
  object-fit:cover;
}
.notifyDot{
  position:absolute;
  width:12px;
  height:12px;
  background-color:#61ffff;
  border-radius:50%;
}
.profileImage{
  width:76px;
  height:76px;
  object-fit:cover;
}
.profileFrame{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px;
  width:100%;
}
.colorPickerFrame{
  margin:12px;
  margin-top:3px;
  margin-bottom:9px;
  padding:5px;
  max-width:74vw;
  max-height:70vh;
  border:solid;
  border-width:thin;
  border-color:white;
  border-radius:5px;
}
.stickLEFT{
  position:absolute;
  left:32px;
  top:32px;
}
.stickRIGHT{
  position:absolute;
  left:32px;
  top:32px;
}
.snapCont{
  position:absolute;
  bottom:9px;
}
.centerMessage{
  position:absolute;
  font-size:5vh;
  text-align:center;
  opacity:.86;
}
.speedwind{
  position:absolute;
  width:100%;
  height:100%;
  mix-blend-mode:screen;
  object-fit:cover;
  opacity:.24;
}