html{
    height:100%
}

body{
    position:absolute;
    bottom:0px;
    top:0px;
    left:0px;
    right:0px;
    font-family: "Trebuchet MS", sans-serif;
}

ul{
    list-style:none
}

/* Side Menus */

div#menu-left{
    width:220px;
    height:100%;
    position:fixed;
    top:0px;
    left:-200px;
    background:lightBlue;
    border-right:1px solid black;
    overflow:scroll;
    padding-top:35px;
    
}

div#menu-left.extended{
    left:0px;
}

div#menu-bottom{
    width:100%;
    height:200px;
    bottom:-180px;
    left:0px;
    position:fixed;
    background:lightBlue;
    border-top:1px solid black;
}

div#menu-bottom.extended{
    bottom:0px;
    opacity:0.7;
}

p.menu-title{
    margin:0px;
    width:100%;
    text-align:center;
    padding:10px;
    font-weight:800;
    font-size:25px;
    border-bottom:1px solid black;
}

div#menu-left p.menu-title{
    position:fixed;
    width:200px;
    left:0px;
    top:0px;
    background:inherit;
    border-right:1px solid black;
}

p.menu-subtitle{
    margin:20px 0px 0px 5px;
    font-weight:800;
}

ul.item-selector{
    list-style:none;
    margin:10px 0px;
    padding:0px 20px;
}

ul#vis-config{
    list-style:none;
    margin:10px 0px;
    padding:0px 20px;
}

ul#vis-config li{
    padding:5px 0px;
}

ul#vis-config label{
    margin-left:10px;
}

ul.item-selector li:hover{
    background:lightSeaGreen;
}

ul.item-selector li.selected{
    background:lightSeaGreen;
}

input#confFileSelector{
    width:180px;
}

div#menu-bottom table{
    margin:20px auto;
}

div#menu-bottom table th{
    vertical-align:center;
    border:1px solid black;
}

div#menu-bottom table td{
    text-align:center;
    padding:3px 5px;
    border:1px solid black;
}

div#dm-names{
    position:absolute;
    top:0px;
    right:20px;
}

div#dm-names p{
    margin:10px 0px 0px 0px;
}

/* Main content */
div#main{
    margin:0px 20px;
    height:100%;
}

h1#page-title{
    width:400px;
    text-align:center;
    margin:0px auto;
    padding:10px;
}

svg#visualization-container{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}


.link{
	stroke:#000;
	stroke-width: 1px;
    fill:none;
}

.node{
	fill:lightBlue;
	stroke:black;
	stroke-width: 1.5px;
}

.label{
	pointer-events:none;
	font-size:10px;
	text-anchor:middle;
}

.link.notUI{
	stroke-width: 1px;
    stroke-dasharray: 5 6;
}

.link.ui{
	stroke-width: 4px;
}

.dm0{
	stroke:blue;
    color:blue;
}
.dm1{
	stroke:green;
    color:green;
}
.dm2{
	stroke:orange;
    color:orange;
}
.dm3{
	stroke:purple;
    color:purple;
}
.dm4{
	stroke:yellow;
    color:yellow;
}