.background {
    box-shadow: 0 0 90px #ffffff69;

        position: relative;
    overflow: hidden; /* Ensure content doesn't overflow */
    transition: all 0.1s ease 0s !important;
    background: black;
    color: white;
}

.road {
  display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    grid-gap: 20px;
}


.road img {
    width: 200%;

}

.icons {
    font-size: 32px;
}

.icons-wrapper {
    background: red;
}

.icons-menu {
    font-size: 24px;
}

.icons-dashboard {
    font-size: 4vw;
    margin: 0;
    line-height: 100%;
}

.icon-arrow-left:before {
   content: '\2118';
   padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background: #1d141414;
    border-radius: 50%;
}

.icon-arrow-right:before {
   content: '\2119';
   padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background: #1d141414;
    border-radius: 50%;
}


.icon-music:before {
   content: '\2120';
}


.icon-navigation:before {
   content: '\2121';
}

.icon-wifi:before {
   content: '\2141';
}


.icon-mail:before {
   content: '\2001';
}

.icon-settings:before {
   content: '\2002';
}

.icon-phone:before {
   content: '\2003';
}


.icon-weather:before {
   content: '\1256';
}


.icon-battery:before {
   content: '\2412';
}


.icon-limit {
    width: 40% !important;
}

.icon-car {
    width: 140% !important;
    mix-blend-mode: luminosity;
}


.akzent {
    background-color: #5394fd;
    stroke: #5394fd;
}
.progress {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.progress i {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotate(calc(45deg + calc(calc(360deg / var(--tlt-br-cnt)) * var(--i))));
    opacity: 0.6;
}

.progress i::after {
    content: '';
    position: absolute;
    background: white;
    width: 1px;
    height: 12px;
    border-radius: 999rem;
    transform-origin: top;
    opacity: 0;
    animation: barCreationAnimation 100ms ease forwards;
    animation-delay: calc(var(--i) * 15ms);
}

.progress .selected1::after {
    background: blue;
}

.progress .selected2::after {
    background: #7fff74;
}

.progress .selected3::after {
    background: hsl(8, 100%, 50%);
    box-shadow: 0 0 1px hsl(8, 100%, 50%),
                0 0 3px hsl(8, 100%, 30%),
                0 0 4px hsl(8, 100%, 10%);
}

.percent-text {
    font-size: 3rem;
    animation: barCreationAnimation 500ms ease forwards;
    animation-delay: calc(var(--tlt-br-cnt) * 15ms / 2);
}

.text1{
    color: hsl(130, 100%, 50%);
    text-shadow: 0 0 1px hsl(130, 100%, 50%),
                    0 0 3px hsl(130, 100%, 30%),
                    0 0 4px hsl(130, 100%, 10%);
    opacity: 0;
}

.text2{
    color: hsl(64, 100%, 50%);
    text-shadow: 0 0 1px hsl(64, 100%, 50%),
                0 0 3px hsl(64, 100%, 30%),
                0 0 4px hsl(64, 100%, 10%);
    opacity: 0;
}
.text3{
    color: hsl(8, 100%, 50%);
    text-shadow: 0 0 1px hsl(8, 100%, 50%),
    0 0 3px hsl(8, 100%, 30%),
    0 0 4px hsl(8, 100%, 10%);
    opacity: 0;
}

@keyframes barCreationAnimation {
    from {opacity: 0}
    to {opacity: 1}
}



































.middle {
  width: 14% !important;
    background: none !important;
    justify-content: space-between;
    border-radius: 0 !important;
/*    height: min-content !important;*/
    border-radius: 20px !important;
    color: white;
    grid-gap: 40px;
}

.middle-icons {
  display: flex;
  flex-direction: row;
  grid-gap: 10px;
}

.middle svg {
  fill: white ;
  opacity: 0.4;
}

.dashboard-detail {
  width: -webkit-fill-available;
  display: none;
    flex-direction: column;
    justify-content: center;
    margin: 40px;
    text-align: -webkit-center;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    border: solid 10px var(--main-color);
        position: relative;
    z-index: 1; /* Ensure content is above the blurred background */
    border-radius: 20px;
    white-space: nowrap;

}


.dashboard-detail:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(10px); /* Adjust blur strength as needed */
    z-index: -1; /* Push the blurred background behind the content */
}

.dashboard-detail-section {
    position: relative;
}

/* Additional styling for your content */
.label {
    color: white; /* Adjust text color for readability */
}


.dashboard-detail-text {
    padding: 40px;
        background: var(--main-color);
    border-radius: 40px;
}

.dashboard-detail img {
    width: 30%;
}

.dashboard-detail-section {
    display: flex;
    flex-direction: row;
    grid-gap: 10px;
    width: -webkit-fill-available;
    padding: 10px;
}

.dashboard-detail-section {
    height: fit-content;
}

.app-dashboard {
        display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.intro-text {
            grid-column: 1 / 3;
            padding: 40px;
            white-space: nowrap;
justify-content: center;

}

.dashboard-detail-section-inner {
    padding: 20px;
    width: -webkit-fill-available;
    display: flex;
    flex-direction: column;
}



.dashboard-detail-section-inner p {
    margin: 0 !important;
}
.menu-car {
    fill: white;
    margin-left: auto;
    grid-column: 1 / 3;
    display: flex;
    justify-content: space-between;

}

.menu-car p {
    padding: 0px;
    fill: white;
    font-size: 12px;
    line-height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
}


.menu-car svg {
    height: 20px
}

.car {
padding: 10px;
    display: flex;
    flex-direction: column;
    grid-gap: 0;
    overflow: scroll;
    text-align: left;
    justify-content: space-between;
    height: auto;
}

.car img {
    width: 100%;
    height: min-content;
}

.car p {
    margin-bottom: 10px;
}


.car-information {
    justify-content: end;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.car-information p{
    margin: 0;
}


.dashboard-detail-section-inner-car {
    width: -webkit-fill-available;
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
    text-align: left;
}


.dashboard-mini {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  display: none;
  flex-direction: column;
    flex-direction: row;
    justify-content: center;
    margin: auto;
    text-align: -webkit-center;
    align-items: center;
    grid-gap: 30px;
}

.dashboard-mini-inner {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  display: flex;
  flex-direction: column;
    justify-content: center;
    margin: auto;
    text-align: -webkit-center;
    align-items: center;
    grid-gap: 20px;
}

.dashboard-mini-inner-icons {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  display: flex;
  flex-direction: row;
    justify-content: center;
    margin: auto;
    text-align: -webkit-center;
    align-items: center;
    grid-gap: 10px;
}



.dashboard-mini-line {
    height: 4px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}


.dashboard {
  width: max-content;
  max-width: 110vh;
  display: flex;
  justify-content: center; /* Align items horizontally center */
  align-items: center;
  grid-gap: 10px;
  border-radius: 50%;
  padding: 40px;
  margin: 40px;
  color: white;
/*  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);*/
}

.speedometer {
  width: 22vw;
  height: 22vw;
  border-radius: 50%;
  background: #79797945;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(45deg, #fffbfb66, #0000003d);
}

  .needle {
    width: 2px;
    height: 140px;
    background-color: #ff6b00;
    position: absolute;
    left: 50%;
    bottom: 80%;
    transform-origin: bottom;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.5s ease-in-out;
  }

@font-face {
    font-family: "autika";
    src: url("../font/autikaVF.ttf") format("truetype-variations"),
         url("../font/autikaVF.ttf") format("woff");
}
.numbers {
    font-family: "autika" !important;
}

  .speed-value {

    font-size: 6vw;
       opacity: 0;
    animation: barCreationAnimation2 400ms ease forwards;
        text-shadow: 0 0 90px white;
        width: fit-content;

  }



  .wetter {
    font-size: 10vw;
/*    transition: font-size 0.3s ease-in-out, font-variation-settings 0.3s ease-in-out, font-style 0.3s ease-in-out !important;*/
       opacity: 0;
    animation: barCreationAnimation2 400ms ease forwards;
        width: fit-content;
        line-height: 100%;

  }

  @keyframes barCreationAnimation2 {
    from {opacity: 0}
    to {opacity: 1}
}




  .speed-unit {
    font-size: 16px;
  }

  .total-speed {
    bottom: 40px;
    position: absolute;

  }

  .icon-top {
        top: 40px;
    position: absolute;
    display: flex;
    flex-direction: row;
    grid-gap: 10px;
  }



}




  .speed-number {
    position: absolute;
    font-size: 12px; /* Adjust font size as needed */
        transform: translate(-50%, -50%); /* Center the numbers */

  }




.circular-progress {
  --size: 250px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 8px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
  position: absolute;
      width: 100%;
    height: 100%;
}

.circular-progress-1 {
    animation: progress-animation 0.4s linear 0s 1 forwards;
}


.circular-progress-2 {
    animation: progress-animation-2 0.4s linear 0s 1 forwards;
}

.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}

.circular-progress circle.bg {
  stroke: #ddd;
  mix-blend-mode: color;
  opacity: 0.5;
}

.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0s linear 0s;
}


@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes progress-animation {
  from {
    --progress: 0;
  }
  to {
    --progress: 30;
  }
}

@keyframes progress-animation-2 {
  from {
    --progress: 0;
  }
  to {
    --progress: 50;
  }
}


.app {
  overflow: hidden;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}
.app .sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
}
.app .sky .background-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, black, #161256 30%, #F556FB);
}
.app .sky .background-right {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(-135deg, black, #161256 30%, #F556FB);
}
.app .sky .sun {
  position: absolute;
  bottom: 30%;
  left: calc(50% - 10vw);
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background: linear-gradient(to bottom, #FFFC3A, #FA1ABB);
}
.app .sky .buildings .building {
  position: absolute;
  bottom: 0;
  border: solid 1px #f9a1fd;
  border-bottom: 0;
  box-shadow: 0 -1vw 10vw #F556FB;
}
.app .sky .buildings .building .top {
  position: absolute;
  bottom: 100%;
  border: solid 1px #f9a1fd;
  border-bottom: 0;
}
.app .sky .buildings .building-1 {
  left: 11vw;
  background-color: #1d011e;
  width: 8vw;
  height: 2vw;
}
.app .sky .buildings .building-1 .top {
  left: 10%;
  background-color: #1d011e;
  width: 60%;
  height: 8%;
}
.app .sky .buildings .building-2 {
  left: 18vw;
  background-color: #1d011e;
  width: 7vw;
  height: 3vw;
}
.app .sky .buildings .building-2 .top {
  left: 40%;
  background-color: #1d011e;
  width: 50%;
  height: 3%;
}
.app .sky .buildings .building-3 {
  left: 34vw;
  background-color: #1d011e;
  width: 9vw;
  height: 6vw;
}
.app .sky .buildings .building-3 .top {
  left: 20%;
  background-color: #1d011e;
  width: 60%;
  height: 3%;
}
.app .sky .buildings .building-4 {
  left: 28vw;
  background-color: #1d011e;
  width: 10vw;
  height: 4vw;
}
.app .sky .buildings .building-4 .top {
  left: 40%;
  background-color: #1d011e;
  width: 40%;
  height: 2%;
}
.app .sky .buildings .building-5 {
  left: 46vw;
  background-color: #1d011e;
  width: 3.5vw;
  height: 17vw;
}
.app .sky .buildings .building-5 .top {
  left: 3%;
  background-color: #1d011e;
  width: 75%;
  height: 2%;
}
.app .sky .buildings .building-6 {
  left: 55vw;
  background-color: #1d011e;
  width: 2vw;
  height: 9vw;
}
.app .sky .buildings .building-6 .top {
  left: 10%;
  background-color: #1d011e;
  width: 60%;
  height: 2%;
}
.app .sky .buildings .building-7 {
  left: 53vw;
  background-color: #1d011e;
  width: 3vw;
  height: 7vw;
}
.app .sky .buildings .building-7 .top {
  left: 12%;
  background-color: #1d011e;
  width: 80%;
  height: 3%;
}
.app .sky .buildings .building-8 {
  left: 54vw;
  background-color: #1d011e;
  width: 9vw;
  height: 3vw;
}
.app .sky .buildings .building-8 .top {
  left: 10%;
  background-color: #1d011e;
  width: 60%;
  height: 6%;
}
.app .sky .buildings .building-9 {
  left: 65vw;
  background-color: #1d011e;
  width: 11vw;
  height: 2vw;
}
.app .sky .buildings .building-9 .top {
  left: 1%;
  background-color: #1d011e;
  width: 90%;
  height: 6%;
}
.app .sky .buildings .building-10 {
  left: 78vw;
  background-color: #1d011e;
  width: 2vw;
  height: 5vw;
}
.app .sky .buildings .building-10 .top {
  left: 10%;
  background-color: #1d011e;
  width: 60%;
  height: 3%;
}
.app .sky .buildings .building-11 {
  left: 21vw;
  background-color: #300132;
  width: 8vw;
  height: 1.5vw;
}
.app .sky .buildings .building-11 .top {
  left: 10%;
  background-color: #300132;
  width: 60%;
  height: 8%;
}
.app .sky .buildings .building-12 {
  left: 42vw;
  background-color: #300132;
  width: 5vw;
  height: 2vw;
}
.app .sky .buildings .building-12 .top {
  left: 40%;
  background-color: #300132;
  width: 50%;
  height: 4%;
}
.app .sky .buildings .building-13 {
  left: 49vw;
  background-color: #300132;
  width: 5vw;
  height: 3vw;
}
.app .sky .buildings .building-13 .top {
  left: 20%;
  background-color: #300132;
  width: 60%;
  height: 5%;
}
.app .sky .buildings .building-14 {
  left: 62vw;
  background-color: #300132;
  width: 4vw;
  height: 0.5vw;
}
.app .sky .buildings .building-14 .top {
  left: 10%;
  background-color: #300132;
  width: 40%;
  height: 40%;
}
.app .sky .buildings .building-15 {
  left: 75vw;
  background-color: #300132;
  width: 3.5vw;
  height: 1vw;
}
.app .sky .buildings .building-15 .top {
  left: 50%;
  background-color: #300132;
  width: 40%;
  height: 15%;
}
.app .sky .buildings .building-21 {
  left: 38vw;
  background-color: #440246;
  width: 4vw;
  height: 12vw;
}
.app .sky .buildings .building-21 .top {
  left: 10%;
  background-color: #440246;
  width: 60%;
  height: 2%;
}
.app .sky .buildings .building-22 {
  left: 36vw;
  background-color: #440246;
  width: 3vw;
  height: 10vw;
}
.app .sky .buildings .building-22 .top {
  left: 40%;
  background-color: #440246;
  width: 50%;
  height: 1%;
}
.app .sky .buildings .building-23 {
  left: 41vw;
  background-color: #440246;
  width: 5vw;
  height: 8vw;
}
.app .sky .buildings .building-23 .top {
  left: 5%;
  background-color: #440246;
  width: 80%;
  height: 2%;
}
.app .sky .buildings .building-24 {
  left: 48.5vw;
  background-color: #440246;
  width: 4vw;
  height: 19vw;
}
.app .sky .buildings .building-24 .top {
  left: 40%;
  background-color: #440246;
  width: 40%;
  height: 1%;
}
.app .sky .buildings .building-25 {
  left: 52vw;
  background-color: #440246;
  width: 14vw;
  height: 4vw;
}
.app .sky .buildings .building-25 .top {
  left: 50%;
  background-color: #440246;
  width: 40%;
  height: 3%;
}
.app .ground {
  z-index: -1;
  position: absolute;
  top: 35%;
  left: 0%;
  width: 100%;
  height: 65%;
  background: linear-gradient(to bottom, #161256, black);
}
.app .ground .road {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top left;
}
.app .ground .road.left, .app .ground .road.right {
  width: 1px;
  height: 200%;
  background-color: #f9a1fd;
}
.app .ground .road.left {
  transform: rotate(20deg);
}
.app .ground .road.right {
  transform: rotate(-20deg);
}
.app .ground .road.left.bis {
  transform: rotate(19.15deg);
}
.app .ground .road.right.bis {
  transform: rotate(-19.15deg);
}
.app .ground .road.center {
  width: 2px;
  height: 0;
  border: solid 1px #f9a1fd;
  -webkit-animation: infinite road-animation 4s cubic-bezier(1, 0.01, 1, 0.9);
          animation: infinite road-animation 4s cubic-bezier(1, 0.01, 1, 0.9);
}
.app .ground .road.center.road-0 {
  -webkit-animation-delay: -0.66667s;
          animation-delay: -0.66667s;
}
.app .ground .road.center.road-1 {
  -webkit-animation-delay: -1.33333s;
          animation-delay: -1.33333s;
}
.app .ground .road.center.road-2 {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.app .ground .road.center.road-3 {
  -webkit-animation-delay: -2.66667s;
          animation-delay: -2.66667s;
}
.app .ground .road.center.road-4 {
  -webkit-animation-delay: -3.33333s;
          animation-delay: -3.33333s;
}
.app .ground .road.center.road-5 {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.app .ground .wave {
  background: #19EEFE;
  box-shadow: 0 1px 10px 1px #19EEFE;
}
.app .ground .wave.vertical {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1000%;
  transform-origin: top left;
}
.app .ground .wave.vertical.right.wave-0 {
  transform: rotate(-38deg);
}
.app .ground .wave.vertical.right.wave-1 {
  transform: rotate(-52deg);
}
.app .ground .wave.vertical.right.wave-2 {
  transform: rotate(-63deg);
}
.app .ground .wave.vertical.right.wave-3 {
  transform: rotate(-72deg);
}
.app .ground .wave.vertical.right.wave-4 {
  transform: rotate(-79.5deg);
}
.app .ground .wave.vertical.right.wave-5 {
  transform: rotate(-84.5deg);
}
.app .ground .wave.vertical.left.wave-0 {
  transform: rotate(38deg);
}
.app .ground .wave.vertical.left.wave-1 {
  transform: rotate(52deg);
}
.app .ground .wave.vertical.left.wave-2 {
  transform: rotate(63deg);
}
.app .ground .wave.vertical.left.wave-3 {
  transform: rotate(72deg);
}
.app .ground .wave.vertical.left.wave-4 {
  transform: rotate(79.5deg);
}
.app .ground .wave.vertical.left.wave-5 {
  transform: rotate(84.5deg);
}
.app .ground .wave.horizontal {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
}
.app .ground .wave.horizontal.left {
  right: 50%;
  -webkit-animation: infinite wave-left 9s cubic-bezier(1, 0.01, 1, 0.9);
          animation: infinite wave-left 9s cubic-bezier(1, 0.01, 1, 0.9);
}
.app .ground .wave.horizontal.right {
  left: calc(50% + 2px);
  -webkit-animation: infinite wave-right 9s cubic-bezier(1, 0.01, 1, 0.9);
          animation: infinite wave-right 9s cubic-bezier(1, 0.01, 1, 0.9);
}
.app .ground .wave.horizontal.wave-10 {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.app .ground .wave.horizontal.wave-11 {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.app .ground .wave.horizontal.wave-12 {
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
}
.app .ground .wave.horizontal.wave-13 {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.app .ground .wave.horizontal.wave-14 {
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
}
.app .ground .wave.horizontal.wave-15 {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
}
.app .ground .wave.horizontal.wave-16 {
  -webkit-animation-delay: -6.3s;
          animation-delay: -6.3s;
}
.app .ground .wave.horizontal.wave-17 {
  -webkit-animation-delay: -7.2s;
          animation-delay: -7.2s;
}
.app .ground .wave.horizontal.wave-18 {
  -webkit-animation-delay: -8.1s;
          animation-delay: -8.1s;
}
.app .ground .wave.horizontal.wave-19 {
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
}

@-webkit-keyframes wave-left {
  100% {
    transform: translate(-23.65807vh, 65vh);
  }
}

@keyframes wave-left {
  100% {
    transform: translate(-23.65807vh, 65vh);
  }
}
@-webkit-keyframes wave-right {
  100% {
    transform: translate(23.65807vh, 65vh);
  }
}
@keyframes wave-right {
  100% {
    transform: translate(23.65807vh, 65vh);
  }
}
@-webkit-keyframes road-animation {
  100% {
    transform: translate(0, 65vh);
    height: 9vh;
  }
}
@keyframes road-animation {
  100% {
    transform: translate(0, 65vh);
    height: 9vh;
  }
}