.compass {
  width: 12rem;
  height: 12rem;
  margin-right: -17rem;
  border-radius: 50%;
}

.needle {
  width: 12rem;
  height: 12rem;
  z-index: 2;
  transform: rotate(0deg);

  margin-right: 0.1rem;
  margin-left: 5rem;
}

.gyro-bg {
  background-color: skyblue;
  overflow: hidden;
  border-radius: 50%;
}

.gyro-ground {
  transform: rotateZ(10deg);
  width: 30rem;
  height: 17rem;
  margin-left: -30%;
  background-color: limegreen;
  border: 0.1rem solid black;
  top: 70%;
  position: relative;
  transform-origin: top center;
  transition: transform 0.5s ease-in-out;
}

.gimbal-axis {
  -webkit-appearance: none;
  height: 0.5rem;
  position: relative;
  background-color: var(--gray-1);
}

.towers {
  position: relative;
  font-weight: 500;
  display: flex;
  width: 50%;
  align-items: flex-end;
  /* justify-content: flex-end; */
  /* justify-content: flex-end; */
  /* margin-right: 2rem; */
  font-size: 3rem;
  /* margin-top: 0rem; */
  top: -0.5rem;
  left: 0.75rem;
  overflow: hidden;
  margin-left: 0.5rem;
}
.tower {
  margin: 0 -0.25rem;
  position: relative;
}
.tower1 {
  /* top: 3rem; */
  top: 2rem;
}
.tower2 {
  /* top: 2.25rem; */
  top: 1.45rem;
}
.tower3 {
  /* top: 1.55rem; */
  top: 1rem;
}
.tower4 {
  /* top: 1.05rem; */
  top: 0.5rem;
}
.tower5 {
  /* top: 0.25rem; */
  top: 0.1rem;
}
.towerData {
  /* margin-left: 0.5rem;  */
  text-align: center;
  position: absolute;
  font-size: 1.25rem;
  top: 50%;
  /* left: -0.25rem; */
}

.warnings {
  display: none;
  scale: 0.85;
  margin-right: 1rem;
}

@keyframes shake1 {
  0% {
    transform: rotate(0deg);
    scale: 0.9;
  }
  25% {
    transform: rotate(5deg);
    scale: 1;
  }
  50% {
    transform: rotate(0eg);
    scale: 1.2;
  }
  75% {
    transform: rotate(-5deg);
    scale: 1;
  }
  100% {
    transform: rotate(0deg);
    scale: 0.9;
  }
}
.warnings-hover {
  animation: shake1 0.5s 2;
}

#warning-container {
  left: auto;
  width: 25rem;
  right: 2rem;
  display: flex;
  height: 15rem;
  top: 3rem;
  overflow-y: scroll;
  overflow-x: hidden;
}
.warning {
  margin: 0.75rem 0.25rem;
  width: 100%;
  display: flex;
  font-size: 1.6rem;
  justify-content: flex-start;
}

.warning-msg {
  text-align: left;
}
.msgTime {
  /* position: relative; */
  /* right: 0; */
  margin-left: auto;
  /* float: right; */
}
#warning-container {
  content: " ";
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* position: absolute; */
  /* top: 0%;  */
  /* left: 50%; */
  /* margin-left: -35px; */

  border-width: 0.3rem;
  border-style: solid;
  border-color: rgb(255, 217, 2) transparent transparent transparent;
}

.triangle {
  display: none;
  position: absolute;
  left: 0.25rem;
  width: 3.5rem;
  height: 1.5rem;
  background: rgb(255, 217, 2);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

#warning-container::-webkit-scrollbar {
  width: 1rem;
  height: 1rem; /* width of the entire scrollbar */
}

#warning-container::-webkit-scrollbar-track {
  background-color: var(--primary-bg-color); /* color of the tracking area */
}

#warning-container::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0); /* color of the scroll thumb */
  border-radius: 1rem; /* roundness of the scroll thumb */
  border: 0.25rem solid var(--secondary-color); /* creates padding around scroll thumb */
}