@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');
     
    body {
        font-family: Roboto, sans-serif;
        font-size: 12px;
        margin: 0;
        padding: 0;
        display: block;
        justify-content: center;
        width: 100vw; /* Die Breite des div entspricht der gesamten Bildschirmbreite */
        height: 100vh; /* Die Höhe des div entspricht der gesamten Bildschirmhöhe */
    }
     
    #centered_container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
     
    .header {
    }
     
    .banner {
        max-height: 100%;
        max-width: 90vw;
        margin-left: 5%; /* Auto margin for left and right */
    }
     
    .test-div {
        display: block;
    }
     
    .main-div {
        display: flex;
     
        padding-left: 10vw; /* Beispiel für 10% der Bildschirmbreite links */
        padding-right: 10vw; /* Beispiel für 10% der Bildschirmbreite rechts */
     
        flex-direction: column; /* Keep the default row direction */
        align-items: flex-start;
     
        width: 100vw; /* Die Breite des div entspricht der gesamten Bildschirmbreite */
     
     
    }
     
    .pageContentDiv{
        display: flex;
     
        width: 100%;
     
     
        flex-direction: row; /* Keep the default row direction */
    }
     
    .menueLeft {
        flex: 0 0 40%; /* Adjust the width as needed */
        padding: 10px; /* Optional: Abstand für leftdiv hinzufügen */
        box-sizing: border-box; /* Padding wird in die Breite einbezogen */
     
        display: flex; /* Flexbox für untergeordnete divs */
        flex-direction: column; /* Anordnung der untergeordneten divs in einer Spalte */
     
    }
     
    .rightdiv {
        padding: 10px; /* Add padding as needed */
        box-sizing: border-box;
        flex-direction: column;
    }
     
    .menueLeft div {
        margin-bottom: 5px; /* Optional: Abstand zwischen den untergeordneten divs */
    }
     
    .menueButton {
        background-color: #004188; /* Hintergrundfarbe blau */
        color: white; /* Schriftfarbe weiß */
        font-weight: bold; /* Fette Schrift */
        border-radius: 50%;
        cursor: pointer; /* Zeige den Mauszeiger als Hand an, um auf Interaktivität hinzuweisen */
        margin: 5px;
        font-size: 15px;
    }
     
    .menueButton:hover {
        background-color: #00336B; /* Dunkleres Blau bei Hover */
        /* Optional: Weitere Anpassungen für Hover-Effekte */
    }
     
    .menueLabel {
        font-size: 18px;
    }
     
    .menueContentWrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
     
    .datendiv {
        display: flex;
        flex-direction: column;
        padding-left: 45px; /* Beispiel für 20 Pixel Innenabstand */
        justify-content: center;
    }
     
    .loadDataButton {;
        width: 70%; /* Set a width if needed */
        display: block; /* Make the buttons appear below each other */
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        background-color: #B8BABA; /* Blaue Hintergrundfarbe */
        color: #000000; /* Weiße Schriftfarbe */
        border: none; /* Kein Rand */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        cursor: pointer; /* Mauszeiger als Hand anzeigen */
        border-radius: 5px; /* Abgerundete Ecken */
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
    .editDataButton{
        width: 70%; /* Set a width if needed */
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        background-color: #B8BABAdb; /* Blaue Hintergrundfarbe */
        color: #000000; /* Weiße Schriftfarbe */
        border: none; /* Kein Rand */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        cursor: pointer; /* Mauszeiger als Hand anzeigen */
        border-radius: 5px; /* Abgerundete Ecken */
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
    /* Hover-Stil für den Button */
    .loadDataButton:hover {
        background-color: #D1D4D4; /* Dunklerer Blauton bei Hover */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Dunklerer Schatten bei Hover */
    }
     
    .editDataButton:hover {
        background-color: #D1D4D4; /* Dunklerer Blauton bei Hover */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Dunklerer Schatten bei Hover */
    }
     
    .normdiv {
        display: flex;
        flex-direction: column; /* Anordnung der Buttons in einer Spalte */
        align-items: flex-start; /* Horizontal zentrieren */
        padding-left: 45px;
    }
     
    .checkbox-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
     
     
    }
     
    .checkbox-wrapper input {
        margin-right: 8px; /* Add spacing between the checkbox and label */
    }
     
    .checkbox-wrapper label {
        font-size: 16px;
        color: #333;
    }
     
     
    .weiter{
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        background-color: #004188;
        color: #fff; /* Weiße Schriftfarbe */
        border: none; /* Kein Rand */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        cursor: pointer; /* Mauszeiger als Hand anzeigen */
        border-radius: 5px; /* Abgerundete Ecken */
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
    .weiter:hover {
        background-color: #00336B; /* Dunklerer Blauton bei Hover */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Dunklerer Schatten bei Hover */
    }
     
    .callapsibleButton {
        color: #000000;
        background-color: #B8BABA;
        cursor: pointer;
        border: none;
        text-align: center;
        outline: none;
        font-size: 14px;
        width: 70%; /* Set a width if needed */
        display: block; /* Make the buttons appear below each other */
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        border-radius: 5px; /* Abgerundete Ecken */
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
    .callapsibleButton:hover {
        background-color: #D1D4D4;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Dunklerer Schatten bei Hover */
     
    }
     
    .algoDiv {
        font-size: 14px;
        width: 100%;
    }
     
    .content {
        margin-left: 50px;
    }
     
    .innerDiv {
        margin: 0px;
        font-size: 12px;
     
    }
     
    .sliderdiv {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
     
    .sliderValue{
        margin-left: auto;
        margin-right: auto;
    }
     
    .slider {
        -webkit-appearance: none;
        width: 100%; /* 50% der Breite des übergeordneten Elements */
        height: 10px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        border-radius: 5px; /* Radius für die Ecken */
        margin-left: auto;
        margin-right: auto;
     
    }
     
    .slider ::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: deepskyblue;
     
        cursor: pointer;
    }
     
    .slider ::-moz-range-thumb {
        border: none; /*Removes extra border that FF applies*/
        border-radius: 0; /*Removes default border-radius that FF applies*/
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: deepskyblue;
     
        cursor: pointer;
     
    }
     
    input[type="range"]:hover {
        opacity: 1;
    }
     
    .sliderValue {
        margin-top: 5px;
        text-align: center;
        align-content: center;
        align-self: center;
    }
     
    .elbowdiv {
        border: 2px solid black; /* Rahmen um das div */
        height: 30vh;
    }
     
    .dendrodiv {
        border: 2px solid black; /* Rahmen um das div */
    }
     
     
     
    .algoContentDiv{
     
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* Inner shadow */
        margin: 6px;
        border-radius: 10px; /* Abgerundete Ecken */
        width: 64%;
        padding:20px
    }
     
    .inputfeld {
        width: 20px;
    }
     
    .popup {
        position: relative;
        border: 2px solid dimgray;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        background-color: white;
    }
     
    .overlay{
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 2;
    }
     
    .uebernehmenButton {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 50px;
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        background-color: green;
        color: #fff; /* Weiße Schriftfarbe */
        border: none; /* Kein Rand */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        cursor: pointer; /* Mauszeiger als Hand anzeigen */
        border-radius: 5px; /* Abgerundete Ecken */
        opacity: 80%;
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
    .clearButton {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50px;
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        background-color: cornflowerblue;
        color: #fff; /* Weiße Schriftfarbe */
        border: none; /* Kein Rand */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        cursor: pointer; /* Mauszeiger als Hand anzeigen */
        border-radius: 5px; /* Abgerundete Ecken */
        opacity: 80%;
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
     
    .abbrechenButton {
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        margin: 5px; /* Abstand zwischen den Buttons (optional) */
        padding: 10px; /* Optional: Anpassen des Innenabstands */
        background-color: darkred;
        color: #fff; /* Weiße Schriftfarbe */
        border: none; /* Kein Rand */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten hinzufügen */
        cursor: pointer; /* Mauszeiger als Hand anzeigen */
        border-radius: 5px; /* Abgerundete Ecken */
        opacity: 80%;
     
        /* Übergangseffekt für einen sanften Farbwechsel */
        transition: background-color 0.3s ease;
    }
     
     
    .canvasdiv{
        padding: 0;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
     
     
    .dropdownDiv {
        display: inline-block;
        width: 100vw;
        margin: 0;
        padding: 0;
     
        align-items: center;
    }
     
    /* Dropdown container */
    .dropdown {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
     
    /* Dropdown button */
    .dropbtn {
        background-color: #004188;
        color: white;
        padding: 12px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        margin: 0;
    }
     
    /* Dropdown content (hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
     
    }
     
    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
     
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {background-color: #f1f1f1;}
     
    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {display: block;}
     
    /* Change the background color of the dropdown button when hovered */
    .dropdown:hover .dropbtn {background-color: #00336B;}
     
    /* Submenu */
    .dropdown-submenu {
        position: relative;
    }
     
    .dropdown-submenu .dropdown-content-submenu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
     
    .dropdown-submenu:hover .dropdown-content-submenu {
        display: block;
    }
     
    :root {
      --radius: 3px;
      --baseFg: black;
      --baseBg: white;
      --accentFg: white;
      --accentBg: #093D79;
    }
     
     
    select {
      -webkit-appearance: none;
      appearance: none;
      color: var(--baseFg);
      border: 1px solid dimgray;
      line-height: 1;
      outline: 0;
      padding: 0.65em 2.5em 0.55em 0.75em;
      border-radius: var(--radius);
      background-color: var(--baseBg);
      background-image: linear-gradient(var(--baseFg), var(--baseFg)),
        linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
        linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
        linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
      background-position: right 20px center, right bottom, right bottom, right bottom;
      height: 100%;
      margin-top: 2%;
    }
     
    select:hover {
      background-image: linear-gradient(var(--accentFg), var(--accentFg)),
        linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
        linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
        linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
    }
     
    select:active {
      background-image: linear-gradient(var(--accentFg), var(--accentFg)),
        linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
        linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
        linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
      color: var(--accentBg);
      border-color: var(--accentFg);
      background-color: var(--accentFg);
    }
     
    .ButtonUDropdown{
       display: inline-flex;
       width: 74%;
    }
     
    .plotdiv{
        height: 30vh;
     
     
    }