:root {
  --left-msg-bg: #ccedf9;
  --right-msg-bg: #e8f4d9;
}

@font-face {
  font-family: 'Roboto';
  src: url('Assets/Roboto-VariableFont_wdth\,wght.ttf') format('truetype'),
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  background-color: #333;
}

#game-container {
  position: relative;
  /* width: 85vw; Dynamisch basierend auf der Viewport-Breite */
  height: 99vh;
  /* max-width: 1200px; Maximalbreite */
  aspect-ratio: 16 / 9; /* Seitenverhältnis für Hintergrund */
  margin: auto;
  background-color: #333;
  overflow: hidden;
}

.footer {
  position: relative;
  background: #666;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: white;
  width: 100%;
  z-index: 10000;
  font-family: Roboto;
  pointer-events: none;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Roboto;
}

.menu-item {
  background: #666;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  transition: background 0.3s;
}

.menu-item:hover {
  cursor: pointer;
  background: #888;
}

#background {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Anpassung des Hintergrundbildes */
}

/* Interaktive Objekte */
.object,
.keyboard {
  position: absolute;
  transform-origin: center;
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.object img,
.keyboard img {
  display: block;
  width: 100%; /* Dynamisch durch Container gesteuert */
  height: auto;
}

/* Hover-Effekt */
.object:hover {
  transform: scale(1.1); /* Größenzunahme beim Hover */
  cursor: pointer;
}
/* Modal-Hintergrund */
#modal,
#filemodal,
#mailsendmodal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7); /* Halbtransparenter Hintergrund */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0; /* Unsichtbar */
  pointer-events: none; /* Klicks verhindern */
  transition: opacity 0.3s ease; /* Fade-In-Effekt für den Hintergrund */
}

/* Modal wird sichtbar */
#modal.visible,
#filemodal.visible,
#mailsendmodal.visible {
  opacity: 1;
  pointer-events: auto;
}

#back {
  cursor: pointer;
  margin-left: 20px;
  padding: 10px;
  margin-top: 10px;
}

.renderedMail {
  padding: 30px;
  font-family: Roboto;
  height: 80%;
}

.mailTimestamp {
  float: right;
}

.mail-modal {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  z-index: 1000;
  height: 55%;
}

.mail-modal-content {
  /* padding: 15px; */
}

.mail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #00a99d !important;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
}

.file-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #aad4c8 !important;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
}

.closeMailModal,
.closeFileModal {
  cursor: pointer;
  font-size: 20px;
}

#mailModal {
  text-wrap: wrap;
  display: none;
  position: absolute; /* Wird relativ zum main-Element positioniert */
  top: 10%;
  left: 0;
  width: 100%; /* Modal nimmt die volle Breite des main-Elements ein */
  height: 90%; /* Modal nimmt die volle Höhe des main-Elements ein */
  background: white; /* Halbtransparenter Hintergrund */
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.mail-modal-body input,
.mail-modal-body textarea {
  width: 100%;
  margin-top: 5px;
  padding: 8px;
  border: none;
}

.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 15px;
}

#mailTo,
#mailSubject,
#mailMessage {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
}

#mailMessage {
  width: 97%;
  height: 23vh;
}

.mail-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  background-color: gray;
}

#sendMail {
  background: #00a99d;
  color: white;
  padding: 8px 22px;
  border: none;
  cursor: pointer;
}

#trashMail {
  font-size: 1.5rem;
  padding-top: 5px;
  padding-left: 15px;
  cursor: pointer;
  color: white;
}

.file-modal {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72vw;
  height: 75vh;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  z-index: 1000;
  font-family: 'Roboto';
}

/* Modal-Inhalt */
.modal-content {
  position: relative;
  background: rgba(255, 255, 255, 0.867);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  transition: none; /* Keine Animation direkt nach dem Laden */
  width: 80vw;
  height: 40vh;
}

/* Modal sichtbar mit popup */
#modal-body {
  /* animation: popup 0.5s ease; */
}

#modal-body {
  padding-top: 1.5%;
  width: 100%;
  height: 88%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Button */
#modal-close,
#modal-back {
  margin-top: 15px;
  padding: 10px 20px;
  margin: 5px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  /* transform: translateY(
      75vh
    ); Startpunkt initial außerhalb des Sichtbereichs */
  /* animation: slide-in 0.5s ease forwards; */
  animation-delay: 0.3s; /* Verzögerung für den Button */
  opacity: 1; /* Unsichtbar bis Animation startet */
}

#modal-close:hover,
#modal-back:hover {
  background: #0056b3;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 20%;
  gap: 20px;
}

.slides-container {
  height: 80%;
}

.tutorial-image-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
  text-align: left;
  font-size: 16px;
  padding-left: 45px;
  padding-right: 120px;
}

.tutorial-image-text img {
  max-width: 50%;
  max-height: 400px;
}

.tutorial-modal {
  font-family: Roboto;
  max-width: 1250px;
  width: 80vw;
  height: 60vh;
}

#nextBtn,
#prvBtn {
  background: none;
  border: none;
  outline: none;
  font-size: 30px;
  color: green;
}

#nextBtn:hover,
#prvBtn:hover {
  cursor: pointer;
}

#prvBtn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* Modal-Inhalt für PC-Oberfläche */
/* Modal für PC */
.displays {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.screen1 {
  transform: rotate(-2deg);
}
.screen2 {
  transform: rotate(2deg);
}

#modal.pc {
  width: 80vw;
  height: 80vh;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-button-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-background {
  width: 100%;
  height: 118%;
  /* background: url("Assets/2-thinkphone-pdp-ecom-render-5-carbon-black-qq6n0fna.png")
    no-repeat center center; */
  background-size: contain;
  /* position: relative; */
  margin-bottom: 1.5%;
}

.callAndBackBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialer-background {
  position: absolute;
  top: 46%;
  left: 50%;
  height: 100vh;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.monitor-background {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 90vh;
  width: auto;
  max-width: 90vw;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.phone-folder {
  width: 65px;
  height: 65px;
  /* background: url("Assets/folder-icon-512x410-jvths5l6.png") */
  /* no-repeat center center; */
  background-size: contain;
  /* position: absolute; */
  cursor: pointer;
  transition: transform 0.2s ease;
}

.phone-folder:hover {
  transform: scale(1.2);
}

.callingImg {
  width: clamp(100px, 15vw, 150px);
  height: clamp(100px, 15vw, 150px);
  min-width: 100px;
  min-height: 100px;
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

#phonecall,
#startphonecall {
  display: none;
  height: 100%;
  /* background-color: #333; */
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
}

.inactivePhoneButton {
  background-color: red !important;
  pointer-events: none;
  background-image: none;
  color: #fff;
  border-radius: 50%;
  width: clamp(40px, 6vw, 55px);
  height: clamp(40px, 6vw, 55px);
  min-width: 40px;
  min-height: 40px;
  max-width: 55px;
  max-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.8rem, 1.2vw, 1.5rem);
  margin: 1vh auto 0;
  cursor: pointer;
  transition: background-color 0.2s;
  transform: rotate(135deg);
}

.numberText {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.acceptCallKey {
  color: white;
  width: clamp(50px, 8vw, 75px) !important;
  height: clamp(50px, 8vw, 75px) !important;
  min-width: 50px;
  min-height: 50px;
  max-width: 75px;
  max-height: 75px;
}

.calling-number {
  z-index: 9;
}

.callText {
  height: 50%;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  margin-bottom: 3vh;
  font-family: Roboto;
  font-weight: 900;
  z-index: 9;
  /* background: radial-gradient(
    ellipse at center,
    rgba(50, 50, 50, 0.8) 0%,
    rgba(50, 50, 50, 0.8) 70%,
    rgba(50, 50, 50, 0) 100%
  ); */
}

.whatsapp-logo {
  background: url("Assets/chatSnatch.png") no-repeat center center;
  background-size: contain;
}

/* Grundlegende Styles */
.whatsapp-dialer {
  position: relative;
}

.whatsapp-mobile-chat-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.whatsapp-mobile-chat-sidebar {
  width: 250px;
  background: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 20px;
  display: block;
}

.whatsapp-chat-window {
  height: 98%;
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8); /* Ausgegraut */
  /* padding: 20px; */
  position: relative;
  display: flex;
  flex-direction: column;
}

.whatsapp-back-button {
  position: absolute;
  top: -18px;
  left: 10px;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

#whatsapp-chatSidebar.whatsapp-hidden {
  display: none;
}

#whatsapp-chatWindow.whatsapp-show {
  display: block;
}

#whatsapp-chatWindow.whatsapp-hidden {
  display: none;
}

#whatsapp-chatWindow.whatsapp-show {
  display: block;
}

.apple-phone-logo {
  background: url("Assets/telefonIcon.png") no-repeat center center;
  background-size: contain;
}

/* PC-Hintergrund */
.pc-background {
  width: 100%;
  height: 100%;
  /* background: url("Assets/arbeitsplatz/monitor front.png") no-repeat center */
  /* center; */
  background-size: contain;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
  font-size: 0.6rem;
  text-wrap: nowrap;
  /* text-align: center; */
  overflow: hidden;
}

/* Ordner */
.pc-folder {
  width: 4vw;
  height: 4vw;
  min-width: 30px;
  min-height: 30px;
  max-width: 60px;
  max-height: 60px;
  background: url("Assets/folder-icon-512x410-jvths5l6.png") no-repeat center
    center;
  background-size: contain;
  position: absolute;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Scale with background image */
  transform-origin: center;
}

.pc-folder:hover {
  transform: scale(1.2);
}

.dot {
  z-index: 99;
}

.mailDot,
.teamzDot {
  background-color: red;
  width: 1.2vw;
  height: 1.2vw;
  min-width: 8px;
  min-height: 8px;
  max-width: 20px;
  max-height: 20px;
  border-radius: 50%;
  display: none;
}

.mail-inside-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.mail-icon {
  background: url("Assets/outmailIcon.jpg") no-repeat center center;
  background-size: contain;
}
.teams-icon {
  background: url("Assets/TeamZIcon.png") no-repeat center center;
  background-size: contain;
}
.bin-icon {
  background: url("Assets/Recycle_Bin_Empty.png") no-repeat center center;
  background-size: contain;
}
.drive-icon {
  background: url("Assets/icons workdrive/logo-drive.png") no-repeat center
    center;
  background-size: contain;
}
.sheet-icon {
  background: url("Assets/icons workdrive/Dokument.png") no-repeat center center;
  background-size: contain;
}
.prozess-icon {
  background: url("Assets/icons workdrive/prozess icon.png") no-repeat center
    center;
  background-size: contain;
}
/* Fake Programmfenster */
.pc-program-window {
  width: 300px;
  height: 200px;
  background: white;
  border: 2px solid #ccc;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.pc-program-header {
  background: #333;
  color: white;
  padding: 5px;
  font-size: 14px;
}

.pc-program-body {
  padding: 10px;
  font-size: 12px;
}

#clock,
.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url("Assets/arbeitsplatz/alarm side.png") no-repeat center center;
  background-size: contain;
}

#clock .inner-text,
.clock .inner-text {
  margin-left: -4%;
  transform: rotate(4deg);
  margin-bottom: 4%;
  font-family: "Courier New", Courier, monospace;
}

#clock {
  font-size: calc(15vh * 0.27);
}

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(60vh * 0.27);
  height: 60%;
  /*   background: rgb(26, 25, 28); */
  /* border-radius: 30px;
  /*   background-repeat: no-repeat; */
  /* background-image: linear-gradient(
    rgb(14, 14, 15) 0%,
    rgb(26, 25, 28) 20%,
    rgb(44, 44, 52) 50%,
    rgb(20, 20, 27) 100%
  ); */
  /*   border-top: 6px solid rgb(56, 56, 61); */
  /*   border-bottom: 6px solid rgb(59, 59, 65); */
  /* box-shadow: inset 0 -3px 6px 3px rgba(0, 0, 0, 0.2),
    inset 0 4px 8px 3px rgba(0, 0, 0, 0.4),
    0 2px 3px 1px rgba(255, 255, 255, 0.3), 0 -2px 4px 4px rgba(56, 56, 61, 0.5); */
}
.flipper {
  /*   border: 1px solid #c00; */
  position: relative;
  width: 100%;
  min-width: 150px;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1600px;
}
.gear {
  position: absolute;
  top: calc(220px / 3);
  width: 12px;
  height: calc(220px / 3);
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #666666 17%,
    #7f7f7f 52%,
    #7f7f7f 52%,
    #0c0c0c 53%,
    #595959 87%,
    #131313 100%
  );
  outline: 3px solid #000;
  z-index: 99;
  transform-style: preserve-3d;
  transform: translateZ(10px);
  perspective: 0;
}
.gear:nth-child(2) {
  left: calc(100% - 12px);
}
.top,
.bottom {
  box-shadow: 0 6px 6px 1px rgba(0, 0, 0, 0.5),
    0 2px 2px 1px rgba(255, 255, 255, 0.15);
  border-top: 2px solid rgb(102, 103, 110);
  border-bottom: 2px solid #000;
  /*   transition: all 1s ease-in-out; */
}
.top {
  /*   border: 1px solid #c00; */
  position: relative;
  width: 100%;
  height: calc(50% - 15px);
  background-image: linear-gradient(rgb(48, 49, 53) 0%, rgb(56, 57, 62) 100%);
  margin-top: 10px;
  margin-bottom: 5px;
  border-top-left-radius: calc(30px * 0.65);
  border-top-right-radius: calc(30px * 0.65);
}
.bottom {
  position: relative;
  /*   border: 1px solid green; */
  width: 100%;
  height: calc(50% - 15px);
  background-image: linear-gradient(rgb(57, 58, 63) 0%, rgb(65, 65, 71) 100%);
  margin-top: 5px;
  margin-bottom: 10px;
  border-bottom-left-radius: calc(30px * 0.65);
  border-bottom-right-radius: calc(30px * 0.65);
}
.text {
  font-size: 140px;
  display: block;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  line-height: 193px;
  text-align: center;
}
.bottom .text {
  line-height: 0;
}
.top.new,
.bottom.new {
  position: absolute;
  left: 0;
  z-index: 12;
  /*   background: green; */
}
.top.new {
  top: 0;
  z-index: 1;
  /*   backface-visibility: hidden; */
}
.top.new .text {
  backface-visibility: hidden;
}
/* .top.new:before {
    content: "";
    position: absolute;
    top: calc(220px / 3);
    left: 0;
    width: 15px;
    height: calc(220px / 3);
    background: #000;
  }
  .top.new:after {
    content: "";
    position: absolute;
    top: calc(220px / 3);
    right: 0;
    width: 15px;
    height: calc(220px / 3);
    background: #000;
  } */
.bottom.new {
  /*   background: red; */
  position: absolute;
  top: 0;
  height: calc(100% - 0px);
  transform: rotateX(0.5turn);
  /*   backface-visibility: hidden; */
  z-index: 1;
  opacity: 0;
}
.flipper.flipping .top.new {
  transform-origin: bottom center;
  /*   transform: rotateX(-180deg) translateY(-10px); */
  animation: rotate 0.55s 1 ease-in-out forwards;
}
.flipper.flipping .bottom.new {
  animation: rotatebottom 0.55s 1 ease-in-out forwards;
}

/* Label Styling */
.label {
  position: absolute;
  bottom: -30px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1rem;
}

.object .notification {
  /* position: absolute; */
  top: 98%;
  right: 3%;
  /* width: 45px;
  height: 25px; */
  background-color: #333;
  /* border-radius: 50%; */
  border: 1px solid white;
  display: none;
  z-index: 10;
  transform: rotate(2deg);
}

.notification {
  position: absolute;
  top: 61%;
  right: 30%;
  width: 15%;
  /* min-width: 120px; */
  height: 20%;
  background-color: #333;
  border: 1px solid white;
  display: none;
  z-index: 10000;
}

.visible {
  display: block !important;
}

.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 867px;
  margin: 0px 10px;
  height: calc(80% - 162px);
  border: var(--border);
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
}

.msger-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: var(--border);
  background: #1f1f1f;
  color: #666;
}

.msger-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.msger-chat::-webkit-scrollbar {
  width: 6px;
}

.msger-chat::-webkit-scrollbar-track {
  background: #ddd;
}

.msger-chat::-webkit-scrollbar-thumb {
  background: #bdbdbd;
}

.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}

.msg:last-of-type {
  margin: 0;
}

.msg-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}

.msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 15px;
  background: var(--left-msg-bg);
  margin-bottom: 10px;
  width: 60%;
  font-size: 14px;
}

.msg-bubble p{
  text-align: left;
}

.left-msg span{
  display: flex;
  justify-content: flex-start;
}
.right-msg span{
  display: flex;
  justify-content: flex-end;
}

.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.msg-info-name {
  margin-right: 10px;
  font-weight: bold;
}

.msg-info-time {
  font-size: 0.85em;
}

.left-msg .msg-bubble {
  border-bottom-left-radius: 0;
}

.right-msg {
  align-self: flex-end;
  flex-direction: row-reverse;
  background: var(--right-msg-bg);
}

.right-msg .msg-bubble {
  background: var(--right-msg-bg);
  /* color: #fff; */
  border-bottom-right-radius: 0;
}

.right-msg .msg-img {
  margin: 0 0 0 10px;
}

.msger-inputarea {
  display: flex;
  padding: 10px;
  border-top: var(--border);
  background: #eee;
}

.msger-inputarea * {
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 1em;
}

.msger-input {
  flex: 1;
  background: #ddd;
}

.msger-send-btn {
  margin-left: 10px;
  background: rgb(0, 196, 65);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s;
}

.msger-send-btn:hover {
  background: rgb(0, 180, 50);
}

.msger-chat {
  background-color: #1f1f1f;
}

.nextBtn button {
  padding: 10px;
  margin-top: 10px;
}

.nextBtn button:hover {
  cursor: pointer;
}

input {
  height: 4vh;
}

#nextBtn > button {
  margin-right: 8px;
}

.chat-container {
  display: flex;
  height: 75vh;
  width: 80vw;
  color: #35434a;
  max-width: 1000px;
}

.mobile-chat-container {
  width: 100%;
  border-radius: 20px;
  color: black;
  font-family: Roboto;
}

.whatsapp-chat-item {
  display: flex;
  background: #e7e7e7;
  padding: 5px;
  margin-top: 10px;
}
.whatsapp-chat-item img{
  width: 30px;
  height: 30px;
}

.whatsapp-chat-input button{
  margin-top: 16px;
  padding: 8px 16px;
  background-color: #2e3b8e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.whatsapp-chat-container {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: url("Assets/2-thinkphone-pdp-ecom-render-5-carbon-black-qq6n0fna.png")
    no-repeat center center;

  background-size: contain;
}

.whatsapp-chat-sidebar {
  width: 215px;
  background-color: #f4f4f9;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: calc(80% - 50px);
  border-radius: 20px;
  padding: 20px;
}

.dialer {
  width: 100%;
  height: 118%;
  /* background: url("Assets/2-thinkphone-pdp-ecom-render-5-carbon-black-qq6n0fna.png")
    no-repeat center center; */
  background-size: contain;
  margin-bottom: 1.5%;
}

.dialer-container {
  /* background-color: #383838eb; */
  background: url("Assets/voegels.jpg");
  background-size: cover;
  color: white;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 16.4vw;
  height: 74vh;
  /* min-width: 200px;
  min-height: 400px;
  max-width: 300px;
  max-height: 600px; */
  padding: 2vh 2vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: anchor-center;
  z-index: 9;
}

.noPadding {
  padding: 0 !important;
}

.screen {
  /* background-color: #000; */
  position: relative;
  color: white;
  font-size: clamp(1.2rem, 2vw, 2rem);
  border-radius: 10px;
  padding: 1vh 1vw;
  height: 5vh;
  min-height: 40px;
  max-height: 60px;
  margin-bottom: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  font-family: Roboto;
  z-index: 9;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh 1vw;
  min-gap: 8px;
}

.key {
  /* background-color: #e0e0e0; */
  background-image: linear-gradient(
    to bottom right,
    rgba(178, 133, 140, 1),
    rgba(193, 146, 142, 1)
  );
  border-radius: 50%;
  width: clamp(50px, 8vw, 75px);
  height: clamp(50px, 8vw, 75px);
  min-width: 50px;
  min-height: 50px;
  max-width: 75px;
  max-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
  font-family: Roboto;
}

.keyPlaceholder {
  width: clamp(50px, 8vw, 75px);
  height: clamp(50px, 8vw, 75px);
  min-width: 50px;
  min-height: 50px;
  max-width: 75px;
  max-height: 75px;
}

.key:active {
  background-color: #ccc;
}

.call-btn,
.hangup-call-btn {
  background-color: #4caf50 !important;
  background-image: none;
  color: #fff;
  border-radius: 50%;
  width: clamp(50px, 8vw, 75px);
  height: clamp(50px, 8vw, 75px);
  min-width: 50px;
  min-height: 50px;
  max-width: 75px;
  max-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  margin: 1vh auto 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.call-btn:active {
  background-color: #45a049;
}

.hangup-call-btn {
  background-color: red !important;
  transform: rotate(135deg);
}
/* 
.chat-sidebar {
  width: 25%;
  border-right: 1px solid #2f2f4a;
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: calc(80% - 50px);
}

.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-item {
  padding: 10px;
  margin: 5px 0;
  cursor: pointer;
  background-color: #242424;
  border-radius: 5px;
  text-align: center;
  transition: background-color 0.3s;
}

.chat-item:hover {
  background-color: #e0e0e0;
}

.chat-item.active {
  background-color: #d0d0d0;
  font-weight: bold;
}

#chat-input {
  display: flex;
  padding: 10px;
  background: #1f1f1f;
  color: #e8e8e8;
}

#user-input {
  flex: 1;
  padding: 5px;
  background-color: #292929;
  border: 1px solid #2f2f4a;
  border-radius: 4px;
  color: #e8e8e8;
}

#send-button {
  margin-left: 10px;
  padding: 5px 10px;
  background: #2f2f4a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
} */

.window {
  width: 80%;
  height: 80%;
  max-width: 1200px;
  background: #151616;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border: 1px solid #555;
  z-index: 9;
}

.mobile-window {
}

.title-bar {
  background: white;
  color: #131313;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  /* padding: 8px 10px; */
  font-size: 14px;
  cursor: grab;
}

.title-bar span {
  padding: 8px 10px;
}

.title-bar .buttons {
  display: flex;
}

.title-bar .buttons div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 35px;
  margin-left: 8px;
  color: white;

  /* border-radius: 50%; */
}

/* .minimize {
  background: #ffaa00;
}
.maximize {
  background: #00aa00;
} */
.close {
  background: #f6636357;
}

.close:hover {
  background: #f02828;
  cursor: pointer;
}

.mail-app {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 150px;
  background: #151616;
  color: white;
  padding: 10px;
}

.sidebar .mail-item {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #555;
  padding-right: 20px;
}

.sidebar .mail-item:hover {
  background: #555;
}

.content {
  /* padding: 20px; */
  color: white;
  font-size: 16px;
}

/* workdrive */
.drive-content {
  /* padding: 20px; */
  color: #131313;
  font-size: 16px;
}

.drive-tab {
  font-family: "Roboto";
}

.drive-header {
  background: #aad4c8;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Roboto";
}
.drive-container {
  display: flex;
  flex: 1;
  height: 100%;
  font-family: "Roboto";
}
.drive-sidebar {
  width: 20%;
  background: #ddd;
  padding: 10px;
}
.drive-sidebar button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.drive-sidebar button.drive-active {
  background: #ddd;
}
.drive-content {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
  height: 77%;
  overflow-y: scroll;
}
.drive-file-list li {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  list-style-type: none;
}
.drive-file-list li:hover {
  background: #eee;
}
.drive-document-viewer {
  border: 1px solid #ccc;
  padding: 20px;
  background: white;
}
.li-header {
  font-weight: bold;
}
.li-header:hover {
  cursor: auto;
  background-color: #f5f5f5 !important;
}

.file-modal-body,
#fileContent {
  width: 100%;
  height: 95%;
}

.drive-icons {
  width: 30px; /* Größe anpassen */
  /* height: 16px; */
  vertical-align: middle;
  margin-right: 30px;
}

.drive-toolbar {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.back-button {
  background: #aad4c8;
  color: white;
  border: none;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Roboto";
  font-size: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  background: #106ebe;
}

.back-button:active {
  background: #005a9e;
}

.modal {
  display: none;
  position: absolute; /* Wird relativ zum main-Element positioniert */
  top: 0;
  left: 0;
  width: 100%; /* Modal nimmt die volle Breite des main-Elements ein */
  height: 90%; /* Modal nimmt die volle Höhe des main-Elements ein */
  background: white; /* Halbtransparenter Hintergrund */
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Modal Content/Box */
.modal-password-content {
  position: relative;
  background: rgba(255, 255, 255, 0.867);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  transition: none; /* Keine Animation direkt nach dem Laden */
  width: 96%;
  height: 40vh;
}

.writer-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background: white;
  width: 80vw;
  height: 67vh;
}

.writer-toolbar {
  width: 100%;
  background-color: darkgray;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.writer-toolbar button {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin: 3px;
  border-radius: 5px;
}

.writer-container {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  overflow-y: scroll;
}

#page-container{
  overflow: hidden;
}

.sheet {
  background: white;
  border-radius: 0.5rem;
  padding: 6rem;
  line-height: 1.5;
  /* outline: none; */
  /* height: 49vh; */
  width: 100%;
  height: 122%;
  /* aspect-ratio: 1 / 1.414; */
  filter: drop-shadow(0 0 0.75rem grey);
  overflow: hidden;
}

/* workdrive */
.mail-content {
  /* padding: 20px; */
  color: #647681;
  font-size: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 54vh;
}
.headerH1 {
  display: flex;
  justify-content: center;
}
.mail-header {
  background: white;
  color: #647681 !important;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Roboto;
}
.mail-header-text {
  font-weight: 100;
}
.mail-container {
  display: flex;
  flex: 1;
  height: 100%;
  font-family: Roboto;
}
.mail-side {
  width: 20%;
  background: white;
  padding-top: 10px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
}
.mail-sidebar {
  width: 100%;
  height: 35%;
  background: #f5f5f5;
}
.mail-sidebar button {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  height: 4vh;
  margin: 6px;
}
.mail-sidebar button.mail-active {
  background: #e2ecf1;
}


.employee_ID {
  padding-left: 8px;
}

.organigramTab {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  height: 4vh;
  margin: 6px;
  color: #647681;
  font-size: 12px !important;
  font-weight: bold;
}
.mail-content {
  flex: 1;
  padding-top: 20px;
  background: white;
}
.mail-file-list {
  padding-left: 0;
  height: 200vh;
}
.mail-file-list li {
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  list-style-type: none;
  color: #647681 !important;
  padding-right: 20px;
}
.mail-separator {
  font-weight: bold;
  color: #999;
  margin: 1em 0;
  padding: 0.5em;
  text-align: center;
  justify-content: center;
}

.mail-document-viewer {
  border: 1px solid #ccc;
  padding: 20px;
  background: white;
}
.mail-button {
  background: #00a99d !important;
  padding: 20px !important;
  color: white;
  border-radius: 5px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
  border: none;
  width: 88%;
}
.mail-button:hover {
  cursor: pointer;
}
.mail-emptyspace {
  opacity: 0 !important;
  padding: 20px !important;
  margin-top: 10px;
  margin-bottom: 35px;
  border: none;
  width: 95%;
}
.mail-file-list li {
  display: flex;
  align-items: center;
}
/* .mail-file-list li:nth-child(even) {
  background-color: #f0f0f0; 
}
.mail-file-list li:nth-child(odd) {
  background-color: #ffffff;
} */
.mail-item:hover {
  background: #e6f7f6 !important;
  cursor: pointer;
}

.mail-checkbox {
  margin-right: 20px;
  margin-left: 20px;
}

.mail-star {
  cursor: pointer;
  font-size: 18px;
  margin-right: 55px;
  color: gray;
}

.mail-star.starred {
  color: gold;
}

.mail-tab {
  color: #647681;
  font-size: 12px !important;
  font-weight: bold;
}

.headerH1 .out {
  color: #00a99d;
  font-weight: 900;
}

/* chat */
.chat-container {
  display: flex;
  width: 100%;
  height: 94%;
  font-family: Roboto;
}
.create-chat {
  padding: 15px;
  border: none;
  text-align: left;
  padding-left: 25px;
  display: flex;
  align-items: center;
  color: #35434a;
  font-size: 1rem;
}
.create-chat:hover {
  cursor: pointer;
}
.chat-sidebar {
  width: 25%;
  background: #eceff1;
  /* padding: 15px; */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.chat-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.chatlist {
  width: 30%;
  min-width: 30%;
}
.chat-list,
.whatsapp-chat-list {
  list-style: none;
  padding: 15px;
  margin: 0;
  height: 77%;
  overflow-y: scroll;
}
.whatsapp-chat-list {
  height: 64% !important;
}
.chat-desc {
  font-size: 0.7rem;
}
.chat-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  list-style-type: none;
}
.chat-info {
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}
.chat-window {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 65%;
}
.chat-header,
.mobile-chat-header {
  padding: 15px;
  background: #e7e7e7;
  border-bottom: 1px solid #ccc;
}
.mobile-chat-header {
  border-radius: 20px;
}
.chat-messages {
  background-color: white;
  flex-grow: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chat-message {
  max-width: 50%;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.chat-message p{
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word; 
  overflow-wrap: break-word;
}
.chat-received {
  background: #e3f2fd;
  align-self: flex-start;
}
.chat-sent {
  background: #c8e6c9;
  align-self: flex-end;
}
.chat-input {
  display: flex;
  padding: 10px;
  padding-left: 0;
  background: #eceff1;
  border-top: 1px solid #ccc;
}
.chat-input input {
  flex-grow: 1;
  padding: 10px;
  border: none;
  border-radius: 5px;
}
.chat-input button {
  padding: 10px 15px;
  margin-left: 10px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.chat-profile-sidebar {
  width: 25%;
  background: linear-gradient(to right, #267e89, #266e6b);
  color: white;
  text-align: center;
  padding: 20px;
}
.chat-profile-sidebar img {
  width: 50%;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 4vh;
  padding: 10px;
  border: 2px white solid;
}
.chat-sidebar,
.mobile-chat-sidebar {
  width: 250px;
  min-width: 40%;
  transition: transform 0.3s ease;
  background-color: #f3f3f3;
  z-index: 10;
}

.mobile-chat-sidebar {
  height: 100%;
  width: 100%;
  border-radius: 20px;
}

.sidebar-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  background-color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

.overlay {
  position: fixed;
  inset: 0;
  height: 62%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.overlay-box {
  position: absolute;
  top: 100px;
  background: black;
  padding: 1rem;
  z-index: 2;
}

.overlay-phone {
  background: transparent;
}

.overlay-chat {
  background: #e7e7e7;
  background-size: cover;
}

/* .password-modal{
  width: 40vw;
  height: 40vh;
} */

#password-overlay, #end-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
}
.modal-content-pw{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.867);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  transition: none; /* Keine Animation direkt nach dem Laden */
  width: 40vw;
  height: 40vh;
  font-size: 16px;
}
.modal-content-pw span{
  text-wrap: wrap;
}

.modal-content-pw input, .modal-content-pw button{
  padding: 10px;
  margin: 18px;
}

#end-overlay{
  display: none;
}

.password-box, .end-box {
  background: white;
  padding: 2em;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.password-box input {
  padding: 0.5em;
  font-size: 1em;
  margin: 1em 0;
  width: 200px;
}

.password-box button, .end-box button {
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
}

.processMaker-content {
  background-color: white;
  height: 100%;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}
.processMaker-navbar {
  display: flex;
  align-items: center;
  background: #00114d;
  padding: 10px 20px;
  color: white;
}

.processMaker-logo {
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}

.processMaker-tabs {
  display: flex;
  gap: 10px;
}

.processMaker-tab {
  background: transparent;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.processMaker-tab.processMaker-active {
  background: #0057b7;
}

.processMaker-avatar {
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: #a0b8c5;
  border-radius: 50%;
}

.processMaker-tab-content {
  padding: 50px;
  text-align: center;
}

.processMaker-question {
  font-size: 18px;
  margin-bottom: 20px;
  color: #003077;
}

#processMaker-process-select {
  padding: 10px;
  font-size: 16px;
  background: #b0cdef;
  border: 1px solid #003077;
  color: #003077;
}

#processMaker-start-btn {
  margin-top: 30px;
  padding: 10px 20px;
  background: #b0cdef;
  border: none;
  font-size: 18px;
  color: #003077;
  cursor: pointer;
}

.processMaker-modal, .save-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.processMaker-modal-content, .save-modal-content{
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 300px;
  text-align: center;
  color: #003077;
}

.processMaker-close, .save-close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}
.processMaker-modal-button, .save-modal-button {
  margin-top: 16px;
  padding: 8px 16px;
  background-color: #2e3b8e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.processMaker-modal-button:hover, .save-modal-button:hover {
  background-color: #1e2a6e;
}
.processMaker-drop-container{
  overflow-x: auto;
  padding: 20px;
  margin: 20px 0;

  padding: 0;
  margin: 0;


}

.processMaker-drop-area {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.processMaker-slot {
  width: 180px;
  height: 60px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
}

.processMaker-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
  background-color: white;
  margin: 20px 0;
  border-radius: 8px;
  justify-content: center;
}

.processMaker-piece {
  background-color: #e3e3e3;
  /* border: 1px solid #999; */
  border-radius: 5px;
  padding: 8px;
  cursor: grab;
  text-wrap: auto;
  line-break: auto;
  max-width: 12vh;
  font-size: 11px;
  color: #131313;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

@media (max-width: 768px) {
  .chat-sidebar {
    position: absolute;
    height: 100%;
    transform: translateX(-100%);
  }

  .chat-sidebar.open {
    transform: translateX(0);
  }

  .chat-window {
    margin-left: 0;
  }
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@keyframes flipTop {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes flipBottom {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* Slide-In-Animation */
@keyframes slide-in {
  from {
    transform: translateY(75vh); /* Startpunkt unten */
    opacity: 0; /* Unsichtbar */
  }
  to {
    transform: translateY(0); /* Zielpunkt Mitte */
    opacity: 1; /* Sichtbar */
  }
}

/* Slide-Out-Animation */
@keyframes slide-out {
  from {
    transform: translateY(0); /* Startpunkt Mitte */
    opacity: 1; /* Sichtbar */
  }
  to {
    transform: translateY(75vh); /* Zielpunkt unten */
    opacity: 0; /* Unsichtbar */
  }
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotatebottom {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate {
  0% {
    transform: rotateX(0) translateY(0px);
  }
  100% {
    transform: rotateX(-180deg) translateY(-10px);
  }
}

#mailModal{
  top: 10% !important;
  height: 80% !important;
}