#canvas0 {
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -7;
}

#canvasGrid {
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -6;
}

#canvasLight {
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -5;
}

#canvas1 {
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -4;
}

.popover-image {
  float:left;
  margin-right: 10px;
  margin-bottom: 4px;
  max-width: 245px;
}

.popover {
  padding-bottom:10px;
}
.popover-body {
  padding-bottom:0px;
}


#main-flex-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#toolbar, #toolbar-mobile {
  padding-top: 7px;
  padding-bottom: 3px;
  padding-left: 7px;
  padding-right: 7px;
}

#toolbar {
  background-color: rgba(255,255,255,0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#toolbar-mobile {
  background-color: rgb(255,255,255);
}


#non-toolbar-space {
  position: relative;
  flex-grow: 1;
}


.mobile-dropdown-menu {
  height: 0;
  transition: height .3s ease;
  overflow: hidden;

  top: 100%;
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 0;  
  overflow: hidden; 
  
  border: none;
  border-radius: 0;
  background-color: rgb(255,255,255);
}



#mobile-dropdown-collpase {
  position: absolute;
  top: 0;
  width: 100%;

  height: 0;
  transition: height .3s ease;
  background-color: rgb(255,255,255);
}

#obj-bar {
  background-color: rgba(255, 255, 255, 0.3);
}

/* modifications to Bootstrap style */

.btn-group {
  padding-left: 0px;
  padding-right: 0px;
}

.btn-group>.dropdown:not(:last-child)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.dropdown:nth-child(n+3)>.btn, .btn-group>:not(.btn-check)+.dropdown>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-menu>li>.btn {
  border-radius: 0;
}

.mobile-dropdown>ul {
  list-style-type: none;
  padding-left: 0;
}

.mobile-dropdown>ul>li>.btn {
  border-radius: 0;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Show dropdown on hover */
/*
.dropdown:hover .dropdown-menu {
    display: block;
}
*/

/* Make selected tool dropdown look like a selected radio button */

.btn.selected {
  background-color: #0a58ca;
  color: white;
}

.btn.selected {
  background-color: #0a58ca;
  color: white;
}


.title {
  font-size: 10pt;
  color: rgba(0, 0, 0, 0.5);
}

.toolbar-range {
  width: 100px;
  padding-top: 3px;
}

.toolbar-range::-webkit-slider-thumb {
  background: gray;
  border: 2px solid darkgray;
}

.toolbar-range::-moz-range-thumb {
  background: rgb(96, 96, 96);
  border: 2px solid gray;
}

.toolbar-range::-webkit-slider-runnable-track {
  background: rgba(128,128,128,0.5);
}

.toolbar-range::-moz-range-track {
  background-color: rgba(128,128,128,0.5);
}

.range-minus-btn {
  padding-left: 0px;
  padding-right: 7px;
}

.range-plus-btn {
  padding-left: 7px;
  padding-right: 0px;
}

.settings-number {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  width: 40px;
  text-align: center;
}

#more-options-dropdown {
  width:350px;
  max-height: 80vh;
  overflow-y: auto;
}

#advanced-help {
  font-size: 9pt;
}


#mobile-dropdown-options .container {
  max-height: 75vh;
  overflow-y: auto;
}

#mobile-dropdown-options .row {
  padding-top: 3px;
  padding-bottom: 3px;
}

#mobile-dropdown-options .form-check-input {
  height: 1.2em;
  width: 2.4em;
}

#help-dropdown {
  width:300px;
  background: rgb(64, 64, 64);
  color: white;
  max-height: 80vh;
  overflow-y: auto
}

#help-dropdown a {
  color: white;
}

.obj-bar {
  z-index: -1;
  background-color:rgba(23,162,184, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color:white;
  font-size:12pt;
  
  padding-top: 3px;
  padding-left: 12px;
  padding-right: 7px;
  padding-bottom: 3px;
  margin: auto;
  margin-top: 16px;
  text-align: center;
  border-radius: 0.5em;
}

.obj-bar .btn {
  padding-top: 0;
  padding-left: 7px;
  padding-right: 7px;
  color: white;
}

.obj-bar-nobr {
  white-space: nowrap;
  padding-left: 3px;
  padding-right: 3px;
}

.obj-bar .form-range {
  width: 125px;
  padding-top:15px;
  padding-left: 3px;
}

.obj-bar .form-range::-webkit-slider-thumb {
  background: gray;
  border: 2px solid white;
}

.obj-bar .form-range::-moz-range-thumb {
  background: gray;
  border: 2px solid white;
}

.obj-bar .form-range::-ms-thumb {
  background: gray;
  border: 2px solid white;
}

.obj-bar .form-range::-webkit-slider-runnable-track {
  background: rgba(255,255,255, 0.5);
}

.obj-bar .form-range::-moz-range-track {
  background-color: rgba(255,255,255, 0.5);
}

.obj-bar-editable {
  color: white;
  background-color: rgba(255,255,255,0.2);
  border: none;
  text-align: center;
}

.obj-bar-editable::selection {
  background-color: gray;
  color: white;
}

.obj-bar-number {
  width: 40px;
  padding-left: 1px;
  padding-right: 1px;
  font-size: 15px;
}

.mq-cursor {
  border-color: white !important;
}

.info-icon {
  color: rgba(255, 255, 255, 0.6);
  padding-left:0px;
  padding-right:0px;
}


.obj-bar .form-switch .form-check-input {
  margin-top: 0px;
  background-color: rgba(255,255,255, 0.3);
  border: none;
  vertical-align: middle;
}

.obj-bar .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f0f0f0'/%3e%3c/svg%3e");
}

.obj-bar .form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.obj-bar .form-switch .form-check-input:checked {
  background-color: gray;
  border: none;
}

.obj-bar .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.obj-bar .form-switch .form-check-input:checked:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

#showAdvanced {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.footer-left {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -2;
  padding-right: 80px;
}

#forceStop {
  color: gray;
  cursor: pointer;
}

#forceStop .spinner-border {
  width: 1rem;
  height: 1rem;
}

.footer-right {
  position: absolute;
  right: 0;
  bottom: 0;
}

.footer-right .btn {
  color: gray;
  padding: 3px;
}

#about {
  color: white;
}

.saveBox {
  text-align: center;
  position:absolute;
  top: calc(50% - 40px);
  z-index:0;
}

#xybox {
  background-color:rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color:white;
  position:absolute;
  border:none;
}

#status {
  color: gray;
  background-color:rgba(0,0,0,0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top-right-radius: 0.5em;
  width: fit-content;
}

#sideBar {
  position: absolute;
  z-index: -2;
  top: 46px;
  left: 0;
  width: 400px;
  max-width: 100%;
  height: calc(100% - 46px);
  display: flex;
  flex-direction: column;
}

#sideBarMobileHeightDiff {
  height: 22px;
}

#jsonEditorContainer {
  width: 100%;
  flex-grow: 1;
  background-color:rgba(45, 51, 57,0.8);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#jsonEditor {
  width: 100%;
  height: 100%
}

#warning {
  color: black;
  font-family: monospace;
  padding-right: 0.5em;
  background-color:rgb(255,255,0,0.8);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top-right-radius: 0.5em;
}

#error {
  color: white;
  font-family: monospace;
  padding-right: 0.5em;
  background-color:rgba(255,0,0,0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top-right-radius: 0.5em;
}

::-webkit-scrollbar {
  background: none;
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-thumb {
   border: solid 0 rgba(0, 0, 0, 0);
   border-right-width: 4px;
   border-left-width: 4px;
   -webkit-border-radius: 6px 2px;
   -webkit-box-shadow:
   inset 0 0 0 0px rgba(128, 128, 128, 0.2),
   inset 0 0 0 4px rgba(128, 128, 128, 0.2);
}
::-webkit-scrollbar-track-piece {
   margin: 4px 0;
}
::-webkit-scrollbar-thumb:hover {
    border-right-width: 3px;
    border-left-width: 3px;
   -webkit-box-shadow:
     inset 0 0 0 0px rgba(128,128,128,0.9),
     inset 0 0 0 4px rgba(128,128,128,0.9);
}
::-webkit-scrollbar-corner {
   background: transparent;
}
.ace_scrollbar-h{
  margin: 0 2px
}

#moduleIframe {
  width: 100%;
  height: 500px;
  max-height: 70vh;
  border: none;
}

.module-modal-body {
  padding: 0 !important;
}