.hud {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.hud .hud-tip {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.hud .status-info {
  position: absolute;
  width: 16.35vw;
  height: 35.19vh;
  top: 64.81vh;
  left: 1.4vw;
}

.tip1-status {
  display: none;
  z-index: 2;
}

.tip2-status {
  display: none;
  z-index: 2;
}

.tip3-status {
  display: none;
  z-index: 2;
}

.hud .tip1-status .stamina,
.hud .tip1-status .thirst,
.hud .tip1-status .hunger,
.hud .tip1-status .armor,
.hud .tip1-status .health {
  position: absolute;
  width: 2.19vw;
  height: 5.74vh;
  top: 29.44vh;
}

.hud .tip1-status .stamina { left: 14.17vw; }
.hud .tip1-status .thirst { left: 10.63vw; }
.hud .tip1-status .hunger { left: 7.24vw; }
.hud .tip1-status .armor { left: 3.75vw; }
.hud .tip1-status .health { left: 0.26vw; }

.hud .tip1-status .text-wrapper {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  font-size: 0.625vw;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  z-index: 2;
}

.hud .tip1-status .overlap {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: -0.18vh;
  left: -0.05vw;
  z-index: 2;
}

.hud .tip1-status .info-icon,
.hud .tip1-status .info-icon-2 {
  position: absolute;
  width: 1.04vw;
  height: 1.85vh;
  top: 1.11vh;
  left: 0.625vw;
  z-index: 2;
}

.hud .tip1-status .front {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.hud .tip1-status .back {
  position: absolute;
  width: 2.19vw;
  height: 3.88vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.tip1-status svg path {
  transform-origin: center;
}

.hud .tip2-status .stamina,
.hud .tip2-status .thirst,
.hud .tip2-status .hunger,
.hud .tip2-status .armor,
.hud .tip2-status .health {
  position: absolute;
  width: 2.19vw;
  height: 5.74vh;
  top: 29.44vh;
}

.hud .tip2-status .stamina { left: 14.17vw; }
.hud .tip2-status .thirst { left: 10.63vw; }
.hud .tip2-status .hunger { left: 7.24vw; }
.hud .tip2-status .armor { left: 3.75vw; }
.hud .tip2-status .health { left: 0.26vw; }

.hud .tip2-status .text-wrapper {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  font-size: 0.625vw;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  z-index: 2;
}

.hud .tip2-status .overlap {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: -0.18vh;
  left: -0.05vw;
}

.hud .tip2-status .info-icon,
.hud .tip2-status .info-icon-2 {
  position: absolute;
  width: 1.48vh;
  height: 1.48vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hud .tip2-status .front {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.hud .tip2-status .back {
  position: absolute;
  width: 2.19vw;
  height: 3.88vh;
  top: 0;
  left: 0;
  z-index: 1;
}

.hud .tip2-status .front circle {
  transform: rotate(-90deg);
  transform-origin: center;
}

.hud .tip3-status .stamina,
.hud .tip3-status .thirst,
.hud .tip3-status .hunger,
.hud .tip3-status .armor,
.hud .tip3-status .health {
  position: absolute;
  width: 2.19vw;
  height: 5.74vh;
  top: 29.44vh;
}

.hud .tip3-status .stamina {
  left: 14.17vw;
}
.hud .tip3-status .thirst {
  left: 10.63vw;
}
.hud .tip3-status .hunger {
  left: 7.24vw;
}
.hud .tip3-status .armor {
  left: 3.75vw;
}
.hud .tip3-status .health {
  left: 0.26vw;
}

.hud .tip3-status .text-wrapper {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  font-size: 0.625vw;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  z-index: 2;
}

.hud .tip3-status .overlap {
  position: absolute;
  width: 2.08vw;
  height: 3.7vh;
  top: 0;
  left: 0;
  overflow: hidden;
}

.hud .tip3-status .back {
  position: absolute;
  width: 2.08vw;
  height: 3.7vh;
  top: 0;
  left: 0;
  z-index: 1;
}

.hud .tip3-status .front {
  position: absolute;
  width: 2.08vw;
  height: 3.7vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.hud .tip3-status .front rect {
  transform-origin: bottom;
  transition: transform 0.6s ease;
}

.hud .tip3-status .info-icon,
.hud .tip3-status .info-icon-2 {
  position: relative;
  width: 1.04vw;
  height: 1.85vh;
  top: 50%;
  left: 50%;
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(0, 0, 0, 0.89));
  transform: translate(-50%, -50%);
  z-index: 3;
}

.hud .tip1-solalt {
  display: none;
}

.hud .tip2-solalt {
  display: none;
}

.hud .tip1-solalt .info-box {
  position: absolute;
  display: flex;
  align-items: center;
  background-color: #00000066;
  border-radius: 0 0.42vw 0.42vw 0;
  height: 3.7vh;
  padding: 0.5vh 1vw 0.5vh 0.6vw;
  width: fit-content;
  max-width: 30vw; 
  white-space: nowrap;
}

.hud .tip1-solalt .time {
  top: 0;
  left: 0;
}

.hud .tip1-solalt .location {
  top: 4.26vh;
  left: 0;
}

.hud .tip1-solalt .info-icon {
  width: 1.3vw;
  height: 2.31vh;
  margin-right: 0.6vw;
}

.hud .tip1-solalt .info-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hud .tip1-solalt .info-subtext {
  font-family: "Roboto", Helvetica;
  font-size: 0.625vw;
  font-weight: 500;
  color: #a7a7a7;
  line-height: 1;
  text-shadow: 1px 1px 4px #00000099;
}

.hud .tip1-solalt .info-text {
  font-family: "Roboto", Helvetica;
  font-size: 0.73vw;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 1px 1px 4px #00000099;
}


.hud .tip1-solalt .mapborder {
  position: absolute;
  width: 16.3vw;
  height: 18.43vh;
  top: 9.63vh;
  left: 0.05vw;
}

.hud .tip2-solalt .box {
  position: relative;
  top: 5.09vh;
  height: 30.56vh;
  z-index: 0;
  right: 0.4vw;
}

.hud .tip2-solalt .time {
  position: absolute;
  width: 4.53vw;
  height: 3.7vh;
  top: 6.02vh;
  left: 12.24vw;
  z-index: 2;
}

.hud .tip2-solalt .overlap-group {
  position: absolute;
  width: 2.08vw;
  height: 3.7vh;
  top: 0;
  left: 2.24vw;
  background-color: #52525233;
  border-radius: 0.26vw;
}

.hud .tip2-solalt .info-icon {
  position: absolute;
  width: 1.3vw;
  height: 2.31vh;
  top: 0.65vh;
  left: 0.36vw;
}

.hud .tip2-solalt .info-text {
  top: 1.85vh;
  left: 0.05vw;
  text-shadow: 1px 1px 4px #00000099;
  color: #ffffff;
  position: absolute;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip2-solalt .info-subtext {
  position: absolute;
  top: 0.46vh;
  left: 0;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  color: #a7a7a7;
  font-size: 0.625vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip2-solalt .location {
  position: absolute;
  width: 8.23vw;
  height: 3.7vh;
  top: 6.02vh;
  left: 0.52vw;
  z-index: 2;
}

.hud .tip2-solalt .overlap {
  position: absolute;
  width: 2.08vw;
  height: 3.7vh;
  top: 0;
  left: 0;
  background-color: #52525233;
  border-radius: 0.26vw;
}

.hud .tip2-solalt .text-wrapper {
  top: 1.85vh;
  left: 2.34vw;
  text-shadow: 1px 1px 4px #00000099;
  color: #ffffff;
  position: absolute;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  max-width: 12.5vh;
  overflow: hidden;
}

.hud .tip2-solalt .div {
  position: absolute;
  top: 0.46vh;
  left: 2.34vw;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #a7a7a7;
  font-size: 0.625vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

path {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s ease;
}

.hud .player-info {
  position: absolute;
  width: 13.07vw;
  height: 37.78vh;
  top: 2.78vh;
  left: 85.57vw;
}

.hud .tip-1-pinfo {
  display: none;
}

.hud .tip-2-pinfo {
  display: none;
}

.hud .tip-3-pinfo,
.hud .tip-3-server-info {
  display: none;
}

.hud .tip-3-pinfo {
  position: absolute;
  width: 9.11vw;
  height: 19.35vh;
  top: 0.93vh;
  right: 0;
}

.hud .tip-3-pinfo .location {
  position: absolute;
  width: 9.32vw;
  height: 3.8vh;
  top: 0;
  left: 0;
}

.hud .tip-3-pinfo .location-altname {
  top: 2.13vh;
  left: 3.85vw;
  font-weight: 500;
  color: #ffffffb2;
  font-size: 0.78vw;
  position: absolute;
  text-shadow: 1px 1px 4px #000000;
  font-family: "Roboto", Helvetica;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  right: 0;
  direction: rtl;
}

.hud .tip-3-pinfo .location-subname {
  top: 0;
  left: 0;
  right: 0;
  direction: rtl;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.04vw;
  position: absolute;
  text-shadow: 1px 1px 4px #000000;
  font-family: "Roboto", Helvetica;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip-3-pinfo .bank {
  position: absolute;
  width: 1.72vw;
  height: 2.78vh;
  top: 16.57vh;
  left: 7.45vw;
  text-shadow: 1px 1px 4px #000000;
}

.hud .tip-3-pinfo .info-cash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  direction: rtl;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: #ffffff;
  font-size: 1.0vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip-3-pinfo .cash {
  position: absolute;
  width: 1.72vw;
  height: 2.78vh;
  top: 13.8vh;
  left: 7.45vw;
  text-shadow: 1px 1px 4px #000000;
}

.hud .tip-3-pinfo .text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  direction: rtl;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: #02ff00;
  font-size: 1.0vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip-3-pinfo .name {
  position: absolute;
  width: 7.19vw;
  height: 1.94vh;
  top: 11.3vh;
  left: 1.93vw;
  text-shadow: 1px 1px 4px #000000;
}

.hud .tip-3-pinfo .info-name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  direction: rtl;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: #ffffffe6;
  font-size: 0.94vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip-3-pinfo .time {
  position: absolute;
  width: 4.22vw;
  height: 1.85vh;
  top: 5.74vh;
  left: 4.89vw;
  text-shadow: 1px 1px 4px #000000;
}

.hud .tip-3-pinfo .server-date,
.hud .tip-3-pinfo .server-time {
  position: absolute;
  top: 0.19vh;
  left: 1.35vw;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.73vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip-3-pinfo .icon {
  position: absolute;
  width: 1.04vw;
  height: 1.85vh;
  top: 0;
  left: 0;
}

.hud .tip-3-pinfo .date {
  position: absolute;
  width: 5.36vw;
  height: 1.85vh;
  top: 7.59vh;
  left: 3.75vw;
  text-shadow: 1px 1px 4px #000000;
}

.hud .tip-3-server-info {
  position: absolute;
  width: 8.44vw;
  height: 7.04vh;
  top: 4.63vh;
  left: 1.1vw;
}

.hud .tip-3-server-info .server-logo {
  position: absolute;
  width: 3.75vw;
  height: 7.78vh;
  top: -0.28vh;
  left: -0.28vw;
  object-fit: cover;
}

.hud .tip-3-server-info .server-name {
  position: absolute;
  top: 1.39vh;
  left: 4.32vw;
  color: white;
  text-shadow: 1px 1px 4px #000000;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 1.04vw;
  letter-spacing: 0;
  line-height: normal;
}

.hud .tip-1-pinfo .info-box {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  height: 3.7vh;
  font-family: "Roboto", Helvetica, sans-serif;
  font-weight: 600;
  color: #ffffffd9;
  text-shadow: 1px 1px 4px #000000a6;
  gap: 0.4vw;
}

.hud .tip-1-pinfo .info-text {
  font-size: 0.73vw;
  text-align: right;
  direction: rtl;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  flex: 1;
}

.hud .tip-1-pinfo .info-icon-wrapper {
  width: 2.08vw;
  height: 3.7vh;
  background-color: #0f0f0fa6;
  border-radius: 0.26vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.hud .tip-1-pinfo .info-icon {
  height: 2.03vh;
  width: auto;
  object-fit: contain;
}


.hud .tip-1-pinfo .info-cash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  direction: rtl;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  font-size: 1.0vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  text-shadow: 1px 1px 4px #000000a6;
}

.hud .tip-1-pinfo .info-cash.yellow {
  color: var(--variable-collection-sari);
}

.hud .tip-1-pinfo .info-cash.green {
  color: #02ff00;
}

.hud .tip-1-pinfo .server-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0vh;
  right: 0vw;
  gap: 1vw;
}

.hud .tip-1-pinfo .server-logo {
  width: 3.8vw;
  height: 7.87vh;
  object-fit: cover;
  flex-shrink: 0;
}

.hud .tip-1-pinfo .server-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.hud .tip-1-pinfo .server-name {
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 1.25vw;
  color: transparent;
  text-shadow: 1px 1px 4px #00000096;
  white-space: nowrap;
  direction: rtl;
}

.hud .tip-1-pinfo .server-name .span {
  color: #b371fa;
  text-shadow: 2px 2px 4px #00000099;
}

.hud .tip-1-pinfo .server-link {
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  color: #ffffff;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  margin-top: 0.3vh;
  align-self: center;
}

.hud .tip-1-pinfo .time-2 {
  position: absolute;
  height: 1.85vh;
}

.hud .tip-1-pinfo .server-time {
  position: absolute;
  top: 0.5vh;
  left: -0.7vh;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  color: #ffffff;
  text-shadow: 1px 1px 4px #000000a6;
  white-space: nowrap;
}

.hud .tip-1-pinfo .time-icon {
  position: absolute;
  top: 0;
  left: 3.18vw;
  width: 1.04vw;
  height: 1.85vh;
}

.hud .tip-1-pinfo .date {
  position: absolute;
}

.hud .tip-1-pinfo .server-date {
  position: absolute;
  top: 0.5vh;
  left: 0;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  color: #ffffff;
  text-shadow: 1px 1px 4px #000000a6;
  white-space: nowrap;
}

.hud .tip-1-pinfo .date-icon {
  position: absolute;
  width: 1.04vw;
  height: 1.85vh;
  top: 0;
  left: 4.32vw;
}


.hud .tip-2-pinfo .playerinfo {
  position: absolute; 
  top: 9.7vh; 
  right: 1vw; 
  width: max-content;
}

.hud .tip-2-pinfo .playerinfo-top,
.hud .tip-2-pinfo .playerinfo-bottom {
  display: flex;
  justify-content: flex-end; 
  gap: 0.8vw; 
  margin-bottom: 1.0vh; 
  
}

.hud .tip-2-pinfo .info-box {
  position: relative;
  height: 2.78vh;
  background-color: #0f0f0fa6;
  border-radius: 0.35vh;
  display: flex;
  align-items: center;
  padding: 0 0.7vw 0 2.2vw;
  width: fit-content;
}

.hud .tip-2-pinfo .info-text {
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  color: #ffffffd9;
  text-shadow: 1px 1px 4px #000000a6;
  white-space: nowrap;
}

.hud .tip-2-pinfo .info-icon {
  position: absolute;
  width: 1.1vw;
  height: 2.03vh;
  top: 0.38vh;
  left: 0.3vw;
}

.hud .tip-2-pinfo .bank,
.hud .tip-2-pinfo .cash {
  position: absolute;
  width: fit-content;
  height: 2.78vh;
}

.hud .tip-2-pinfo .info-cash,
.hud .tip-2-pinfo .info-cash-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  direction: rtl;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  font-size: 1.0vw;
  text-shadow: 1px 1px 4px #000000a6;
  white-space: nowrap;
}

.hud .tip-2-pinfo .info-cash { color: #ffffff; }
.hud .tip-2-pinfo .info-cash-2 { color: #02ff00; }

.hud .tip-2-pinfo .server-info {
  position: absolute;
  top: 0;
  left: 3.43vw;
}

.hud .tip-2-pinfo .server-logo {
  position: absolute;
  width: 3.8vw;
  height: 7.87vh;
  top: -0.28vh;
  left: 5.79vw;
  object-fit: cover;
}

.hud .tip-2-pinfo .time-2,
.hud .tip-2-pinfo .date {
  position: absolute;
  height: 1.85vh;
}

.hud .tip-2-pinfo .time-2 { width: 4.16vw; top: 1.76vh; left: 0; }
.hud .tip-2-pinfo .date { width: 5.2vw; top: 3.61vh; left: 0; }

.hud .tip-2-pinfo .server-time,
.hud .tip-2-pinfo .server-date {
  position: absolute;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  font-size: 0.73vw;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 1px 1px 4px #000000a6;
}

.hud .tip-2-pinfo .server-time { top: 0.28vh; left: 1.19vw; }
.hud .tip-2-pinfo .server-date { top: 0.46vh; left: 1.19vw; }

.hud .tip-2-pinfo .img-2 {
  position: absolute;
  width: 1.04vw;
  height: 1.85vh;
  top: 0;
  left: 0;
}


.oxygen {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(452 / 1920 * 100vw);
  height: calc(42 / 1080 * 100vh);
}

.oxygen svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hud .tip1-carhud {
  display: none;
}

.hud .tip2-carhud {
  display: none;
}

.hud .tip3-carhud {
  display: none;
}

.hud .carhud {
  display: block;
  position: absolute;
  width: calc(487 / 1920 * 100vw);
  height: calc(165 / 1080 * 100vh);
  top: calc(862 / 1080 * 100vh);
  left: calc(1354 / 1920 * 100vw);
}

.hud .tip1-carhud .overlap-5 {
  position: relative;
  width: 100%;
  height: 100%;
}

.hud .tip1-carhud .overlap-6 {
  position: absolute;
  width: calc(347 / 487 * 100%);
  height: calc(133 / 165 * 100%);
  top: calc(2 / 165 * 100%);
  left: calc(119 / 487 * 100%);
}

.hud .tip1-carhud .overlap-7 {
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.hud .tip1-carhud .dandikhud {
  position: absolute;
  width: calc(239 / 347 * 100%);
  height: calc(50 / 133 * 100%);
  top: calc(82 / 133 * 100%);
  left: 0;
}

.hud .tip1-carhud .car-wrapper {
  position: relative;
  height: 100%;
}

.hud .tip1-carhud .car {
  position: absolute;
  width: calc(54 / 239 * 100%);
  height: calc(31 / 50 * 100%);
  top: 12%;
  left: calc(92 / 239 * 100%);
  object-fit: cover;
}

.hud .tip1-carhud .fuel-hud {
  width: calc(171 / 347 * 100%);
  height: calc(85 / 133 * 100%);
  left: calc(200 / 347 * 100%);
  position: absolute;
  top: 0;
}

.hud .tip1-carhud .text-wrapper {
  position: absolute;
  font-family: "Roboto", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 1.11vh;
  white-space: nowrap;
}

.hud .tip1-carhud .fuel-icon {
  width: calc(15 / 171 * 100%);
  height: calc(15 / 85 * 100%);
  position: absolute;
  top: 0;
  left: calc(-20 / 171 * 100%);
}

#clip-rect {
  transition: width 0.5s ease-in-out;
}

.hud .tip1-carhud .overlap-8 {
  position: absolute;
  width: calc(42 / 347* 100%);
    height: calc(59 / 133* 100%);
    top: calc(10 / 133* 100%);
    left: calc(6 / 347* 100%);
}

.hud .tip1-carhud .overlap-8 .speed-bar {
  position: absolute;
  top: calc(-10 / 59 * 100%);
  left: calc(-210 / 70 * 100%);
}

#clip-speed {
  transition: all 0.4s ease;
}

.hud .tip1-carhud .carspeed {
  position: absolute;
  top: 0;
  left: 6.9vh;
  text-shadow: 1px 1px 4px #00000099;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: transparent;
  font-size: 3.7vh;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip1-carhud .speedtype {
  position: absolute;
  top: calc(41 / 59 * 100%);
  left: 8.5vh; 
  text-shadow: 1px 1px 4px #00000099;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #ffffff80;
  font-size: 1.39vh;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}


.hud .tip1-carhud .text-wrapper {
  color: #ffffff80;
}

.hud .tip1-carhud .car-info {
  position: absolute;
  width: calc(127 / 347 * 100%);
  height: calc(25 / 133 * 100%);
  top: calc(135 / 133 * 100%);
  left: calc(55 / 347 * 100%);
}

.hud .tip1-carhud .seatbelt,
.hud .tip1-carhud .engine,
.hud .tip1-carhud .light,
.hud .tip1-carhud .speedometer {
  position: absolute;
  width: calc(30 / 127 * 100%);
  height: calc(30 / 25 * 100%);
}

.hud .tip1-carhud .seatbelt {
  top: -4%;
  left: calc(-3 / 127 * 100%);
}

.hud .tip1-carhud .engine {
  top: 0;
  left: calc(33 / 127 * 100%);
}

.hud .tip1-carhud .light {
  top: -4%;
  left: calc(68 / 127 * 100%);
}

.hud .tip1-carhud .speedometer {
  top: -4%;
  left: calc(100 / 127 * 100%);
}

.hud .tip1-carhud .fuel-hud .text-wrapper:nth-of-type(1) { top: calc(15 / 85 * 100%); left: calc(0 / 171 * 100%); }
.hud .tip1-carhud .fuel-hud .text-wrapper:nth-of-type(2) { top: calc(25 / 85 * 100%); left: calc(25 / 171 * 100%); }
.hud .tip1-carhud .fuel-hud .text-wrapper:nth-of-type(3) { top: calc(30 / 85 * 100%); left: calc(55 / 171 * 100%); }
.hud .tip1-carhud .fuel-hud .text-wrapper:nth-of-type(4) { top: calc(40 / 85 * 100%); left: calc(85 / 171 * 100%); }
.hud .tip1-carhud .fuel-hud .text-wrapper:nth-of-type(5) { top: calc(52 / 85 * 100%); left: calc(106 / 171 * 100%); }
.hud .tip1-carhud .fuel-hud .text-wrapper:nth-of-type(6) { top: calc(70 / 85 * 100%); left: calc(115 / 171 * 100%); }

.hud .tip2-carhud .overlap-5 {
  position: relative;
  width: calc(266 / 1920 * 100vw);
  height: calc(245 / 1080 * 100vh); 
  left: calc(250 / 1920 * 100vw);
  bottom: calc(50 / 1080 * 100vh); 
}

.hud .tip2-carhud .fuel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hud .tip2-carhud .fuel-bar-wrapper {
  position: absolute;
  width: calc(38 / 238 * 100%);
  height: calc(138 / 238 * 100%);
  top: calc(65 / 238 * 100%);
  left: calc(-10 / 238 * 100%); 
}

.hud .tip2-carhud .fuel-bar-wrapper svg {
  width: 100%;
  height: 100%;
  display: block; 
}

.hud .tip2-carhud .fuel-icon {
  position: absolute;

  width: calc(18 / 238 * 100%);
  height: calc(18 / 238 * 100%);
  left: calc(25 / 238 * 100%);
  top: calc(205 / 238 * 100%);
  filter: drop-shadow(0 0 2px #000); 
}

#fuel-mask-rect {
  transition: all 0.4s ease-out;
}

#fuel-rect-fill {
  transition: all 0.4s ease-out;
}

.hud .tip2-carhud .speed {
  position: absolute;
  width: calc(244 / 266 * 100%);
  height: calc(240 / 245 * 100%);
  top: calc(5 / 245 * 100%);
  left: calc(22 / 266 * 100%);
}

.hud .tip2-carhud .overlap-6 {
  position: relative;
  width: calc(207 / 244 * 100%);
  height: calc(213 / 240 * 100%);
  left: calc(-3 / 244 * 100%);
}

.hud .tip2-carhud .overlap-6 svg {
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0;
  left: 0;
  display: block;
}

.hud .tip2-carhud .carspeed {
  position: absolute;
  top: 5.83vh;
  left: 2.97vw;
  text-shadow: 1px 1px 4px #00000099;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  color: white;
  font-size: 6.94vh;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hud .tip1-carhud .text-wrapper-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-family: "Roboto", Helvetica;
  font-weight: 900;
  font-size: 3.7vh; 
  line-height: 1;
  text-shadow: 1px 1px 4px #00000099;
  color: white;
  position: relative;
  white-space: nowrap;
}

.hud .tip1-carhud .zero-digit {
  opacity: 0.2;
}

.hud .tip2-carhud .speedtype {
  position: absolute;
  top: 12.96vh;
  left: 5.52vw;
  text-shadow: 1px 1px 4px #00000099;
  font-family: "Roboto", Helvetica;
  font-weight: 500;
  color: #ffffff80;
  font-size: 1.39vh;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}


.hud .tip2-carhud .car-info {
  position: absolute;

  width: calc(127 / 266 * 100%);
  height: calc(25 / 245 * 100%);
  top: calc(166 / 245 * 100%);
  left: calc(78 / 266 * 100%);
}

.hud .tip2-carhud .seatbelt,
.hud .tip2-carhud .engine,
.hud .tip2-carhud .light,
.hud .tip2-carhud .speedometer {
  position: absolute;
  width: calc(33 / 127 * 100%);
  height: calc(28 / 25 * 100%);
}

.hud .tip2-carhud .seatbelt {
  top: calc(-1 / 25 * 100%);
  left: calc(-3 / 127 * 100%);
}

.hud .tip2-carhud .engine {
  top: 0;
  left: calc(33 / 127 * 100%);
}

.hud .tip2-carhud .light {
  top: calc(-1 / 25 * 100%);
  left: calc(68 / 127 * 100%);
}

.hud .tip2-carhud .speedometer {
  top: calc(-1 / 25 * 100%);
  left: calc(100 / 127 * 100%);
}

.hud .tip3-carhud {
  position: absolute;
  width: calc(285 / 1920 * 100vw);
  height: calc(111 / 1080 * 100vh);
  top: calc(50 / 1080 * 100vh);
  left: calc(245 / 1920 * 100vw);
}

.hud .tip3-carhud .overlap-3 {
  position: absolute;
  width: calc(134 / 285 * 100%);
  height: calc(102 / 111 * 100%);
  top: calc(14 / 111 * 100%);
  left: calc(27 / 285 * 100%);
}

.hud .tip3-carhud .speed {
  position: absolute;
  width: calc(158 / 134 * 100%);
  height: calc(13 / 102 * 100%);
  top: calc(92 / 102 * 100%);
  left: 0;
}

.hud .tip3-carhud .speed svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hud .tip3-carhud .car-speed {
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 1px 1px 3px #000000;
  font-family: "TT Norms Pro-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 7.59vh;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.zero-digit {
  color: rgba(255, 255, 255, 0.548);
}

.tip3-carhud .speed rect:nth-of-type(2) {
  transition: width 0.3s ease-in-out;
}

.hud .tip3-carhud .fuel {
  position: absolute;
  width: calc(22 / 285 * 100%);
  height: calc(111 / 111 * 100%);
  top: 0;
  left: 0;
}

.hud .tip3-carhud .fuel svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hud .tip3-carhud .fuel-icon {
  position: absolute;
  width: calc(22 / 22 * 100%);
  height: calc(22 / 111 * 100%);
  top: calc(-20 / 111 * 100%);
  left: calc(2 / 22 * 100%);
  pointer-events: none;
}

.hud .tip3-carhud .car-info {
  position: absolute;
  width: calc(120 / 285 * 100%);
  height: calc(85 / 111 * 100%);
  top: calc(21 / 111 * 100%);
  left: calc(167 / 285 * 100%);
}

.hud .tip3-carhud .speedtype {
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 1px 1px 3px #000000;
  font-family: "TT Norms Pro-Bold", Helvetica;
  font-weight: 700;
  color: #ffffffbf;
  font-size: 4.44vh;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}


.hud .tip3-carhud .seatbelt,
.hud .tip3-carhud .engine,
.hud .tip3-carhud .light,
.hud .tip3-carhud .speedometer {
  position: absolute;
  width: calc(29 / 120 * 100%);
  height: calc(25 / 85 * 100%);
}

.hud .tip3-carhud .seatbelt {
  top: calc(60 / 85 * 100%);
  left: calc(3 / 120 * 100%);
}

.hud .tip3-carhud .engine {
  top: calc(61 / 85 * 100%);
  left: calc(34 / 120 * 100%);
}

.hud .tip3-carhud .light {
  top: calc(60 / 85 * 100%);
  left: calc(64 / 120 * 100%);
}

.hud .tip3-carhud .speedometer {
  top: calc(60 / 85 * 100%);
  left: calc(91 / 120 * 100%);
}


.hud .social-hud {
  display: none;
  position: absolute;
  bottom: 16.2vh;
}

.hud .social-hud .armor,
.hud .social-hud .health {
  position: absolute;
  width: 12.86vw;
  height: 2.78vh;
  left: 0;
}

.hud .social-hud .armor { top: 4.63vh; }
.hud .social-hud .health { top: 0; }

.hud .social-hud .info-icon,
.hud .social-hud .info-icon-2 {
  position: absolute;
  width: 1.56vw;
  height: 2.78vh;
  top: 0;
  left: 0;
}

.hud .social-hud .bar-svg {
  position: absolute;
  top: 0.93vh;
  left: 2.4vw;
  width: 10.42vw;
  height: 0.93vh;
}

.hud .social-hud .overlap {
  position: absolute;
  width: 10.47vw;
  height: 0.93vh;
  top: 0.93vh;
  left: 2.4vw;
}

.hud .social-hud .tip1-sosyal {
  display: block;
}

.hud .social-hud .tip2-sosyal {
  display: none;
}

.hud .social-hud .tip3-sosyal {
  display: none;
}

.hud .social-hud .tip1-sosyal .hunger,
.hud .social-hud .tip1-sosyal .thirst,
.hud .social-hud .tip1-sosyal .stamina {
  position: absolute;
  width: 3.75vw;
  height: 4.72vh;
}

.hud .social-hud .tip1-sosyal .hunger { top: 9.26vh; left: 0.21vw; }
.hud .social-hud .tip1-sosyal .thirst { top: 9.07vh; left: 4.69vw; }
.hud .social-hud .tip1-sosyal .stamina { top: 9.07vh; left: 9.38vw; }

.hud .social-hud .tip1-sosyal .text-wrapper {
  position: absolute;
  top: 1.39vh;
  left: 2.6vw;
  color: #ffffff;
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  font-size: 1.11vh;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  z-index: 2;
}

.hud .social-hud .tip1-sosyal .overlap {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: -0.19vh;
  left: -0.05vw;
  z-index: 2;
}

.hud .social-hud .tip1-sosyal .info-icon,
.hud .social-hud .tip1-sosyal .info-icon-2,
.hud .social-hud .info-icon-3 {
  position: absolute;
  width: 1.04vw;
  height: 1.85vh;
  top: 1.11vh;
  left: 0.63vw;
  z-index: 2;
}

.hud .social-hud .tip1-sosyal .back,
.hud .social-hud .tip1-sosyal .front {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: 0;
  left: 0;
}

.hud .social-hud .tip1-sosyal .back {
  width: 2.19vw;
  height: 3.89vh;
}

.hud .social-hud .tip1-sosyal .overlap-2 {
  position: absolute;
  width: 2.24vw;
  height: 3.98vh;
  top: -0.19vh;
  left: -0.10vw;
}

.hud .social-hud .tip1-sosyal .info-percentage {
  position: absolute;
  top: 1.11vh;
  left: 2.45vw;
  font-family: "TT Norms Pro-Bold", Helvetica;
  font-weight: 700;
  font-size: 1.30vh;
  color: #ffffffb2;
  text-shadow: 1px 1px 4px #000000;
}

.hud .social-hud .tip2-sosyal .hunger,
.hud .social-hud .tip2-sosyal .thirst,
.hud .social-hud .tip2-sosyal .stamina {
  position: absolute;
  width: 3.75vw;
  height: 4.72vh;
}

.hud .social-hud .tip2-sosyal .hunger { top: 9.26vh; left: 0.21vw; }
.hud .social-hud .tip2-sosyal .thirst { top: 9.07vh; left: 4.69vw; }
.hud .social-hud .tip2-sosyal .stamina { top: 9.07vh; left: 9.38vw; }

.hud .social-hud .tip2-sosyal .text-wrapper {
  position: absolute;
  top: 30%;
  left: 90%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "TT Norms Pro-Bold", Helvetica;
  font-weight: 700;
  font-size: 1.11vh;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  z-index: 2;
}

.hud .social-hud .tip2-sosyal .overlap {
  position: absolute;
  width: 2.6vw;
  height: 4.63vh;
  top: -0.19vh;
  left: -0.05vw;
}

.hud .social-hud .tip2-sosyal .info-icon,
.hud .social-hud .tip2-sosyal .info-icon-2 {
  position: absolute;
  width: 1.04vw;
  height: 1.85vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hud .social-hud .tip2-sosyal .front {
  position: absolute;
  width: 2.6vw;
  height: 4.63vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.hud .social-hud .tip2-sosyal .back {
  position: absolute;
  width: 2.6vw;
  height: 4.63vh;
  top: 0;
  left: 0;
  z-index: 1;
}

.hud .social-hud .tip2-sosyal .front circle {
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.5s ease;
  stroke-linecap: butt;
}

.hud .social-hud .tip3-sosyal .hunger,
.hud .social-hud .tip3-sosyal .thirst,
.hud .social-hud .tip3-sosyal .stamina {
  position: absolute;
  width: 3.75vw;
  height: 4.72vh;
}

.hud .social-hud .tip3-sosyal .hunger { top: 9.26vh; left: 0.21vw; }
.hud .social-hud .tip3-sosyal .thirst { top: 9.07vh; left: 4.69vw; }
.hud .social-hud .tip3-sosyal .stamina { top: 9.07vh; left: 9.38vw; }

.hud .social-hud .tip3-sosyal .text-wrapper {
  position: absolute;
  top: 30%;
  left: 80%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "Roboto", Helvetica;
  font-weight: 700;
  font-size: 1.11vh;
  text-shadow: 1px 1px 4px #00000099;
  white-space: nowrap;
  z-index: 2;
}

.hud .social-hud .tip3-sosyal .overlap {
  position: absolute;
  width: 2.08vw;
  height: 3.70vh;
  top: 0;
  left: 0;
  overflow: hidden;
}

.hud .social-hud .tip3-sosyal .back {
  position: absolute;
  width: 2.08vw;
  height: 3.70vh;
  top: 0;
  left: 0;
  z-index: 1;
}

.hud .social-hud .tip3-sosyal .front {
  position: absolute;
  width: 2.08vw;
  height: 3.70vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.hud .social-hud .tip3-sosyal .front rect {
  transform-origin: bottom;
  transition: transform 0.6s ease;
}

.hud .social-hud .tip3-sosyal .info-icon,
.hud .social-hud .tip3-sosyal .info-icon-2 {
  position: relative;
  width: 1.04vw;
  height: 1.85vh;
  top: 50%;
  left: 50%;
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(0, 0, 0, 0.89));
  transform: translate(-50%, -50%);
  z-index: 3;
}

.speak {
  position: absolute;
  width: 4vh;
  height: 4vh;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 1vh;
  top: 50%;
  left: 1vw;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.speak .range-bar {
  width: 40%;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: height 0.3s ease;
}

.speak .range-fill {
  width: 100%;
  height: 0%;
  background-color: white;
  transition: height 0.3s ease;
  border-radius: 999px;
}

.speak .microphone-icon {
  width: 60%;
  height: auto;
  transition: transform 0.3s ease;
  margin-top: 0;
  transition: margin 0.3s ease, transform 0.3s ease;
  opacity: 0.6;
}

.weapon-info {
  display: none;
  position: absolute;
  width: 8vh;
  height: 8vh;
  border-radius: 1vh;
  background: rgba(16, 16, 16, 0.65);
  top: 45%;
  right: -2.0vh;
  transform: translateX(-50%); 
  flex-direction: column;
  align-items: center;
  padding-top: 1vh;
  box-sizing: border-box;
}

.weapon-info .weapon-image {
  width: 7vh;
  height: 3vh;
  object-fit: contain;
  margin-bottom: 0.5vh;
}

.weapon-info .ammo-container {
  display: flex;
  margin-top: 1vh;
  gap: 0.5vh; 
}

.weapon-info .current-ammo, 
.weapon-info .total-ammo {
  font-family: "Roboto", Helvetica;
  font-size: 1.4vh;
  font-weight: 900;
  line-height: normal;
  color: #FFF;
}

.weapon-info .total-ammo {
  color: #7D7D7D;
}

.hud-settings {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  font-family: "Inter", sans-serif;
  background-color: transparent;
  z-index: 9999;
}

.hud-settings .overlap-wrapper {
  width: 48.0vw;
  height: 60.63vh;
  position: relative;
}

.hud-settings .overlap {
  position: relative;
  width: 48.0vw;
  height: 60.63vh;
  background: rgba(17, 23, 43, 0.85);
  border: 0.052vw solid #2f375f;
  border-radius: 0.83vh;
  box-shadow: 0 0.69vh 1.74vh rgba(0, 0, 0, 0.3);
  padding: 1.74vh 2.60vw;
  box-sizing: border-box;
}

.hud-settings .option-item {
  width: 100%;
  height: 3.7vh;
  display: flex;
  align-items: center;
  margin-bottom: 1.67vh;
}

.hud-settings .option-item .label {
  margin-left: 0.78vw;
  font-weight: 500;
  color: #f5f5f5;
  font-size: 1.85vh;
  white-space: nowrap;
}

.hud-settings .option-item .checkbox {
  width: 1.82vw;
  height: 1.82vw;
  background-color: #c190f2;
  border-radius: 0.31vw;
}

.hud-settings .header-text {
  font-weight: 800;
  color: #ffffff;
  font-size: 2.59vh;
  letter-spacing: 1px;
  margin-bottom: 2.22vh;
}

.hud-settings .subtext {
  font-weight: 600;
  opacity: 0.7;
  font-size: 1.70vh;
  letter-spacing: 2px;
  margin-bottom: 3.70vh;
}

.hud-type {
  display: flex;
  align-items: center;
  margin-bottom: 1.5vh; 
}

.hud-type .label {
  width: 13vw; 
  font-weight: 600;
  font-size: 1.85vh;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 1vw;
}

.hud-type .option {
  cursor: pointer;
  margin-right: 1vw; 
  border-radius: 0.42vw;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.hud-type .option:hover {
  background-color: #b893e0;
  transform: scale(1.05);
  border-radius: 0.42vw;
}

.hud-type .box {
  width: 2.29vw;
  height: 2.29vw;
  background-color: #c190f2;
  border-radius: 0.42vw;
  border: 0.078vw solid #936cbc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.04vh;
  color: #fff;
  user-select: none;
  box-shadow: none;
}

.hud-type .box.selected {
  background-color: #936cbc;
  border-color: #c190f2;
  transform: scale(1.07);
}


.hud-settings .save-button,
.hud-settings .reset-button,
.hud-settings .cinematic-button {
  position: absolute;
  border-radius: 1.11vh;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.hud-settings .save-button {
  width: 7.92vw;
  height: 5.56vh;
  background-color: #3a9f31;
  bottom: 3.70vh;
  right: 2.08vw;
}

.hud-settings .save-button:hover {
  background-color: #2e7d26;
}

.hud-settings .reset-button {
  width: 3.08vw;
  height: 5.56vh;
  background-color: #9f3131;
  bottom: 3.70vh;
  right: 10.94vw;
}

.hud-settings .reset-button:hover {
  background-color: #7f2323;
}

.hud-settings .cinematic-button {
  width: 3.08vw;
  height: 5.56vh;
  background-color: #2b2b2b;
  bottom: 3.70vh;
  right: 14.58vw;
}

.hud-settings .cinematic-button:hover {
  background-color: #1e1e1e;
}

.hud-settings .save-button .text {
  font-weight: 800;
  font-size: 2.04vh;
  color: #fff;
  padding-left: 0.52vw;
}

.hud-settings .button-icon {
  width: 1.56vw;
  height: 1.56vw;
}

.hud-settings .custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.hud-settings .custom-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.hud-settings .custom-checkbox .box {
  width: 1.82vw;
  height: 1.82vw;
  background-color: #c190f2;
  border-radius: 0.31vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85vh;
  color: white;
  font-weight: bold;
  transition: all 0.2s ease;
}

.hud-settings .custom-checkbox input[type="checkbox"]:not(:checked) + .box {
  color: transparent;
  background-color: #4a4064;
}

.hud-settings .custom-checkbox .label {
  font-weight: 500;
  font-size: 1.85vh;
  color: #ffffff;
  margin-left: 0.52vw;
  white-space: nowrap;
}

.hud-settings .close-button {
  position: absolute;
  top: 1.2vh;
  right: 1.6vw;
  font-size: 2.2vh;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
  background-color: #936cbc;
  border: 0.078vw solid #936cbc;
  border-radius: 0.5vh;
  width: 2.9vh;
  height: 2.9vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10000;
}

.hud-settings .close-button:hover {
  border: 0.078vw solid #cc9dff;
  color: #ffffff;
}


#bank,
#cash {
  display: none;
}
#health-fill,
#armor-fill {
  transition: all 0.5s ease;
}