diagram-js-code-editor/assets/diagram-js-code-editor.css

@import 'bootstrap.min.css';

/*Window*/
.djs-container{
overflow: visible !important;
}

.djs-editor {
position: absolute;
top: 90px;
right: 20px;
background-color: rgba(255, 255, 255, 0.9);
color: rgb(0, 0, 0);
border: solid 1px #CCC;
border-radius: 2px;
box-sizing: border-box;
}

.ace_editor {
    position: absolute;
    bottom: 0;
    right: 8px;
    display: block;
    font-size: 14px;
    font-weight: lighter;
}

/*Toggle*/
.djs-editor:not(.enabled) {
color: #CCC; /*Grayed Out*/
pointer-events: none;
}
/* Toolbar*/
.toolbar {
display: none;
}

.nav-item {
display: inline-block;/* or inline-block*/
padding: .5rem 1rem;
}

.djs-editor.open .toolbar{
display: block;
}

#run_icon {
font-family: "Material Icons", sans-serif;
color: inherit;
}

#run_icon:before {
content: "build";
}

.passing {
color: green !important;
}

.failing {
color: red !important;
}

.unknown {
color: rgba(207, 168, 10, 0.842) !important;
}

.description {
display: none;
position: absolute;
background-color: white;
left:110%;
min-width: 150px;
padding: 0 20px;
border: solid 5px #CCC;
border-radius: 5px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

li:hover > .description {
display: block;
}

.data-type {
position: absolute;
bottom: 0;
right: 8px;
display: block;
font-size: 14px;
font-weight: lighter;
}

.undefined{
color: black;
}

.number{
color: red;
}

.string{
color: green;
}

.boolean{
color: blue;
}


/*Ide*/

.djs-editor.open .ide {
    width: 600px;
    display: block;
}

.djs-editor .ide {
display: none;
width: 100%;
min-width: 420px;
height: 280px;
}

.dropdown-menu {
height: auto;
    overflow-scrolling: auto;
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
}

.dropdown-menu.show {
    /*
     See - https://stackoverflow.com/questions/3550795/is-it-possible-to-have-a-popup-div-that-breaks-out-of-an-overflowscroll-or-ov
     for limitations on having a popout element from a scroll menu.
     in the future, this could be updated to calculate the position of the
     popout element in JS.
     */
    /* overflow-x: hidden;
    overflow-y: auto; */
}

.djs-editor:not(.open) .toggle {
width: 46px;
height: 46px;
line-height: 46px;
content: "dvr" !important;
text-align: center;
}

.djs-editor.open .toggle:before {
font-family: "Material Icons", sans-serif;
content: "close" !important;
font-size: 24px;
}

.djs-editor:not(.open) .toggle:before {
font-family: "Material Icons", sans-serif;
content: "dvr" !important;
font-size: 24px;
}

.djs-editor .toggle:before {
content: attr(title);
}

.djs-editor.open .toggle {
position: absolute;
right: 0;
padding: 6px;
}

.toggle {
    z-index: 4;
}

.errorMarker {
position:absolute;
background:rgba(200,100,100,0.5);
z-index:3;
}

.dropdown-menu li{ }
.nav-item .submenu{
display: none;
position: absolute;
left:100%; top:-7px;
}
.nav-item .submenu-left{
right:100%; left:auto;
}
.dropdown-menu > li:hover { background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{ position: absolute; display: block; }