app.css

i, svg {
    pointer-events: none;
}

/*  icons don't exist for mouse-events
*   if this wasn't set, clicking on icons wouldn't fire
*   parent event with used event delegation
*/

@media (min-width: 400px) {
    .main-container {
        min-width: none;
    }
}

@media (max-width: 400px) {
    body {
        overflow-x: hidden;
    }

    .sb-l {
        max-width: none !important;
    }

    .main-container {
        height: inherit !important;
        min-width: 330px;
    }

    .sidebar .nav {
        margin-bottom: 0 !important;
    }

    .grav {
        padding-top: .2rem !important;
    }
}

@media (max-width: 440px) {
    .mobile-neg-margin {
        margin-left: calc(50vw - 215px) !important;
    }
}

/* Bootstrap md breakpoint */
@media (max-width: 822px) {
    #appname {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar-toggle {
        display: unset;
    }
}

@media (min-width: 769px) {
    .navbar-toggle {
        display: none;
    }
}

/* JSON-editor sizing */
@media (min-width: 1416px) {
    .modal-dialog {
        max-width: 1200px;
    }
}

@media (max-width: 1415px) {
    .modal-dialog {
        max-width: 85vw;
    }
}

#wrapper {
    padding-top: 56px;
    background-color: #ffffff;
}

#canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    background-color: white ;
}

#instructions {
    position: absolute;
    top: 0px;
    left: 5px;
    color: white;
    text-align: right;
}

#actuators-container {
    position: absolute;
    left: 4rem;
    bottom: 35px;
    width: 100%;
}

.custom-range {
    min-width: 300px;
    padding-left: 3px;
    padding-right: 3px;
}

output.badge {
    margin-left: 1px;
}

.badge {
    padding-top: .25rem !important;
}

.btn-nohalo:focus {
    box-shadow: none;
}

.greenish {
    background-color: #005454;
    color: white;
}

/* trashcan red when hover parentbutton */
#deletenode:hover svg{
    color:crimson;
}

.fitlineheight {
    line-height: .65em !important;
}

/* class for additional containers due to bugged img scaling in chrome */
.fl-w{
    flex: 0 1 25%;
    max-width: 60px;
    background-color: white;
    border: 1px solid #343a40;
}

.vec_btn {
    flex: 0 1 25%;
    max-width: 60px;
    background-color: white;
    height: auto;
}

.svg-btn {
    margin-bottom: .1rem;
    padding:0rem;
    width:50px;
    height:50px;
}

/* align svg icons */
.svg-icon {
    position: relative;
    top: .125em;
}

#g-arrow {
    margin-top: .4rem;
}

.navbar-nav-svg {
    width:25px;
    height:25px;
    /* margin-top: .3rem; */
}

.nav-svg-logo {
    color: #6c757d
}
.nav-svg-logo:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* fix nav-toogle button jumping left/right */
.navbar {
    justify-content: unset !important;
    min-height: 56px;
}

.navbar-toggler {
    margin-right: 1rem;
}

.navafter::after {
    margin-top: .7rem !important;
    margin-left: .3rem !important;
}

.grav {
    /* padding: .375rem .75rem; */
    padding-top: .375rem;
}

/* disable horizontal scrolling here because it is inconsistent in sb classes */
.simplebar-content{
    overflow-x: hidden !important;
}

.hoverexpand:hover>.dropdown-menu {
    display: block;
}

.dropright .dropdown-toggle::after {
    position: absolute;
    right: 0.6em;
    top: 0.9em;
}

.dropdown-toggle:hover, .dropdown-item:hover{
    cursor: pointer;
}

.navbar-brand {
    color: white !important;
    font-style: italic;
    font-family: consolas;
}


/* Contextmenu styles */
#contextMenu {
    position: absolute;
    display: none;
}

.card-header, .card-body {
    padding: .25rem .75rem !important;
}

.card-header:hover, .card-header.input-group-text:hover {
    cursor: move;
}

.card-header {
    background-color: rgba(0,0,0,.15);
}

.input-group-text {
    padding-top: 0.1rem !important;
    padding-right: 0.3rem !important;
    padding-bottom: 0.1rem !important;
    padding-left: 0.2rem !important;
}

#contextMenuBody .section-divider:not(:first-child) {
    height: 0;
    margin-top: 0.3rem;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

#contextMenuBody:last-child {
    margin-bottom: 0.3rem;
}

.ctxm-right:hover {
    cursor:pointer;
}

.custom-select {
    width: auto !important;
    height: auto !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-right: 1.25rem !important;
    padding-left: .25rem !important;
    margin-right: 0.2rem;
}

.custom-number-input {
    width: 4rem !important;
    height: auto !important;
    margin-right: 0.2rem;
}

/* start toogleswitch */
.lbl {
	position: relative;
	display: block;
	height: 18px;
	width: 32px;
	background: #898989;
	border-radius: 100px;
	cursor: pointer;
    margin-bottom: 0px;
    margin-top: 6px;
    transition: all 0.3s ease;
}

.lbl:after {
	position: absolute;
	left: 1px;
	top: 1px;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
	content: '';
	transition: all 0.3s ease;
}

.lbl:active:after {
	transform: scale(1.15, 0.85);
}

.cbx:checked ~ label {
	background: #6fbeb5;
}

.cbx:checked ~ label:after {
	left: 15px;
	background: #179588;
}

.cbx:disabled ~ label {
	background: #d5d5d5;
	pointer-events: none;
}

.cbx:disabled ~ label:after {
	background: #bcbdbc;
}

/* .lbl {
	position: relative;
	display: block;
	height: 14px;
	width: 30px;
	background: #898989;
	border-radius: 100px;
	cursor: pointer;
    margin-bottom: 0px;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.lbl:after {
	position: absolute;
	left: -2px;
	top: -2px;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
	content: '';
	transition: all 0.3s ease;
}

.lbl:active:after {
	transform: scale(1.15, 0.85);
}

.cbx:checked ~ label {
	background: #6fbeb5;
}

.cbx:checked ~ label:after {
	left: 14px;
	background: #179588;
}

.cbx:disabled ~ label {
	background: #d5d5d5;
	pointer-events: none;
}

.cbx:disabled ~ label:after {
	background: #bcbdbc;
} */
/* end toogleswitch */

.ctxm-section-title {
    padding-left: 0.75rem !important;
    background-color: inherit !important;
    border: none !important;
}

.ctxm-input-label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 0.1rem;
    padding-right: 0.3rem;
    padding-bottom: 0.1rem;
    padding-left: 0.2rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: inherit !important;
    border: none !important;
    border-radius: 0.25rem;
}

.ctxm-number {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ctxm-right {
    position: absolute;
    top: 0.1rem;
    right: 0.25rem;
}

.ctxm-right:hover svg{
    color: crimson;
    cursor: pointer;
}

.modal-content, .card-header {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

#modalTextarea {
    /* max-height: calc(70vh); */
}

.CodeMirror {
    height: auto !important;
}

.CodeMirror-scroll {
    max-height: calc(70vh);
}

.viewmodal {
    max-width: 300px;
}

.view-inputtext {
    width: 3.5rem;
    justify-content: right;
}

#aboutModal-trigger:hover {
    cursor: pointer;
}

input[type='color'] {
    height: auto;
    margin-left: .2rem;
}

#view-fill-color:disabled:parent:first-child {
        background-color: red !important;
}

.modal-body .input-group:last-child {
    margin-bottom: 0 !important;
}

/* pretty-print <pre>-content */
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

.statbar {
    position: absolute;
    bottom: 0;
    margin-top: -6px; /*no margin padding etc in sight but still needed to get rid of gap between canvas...*/
    width: 100%;
    padding: 0px;
    /* Set the fixed height of the footer here */
    height: 30px;
    line-height: 30px;
    /* Vertically center the text there */
    background-color: #f5f5f5;
    overflow: hidden;
    /* justify-content: left; */
}

#sbCoords {
    min-width: 8rem;
}
#sbMode {
    min-width: 9.5rem;
}
#sbCartesian {
    min-width: 7rem;
}
#sbBtn {
    min-width: 3.5rem;
}
#sbDbtn, #sbFPS {
    min-width: 4rem;
}
#sbState {
    min-width: 9rem;
}
#sbDragging {
    min-width: 7.5rem;
}
#sbDragmode {
    min-width: 9rem;
}
#sbDOF {
    min-width: 4rem;
}
#sbGravity {
    min-width: 6rem;
}

.label {
    display:inline-block;
    color: #fff;
    background-color: #007bff;
    width: inherit;
}

/* better alternative? */
.sb-l {
    flex-basis: 70px;
    width: 100%;
    max-width: 70px;
    overflow-y: auto;
    background-color: #343a40;
}

.main-container {
    /* overflow-y: auto; */
    overflow-y: hidden;
    overflow-x: hidden;
    /* min-width: 330px; */
}

.content {
    height: calc(100vh - 56px) !important;
}

/*
 * Typography
*/

h1 {
    margin-bottom: 20px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eee;
}

/* Sidebar navigation */
.sidebar {
    padding-left: 0;
    padding-right: 0;
}

.sidebar .nav {
    margin-bottom: 20px;
}

.sidebar .nav-item {
    width: 100%;
}

.sidebar .nav-item+.nav-item {
    margin-left: 0;
}

.sidebar .nav-link {
    border-radius: 0;
}

/*
* Dashboard
*/

/* Placeholders */

.placeholders {
    padding-bottom: 3rem;
}

.placeholder img {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.blink {
    animation: blink-animation .5s steps(5, start) infinite;
    -webkit-animation: blink-animation .5s steps(5, start) infinite;
  }
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }

  #sb-r {
    width:270px;
    z-index:1029;
    margin-left: auto;
    /* hide scrollbar */
    margin-right: -20px;
    max-height: calc(100vh - 56px - 30px);
    overflow-x: hidden;
    overflow-y: hidden;
    /* padding-left:0px; */
    /* padding must be set in element! */
    /* height: 100%; */
    /* position: fixed; */
    /* left: 0; */
    /* margin-top: 60px; */
    /* transform: translateX(200px);
    transition: transform 250ms ease-in-out; */
    transition: padding-left 250ms ease-in-out;
    /* background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%); */
    /* click through sidebar & content */
    pointer-events: none;
}

#sb-r:hover {
    cursor: default;
}

#sb-canvas-container {
    /* padding: 75px 0 0 0; */
    /* border: solid red 2px; */
    overflow-x: hidden;
    overflow-y: auto;

    /* hide scrollbar */
    /* position: relative; */
    /* right: -20px; */
}

#sidebar-toggle {
    padding: 0 .5rem .2rem .5rem;
}

.pt-custom {
    padding-top: .34rem;
}

/* #sidebar-toggle {
    vertical-align: 0;
    margin-top: 10px;
} */

/* #openSidebarMenu {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 0 !important;
    height: 100%;
    width: 100%;
    padding-top: 12px;
    height: 22px;
    width: 22px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff7;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
#openSidebarMenu:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
} */

/* #openSidebarMenu:checked ~ #sb-r {
    padding-left: 200px;
} */

.glass {
    /* box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); */
    /* box-shadow: inset 0 0 2000px rgba(52, 58, 64, .5); */
    /* filter: blur(5px); */
}