body {
  margin-right: 1px;
}

body.black {
  background-color: black;
}

body.white {
  background-color: white;
}

canvas.hover {
  border:5px dashed #ccc;
}

.dg .c input[type=text] {                                                       

  line-height:normal;                                                                  
} 
.dg .c div {
  box-sizing: content-box;                                                             
}

#stats {
  position: absolute;
  top:0;
  right: 0;
}

#fps-slider {
  width: 200px;
}

#axes  {
  border: none;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1001;
  background-color: transparent;
}

.info {
  visibility: collapse;
}

#event-info {
  position: absolute;
  top:0;
  left:0;
  z-index: 1002;
  padding-top: 10px;
  padding-left: 10px;
  display: block;
}

#event-info.black {
  color: white;
}

#event-info.white {
  color: black;
}

#event-text {
  padding-left: 10px;
}

#event-text.stereo-mode {
  width: 50%;
  font-size: 6pt;
  opacity: 0.5;
}

#cms-logo > img {
  max-width: 60px;
  max-height: 60px;
}

.bordered {
  border: thin solid gray;
}

#titlebar {
  height: 30px;
}

#titlebar.black {
  color: white;
  background-color: black;
}

#titlebar.white {
  color: black;
  background-color: white;
}

#treegui {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1002;
    padding-top: 0px;
    padding-right: 0px;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
}

#rphigui {
  position: absolute;
  top:0;
  right:0;
  z-index: 1002;
  padding-top: 0px;
  padding-right: 0px;
  display: block;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

#rhozgui {
  position: absolute;
  top:0;
  right:0;
  z-index: 1002;
  padding-top: 0px;
  padding-right: 0px;
  display: block;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

#clipgui {
  position: absolute;
  top:0;
  left:65%;
  z-index: 1002;
  padding-top: 0px;
  padding-right: 0px;
  display: block;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}   

#toolbar {
  float: left;
}

#toolbar.black {
  color: white;
  background-color: black;
}

#toolbar.white {
  color: black;
  background-color: white;
}

#toolbar img {
  width: 20px;
  height: 20px;
}

#toolbar .button-toolbar {
  padding-top: 2px;
  padding-bottom: 2px;
}

.btn {
  background-color: #dfdfdf;
}

.btn.active {
  background-color: #bbb;
}

#treeview {
  height: 65vh;
  overflow: auto;
}

#treeview.black .table-hover tr:hover {
  background-color: #777;
}

#treeview.white .table-hover tr:hover {
  background-color: #dfdfdf;
}

#treeview.black {
  color: white;
  background-color: black;
}

#treeview.white {
  color: black;
  background-color: white;
}

#treeview .group {
  border-top: 1px solid black;
  background-color: #202020;
  color: white;
}

#treeview .group.black {
  border-top: 1px solid black;
  background-color: #202020;
  color: white;
}

#treeview .group.white {
  border-top: 1px solid white;
  background-color: #cccccc;
  color: black;
}

#treeview .collection {
  border-top: 0px;
  color: white;
}

#treeview td.collection.black {
  color: white;
}

#treeview td.collection.white {
  color: black;
}

#treeview .info {
  color: red;
}

#treeview .expand {
  color: grey;
  padding-right: 5px;
}

#display {
  height: 75vh;
  overflow: hidden;
  padding: 0;
}

#display.black {
  color: white;
  background-color: black;
}

#display.white {
  color: black;
  background-color: white;
}

#tableview {
  height: 25vh;
  overflow: auto;
}

#tableview table thead th {
  padding: 3px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 25vw;
}

#tableview table thead th.black {
    background: black;
}

#tableview table thead th.white {
    background: white;
}

#tableview table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

#tableview table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
}

#tableview caption {
  text-align: left;
  padding: 0.25rem;
  position: sticky;
  left: 0;
}

#tableview.black {
  color: white;
  background: black;
}

#tableview.white {
  color: black;
  background: white;
}

#tableview.black .table-hover tr:hover {
  background-color: #777;
}

#tableview.white .table-hover tr:hover {
  background-color: #dfdfdf;
}

#table-data-eventObject.black.table-hover>tbody>tr:hover {
  background-color: #777;
}

#table-data-eventObject.white.table-hover>tbody>tr:hover {
  background-color: #dfdfdf;
}

.modal.in .modal-dialog {
  margin: 0 auto;
  top: 40%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.modal-dialog button.close {
  color: red;
  text-shadow: none;
  opacity: 1.0;
}

.modal-content.black {
  color: white;
  background-color: black;
}

.modal-content.white {
  color: black;
  background-color: white;
}

.modal-content div {
  border: 0;
}

#loading .modal-content {
  width: 50%;
  text-align: center;
  transform: translateX(50%);
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -moz-transform: translateX(50%);
}

#browser-events td.black {
  background-color: #303030;
}

#browser-events td.white {
  background-color: white;
}

/*
.modal-title.black {
  background-color: #202020;
}

.modal-title.white {
  background-color: #cccccc;
}
*/

#files .modal-body {
  max-height: 300px;
  overflow-y: scroll;
}

#files a {
  cursor: pointer;
}

#geometry-files .modal-body {
  max-height: 300px;
  overflow-y: scroll;
}

#selected-event, #selected-obj {
  border: 1px solid #ccc;
  width: 100%;
  text-align: left;
  padding-left: 20px;
}

#event-buttons {
  padding-top: 10px;
}

#browser-table.white, #obj-table.white {
  background-color: white;
  color: black;
}

#browser-table.black, #obj-table.black {
  background-color: black;
  color: white;
}

#browser-table th.black, #obj-table th.black {
  background-color: #202020;
  color: white;
}

#browser-table th.white, #obj-table th.white {
  background-color: #cccccc;
  color: black;
}

#browser-table.black td, #obj-table.black td {
  background-color: #303030;
}

#browser-table.white td, #obj-table.white td {
  background-color: white;
}

#browser-table.black td > a, #obj-table.black td > a {
  color: white;
}

#browser-table.white td > a, #obj-table.white td > a {
  color: black;
}

#browser-files td, #obj-files td {
  border: 0;
}

#browser-events td {
  border: 0;
}