.glow {
  filter: drop-shadow(0 0 4px var(--hud-glow-color))
          drop-shadow(0 0 10px var(--hud-glow-color))
          drop-shadow(0 0 20px var(--hud-glow-color));
}
.glowe {
  filter: drop-shadow(0 0 4px var(--hud-glowe-color))
          drop-shadow(0 0 10px var(--hud-glowe-color))
          drop-shadow(0 0 20px var(--hud-glowe-color));
}
.glowo {
  filter: drop-shadow(0 0 4px var(--hud-glowo-color))
          drop-shadow(0 0 10px var(--hud-glowo-color))
          drop-shadow(0 0 20px var(--hud-glowo-color));
}
.glowb {
  filter: drop-shadow(0 0 4px var(--hud-glowb-color))
          drop-shadow(0 0 10px var(--hud-glowb-color))
          drop-shadow(0 0 20px var(--hud-glowb-color));
}


@font-face {
  font-family: 'HAHAjaHA';
  src: url('font/Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'HAHAjaHA', sans-serif;
  

}

#hud {
    position: relative;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    color: var(--hud-color);
}

#logo-container {
    position: fixed;
    top: 2vh; 
    left: 2vw;
    display: flex;
    align-items: center;
    background: transparent;
}

#logo {
    width: 10vw;
    height: auto; 
    max-width: 180px;
    max-height: 180px;
}

.hud-item {
   background: transparent;
    filter: none;
    text-shadow: none;
    padding: 10px 20px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.money-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
  padding: 6px 12px;
  border-radius: 8px;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
}

.money-top {
  display: flex;
  align-items: center;
  gap: 8px;
    filter: none !important;
}

.icon-left {
  font-size: calc(var(--hud-font-size));
  color: inherit;
}

.money-amount {
  font-weight: 8px;
  font-size: calc(var(--hud-font-size) * 1);
  color: rgb(250, 250, 250);
}

#blackMoneyAmount{
  color: rgb(250, 250, 250);
}

.money-type {
  font-size: calc(var(--hud-font-size) * 0.6);
  font-weight: bold;
}

.money-box.cash {
  color: var(--hud-color);
}

.money-box.bank {
  color: var(--hud-color);
}

.money-box.black {
  color: #ff0000;
}

#money-container {
  position: absolute;
  top: 10vh;
  right: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 18px;
  filter: none !important;
}

.money-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 100px;
}

.icon-right {
  font-size: calc(var(--hud-font-size) * 0.8);
  filter: drop-shadow(0 0 5px currentColor);
}

#bank-money-container {
  position: absolute;
  top: 15vh;
  right: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 18px;
  filter: none !important;
}

#job-container {
  position: absolute;
  top: 24vh;
  left: 1vw;
}

#job-container i {
  font-size: 35px;
}

#job-container .job-rank-block {
  font-size: 23px;
  display: flex;
  flex-direction: column;
  line-height: 1.1em;
}

.job-line {
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.rank-line {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.75);
}

#hungerStatus-container i {
  color: orange;
  font-size: 38px;
}

#thirstStatus-container i {
  color: #00aeff;
  font-size: 38px;
}

#hungerStatus-container {
  position: absolute;
  top: 78vh;
  left: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 18px;
  filter: none !important;
}

#thirstStatus-container {
  position: absolute;
   top: 78vh;
  left: 9vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 18px;
  filter: none !important;
}

#black-money-container {
  position: absolute;
  top: 20vh;
  right: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 18px;
  filter: none !important;
}

.id-label {
  color: white !important;
  font-weight: bold;
}

#player-id-container {
  position: absolute;
  top: 11vh;
  left: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
 font-size: 25px;
  filter: none !important;
}

#playerCount-container i {
  font-size: 25px;
  color: var(--hud-color);
}

#playerCount-container {
  position: absolute;
   font-size: 25px;
  top: 7vh;
  left: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 10px;
  color: white !important;  filter: none !important;
}

#player-count {
   font-size: 25px;
  color: gray;
  font-weight: bold;
}

#max-players {
  color: white;
  font-weight: bold;
  font-size: 25px;
}

#player-id {
  color: white;
  font-weight: bold;
}



.hud-item i {
    margin-right: 10px;
}

.design-mode .hud-item,
.design-mode #hud-settings-header {
  cursor: move;
}

.dragging {
  cursor: grabbing !important;
  opacity: 0.8;
}

#hud-settings {
  background: rgba(var(--hud-color), 0.247);
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  font-family: 'HAHAjaHA', sans-serif;
}
  
#hud-settings label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}
  
#hud-settings label input {
  margin-right: 0.5rem;
}
  
#hud-settings h2 {
    margin-top: 0;
}

#hud-settings button {
    font-family: 'HAHAjaHA', sans-serif;
    margin-top: 10px;
    padding: 5px 10px;
    background: rgba(var(--hud-color), 0.26);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.design-mode *,
.dragging {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}

#hud-settings,
#hud-settings * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}

.announce-container {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.announce-box {
  background: rgba(0, 174, 255, 0.053);
  border: 2px solid #00aeff;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  font-size: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 174, 255, 0.6);
  flex-direction: row;
}

.announce-box i {
  font-size: 32px;
  color: #00aeff;
  margin-top: 4px;
}

.announce-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0px;
}

.announce-content strong {
  color: #00aeff;
  font-size: 24px;
}

.announce-content span {
  font-size: 18px;
  line-height: 22px;
}

.announce-bar {
  height: 4px;
  background: #00aeff;
  width: 100%;
  margin-top: 10px;
  animation: barShrink linear;
  animation-duration: var(--duration, 10s);
}

@keyframes barShrink {
  from { width: 100%; }
  to { width: 0%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#press-e-container {
  position: fixed;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 9999;
  pointer-events: none;
}

#press-e-container {
  position: fixed;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 9999;
  pointer-events: none;
}

#press-e-letter {
  font-family: 'HAHAjaHA', sans-serif;
  font-size: 96px;
  color: #ffffffb1;
  filter: drop-shadow(0 0 30px #00aeff) drop-shadow(0 0 60px #00aeff);
  text-shadow:
    0 0 20px #00ffff,
    0 0 40px #00ffff,
    0 0 80px #00ffff,
    0 0 160px #00ffff,
    0 0 240px #00ffff,
    0 0 300px #00ffff;
  animation: glow 1.8s infinite alternate;
}

@keyframes glow {
  from {
    opacity: 0.7;
    text-shadow:
      0 0 80px #00ffff,
      0 0 160px #00ffff;
  }
  to {
    opacity: 1;
    text-shadow:
      0 0 160px #00ffff,
      0 0 300px #00ffff;
  }
}

#dateTime-container {
  position: absolute;
  top: 2vh;
  left: 1vw;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
  border-radius: 10px;
  color: white;
}

#dateTime-inner {
  display: flex;
  flex-direction: column;
  line-height: 1.2em;
}

#dateTime-container i {
  font-size: 35px;
  color: var(--hud-color);
}

.date-style {
  font-weight: bold;
  font-size: 22px;
}

.time-style {
  font-size: 18px;
  color: #cccccc;
}

#serverName-container {
  font-size: 40px;
  position: absolute;
  top: 2vh;
  left: 2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: bold;
  font-family: 'HAHAjaHA', sans-serif;
  line-height: 1;
  text-shadow: 1px 1px 2px black;
}

.server-name-line1 {
  font-size: 40px;
  letter-spacing: 1px;
  display: flex;
  flex-direction: row;
}

.server-name-line2 {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 2px;
  margin-top: 4px;

  /* Zentrieren */
  align-self: center;
  text-align: center;
  width: 100%;
}

.server-part1 {
  color: white;
}

.server-part2 {
   color: rgba(var(--hud-color-rgb));
}

#micStatus-container {
  position: absolute;
  top: 8vh;
  right: 7vw;
  font-size: 35px;
}

#mic-range-indicator {
  margin-left: 2px;
  letter-spacing: 2px;
  color: rgba(128, 128, 128, 0.34);
}

#mic-range-indicator .active {
  color: var(--hud-color);
}

#mic-icon.talking {
  color: #00ff00;
}

#mic-icon.disconnected {
  color: red;
  text-decoration: line-through;
}

#mic-icon {
  transition: color 0.2s ease;
}

#progressbar-label {
  margin-bottom: 5px;
}

#progressbar-blocks {
  display: flex;
  gap: 2px;
}

.progress-block {
  width: 22px;
  height: 65px;
  background-color: rgba(128, 128, 128, 0.269);
  border-radius: 5px;
}

.progress-block.active {
  background-color: var(--hud-color);
}

#safezone-container {
  position: absolute;
  top: 1vh;
  right: 2vw;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--hud-color);
  color: greenyellow;
  font-weight: bold;
  filter: none !important;
  text-shadow: none;
  width: fit-content;
  max-width: 10vw;
  white-space: nowrap;
  border: 2px solid rgba(0, 255, 0, 0.247);
  background-color: rgba(196, 175, 175, 0.075);
  border-radius: 50;
  
}

#keybinds-container {
  position: absolute;
  top: 35vh;
  left: 1vw;
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 99;
}

.keybind-entry {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 20px;
  color: white;
  text-shadow: 0 0 3px black;
  width: 130px;
}

.keybind-entry i {
  width: 45px;
  height: 45px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  flex-shrink: 0;
}

.key {
  width: 40px;
  text-align: center;
  font-weight: bold;
}

/*#keybinds-container { display: flex; }  sichtbarkeit wird durch js geregelt */

#progressbar-container {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  font-family: 'HAHAjaHA', sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: white;
  text-shadow: 1px 1px 2px black;
  z-index: 9999;
}

#progressbar-label {
  margin-bottom: 5px;
  font-size: 20px;
  text-transform: uppercase;
}

#progressbar-bar {
  display: flex;
  align-items: center;
}

#progressbar-blocks {
  display: flex;
  gap: 8px;
}

.progress-block {
  width: 18px;
  height: 40px;
  background-color: rgba(128, 128, 128, 0.3);
  border-radius: 3px;
}

.progress-block.active {
  background-color: var(--hud-color);
}

#progressbar-percent {
  margin-left: 10px;
  font-size: 20px;
  color: white;
}

.dot-indicator {
  letter-spacing: 5px;
  font-size: 18px;
  color: gray;
}

.dot-indicator .active {
  color: var(--hud-color);
}

.bar {
  display: flex;
  gap: 2px;
  margin-left: 10px;
}

.bar-block {
  width: calc(var(--hud-font-size) * 0.45);
  height: calc(var(--hud-font-size) * 0.7);
  border-radius: 3px;
  margin-right: 2px;
  background-color: rgba(255, 255, 255, 0.349);
}

.bar-block.active.hunger {
  background-color: rgba(255, 166, 0, 0.637);
}

.bar-block.active.thirst {
  background-color: #00aeff73;
}

.status-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.percent {
  font-weight: bold;
  font-size: 0px;
  color: white;
}

.status-bar-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

#speed-container {
  position: absolute;
  bottom: 3vh;
  right: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hud-font-size) * 0.3);
  color: white;
  font-size: 18px;
}

#speed-text-block {
  display: flex;
  align-items: baseline;
  gap: calc(var(--hud-font-size) * 0.3);
}

#speed-text-block #speed-text {
  font-size: calc(var(--hud-font-size) * 2.2);
  font-weight: 900;
  color: white;
}

#speed-text-block #speed-unit {
  font-size: 18px;
  color: #ccc;
  font-weight: bold;
}

#speed-bar {
  display: flex;
  gap: calc(var(--hud-font-size) * 0.15);
  height: calc(var(--hud-font-size) * 1.1);
}

#speed-bar .segment {
  width: calc(var(--hud-font-size) * 0.5);
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

#speed-bar .segment.active {
  background: red;
   filter: drop-shadow(0 0 4px var(--hud-glowe-color))
          drop-shadow(0 0 10px var(--hud-glowe-color))
          drop-shadow(0 0 20px var(--hud-glowe-color));
}

#vehicle-status-icons {
  display: flex;
  align-items: center;
  gap: calc(var(--hud-font-size) * 0.4);
  margin-top: calc(var(--hud-font-size) * 0.2);
  font-size: 18px;
}

#vehicle-status-icons i {
  font-size: 18px;
  color: gray;
}

#vehicle-status-icons i.active {
  color: #00ff00;
}

#fuel-strip-container {
  width: calc(var(--hud-font-size) * 4.5);
  height: calc(var(--hud-font-size) * 0.33);
  background: #444;
  border-radius: 3px;
  overflow: hidden;
}

#fuel-strip {
  height: 100%;
  background: orange;
   filter: drop-shadow(0 0 4px var(--hud-glowo-color))
          drop-shadow(0 0 10px var(--hud-glowo-color))
          drop-shadow(0 0 20px var(--hud-glowo-color));
  width: 100%;
  transition: width 0.2s ease-in-out;
}



#modern-notify {
  position: absolute;
  top: 50%;
  left: 2vw;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.65);
  border-radius: 8px;
  border-left: 4px solid var(--hud-color);
  padding: 12px 18px;
  color: white;
  font-size: var(--hud-font-size);
  min-width: 260px;
  max-width: 400px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--hud-color-rgb), 0.6);
  text-shadow: 0 0 5px rgba(var(--hud-color-rgb), 0.7);
  animation: slideIn 0.4s ease-out;
  z-index: 9999;
  overflow: hidden;
}

.notify-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 6px;
}

.notify-header i {
  font-size: 18px;
  margin-right: 8px;
  color: var(--hud-color);
}

.notify-tag {
  background: var(--hud-color);
  color: black;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

.notify-body #notify-message {
  font-size: 25px;
  margin-bottom: 4px;
}

.notify-body #notify-footer {
  font-size: 18px;
  color: #ccc;
}

.notify-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--hud-color);
  filter: drop-shadow(0 0 4px var(--hud-glow-color))
          drop-shadow(0 0 10px var(--hud-glow-color))
          drop-shadow(0 0 20px var(--hud-glow-color));
  transform-origin: left;
  animation: notifyBar linear forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes notifyBar {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
#mic-icon.talking {
  color: #00ff00;
}

#mic-icon.disconnected {
  color: red;
  text-decoration: line-through;
}

#mic-range-indicator .active {
  color: var(--hud-color);
}