:root {
  --main-bg-color: rgba(0, 0, 0, 0.01);
}

body {
	background-color: #090909;
	overflow: hidden;
	margin: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 2px;
	display: grid;
	/*grid-template-columns: auto 325px;*/
	grid-template-columns: auto 0 325px;
	grid-template-rows: 100%;
/*	display: flex;
	flex-direction: row;
	align-items: stretch;
	align-content: stretch;*/
}

body.advancedLayout {
  grid-template-columns: auto 325px 325px;
}
body.noGui {
  grid-template-columns: auto 0 0;
}
#gui{
  display: none;
}
#info .cr {
  padding: 8px;
}

.cr span.property-name {
  user-select: none;
}

#info ul.closed li.cr, #info ul.closed #controls {
  display: none;
}

#info .cr > div {
  display: flex;
  justify-content: space-between;
}

#info .cr > div > span.property-name {
  margin-left: 5px;
}

#info .cr > div > svg {
  order: -1;
}

#info .cr > div > svg {
  width: 45px;
  height: 25px;
  padding: 3px;
}

#info .cr > div > svg path {
  fill: white;
}

#info .cr > div > svg path.blue {
  fill: #4691f6;
  stroke: #4691f6;
  color: #4691f6;
}

#info .cr > div > svg path.red {
  stroke: #f44336;
  color: #f44336;
  fill: #f44336;
}

#info .cr > div > svg path.yellow {
  stroke: #ffeb3b;
  fill: #ffeb3b;
  color: #ffeb3b;
}

#info .cr > div > svg path.green {
  stroke: #3cba00;
  fill: #3cba00;
  color: #3cba00;
}


body.advancedLayout #info .cr {
  padding: inherit;
}

body.advancedLayout #info .cr > div > svg {
  display: none;
}

body.advancedLayout #gui{
  display: flex;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.dg .close-button {
	display: none;
}

.dg {
	overflow-y: auto;
}

.dg.main {
	height: 100%;
}

.function span.property-name {
    width: 100%;
}

.boolean span.property-name {
    width: 80%;
}
.boolean div.c {
    width: 20%;
}

#main {
	/*display: grid;*/
	/*grid-template-rows: auto 250px;*/
	/*grid-template-columns: 100%;*/
}

#canvas {
	overflow: hidden;
}

#canvas.grab {
	cursor: -webkit-grab; 
	cursor: grab;
}

.checkered {
  background-color: #FFF;
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  background-image: linear-gradient(45deg, var(--main-bg-color) 25%, transparent 25%, transparent 75%, var(--main-bg-color) 75%, var(--main-bg-color)),
                    linear-gradient(45deg, var(--main-bg-color) 25%, transparent 25%, transparent 75%, var(--main-bg-color) 75%, var(--main-bg-color));  
}

#command-list {
	max-height: 400px;
}

#info {
	display: flex;
    flex-direction: column;
}

#info ul.closed .c-list {
     display: none;
}

#info > .main > ul > li {
	display: flex;
    flex-direction: column;
}

#console-list, #command-list {
	overflow-y: auto;
}

#console-list {
    max-height: 200px;
}

#info .dg.main > ul {
	display: flex;
	flex-direction: column;
}

#info ul::-webkit-scrollbar {
  width: 5px;
  background: #1a1a1a;
}
#info ul::-webkit-scrollbar-corner {
  height: 0;
  display: none;
}
#info ul::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #676767;
}

#info ul.c-list > li {
    padding-right: 38px;
    position: relative;
    height: inherit;
}

#command-list li button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;

    cursor: pointer;
    border-radius: 0;
    border: none;
    width: 22px;
}

#command-list li button:hover {
	background-color: #ff6060;
}

#command-list li .data {
	font-style: italic;
	margin-top: 4px;
}

#console-list li p, #console div table {
	padding: 0;
	margin: 0;
    height: inherit;
}

#console-list li p.error {
	color: #ff3939;
}

#console-list li p.warn {
	color: orange;
}

#console-list li p.info {
	color: #00BCD4;
}

table {
	border-collapse: collapse;
}

icon.websocket, icon.serial {
	float: right;
	color: #f44336;
    margin-right: 5px;
}

icon.connected {
	color: #3cba00;
}

icon.simulator {
	color: #ffeb3b;
}

#loading {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: black;
	opacity: 0;
    z-index: 9999999;

  	transition: opacity 1s;
  	-webkit-transition: opacity 1s;
  	pointer-events: none;
}

#loading.hidden {
	display: none;
}

#loading.loading {
	opacity: 0.8;
}
/* Loading Animation - double bounce */

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;


	display: block;
	position: absolute;
	top: 50%;
	left: 50%;

	width: 64px;
	height: 64px;
	margin: auto;

	transform: translateX(-50%) translateY(-50%);
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


/* Loading Animation - lds-ripple */

.lds-ripple {

	display: block;
	position: absolute;
	top: 50%;
	left: 50%;

	width: 64px;
	height: 64px;
	margin: auto;

	transform: translateX(-50%) translateY(-50%);
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

#keyboard {
  position: absolute;
  bottom: 0;
  z-index: 10;

  max-width: 800px;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
}

#keyboard .input {
  padding: 10px;
  margin: auto;
  margin-bottom: 15px;
  display: block;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size: 16px;
  border-style: solid;
  border-radius: 5px;
  border-color: #ebebeb;
  border-width: 3px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

#keyboard .close-button {
  position: absolute;
  cursor: pointer;
  margin-top: 10px;
  margin-left: 7px;
}

#keyboard .close-button .svg-icon {
  background-color: white;
  border-radius: 1.5em;
}

/* -----
SVG Icons - svgicons.sparkk.fr
----- */

.svg-icon {
  width: 1.5em;
  height: 1.5em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  /* fill: #4691f6; */
  fill: #818181;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}



.simple-keyboard-arrows.simple-keyboard {
  align-self: flex-end;
  background: none;
}
.simple-keyboard-arrows .hg-row {
  justify-content: center;
}

.simple-keyboard-arrows .hg-button {
  width: 50px;
  flex-grow: 0;
  justify-content: center;
  display: flex;
  align-items: center;
}

.controlArrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column;
}

.simple-keyboard-arrows.simple-keyboard.hg-theme-default {
  width: auto;
  background-color: #ececec;
}

.simple-keyboard-arrows.simple-keyboard.hg-theme-default .hg-button.hg-button-arrowup {
  margin: 0 72px 0 72px;
}

.simple-keyboard-arrows.hg-theme-default .hg-button.pressed {
  background: #2196F3;
  color: white;
}

#controls .svg-icon path, #controls .svg-icon polygon, #controls .svg-icon rect {
  color: white;
  fill: white;
}

#controls {
  /* background-color: rgb(239 239 239); */
  /* background-color: rgb(9 9 9); */
  background-color: #1a1a1a;
  border-bottom: solid 1px #363636;
  padding-bottom: 10px;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
}

#controls button {
  border: 0;
  cursor: pointer;
  border-radius: 50px;
  color: white;
  background-color: #1a1a1a;
}

#controls button:hover {
  /* background-color: #a4d6ff; */
  /* background-color: #2fa1d6; */
  background-color: #2196F3;
}

#controls button.selected {
  background: #2196F3;
}

#controls button:focus {
  outline: none;
}

#move-servo-controls, #servo-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#servo-controls span {
  font-size: 13.3333px;
}

.servo-steps button {
  text-align: left;
}

button.center {
  text-align: center;
}

#move-controls {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;

  width: 150px;
  height: 150px;
}

#move-speed {
  margin-top: 10px;
}

#move-controls .button {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#move-controls .up-arrow {
  grid-column: 2;
  grid-row: 1;
}

#move-controls .left-arrow {
  grid-column: 1;
  grid-row: 2;
}

#move-controls .home {
  grid-column: 2;
  grid-row: 2;
}

#move-controls .home img {
  width: 30px;
  margin: auto;
  display: none;
}

#move-controls .home.tipi img {
  display: block;
}
#move-controls .home.tipi svg {
  display: none;
}

#move-controls .right-arrow {
  grid-column: 3;
  grid-row: 2;
}

#move-controls .down-arrow {
  grid-column: 2;
  grid-row: 3;
}

ul.speed {
  display: flex;
  color: white;
  flex-direction: row;
  justify-content: center;
  list-style: none;
  padding: 0;
  font-family: 'Lucia Grande', monospace;
}

ul.speed li {
  margin: 0 5px 0 5px;
  justify-self: start;
}

ul.speed li button {
  padding: 10px;
}

#pen-controls {
  margin-bottom: 10px;
}

#controls #move-speed button {
  border-radius: 0px;
}

#screen-controls {
  position: relative;
}
#controls #fullscreen {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

#controls #fullscreen svg {
  fill: white;
  margin-bottom: -10px;
}
#controls #fullscreen span {
    margin-left: -30px;
    text-align: right;
}

button span.tooltip {
  display: none;
}
button:hover span.tooltip {
  display: flex;
}