/* Classes format ************************************************************/
.menuButton{
    width:35px;
    margin-left:2px;
    margin-right:2px;
}
.dashboardIcon{
    width:15px;
    margin-left:2px;
    margin-right:2px;
}

.CollapsableLeftSideDiv_Row{
    display:flex;
    margin-top:5px;
}
.CollapsableLeftSideDiv_Label{
    margin-left:15px;
    color:#ffffff;
    font-weight:normal;
    font-size:14px;
}
.CollapsableLeftSideDiv_Label_Active{

    color:#ffff00;
    font-weight:bold;
}
.CollapsableLeftSideDiv_Level1{
	background: rgba(0, 0, 0, 0.1);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	width: 297px;
	position: fixed;
	top: 52px;
	left: -300px;
	height: 100vh;
	z-index: 998;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
}
.CollapsableLeftSideDiv_Level1_Element{
    font-size:14px;
	margin-left:10px;
}
.CollapsableLeftSideDiv_Level2{
	background: rgba(0, 0, 0, 0.1);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	width: 297px;
	position: fixed;
	top: 52px;
	left: -600px;
	height: 100vh;
	z-index: 998;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
}
.CollapsableLeftSideDiv_Level2_Element{
    font-size:14px;
	margin-left:15px;
}
.CollapsableLeftSideDiv_Level3{
	background: rgba(0, 0, 0, 0.1);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	width: 297px;
	position: fixed;
	top: 52px;
	left: -900px;
	height: 100vh;
	z-index: 998;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
}
.CollapsableLeftSideDiv_Level3_Element{
    font-size:14px;
	margin-left:10px;
}
.CollapsableLeftSideDiv_Level4{
	background: rgba(0, 0, 0, 0.1);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	width: 297px;
	position: fixed;
	top: 52px;
	left: -1200px;
	height: 100vh;
	z-index: 998;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
}
.CollapsableLeftSideDiv_Level4_Element{
    font-size:14px;
	margin-left:10px;
}

.Trigger_CollapsableLeftSideDiv{

    font-weight:normal;
}
.Trigger_CollapsableLeftSideDiv:hover{

    color:#ffff00;
    font-weight:bold;
}
.Trigger_CollapsableLeftSideDiv_Active{

    color:#ff8800;
    font-weight:bold;
}
.Trigger_CollapsableLeftSideDiv_Active:hover{

    color:#ff8800;
    font-weight:bold;
}

.popup{
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.popup .popuptext {
  visibility: hidden;
  font-size: 12px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -250px;
}

.DraggableDisplay{
    box-shadow:0px 0px 7px 7px rgba(1.0,1.0,1.0,0.15);
    border-radius: 5px;
    position: fixed;
    left: 50%;
    top:100px;
    width: 400px;
    background: rgba(0.0,0.0,0.0,0.35);
}
.DraggableDisplay_Label{
    margin-left:10px;
    color:#ffffff;
    font-weight:normal;
}
.DraggableDisplay_Label_Active{

    color:#ffff00;
}
.DraggableDisplay_Element{

	margin-left:10px;
}

.Dashboard_row{
    display:flex;
    margin-top:5px;
}
.Dashboard_label{
    margin-left:15px;
    color:#ffffff;
    font-weight:normal;
    font-size:14px;
}
.Dashboard_element{
    display:flex;
    font-size:12px;
	margin-left:10px;
}
.Dashboard_table_row{
    margin-left:5px;
    margin-bottom:-5px;
    font-size:14px;
    color:#ffffff;
}
.Dashboard_table_row_selected{
    margin-left:5px;
    margin-bottom:-5px;
    font-size:14px;
    color:#ffff00;
}

.Table_row{
    display: flex;
    margin-top:-6px;
}
.Table_label{
    margin-left:15px;
    color:#ffffff;
    font-weight:normal;
    font-size:14px;
}
.Table_element{
    font-size:10px;
	margin-left:15px;
	margin-top:-2px;
	text-align: center;
}

/* Individual elements format ************************************************/
#DraggableDisplay_step_vectors{
    width: 300px;
    height: 95px;
}
#DraggableDisplay_graphs{
    width: 700px;
    height: 650px;
}
#DraggableDisplay_scene{
    width: 400px;
    height: 400px;
}
#DraggableDisplay_GPU_texture{
    width: 562px;
    height: 700px;
}
#graph{
    margin:10px;
    width:680px;
    height:400px;
}
#CollapsableLeftSideDiv_database{

    width: 150px;
    left: -150px;
}
#CollapsableLeftSideDiv_options{

    width: 100px;
    left: -100px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_scene{

    width: 125px;
    left: -225px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_scene_objects{

    width: 300px;
    left: -525px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_scene_PVgenerators{

    width: 300px;
    left: -525px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_kinematics{

    width: 125px;
    left: -225px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_kinematics_stepVectors{

    width: 300px;
    left: -525px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_kinematics_rotationAxis{

    width: 300px;
    left: -525px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_simulation{

    width: 125px;
    left: -225px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_simulation_GPUtoolset{

    width: 125px;
    left: -350px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_simulation_GPUtoolset_strings{

    width: 300px;
    left: -650px;
    height: 450px;
}
#CollapsableLeftSideDiv_options_simulation_GPUtoolset_objects{

    width: 350px;
    left: -700px;
    height: 450px;
}
#graph_console{
    margin:10px;
    color:#ffffff;
    font-size:13px;
}
#CollapsableLeftSideDiv_options_simulation_variants{

    width: 300px;
    left: -525px;
    height: 450px;
}
#GPU_texture{
    margin: 25px;
    width: 512px;
    height: 512px;
}

#Variants_dashboard_table{
    width: 90%;
    height: 100px;
    overflow-y: auto;
    margin-left:15px;
    margin-top:15px;
    margin-bottom:25px;
}

#progress_bar{
    position: fixed;
    top: 51px;
	width:0%;
	height:5px;
	background-color:red;
}
#GPU_texture_value{
    position: absolute;
    top: 70px;
    left: 35px;
    color:#ffffff;
    font-weight:normal;
    font-size:16px;
}

/* SERENDIPV elements ---------------------------------------------------- */
#CollapsableLeftSideDiv_SERENDIPV_options{

    width: 100px;
    left: -100px;
    height: 350px;
}
#CollapsableLeftSideDiv_SERENDIPV_options_scene{

    width: 400px;
    left: -500px;
    height: 350px;
}
#CollapsableLeftSideDiv_SERENDIPV_options_kinematics{

    width: 400px;
    left: -500px;
    height: 350px;
}
#CollapsableLeftSideDiv_SERENDIPV_options_simulation{

    width: 400px;
    left: -500px;
    height: 350px;
}