div.block {
    width: 47px;
    height: 47px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    position: absolute;
}
div.block#prototype { 
    background-color: lightgray;
    border-color: black;
    border-style: dashed;
}
div.block#red { 
    background-color: red;
    border-color: darkred;
}
div.block#green { 
    background-color: green;
    border-color: darkgreen;
}
div.block#blue { 
    background-color: blue;
    border-color: darkblue;
}
div.block#yellow { 
    background-color: yellow;
    border-color: orange;
}
div.block#brown { 
    background-color: brown;
    border-color: black;
}
div.block#pink { 
    background-color: pink;
    border-color: red;
}
div.block#gold { 
    background-color:gold;
    border-color: brown;
}
div.block#azure { 
    background-color:azure;
    border-color: blue;
}
div.block#khaki { 
    background-color:khaki;
    border-color: green;
}
div#blocksetup {
    height: 498px;
    background-color: whitesmoke;
    border-color: #03A9F4;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    min-width: 200px;
    float: left; 
    width: 49.5%; 
    position: relative;
    overflow: scroll;
}

label#problemParsingError {
    float: left;
    color: red;
}

div#blocksAnimation {
    height: 500px;
    background-color: lightyellow;
    min-width: 400px;
    float: left; 
    width: 49.5%; 
    position: relative;
    display: none;
    background-color: lightyellow;
    border-color: gray;
    border-width: 1px;
    border-style: solid;
}

img.gripper {
    position: relative;
    height: 90px;
}

div#sidebar {
    float: right;
    width: 49.5%; 
    height: 500px;
    min-width: 200px;
}

label#parsingError {
    color: red;
    width: 80%;
}

div#plansteps {
    width: 100%;
    height: 100%;
    border-color: darkgray;
    border-width: 1px;
    border-style: solid;
    overflow: scroll;
}

div.planstep {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

label, input, p, span{
    font-family: sans-serif;
}

select#gripperModelMode, input#gripperCountRange{
    vertical-align: middle;
}

textarea#problem{
    width: 100%;
    height: 100%;
}

textarea#plan{
    width: 100%;
    height: 100%; 
}

input#animationSpeed {
    width: 40px;
}

canvas { 
    width: 100%; 
    height: 100% 
}