@font-face {
  font-family: "Ease";
  src:
    url("../fonts/ease/EaseStandard-Medium.woff2")
}

@font-face {
  font-family: "Ease-H1";
  src:
    url("../fonts/ease/EaseStandard-Black.woff2") 
}



:root{
    /* Color Variables */
    --light: rgba(227, 227, 227, 0.75);
    --active: rgb(255, 255, 255);
    --hover: rgb(128, 128, 128);
    --default: rgba(211, 211, 211, 0.75);
     --sim-color: rgb(189,145,255);
}

/* Layout */

body {
    margin: 0;
    display: flex;
    font-family: "Ease", sans-serif;
    overflow:hidden;
}

h1{
   font-size:40px;
   line-height: normal;
   padding: 0;
   margin: 0;
   color: black;
   top:10;
   right:10px;
   position: absolute;
   font-family: "Ease-H1";
}
h3{font-size:16px;
    }

    label {
    margin-top: 20px;
width: 100%;
font-size: 14;}

.numLabel {
color: gray;
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 30px;
    position: fixed;
    top: 0;
    left: 0;
   
}
.simSettings{
    background-color: var(--light);
    padding: 100px 20px 20px 20px;
    height: 100%;
    border-radius: 10px;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 300px;
    margin: 10px;
   
}
.simSettings-close {

    display: none;
    width: 0px !important;

}

.simSettings > section {
    margin-top: 0px;
}

.simControl{
    padding: 20px 20px 30px 20px;
    top: 0;
    z-index: 10;
    width: 300px;
    position: absolute;
}

.range-deactive {
    display: none;
}

.modeControl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nodeControl {
   overflow-y: auto;
  max-height: calc(100vh - 420px);
}


/* Range */




input[type=range]{
width: 100%;    
background: var(--default);
height: 28px;
appearance: none;
border-radius: 15px;
margin: 10px 0px 20px 0px;
padding: 0px 4px 0px 4px;

}

input[type=range]:hover
{
    cursor:ew-resize;
    /* background: var(--hover); */
}
input[type=range]::-moz-range-thumb:hover,
input[type=range]::-webkit-slider-thumb:hover {
    cursor:ew-resize;
    background-color: var(--hover);
}




  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
 background: var(--active);
  border: 0px solid var(--active);
  width: 40px;
  height: 20px;
  border-radius: 15px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb  {
background: var(--active);
  border: 0px solid var(--active);
  width: 40px;
  height: 20px;
  border-radius: 15px;
  cursor: pointer;
}



/* Button Interactions */

button {
    padding: 18px 24px 18px 24px;
    background-color: var(--default);
    border: 0px solid var(--active);
    border-radius: 16px;
    font-size: 16;
    font-family: "Ease";
}

.button-active {
    background-color: var(--active);
    color: black;
}
.button-active_simColor{
    background-color: var(--sim-color);
    color: white;
}

button:not(.button-active):hover {
    background-color: var(--hover);
    color: var(--active);
}


/* Legende */
.legende{
  display: flex;
  position: absolute;
  right: 0;
  flex-direction: column;
  bottom: 0;
  padding: 20px;
}

.legende > span{
  display: flex;
  height: 25px;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}



.ellipse {
    width: 30px;       /* Breite der Ellipse */
    height: 30px;      /* Höhe der Ellipse */
   background-color:var(--sim-color);
    border-radius: 100%
  }

  /* Linie */
  .line {
    width: 30px;       /* Länge der Linie */
    height: 4px;        /* Dicke der Linie */
    background-color:var(--sim-color);
    stroke-linecap: round;
    border-radius: 4px;

  }
  .arrow {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  transform: translateX(1px);
  
}

.arm {
  position: absolute;
  width: 12px;          
  height: 4px;
   background-color:var(--sim-color);
  transform-origin: left center;
  stroke-linecap: round;
  border-radius: 4px;
}

.arm.left  { transform: rotate(-45deg); }
.arm.right { transform: rotate(45deg);  }

.legendeContainer{width: 74px;}


.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 16px 16px;
  position: absolute;
  z-index: 1;
  left: 350px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}