.flexBox {
    position: relative;
    height: 100%;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
}

.modal {
  top: 5% !important;
  width: 600px !important;
}

.modal-body {
  height: 250px !important;
  overflow-y: auto;
}

nav {
    width: 407px;
    background-color: whiteSmoke;
    border: 1px solid #cccccc;
    border-radius: 4px;
    margin: -1px;
}

.tabbable {
    height: 45px;
}

.tab-pane {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 37px;
    overflow: auto;
    background-color: whiteSmoke;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

/* Firefox need to be absolute to handle overflow inside flexBox */
ul.nav-list, .jstree>ul {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: auto;
}

.main {
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 21px;
    left: 0;
}

.hbox {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flex-direction: row;
}

.vbox {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
}

.search {
    padding: 5px;
}

.treeControls {
    padding: 5px;
    cursor: pointer;
}

.icon-step-backward:hover {
    color:gray;
    opacity:0.6;
}

.icon-backward:hover {
    color:gray;
    opacity:0.6;
}

.icon-forward:hover {
    color:gray;
    opacity:0.6;
}

.icon-step-forward:hover {
    color:gray;
    opacity:0.6;
}

.chevron {
    cursor:pointer;
}

.icon-chevron-left:hover {
    color:gray;
    opacity:0.6;
}

.icon-chevron-right:hover {
    color:gray;
    opacity:0.6;
}

#treeConsole {
    height: 251px;
    overflow: auto;
    display: none;
    border-top: 1px solid #cccccc;
}

.splitter {
    width: 18px;
    cursor: e-resize;
    text-align: center;
}

pre {
    margin-bottom: 0;
}

.parent {
    color: sienna !important;
}

.reference {
    color: gray !important;
}

.restricted {
    font-style:italic;
}

#collapse-advanced {
    width: 100%
}

input {
    margin-bottom: 0 !important;
}

/* Change the margin for better visualization on the navbar */
li select {
    margin-top: 6px;
    margin-bottom: 0px;
}

/* Keep the model name and collection in a single line */
a {
  white-space: nowrap;
  cursor:pointer;
}

/* Allow angular.js to be loaded in body, hiding cloaked elements until templates compile.  The !important is important given that there may be other selectors that are more specific or come later and might alter
   display.*/
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

div#terminology {
    display: none;
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    background-color: #fff;
    border-radius: 6px;
    padding: 5px;
    overflow: auto;
}

.buttons {
    font-size: 50%;
    color: white;
    line-height: 5px;
    width: 67px;
    height: 20px;
    background-color: #3185CB;
    moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 2px solid #0F0070;
    padding: 5px;
}

.buttons:hover {opacity: 0.6; }

table {
    width: 500px;
    max-width: 500px;
    border: 1px solid black;
}

th, tr, td {
    max-width: 300px;
    min-width: 200px;
    vertical-align: top;
    border: 1px solid black;
    word-wrap: break-word;
    overflow: hidden;
}