body{
    margin-top:10px;
    margin-left:10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    
}



.row1 {
    width: 1000px;
    overflow: hidden; 
    height: 160px;
}

.row1Column1 {
    width: 700px;
    float:left; 
    height: 150px;
    margin-right:20px;
}

.row1Column2 {
    overflow: hidden; 
    height: 150px;
    width:300px;
}

.options{
    position: relative;
    padding-left: 40px;
}

.row1row1 {

    width: 1000px;
    overflow: hidden; 
    height: 95px;
}
h1{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
h2{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
h3{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
h4{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
h5{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.mainCaption{
    display:inline-block;
    vertical-align: top;
    border-right: 2px solid lightgray;

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-left: 50px;
    font-size:2.5em;
    font-weight:800;
    width:265px;
    height:65px;
    vertical-align: middle;}
.mainCaptionAdd{
    display:inline-block;
    vertical-align: middle;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:1em;
    margin-left: 5px;
    width:350px;
    height:50px;
}

#divSlider{
    width:50px;
    height:10px;
}

.authorsName{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-left: 50px;
    margin-top:0px;
    font-size:0.85em;
    font-weight:400; 
}
.dropdownMenuDiv{
    margin-left: 50px;
}
.dropdownMenuElements{
display:inline-block;
margin-right: 3px;
}

#back{
    width:35px;
    padding: 0em;
    height:35px;
}
#forth{
    width:35px;
    padding: 0em;
    height:35px;
}
#skipForth{
    width:35px;
    padding: 0em;
    height:35px;
}
#skipBack{
    width:35px;
    padding: 0em;
    height:35px;
}
#algorithmSelect{
    background-color: #2C5898;
    color:white;
}
#dataSelect{
    background-color:#288F83    ;
    color:white;

}
#colorSelect{
    background-color:#7FBA42    ;
    color:white;

}
#procedureSelect{
    background-color:#A0AE3E    ;
    color:white;

}
#quizSelect{
    background-color:#A0AE3E;
    color:white;

}
#vislogo{
    width:250px;
    margin-left:71px;
}

.row2{
    width: 1000px;
    overflow: hidden; 
    height: 400px;
    margin-top:10px;
}

.row2Column1Standard {
    margin-left:0px;
    display:inline-block;
    vertical-align: top;
    width:250px;
    height:400px;
    }

.row2Column2Standard{
    display:inline-block;
    vertical-align: top;
    width:500px;
    height:400px;




    }
.row2Column3Standard{
    display:inline-block;
    vertical-align: top;
    width:241px;
    height:400px;
    }

#tree{
        height:290px;
        }
#navigation{
    text-align:center;
    margin-top:10px;
    height:100px;            }

#captionNav{
    margin-top:5px;
    color:rgb(36,85,154)
}

#captionTree{
    text-align: center;
    width:100%;
    margin-top:5px;
    color:rgb(36,85,154)
}


#treemap{
    padding-top:20px;
    text-align: center;
    height:290px;        }

#captionStatistics {
    margin-top:10px;
    text-align: center;
    width:100%;
    color:rgb(36,85,154)
}

#statistics{
    text-align: center;
    margin-top:10px;
    height:100px;   
    font-size: 0.8em;
         }

#svgTreemap {
  
    height:250px;
    width:450px;
}

#svgTree{
    height:100%;
    width: 100%;
}

#div1{
    display:inline-block;
    width: 32%;
    height: 100%;
}
#div2{
    display:inline-block;
    margin-left:1px;

    width: 32%;
    height: 100%;
}
#div3{
    display:inline-block;
    margin-left:1px;

    width: 32%;
    height: 100%;
}
#div4{
    clear: both;
    display:inline-block;
    width: 32%;
    height: 100%;
}
#div5{
    clear: both;
    vertical-align: top;
    margin-left:1px;

    display:inline-block;
    width: 32%;
    height: 100%;

}

#div6{
    clear: both;
    vertical-align: top;
    margin-left:1px;

    display:inline-block;
    width: 32%;
    height: 100%;
}


#multiViewFirstRow{
    width: 100%;
    height: 200px;
    margin-bottom:1px;
}

#multiViewSecondRow{
    width: 100%;
    height: 199px;
}

#svgTreemap1{
    margin-left:5%;
    width:90%;
    height:60%;
}

#svgTreemap2{
    margin-left:5%;
    width:90%;
    height:60%;
}

#svgTreemap3{
    margin-left:5%;
    width:90%;
    height:60%;
}

#svgTreemap4{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:60%;
}

#svgTreemap5{
    margin-left:5%;
    margin-top:5%;

    width:90%;
    height:60%;
}
#svgTreemap6{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:60%;
}

#statisticsTreemap1{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:30%;
    font-size: 0.5em;
}
#statisticsTreemap2{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:30%;
    font-size: 0.5em;

}
#statisticsTreemap3{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:30%;
    font-size: 0.5em;

}
#statisticsTreemap4{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:30%;
    vertical-align: middle;
    font-size: 0.5em;

}
#statisticsTreemap5{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:30%;
    font-size: 0.5em;


}

#statisticsTreemap6{
    margin-left:5%;
    margin-top:5%;
    width:90%;
    height:30%;
    font-size: 0.5em;


}

#option1{
    width:90%;
    height:45%;
    margin-left: 20px;
}
#option2{
    width:90%;
    height:45%;
    margin-left: 20px;
    margin-top: 20px;
}

#svgOption1{
    overflow: visible;
    width: 215px;;
    height:120px;
}

#svgOption2{
    overflow: visible;
    width: 215px;;
    height:120px;
}

.pseudocodeSeletionDiv{
    width:100%;
    height:8%;
}


#pseudocodeSelect{
    width:33%;
}

#verbalizeSelect{
    width:33.3%;
    padding-left: 10px;
    padding-right:10px
}
#dynamicSelect{
    width:33.3%;
}


#textFieldPseudocode{
    font-size:0.65em;
    height:92%;
    padding-top:5%;
}


#addDatapoint{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

    border: 1px solid lightgray;
    position: fixed;
    padding: 5px;
    top: 528px;
    background-color: white;
    visibility: hidden;
    text-align: center;
    vertical-align: middle;

}

#containerWeights2{
    padding-left: 10px;
    padding-top: 10px;
    display: block;
    width:80%;
    overflow-y: scroll;
    height:80%;

}

#svgTreemapMaker {
    float: left;
    height:90%;
    width:85%;
}

#treemap2{
    padding-top:2.5%;
    text-align: center;
    margin-top:30px;
    height:500px;        }


    #treemapMakerButtons{
        float: left;
        height:90%;
        width:10%;
        position: relative;


    }

#resetData{
    width:100%;
    height:15%;
}

#addData{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height:15%;
}


#captionAnswers{
    margin-top:10px;

    text-align: center;
    width:100%;
    color:rgb(36,85,154)
}

#answerOptions{
    width:80%;
    margin-left:10%;
}

#submitAnswer{
    margin-top:10px;
}
#explainAnswer{
    margin-top:10px;
    font-size: 1.5em;
}

#svgAnswer1 {
    height:40%;
    width:100%;
}

#svgAnswer2 {
    margin-top: 10px;
    height:40%;
    width:100%;
}

#progressBar{
    height:20%;
    width:80%;
}


.slider {
    width: 50px;
    height: 15px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }

  #explainAnswer2{
    margin-top:10px;
    font-size: 1.2em;
    padding-left: 10px;
    padding-right: 10px;

}
  .border2{
    border:thin solid lightgray;
  }
.bold{
    font-weight: bold;
}
.cursive{
    font-style: italic;
}

.oneShift{
    padding-left:20px;
}

.twoShifts{
    padding-left:40px;
}
.threeShifts{
    padding-left:60px;

}

.fourShifts{
    padding-left:80px;

}
.fourShifts2{
    padding-left:75px;

}
#pseudocode{
    height:85%;
    padding-left: 10px;
    padding-right:10px ;
}
.spanPseudocode{
    word-wrap: normal;
    display: inline-block;}






.largeLt{
    font-size: 1.5em;
}



.selectAlgorithmsCompare{
    padding-left: 15%;
    border: 1px solid lightgray;
    border-radius: 5px;  
    height:400px; 



}

.checkbox .form-check-input {
    top: 0.8rem;
    scale: 1.;
    margin-right: 0.75rem;
    }

    .checkbox .form-check-label {
        padding-top: 11px;
        font-size: 1em;
        padding-left:11px;
        }
.captionCompare{
    margin-top:2%;
}
#captionCompareText{
    color:red;
}


.slidecontainer {
    margin-top:5px;
    margin-left:12.5%;
    width: 75%;
    height:20px; /* Width of the outside container */
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 15px;
    border-radius: 50%; 
    background: black;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 15px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
  }



  #svgProgressionBar {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.5em;
    margin-top: 20px;
    
    width:60%;
    font-weight: 300;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
#buttonDown{
    margin-top: 5px;
    display:inline-block;

}

#buttonFeedback{
    vertical-align: top;
    font-size:0.7em;
    height:20px;
    padding: 2px;
}

#buttonImpressum{
    vertical-align: top;

    font-size:0.7em;
    height:20px;
    padding: 2px;
}

#buttonData{
    vertical-align: top;

    font-size:0.7em;
    height:20px;
    padding: 2px;
}
#link1{
    vertical-align: top;

    display:inline-block;
}
#link2{
    vertical-align: top;

    display:inline-block;

}

#konlogo{
    width:200px;
    margin-left:578px;
}



#notifySelect{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    border: 1px solid lightgray;
    font-size: 2em;
    position: fixed;
    top: 175px;
    left:25px;
    background-color: white;
    text-align: center;
    vertical-align: middle;
    visibility: hidden;


}

.centered-text {
    text-align: center;
    font-size: 14px;
    width:100%;
}

.classRemoveTop{
    margin-top:1em!important;
}


.parentCompare {
    width: 200px;
    height: 10px;
    margin-left:20px;
    display: flex; /* Use flexbox for layout */
}

/* Style for the child divs */
.childCompare {
    flex: 1; /* Distribute space equally among child divs */
    height: 100%; /* Take the height of the parent */
    border: 1px solid black;
    
}

/* Style for the first child div (twice as wide) */
.childCompare:first-child {
    font-size: 6px;
    flex: 4; /* Twice as wide as the others */
}