body {
  background-color: #444444;
  font-family: sans-serif;
  overflow-y:hidden;
}
body.waiting * { cursor: wait; }
#topo {height:72px;padding-top:2px;width:100%;background-image:url("fundotopo.png");background-repeat:repeat-x;}
#logo {float:left;margin-right:25px;margin-left:5px;text-align:right;}
#blockly {font-size:15px;color:white;margin-right:1px;}
#robogode img {height:90px;float:left;}
#logo img {height:45px;}
#menu {font-size:20px;color:white;padding-left:250px;padding-top:10px;}
#menu a {font-size:20px;color:#abd037;}
#nivel {margin-left:10px;float:left;margin-top:-7px;}
#salvamento {margin-left:10px;width:630px;}
#login {color:white;float:right;margin-top:3px;margin-right:10px;}
#blocklyDiv,#blocklyDiv4  {height: 680px; width: 750px;}

#painel_jogo_sphero {height:45px;color:white;font-size:15px;padding-top:5px;width:700px;float:left;text-align:right;}
#painel_jogo {height:45px;color:white;font-size:15px;padding-top:5px;width:550px;float:left;text-align:right;}
#code {float:right;width:45px;margin-left:10px;}
#var {float:right;width:45px;margin-right:-10px;cursor:pointer;}

#open {float:left;width:45px;margin-left:100px;margin-top:-3px;}
#codename {float:left;width:150px;margin-left:-10px;}
#save {float:left;margin-left:25px;width:45px;}
#delete{float:left;width:50px;margin-left:5px;display:none;}
#export{float:left;width:50px;margin-left:3px;display:none;}

#gabarito  {float:left;width:45px;margin-left:250px;}
#gabarito  a{color:white;font-size:12px;}

#info_usuario{height:20px;width:40px;font-size:15px;float:right;}
#info_login{height:35px;font-size:16px;float:right;margin-right:8px;padding-top:2px;color:white;width:220px;text-align:right;}

#raspberry {float:left;width:45px;display:none;}
#sphero {float:left;margin-left:25px;}
#sphero2 {float:left;margin-left:25px;display:none;}
#sphero3, #sphero3x {float:left;margin-left:-70px;display:none;cursor:pointer;}
#sphero4, #sphero4x  {float:left;margin-left:-70px;display:none;cursor:pointer;}
#run  {float:right;width:45px;cursor:pointer;}
#reload  {float:right;width:45px;}
#stop {float:right;width:45px;}
#grid {float:right;width:45px;}


#login{cursor:pointer;}
#macaddress {float:left;width:95px;margin-left:10px;margin-top:5px;}
#calibragemOld {float:left;width:80px;margin-top:5px;margin-left:60px;padding-top:5px;padding-bottom:5px;cursor:pointer;color:#abd037;text-decoration: underline;}
#runImg {margin-left:10px;cursor:pointer;}
#raspberry img, #sphero img,#sphero2 img,#sphero3 img,#sphero4 img{cursor:pointer;}
#runImg, #stop img, #code img, #reload img {height:35px;cursor:pointer;}
#preview {float:right;margin-right:140px;}
#previewImg,#previewImgStation, #timelineHelpImg {height:50px;cursor:pointer;margin-right:10px;}
#publishImg {height:50px;cursor:pointer;position:relative;}
#runWait {height:35px;margin-left:5px;cursor:wait;display:none;}
#runStop {height:35px;margin-left:5px;cursor:wait;display:none;}
#delete img, #save img, #open img {height:35px;cursor:pointer;margin-top:-5px;}
.tm-content {margin-bottom:0 !important;}
.tm-content:hover{cursor:pointer;color:red;}
#listaBLE  .tm-content{color: white;margin-bottom:5px;margin-left:50px;}
.titulo{font-size:20px;margin-left:50px;}

.blocklyToolboxDiv{background-color:#444444;color:white;height:800px !important;}

.blocklyTreeRow:hover{color:black;}

/*
 Tomloprod Modal 1.0.2
 
 The MIT License (MIT)
 
 Copyright (c) 2015 by Tomás López.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
.tm-avoidSelection{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.tm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 500px;
    min-width: 320px;
    height: auto;
    z-index:999999999;
    visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
}
.tm-title{
    max-height: 90px;
    margin: 0;
    text-align: left;
    font-size: 2.4em;
}
.tm-content {
    position: relative;
    margin: 0 auto;
    max-height: 300px;
    overflow-y: auto; 
    overflow-x: hidden;
    margin-bottom: 20px;
    padding: 0 2em 0 50px;
}
.tm-center{
    padding-left: 25%;
    padding-right: 25%;
}

.tm-XButton:hover,
.tm-XButton:active{
    transform: scale(1.5,1.5); 
    -webkit-transform: scale(1.5,1.5); 
    -ms-transform: scale(1.5,1.5); 
    -o-transform: scale(1.5,1.5);    
    -moz-transform: scale(1.5,1.5);
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
.tm-XButton {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    transition: transform 0.8s;
    -webkit-transition: -webkit-transform 0.8s;
    -moz-transition: -moz-transform 0.8s;
    -ms-transition: -ms-transform 0.8s;
    -o-transition: -o-transform 0.8s;
    position: absolute;
    top: 10px;
    left: 15px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
}
.tm-XButton:after {
    font-family: Verdana !important;
    font-size: 29px;
    display: block;
    content: "×";
}
@media (max-width: 768px) {
    .tm-title{
        box-shadow: 0 4px 8px -5px rgba(0, 0, 0, 0.8); 
    }
    .tm-modal {
        width: 100%;
        height: 100%;
        left: 50% !important;
        top: 50% !important;
        max-width: 100%;
    }
    .tm-content{
        color: #5c7d98;
        position: relative;
        margin: 0 auto;
        height:100%;
        max-height:100%;
        overflow-y: scroll;
        padding: 15px 40px 30px;
    }
    .tm-content:after{
        padding-bottom: 120px;
        content:"";
        display:block;
    }
}
.tm-showModal { 
    visibility: visible; 
}
.tm-overlay { 
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1040;
    opacity: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, visibility 0.3s;
    -moz-transition: -webkit-transform 0.3s, opacity 0.3s, visibility 0.3s;
    -ms-transition:-webkit-transform 0.3s, opacity 0.3s, visibility 0.3s;
    -o-transition: -webkit-transform 0.3s, opacity 0.3s, visibility 0.3s;
    transition: -webkit-transform 0.3s, opacity 0.3s, visibility 0.3s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.tm-showModal ~ .tm-overlay {
    opacity: 1;
    visibility: visible;
}
.tm-wrapper{
    height: 100%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
    background-color:#FFF;
    overflow: hidden;
    color: #5c7d98;
}
.tm-MainContainer{
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    -ms-transform-origin: center top;
    -webkit-transform-origin:  center top;
    transform-origin: center top;
}
.tm-MainContainer.tm-effect{
 -webkit-transform: scale(0.8);
    -moz-transform:  scale(0.8);
    -o-transform:  scale(0.8);
    -ms-transform:  scale(0.8);
    transform:  scale(0.8);
}
.tm-effect .tm-wrapper {
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s,opacity 0.5s,visibility 0.5s;
    -moz-transition: -moz-transform 0.5s,opacity 0.5s,visibility 0.5s;
    -o-transition: -o-transform 0.5s,opacity 0.5s,visibility 0.5s;
    transition: transform 0.5s,opacity 0.5s,visibility 0.5s;
    -ms-transition: -ms-transform 0.5s,opacity 0.5s,visibility 0.5s;
}
.tm-showModal.tm-effect .tm-wrapper {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

.tm-modal h3 {
    max-height: 90px;
    margin: 0;
    font-size:24px;
    text-align: center;
    padding-top: 34px;
}
.tm-content >  p {
    margin-top: 20px;
}
.tm-content button {
    display: block;
    margin: 0 auto;
    font-size: 0.8em;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    font-size: 1em;
    font-weight: 500;
    color: white;
	text-decoration:underline;
    display: inline-block;
	width:150px;
	cursor:pointer;
}

.inputfile + label:hover {
    background-color: #333333;
}

#canvasImg:hover {
	cursor:crosshair;
}

.eixo{
	font-size:10px;
	color:red;
}

.eixoY{
	width:20px;float:left;height:408px;border-top:solid;border-top-width:1px;border-left:solid;border-left-width:1px;border-color:#555555;padding-top:-5px;vertical-align:top;
}

.eixoX {
	margin-left:-2px;margin-top:-3px;margin-bottom:2px;margin-right:1px;border-right:solid;border-right-width:1px;border-left:solid;border-left-width:1px;border-bottom:solid;border-bottom-width:1px;border-color:#555555;
}
.pixelCapturado {
	color:white;font-size:12px;margin-left:-10px;margin-top:1px;
}

.btn-round {
  background-color: white;
  border-radius: 999em;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  line-height: 1;
  font-size: 26px;
  position: relative;
  display: inline-block;
}

.btn-round a, .btn-round a:hover {cursor:pointer;}

.btn-mais {
  float:left;
  color:black;
  margin-bottom:8px;
  vertical-align:middle;
}

.btn-mais a  {
	color:black;
	text-decoration:none;
	margin-left:30px;
	font-size:16px;
}

.btn-mais a img{
	height:20px;
}

.fase-titulo {
	float:left;font-size:14px;color:white;margin-top:2px;
}

.btn-round span  {
  position: absolute;
  left: 0;
  top: 75%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -22px;
  color: #FFF;
  cursor:pointer;
}

.btn-round.small  {
  height: 20px;
  width: 20px;
  margin-bottom:8px;
  cursor: pointer;
  margin-left:6px;
  margin-top:6px;
  font-size:16px;
  padding-top:5px;
  }
  
.btn-round.selected {
  margin-left:6px;
}

.btn-round.small a  {
 text-decoration:none;
 margin-left:5px;
 color:rgb(250,250,250);  
}

.btn-round.selected span{
	color:black;
}

.btn-round a span {
	font-size:26px;cursor:pointer;
}

.white { background-color: white;color:black !important; }
.red { background-color: #d23f31; }
.green { background-color: #57A429; }
.blue { background-color: #38818F;}
.orange { background-color: #D28031; }
.purple { background-color: #8064A8; }
.yellow { background-color: SaddleBrown; }
.black { background-color: #2F4F4F; }
.darkBlue { background-color:#191970;}

.red:hover { background-color: #c22f21; }
.green:hover { background-color: #479419; }
.blue:hover { background-color: #28717F;}
.orange:hover { background-color: #B26021; }
.purple:hover { background-color: #6C5094; }
.yellow:hover  { background-color: SaddleBrown; }
.black:hover { background-color: #2F4F4F; }
.darkBlue:hover { background-color:#191970;}

#canvasBandeiras{
	height:150px;
	width:370px;
}

.eixoCima, .eixoBaixo {
	margin-top:1px;
	margin-bottom:1px;
	font-size:12px;
	color:ghostwhite;
	margin-right:-5px;
	padding-left:5px;
}

.d-0,.d-1,.d-2,.d-3,.d-4,.d-5,.d-6,.d-7,.d-8,.d-9,.d-10, .d-11, .d-12, .d-13, .d-14, .d-15, .d-16, .d-17, .d-18 {display:none;}

.botaoproximo {
	height:24px !important;
	float:right !important;
	cursor:pointer !important;
}
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.formHelpDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.formHelpDialog:target {
    opacity:1;
    pointer-events: auto;
}
.formHelpDialog > div {
    width: 800px;
    height: 500px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.vrDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.vrDialog:target {
    opacity:1;
    pointer-events: auto;
}
.vrDialog > div {
    width: 700px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}

#openModal a {
	text-decoration:none;
}

.sprk0 {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.sprk90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.sprk180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.sprk270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

#sprktapete {
	-webkit-transition: all; /* Safari */
	-webkit-transition-duration: 3s; /* Safari */
	-webkit-transition-timing-function: ease-in-out; /* Safari */
    transition: all;
	transition-duration: 3s;
	transition-timing-function: ease-in-out;
	z-index:1000;
}

#sprktapeteCauda {z-index:1000;}

.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}

.introducao, .final {display:none;}

#programaTextual {
    background: url(js_editor_linhas.png) white;
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

.compilacaoOk {
 color:rgb(160,192,255);
} 

.erroCompilacao {
 color:rgb(255,160,160);
}

/* switch usa ou não sphero */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#cor {
	position:absolute;
	height: 18px;
	width: 18px;
	z-index:1500;
	background: '';
	border-radius: 90%;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 20px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 72px;
  width: 32px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -24px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

#mBotConnect,#spheroConnect, #BLEBitConnect, #microbitConnect,  #smartlampConnect {float:left;margin-left:20px;text-align:center;cursor:pointer;}

.cinza{
  filter:gray;
  filter:grayscale(100%);
}

.estacaoId {z-index:100;background-color:MidnightBlue;color:GhostWhite;font-size:9px;}

.componenteStatus{margin-left:5px;width:70px;}

.medidaCircuito{border-style:solid;border-width:1px;float:left;margin-top:4px;}
.eventoMicrobit{border-style:solid;border-width:1px;float:right;margin-top:2px;margin-left:1px;font-size:14px;height:32px;color:GhostWhite;visibility:hidden;}
#eventoMicrobitAcel{width:32px;text-align:left;padding-left:2px;padding-top:2px;padding-bottom:3px;font-size:10px;}
#eventoMicrobitTemp{width:30px;text-align:left;padding-top:5px;padding-left:2px;}
#eventoMicrobitButton{width:25px;text-align:left;padding-top:5px;padding-left:4px;}

#codeOpen, #codeSave {height:26px !important;}
#codeDelete {height:24px !important;}

#blocklyFormDivPreviewMsg{position:fixed;top:145px;right:20px;color:lightgray;font-size:14px;display:none;}
#blocklyFormDivPreviewTitle{position:fixed;top:195px;right:12px;color:ghostwhite;font-size:12px;display:none;}
.blocklyFormDivPreview{position:fixed;top:215px;right:10px;height:300px;width:500px;background-color:ghostwhite;display:none;}
#blocklyFormDivPreviewCol{position:fixed;top:520px;right:10px;height:100px;width:500px;display:none;font-size:12px;color:ghostwhite;}
.formComponentes {position:absolute;height:60px;font-size:32px;}

/* Styling Checkbox Starts */
.checkbox-label {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 20px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 1;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 2px solid #FFFFFF;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #FFFFFF;
    border-radius: 5px;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 2px solid #FFFFFF;
}

.checkbox-container {
    float: left;
    width: 50%;
    box-sizing: border-box;
    text-align:center;
   padding: 40px 0px;
}


.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #009BFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #009BFF;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}

.blocklyFormDivRuntime {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: ghostwhite; 
  
}

#runStopForm{ position:fixed;right:20px;top:10px;cursor:pointer;z-index:100;}

.hr-show {border-top: 1px dashed lightgray;opacity:1;}
.hr-hidden {border-top: none;border-color:ghostwhite;opacity:0;}

span.msg{}

div.VARIAVEL{border-style:solid; border-width:1px;padding:2px 2px 2px 2px;z-index:200;}

#url1 {background-image:url('../mm/https.png'); background-repeat:no-repeat; background-position:6px;background-color:#f1f3f4;padding-left:30px;	}
#msgSend {background-color:ghostwhite;margin-left:30px;}

.versao{position:fixed;top:13px;left:135px;color:#d68606;}
.novaVersao{position:fixed;top:13px;left:135px;color:#ffffff;font-size:12px;font-style:normal;}

a-scene {height: 1px;width: 1px;}

ul#tabs { list-style-type: none; margin: -10px 0 0 0; padding: 0 0 0.3em 0;}
ul#tabs li { display: inline; height:80px;}
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; cursor:pointer; }
ul#tabs li a:hover { background-color: #e4e4e4; }
ul#tabs li a.selected { color: #d48403; background-color: #444444; font-weight: bold; padding: 0.3em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }

.planets{border-radius:35px;height:200px;cursor:pointer;}

button.externo {
		background-color:#444444;
		color:ghostwhite;
	}
button.externo:hover {
	background-color:#666666;
}

#acender, #apagar, #calibragem, #finalizarCalibragem {height:400px;}

.lampadaForm{position:absolute; right:25px;top:100px;}

.switch-container{margin-left:50px !important;}

.linesensorDiv{
	float:left;
}
.linesensorValue{
	text-align:center;
}