/* body {
/* 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 { }
.tm-content:hover{ cursor: pointer; color: #000; }
#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 */
.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 {
	border-radius: 20px 0;
	display: flex;
	align-items: center;
	min-height: 50px;
	margin: -20px -20px 20px;
	position: relative;
}
.tm-title .titulo {
	background: #3681FF;
	border-radius: 20px 0;
	display: block;
	align-items: center;
	min-height: 50px;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: #fff;
	padding: 15px 20px;
}
.tm-content {
	position: relative;
	margin: 0 auto;
	max-height: 300px;
	overflow-y: auto; 
	overflow-x: hidden;
	padding: 5px 0;
}
.tm-center {
	padding-left: 25%;
	padding-right: 25%;
}

.tm-XButton:hover,
.tm-XButton:active{
	opacity: 1;
}
.tm-XButton {
	background: #C9CFD9 url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.757 6.343a1 1 0 1 0-1.414 1.414L10.586 12l-4.243 4.243a1 1 0 1 0 1.414 1.414L12 13.414l4.243 4.243a1 1 0 0 0 1.414-1.414L13.414 12l4.243-4.243a1 1 0 0 0-1.414-1.414L12 10.586 7.757 6.343Z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center;
	background-size: 24px;
	border-radius: 0 20px;
    width: 50px;
	height: 50px;
	text-indent: -999px;
	overflow: hidden;
	opacity: 0.6;
    position: absolute;
    top: 0;
	right: 0;
    transition: opacity .2s linear;
	cursor: pointer;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}
@media (max-width: 768px) {
	.tm-title { }
    .tm-modal {
        width: 100%;
        height: 100%;
        left: 50% !important;
        top: 50% !important;
        max-width: 100%;
    }
    .tm-content { }
}
.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 {
	background: #FFFFFF;
	box-shadow: 0px 30px 200px rgba(19, 44, 82, 0.45);
	border-radius: 20px;
	color: #636E89;
	height: 100%;
	overflow: hidden;
	padding: 20px;
}
.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 {
	background: #3681FF;
	border-radius: 20px 0;
	display: block;
	align-items: center;
	min-height: 50px;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: #fff;
	padding: 15px 20px;
}
.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;
}
*/

.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;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.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);
}

.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 {
	display: none;
}
#blocklyFormDivPreviewTitle {
	display: none;
}
.blocklyFormDivPreviewTitle {
	background: #FFF7B0 url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6M10 22h4M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 1 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14' opacity='.5' stroke='%23493D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 12px 10px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 16px;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: #493D10;
	padding: 14px 15px 14px 45px;
	margin: 0 0 15px;
}
.blocklyFormDivPreview {
	display: none;
	background: #FEFEFE;
	box-shadow: 0px 20px 25px -20px rgba(0, 4, 99, 0.1), 0px 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 10px;
	width: 500px;
	height: 300px;
	position: relative;
	overflow: hidden;
}
.previewFullScreen {
	border-radius: 0;
	box-shadow: none;
	width: 100% !important;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
}
#blocklyFormDivPreviewCol {
	display: none;
	width: 500px;
	margin-bottom: 20px;
}
.blocklyFormDivPreviewCol {
	display: flex;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	color: #1C3358;
	padding: 10px 0;
}
.blocklyFormDivPreviewCol span {
	display: block;
	text-align: center;
	width: 50%;
}

.hr-show {
	background: transparent;
	border-top: 1px dashed rgba(99,110,137,.4);
	width: 100%;
	height: 1px;
	opacity: 1;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
}
.hr-show.hr-1 { top: 75px; }
.hr-show.hr-2 { top: 150px; }
.hr-show.hr-3 { top: 225px; }
.hr-show-h {
	border-top: 0;
	border-left: 1px solid rgba(99,110,137,.1);
	width: 1px;
	height: 100% !important;
	top: 0;
	left: 50%;
}
.hr-hidden { border-top: none; opacity:0;}

#runStopForm {
	background: #EDF0F5 url(../home/img/ico-stop.svg) no-repeat center;
	border: none;
	border-radius: 50%;
	display: block;
	width: 50px;
	height: 50px;
	position: fixed;
	right: 20px;
	top: 20px;
	cursor: pointer;
	z-index: 100;
}
.formComponentes {
	letter-spacing: -.02em;
	color: #636E89;
	position: absolute;
}
.labelFormComponent {
	display: block;
	max-width: 220px;
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
	color: #636E89;
	position: absolute;
	margin: 0 0 0 15px;
}

.formComponentes.TEXTO,
.formComponentes.TEMPORAL {
	display: flex;
	align-items: center;
	width: 220px;
	height: 75px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	margin: 0 0 0 15px;
}

.formComponentes.INPUTTEXT,
.formComponentes.INPUTINTEGER,
select.formComponentes {
    background-color: #fff;
    border: 1px solid rgba(178, 185, 208, 0.5);
    box-shadow: inset 0 1px 0px rgb(94 105 135 / 50%), inset 0 2px 2px rgb(94 105 135 / 20%);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 18px;
    color: #394963;
    padding: 10px;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	
	margin: 16px 0 0 15px;
	height: 40px;
	width: 220px;
}
select.formComponentes {
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 10px center;
    background-size: 16px 12px;
}
button.formComponentes {
    background-color: #2EDF5F;
    box-shadow: 0px 6px 8px rgba(0, 134, 52, 0.08), 0px 3px 4px rgba(0, 134, 52, 0.15), 0px 1px 1px rgba(0, 134, 52, 0.4), inset 0px -2px 0px rgba(0, 0, 0, 0.25);
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
    color: rgba(0,0,0,.7);
    padding: 0 15px;
    position: relative;
	
	margin: 16px 0 0 15px;
	max-width: 220px;
    height: 40px;
}
button.formComponentes:hover {
    background-color: #63FF8F;
    box-shadow: 0px 6px 8px rgba(0, 134, 52, 0.08), 0px 3px 4px rgba(0, 134, 52, 0.15), 0px 1px 1px rgba(0, 134, 52, 0.4), inset 0px -2px 0px rgba(0, 0, 0, 0.25);
    color: rgba(0,0,0,.7);
}
button.formComponentes:active {
    background-color: #2EDF5F;
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.25);
    color: rgba(0,0,0,.7);
}
.formComponentes.CHECKBOX {
    max-width: 220px;
	height: 75px;
    display: flex;
    align-items: center;
	margin: 0 0 0 15px;
}

img.formComponentes {
	display: block;
	margin: 0 0 0 15px;
	transform: translateY(-50%);
}

.checkbox-label {
    display: block;
    position: relative;
	margin: 0 8px 0 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    height: 20px;
    width: 20px;
    clear: both;
}
.checkbox-label input {
    position: absolute;
    opacity: 1;
    cursor: pointer;
}
.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    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;
}

/* 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;} */

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

ul#tabs {
	display: inline-flex;
	list-style: none;
	margin: 0 auto 10px 0;
	padding: 0 0 0 10px;
	position: relative;
}
ul#tabs::after {
	background: #FBFBFB;
	border-radius: 2px;
	display: block;
	content: '';
	width: 100%;
	height: 6px;
	position: absolute;
	top: 100%;
	left: 0;
}
ul#tabs li {
	display: inline;
	margin: 0 10px 0 0;
}
ul#tabs li a {
	background: #C9CFD9;
	border-radius: 10px 10px 0 0;
	box-shadow: inset 0 -1px 0 0 rgba(28, 51, 88,.05);
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.02em;
	color: #1C3358;
	padding: 10px 15px;
	cursor: pointer;
	position: relative;
	opacity: .7;
}
ul#tabs li a:hover { opacity: 1; }
ul#tabs li a.selected {
	background: #FBFBFB;
	box-shadow: none;
	opacity: 1;
}
#tabs a img {
	display: block;
	float: left;
	width: 24px;
	height: 24px !important;
	margin: 0 15px 0 0;
}
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 {
	display: block;
	height: 400px;
}


/* v2 */
body {
	position: relative;
}
body.noScroll {
	overflow: hidden;
}
.bt { cursor: pointer; }
.mm-ead {
	background: url(../home/img/ico-ead.svg) no-repeat center;
	display: block;
	width: 48px;
	height: 48px;
	text-indent: -999px;
	overflow: hidden;
	float: left;
	margin: 22px 0 0 20px;
	position: relative;
	z-index: 1;
}
.code-play-vr {
    background: url(../home/img/ico-play-vr.svg) no-repeat center;
    filter: drop-shadow(0px 1px 1px rgba(90, 72, 50, 0.55)) drop-shadow(0px 3px 3px rgba(90, 72, 50, 0.25)) drop-shadow(0px 6px 9px rgba(90, 72, 50, 0.2));
    display: block;
	width: 32px;
    height: 22px;
    text-indent: -999px;
    overflow: hidden;
    margin: 0 10px;
}
.lesson-step { cursor: pointer; }
.lesson-step.selected .lesson-step-tag {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}
.lesson-step.selected {
    border-color: #13CB55;
}
.lesson-step.optional {
  border-style: dashed;
}
.lesson-step-tag-info {
	text-indent: -999px;
	overflow: hidden;
}
.lesson-step-tag-info:after {
	background: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.531a1.969 1.969 0 1 1 0 3.938 1.969 1.969 0 0 1 0-3.938Zm2.625 11.907c0 .31-.252.562-.563.562H9.939a.563.563 0 0 1-.563-.563v-1.125c0-.31.252-.562.563-.562h.562v-3h-.563a.563.563 0 0 1-.562-.563v-1.124c0-.311.252-.563.563-.563h3c.31 0 .562.252.562.563v4.687h.563c.31 0 .562.252.562.563v1.125Z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center;
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	position: absolute;
	top: 27px;
	left: 3px;
}

.toggleHeader {
	background: #EAEAF3;
	box-shadow: 0 1px 1px rgba(3, 11, 28, 0.25), 0 2px 3px rgba(3, 11, 28, 0.05);
	border-radius: 0 0 10px 10px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -999px;
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	top: 100%;
	left: 15px;
	z-index: 1001;
}
.toggleHeader::after {
    background: url("data:image/svg+xml,%3Csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.06 9.06a1.5 1.5 0 01-2.12 0l-6-6A1.5 1.5 0 113.06.94L8 5.878l4.94-4.94a1.5 1.5 0 012.12 2.122l-6 6z' fill='%231C3358'/%3E%3C/svg%3E") no-repeat center;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	opacity: .5;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(180deg);
}
.toggleHeader:hover::after {
	opacity: 1;
}
@keyframes arrowBounce { 
    0% { }
    5% { transform: translateY(-4px); }
	10% { transform: translateY(2px); }
    15% { transform: translateY(-4px); }
	20% { transform: translateY(2px); }
    25% { transform: translateY(-4px); }
	30% { transform: translateY(0); }
}
.hideHeader .toggleHeader::after {
	animation: arrowBounce 5s ease infinite;
}
.hideHeader { padding-top: 0; }
.hideHeader .header { transform: translateY(-100%); }
.hideHeader .toggleHeader::after {
	transform: rotate(0);
}
.lesson { transition: padding .2s linear; }
.header { transition: transform .2s linear; }

.versao {
	color: rgba(28, 51, 88, 1);
	position: absolute;
	bottom: calc(1.5rem / 2);
	left: calc(1.5rem / 2);
	opacity: .5;
	z-index: 100;
    transition: opacity .2s linear;
}
.versao:hover {
	opacity: 1;
}
#sphero {}
#sphero2 { display: none; }
#sphero3, #sphero3x,
#sphero4, #sphero4x  { display: none; }
/*
#sphero img,
#sphero2 img,
#sphero3 img, #sphero3x img,
#sphero4 img, #sphero4x img {
	display: block;
	max-width: 400px;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
*/
#macaddress { }
#runWait {
	display: block;
	width: auto;
	height: 32px;
	margin: 0 10px;
	cursor: wait;
	display: none;
}
#runStop { display: none; }
.alertaCalibragem {
	background: rgba(255, 230, 98, 0.7);
	box-shadow: 0px 27px 60px rgba(92, 44, 0, 0.08), 0px 13.6687px 26.1562px rgba(92, 44, 0, 0.054), 0px 5.4px 9.75px rgba(92, 44, 0, 0.04), 0px 1.18125px 3.46875px rgba(92, 44, 0, 0.026);
	backdrop-filter: blur(8px);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: -0.02em;
	color: rgba(29,22,.7);
	padding: 16px 20px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 100;
}
#valorCalibragemForca { font-weight: 800; }

.calibrate-control {
	background: #C9CFD9;
	box-shadow: 0px 20px 25px -20px rgba(0, 4, 99, 0.1), 0px 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 35px;
	display: flex;
	align-items: center;
	width: 220px;
	height: 70px;
	padding: 10px;
	margin: 25px auto;
}
.calibrate-control button {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	border-radius: 50%;
	display: block;
	width: 50px;
	height: 50px;
	text-indent: -999px;
	overflow: hidden;
}
.calibrate-control button:hover,
.calibrate-control button:focus {
	background-color: #FBFBFB;
	outline: none;
}
.calibrate-turn-left { background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.293 19.707a1 1 0 0 0 1.414-1.414L6.414 13H20a1 1 0 1 0 0-2H6.414l5.293-5.293a1 1 0 0 0-1.414-1.414l-7 7A.996.996 0 0 0 3 12m7.293 7.707-7-7Zm-7-7-.002-.002Zm-.002-.002Z' fill='%23636E89'/%3E%3C/svg%3E"); }
.calibrate-turn-clockwise { background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.293 4.793a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L7 7.914V12a7 7 0 0 0 7 7h9a1 1 0 1 1 0 2h-9a9 9 0 0 1-9-9V7.914l-3.293 3.293A1 1 0 0 1 .293 9.793l5-5Z' fill='%23636E89'/%3E%3C/svg%3E"); }
.calibrate-turn-counterclockwise { background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.707 4.793a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 1.414 1.414L17 7.914V12a7 7 0 0 1-7 7H1a1 1 0 1 0 0 2h9a9 9 0 0 0 9-9V7.914l3.293 3.293a1 1 0 0 0 1.414-1.414l-5-5Z' fill='%23636E89'/%3E%3C/svg%3E"); }
.calibrate-turn-right { background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.707 4.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-5.293 5.293a1 1 0 0 0 1.414 1.414l7-7A.997.997 0 0 0 21 12m-.076-.383a.997.997 0 0 0-.217-.324l-7-7m7.217 7.324a.996.996 0 0 1 .076.374Z' fill='%23636E89'/%3E%3C/svg%3E"); }

.sphero-calibragem .calibrate-control {
	margin: 0;
	position: absolute;
	top: calc(100% + 5px);
	left: calc(50% - 110px);
}
#sphero-atalho-calibrar-finalizar-div {
	position: relative;
}

.ico-bluetooth { background: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.48 5.978c0-1.224 1.386-1.933 2.378-1.216l4.248 3.067a1 1 0 0 1 .006 1.617L13.64 12l3.474 2.554a1 1 0 0 1-.007 1.617l-4.248 3.067c-.992.717-2.378.008-2.378-1.216v-3.7l-2.888 2.124a1 1 0 0 1-1.184-1.612L10.262 12 6.408 9.166a1 1 0 0 1 1.184-1.612l2.888 2.124v-3.7Zm2 7.653 2.342 1.722-2.342 1.691v-3.413Zm0-3.262V6.956l2.342 1.691-2.342 1.722Z' fill='%23636E89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 8a8 8 0 0 1 8-8h4a8 8 0 0 1 8 8v8a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8V8Zm8-6a6 6 0 0 0-6 6v8a6 6 0 0 0 6 6h4a6 6 0 0 0 6-6V8a6 6 0 0 0-6-6h-4Z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center; }
.bluetooth-connected, .bluetooth-connected:hover {
	background: #0082FC url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.48 5.978c0-1.224 1.386-1.933 2.378-1.216l4.248 3.067a1 1 0 0 1 .006 1.617L13.64 12l3.474 2.554a1 1 0 0 1-.007 1.617l-4.248 3.067c-.992.717-2.378.008-2.378-1.216v-3.7l-2.888 2.124a1 1 0 0 1-1.184-1.612L10.262 12 6.408 9.166a1 1 0 0 1 1.184-1.612l2.888 2.124v-3.7Zm2 7.653 2.342 1.722-2.342 1.691v-3.413Zm0-3.262V6.956l2.342 1.691-2.342 1.722Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 8a8 8 0 0 1 8-8h4a8 8 0 0 1 8 8v8a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8V8Zm8-6a6 6 0 0 0-6 6v8a6 6 0 0 0 6 6h4a6 6 0 0 0 6-6V8a6 6 0 0 0-6-6h-4Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    box-shadow: none;
}
.ico-webserial {
    background: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0h12v12H6V6Zm5 8h2v2h-2v-2Zm0-4h2v2h-2v-2Zm0-4h2v2h-2V6Z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center;
}

.webserial-connected, .webserial-connected:hover {
    background: #0082FC url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0h12v12H6V6Zm5 8h2v2h-2v-2Zm0-4h2v2h-2v-2Zm0-4h2v2h-2V6Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    box-shadow: none;
}

.ico-webrtc {
	background: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23636E89' stroke-width='2'/%3E%3Ccircle cx='8' cy='12' r='2' stroke='%23636E89' stroke-width='2'/%3E%3Ccircle cx='16' cy='12' r='2' stroke='%23636E89' stroke-width='2'/%3E%3Cline x1='10' y1='12' x2='14' y2='12' stroke='%23636E89' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}


.webrtc-connected, .webrtc-connected:hover {
	background: #0082FC url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23636E89' stroke-width='2'/%3E%3Ccircle cx='8' cy='12' r='2' stroke='%23636E89' stroke-width='2'/%3E%3Ccircle cx='16' cy='12' r='2' stroke='%23636E89' stroke-width='2'/%3E%3Cline x1='10' y1='12' x2='14' y2='12' stroke='%23636E89' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}


.ico-form-help { background: url(../home/img/ico-help.svg) no-repeat center; }
.ico-timeline-help { background: url(../home/img/ico-timeline.svg) no-repeat center; }
.ico-form-help::after,
.ico-timeline-help::after {

	border-radius: 50%;
	display: block;
	content: '?';
	width: 20px;
	height: 20px;
	position: absolute;
	top: 3px;
	right: 5px;
}

.lesson-step-disable {
	border-color: #DEDFE8 !important;
	pointer-events: none;
	cursor: default;
}
.lesson-step-disable:hover .lesson-step-tag { display: none; }

.switch-container {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}
.switch-container.below-lesson-instructions {
	justify-content: left;
	margin: 30px 0 30px 100px;
}
.switch-input { display: none; visibility: hidden; }
.switch-labels {
	pointer-events: none;
	cursor: default;
	display: flex;
	align-items: center;
}
.switch-bt {
	background: rgba(178, 185, 208, 0.3);
	border: 1px solid rgba(178, 185, 208, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 105, 135, 0.5), inset 0px 2px 2px rgba(94, 105, 135, 0.2);
	border-radius: 15px;
	display: block;
	width: 60px;
	height: 30px;
	margin: 0 10px;
	position: relative;
	transition: 0.4s;
}
.switch-bt::before {
	background: #B2B9D0;
	box-shadow: 0px 1px 1px rgba(89, 96, 121, 0.25), 0px 2px 3px rgba(178, 185, 208, 0.25), inset 0px -1px 0px rgba(99, 110, 137, 0.2), inset 0px 1px 0px rgba(244, 244, 247, 0.2);
	border-radius: 50%;
	display: block;
	content: '';
	width: 22px;
	height: 22px;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: 0.4s;
}
.switch-input:checked + .switch-labels .switch-bt {
	background: #67FF4F;
	border: 1px solid rgba(179, 208, 178, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 135, 98, 0.5), inset 0px 2px 2px rgba(94, 135, 98, 0.2);
}
.switch-input:checked + .switch-labels .switch-bt::before {
	background: #D5F9CF;
	box-shadow: 0px 1px 1px rgba(94, 135, 98, 0.25), 0px 2px 3px rgba(94, 135, 98, 0.25), inset 0px -1px 0px rgba(94, 135, 98, 0.2), inset 0px 1px 0px rgba(244, 244, 247, 0.2);
	transform: translateX(30px);
}
.switch-bt,
.switch-input:checked + .switch-labels .switch-label-left,
.switch-input:not(:checked) + .switch-labels .switch-label-right {
	pointer-events: all;
	cursor: pointer;
}
.switch-input:checked + .switch-labels .switch-label-left,
.switch-input:not(:checked) + .switch-labels .switch-label-right {
	opacity: .5;
}

.switch {
	display: inline-block;
	position: relative;
}
.switch input {
	display: none;
	visibility: hidden
}
.slider {
	background: rgba(178, 185, 208, 0.3);
	border: 1px solid rgba(178, 185, 208, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 105, 135, 0.5), inset 0px 2px 2px rgba(94, 105, 135, 0.2);
	border-radius: 15px;
	display: block;
	width: 60px;
	height: 30px;
	margin: 0;
	cursor: pointer;
	position: relative;
	transition: 0.4s;
}
.slider:before {
	background: #B2B9D0;
	box-shadow: 0px 1px 1px rgba(89, 96, 121, 0.25), 0px 2px 3px rgba(178, 185, 208, 0.25), inset 0px -1px 0px rgba(99, 110, 137, 0.2), inset 0px 1px 0px rgba(244, 244, 247, 0.2);
	border-radius: 50%;
	display: block;
	content: '';
	width: 22px;
	height: 22px;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: 0.4s;
}
input:checked + .slider,
input:focus + .slider {
	background: #67FF4F;
	border: 1px solid rgba(179, 208, 178, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 135, 98, 0.5), inset 0px 2px 2px rgba(94, 135, 98, 0.2);
}
input:checked + .slider:before {
	background: #D5F9CF;
	box-shadow: 0px 1px 1px rgba(94, 135, 98, 0.25), 0px 2px 3px rgba(94, 135, 98, 0.25), inset 0px -1px 0px rgba(94, 135, 98, 0.2), inset 0px 1px 0px rgba(244, 244, 247, 0.2);
	transform: translateX(30px);
}

.stage-fixed {
	background: transparent;
    height: auto;
    padding: 0;
}
.palco {
	background: url("tapete.png") no-repeat 0 0;
	width: 534px;
	height: 537px;
    position: relative;
    top: auto;
    left: auto;
}
.palco-numeropolis {
	background: url("numeropolisrua.png") no-repeat 0 0;
}
.palco-letropolis {
	background: url("letropolisrua.png") no-repeat 0 0;
}
.palco-tapete-letras {
	background: url("tapete_letras.png") no-repeat 0 0;
	width: 650px;
	height: 650px;
}
.sphero-calibragem {
	background: rgba(201, 207, 217,.2) url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11a1 1 0 0 0-1 1v10a1 1 0 1 0 2 0V12a1 1 0 0 0-1-1ZM12 15a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1ZM20 8a1 1 0 0 0-1 1v13a1 1 0 0 0 2 0V9a1 1 0 0 0-1-1ZM6 7H5V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2ZM14 11h-1V2a1 1 0 0 0-2 0v9h-1a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2ZM22 4h-1V2a1 1 0 0 0-2 0v2h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2Z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat 20px center;
	background-size: 20px;
	border-radius: 35px;
	display: inline-flex;
	align-items: center;
	height: 50px;
	color: #1C3358;
	padding: 0 0 0 50px;
	position: relative;
	z-index: 1;
	margin: 10px 0 0 0;
}
.sphero-calibragem span {
	display: block;
	margin: 0 10px 0 0;
}
.sphero-calibragem img {
	display: block;
	width: 40px;
	height: 40px !important;
	cursor: pointer;
	margin: 5px;
}
.lab-code-buttons .sphero-calibragem {
	display: flex;
	margin: 0 0 15px;
}
.lab-code-buttons .sphero-calibragem img {
	margin-left: auto;
}
.lab-code-buttons {
	width: 225px;
}
.bt-code-play, .bt-code-stop, .bt-code-reload, .bt-show-code,.bt-show-ai {
	background-color: #FBFBFB;
	box-shadow: 0 20px 25px -20px rgba(0, 4, 99, 0.1), 0 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 35px;
	display: block;
	height: 70px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: #1C3358;
	padding: 25px 20px 25px 70px;
	margin: 0 0 15px;
	transition: color .2s linear;
	position: relative;
	clear: both;
}

.bt-code-play::before, .bt-code-play::after,
.bt-code-stop::before, .bt-code-stop::after,
.bt-code-reload::before,.bt-code-reload::after,
.bt-show-ai::before,.bt-show-ai::after,
.bt-show-code::before, .bt-show-code::after {
	border-radius: 50%;
	display: block;
	content: '';
	width: 50px;
	height: 50px;
	position: absolute;
	top: 10px;
	left: 10px;
}
.bt-show-ai::after { background: url(../home/img/ico-brain-ai-cinza.svg) no-repeat 18px center;}
.bt-code-play::after { background: url(../home/img/ico-play.svg) no-repeat 18px center; }
.bt-code-stop::after { background: url(../home/img/ico-stop.svg) no-repeat center; }
.bt-code-reload::after { background: url(../home/img/ico-reload.svg) no-repeat center; }
.bt-show-code::after { background: url(../home/img/ico-ver-codigo-aluno.svg) no-repeat center; }
.bt-code-play::before, .bt-code-stop::before, .bt-code-reload::before, .bt-show-code::before, .bt-show-ai::before {
	background-color: rgba(0,0,0,.1);
	transform: scale(.5);
	opacity: 0;
	transition: all .2s linear;
}
.bt-code-play:hover::before,
.bt-code-stop:hover::before,
.bt-code-reload:hover::before,
.bt-show-ai:hover::before,
.bt-show-code:hover::before {
	transform: scale(1);
	opacity: 1;
}
.bt-code-play:hover, .bt-code-stop:hover, .bt-code-reload:hover, .bt-show-code:hover,.bt-show-ai:hover { color: #2B7CFF; }

.lab-code-buttons #runWait {
	background-color: #FBFBFB;
	box-shadow: 0 20px 25px -20px rgba(0, 4, 99, 0.1), 0 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 50%;
	display: none;
	height: 70px;
	padding: 10px;
	margin: 0 0 15px;
	cursor: wait;
}
#var, #preview {
	float: left;
	margin: 0 15px 15px 0;
}
.show-variables, .bt-preview, .bt-preview-station, .bt-timeline {
	background-color: #FBFBFB;
    box-shadow: 0 20px 25px -20px rgb(0 4 99 / 10%), 0 50px 60px rgb(0 4 99 / 7%);
	border-radius: 50%;
	display: block;
	width: 70px;
	height: 70px;
	text-indent: -999px;
	overflow: hidden;
	padding: 19px;
	cursor: pointer;
	position: relative;
	transition: all .2s linear;
}
.show-ai {
	background-color: #FBFBFB;
    box-shadow: 0 20px 25px -20px rgb(0 4 99 / 10%), 0 50px 60px rgb(0 4 99 / 7%);
	border-radius: 50%;
	display: block;
	width: 70px;
	height: 70px;
	text-indent: -999px;
	overflow: hidden;
	padding: 19px;
	cursor: pointer;
	position: relative;
	transition: all .2s linear;
}
.bt-preview {
	background: #FBFBFB url(../home/img/ico-preview.svg) no-repeat center;
	background-size: 32px;
}
.bt-preview-station {
	background: #FBFBFB url(../home/img/ico-network.svg) no-repeat center;
	background-size: 32px;
}
.bt-timeline {
	background: #FBFBFB url(../home/img/ico-timeline.svg) no-repeat center;
	background-size: 32px;
	margin: 0 auto;
}
.show-variables:hover, .bt-preview:hover, .bt-preview-station:hover, .bt-timeline:hover {
    box-shadow: 0 20px 25px -20px rgb(0 4 99 / 10%), 0 50px 60px rgb(0 4 99 / 7%), inset 0 0 0 3px #636e89;
}

.library-buttons {
	background-color: #FBFBFB;
	box-shadow: 0 20px 25px -20px rgba(0, 4, 99, 0.1), 0 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 35px;
	display: flex;
	align-items: center;
	height: 70px;
	padding: 10px 15px;
	margin: 0 0 15px;
}
.library-button {
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 6px;
	display: block;
	width: 36px;
	height: 36px;
	text-indent: -999px;
	overflow: hidden;
	margin: 5px;
}
.library-button:hover { background-color: #E0E5EE; }
.helpVR { background-image: url(../home/img/ico-coordenadas3d.svg); }
.texturesVR { background-image: url(../home/img/ico-texturas.svg); }
.objectsVR { background-image: url(../home/img/ico-objetos3d.svg); }
.i360VR { background-image: url(../home/img/ico-image-360.svg); }
.videosVR { background-image: url(../home/img/ico-videos.svg); }
.soundsVR { background-image: url(../home/img/ico-speaker.svg); }

.code-buttons-bt {
	display: block;
	border-radius: 20px 20px 4px 20px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	opacity: .6;
    text-indent: -999px;
    overflow: hidden;
	transition: all .2s linear;
}
.code-buttons-bt:hover {
    background-color: #F6F6F6;
    box-shadow: inset 0 1px 0 1px rgba(255,255,255,.9), 0px 1px 1px rgba(3, 11, 28, 0.25), 0px 2px 3px rgba(3, 11, 28, 0.05);
    opacity: 1;
}
.ico-ver-codigo { background: url(../home/img/ico-ver-codigo-aluno.svg) no-repeat center; }
.bt-grid { background: url(../home/img/ico-grid.svg) no-repeat center; }
.no-grid { background: url(../home/img/ico-no-grid.svg) no-repeat center; }
.ico-show-bg { background: url(../home/img/ico-background-image.svg) no-repeat center; }

.introducao, .final { display: none; }

.splashscreen-modal {
	background-color: rgba(128, 142, 166,.7);
	backdrop-filter: blur(5px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
}
.splashscreen-container {
	background: #fff;
	box-shadow: 0 133px 123px -27px rgba(25, 6, 38, 0.12), 0 86.2037px 72.0347px -27px rgba(25, 6, 38, 0.0911111), 0 51.2296px 39.1778px -27px rgba(25, 6, 38, 0.0728889), 0 26.6px 19.9875px -27px rgba(25, 6, 38, 0.06), 0 10.837px 10.0222px -27px rgba(25, 6, 38, 0.0471111), 0 2.46296px 4.84028px -27px rgba(25, 6, 38, 0.0288889);
	border-radius: 30px;
	max-width: 1000px;
	padding: 20px;
	position: relative;
}
.splashscreen-container img {
	border-radius: 10px;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}
.splashscreen-img-wrapper {
	position: relative;
}
.splashscreen-container .lesson-instructions-container {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px;
	margin: 0;
}
.splashscreen-container .lesson-instructions { align-self: center; }
.splashscreen-container .lesson-instructions:before { top: 0; }

.placa-ponte {
	display: flex;
	align-items: center;
	justify-content: center;
    width: 26.8%;
    height: 11%;
	font-size: 26px;
    letter-spacing: -0.02em;
    color: #000;
    position: absolute;
    top: 24.5%;
    left: 50%;
    transform: translateX(-49.5%);
}
.w-600 {
	max-width: 600px;
	margin: 0 auto;
}
.board-name-input-container {
	background: #FBFBFB;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	margin: 0 0 25px;
}
.board-name-input {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
}
.stage-simulation .board-name-input {
	margin: 8px 0 0;
}
.board-name-input .form-control {
	max-width: 42px;
    font-size: 18px;
    letter-spacing: normal;
    line-height: 20px;
	text-transform: uppercase;
	text-align: center;
    padding: 10px 0;
	margin: 0 5px 0 0;
}
.board-name-input #auxFinal {
	opacity: 0;
    height: 0;
    width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}
.clear-board-name {
	background: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M17 5V4a2 2 0 00-2-2H9a2 2 0 00-2 2v1H4a1 1 0 000 2h1v11a3 3 0 003 3h8a3 3 0 003-3V7h1a1 1 0 100-2h-3zm-2-1H9v1h6V4zm2 3H7v11a1 1 0 001 1h8a1 1 0 001-1V7z' fill='%23636E89'/%3E%3Cpath d='M9 9h2v8H9V9zM13 9h2v8h-2V9z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center;
	border: none;
	border-radius: 5px;
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	text-indent: -999px;
	overflow: hidden;
	margin: 0;
}
.clear-board-name:hover,
.clear-board-name:focus {
	background: #FF4D4D url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M17 5V4a2 2 0 00-2-2H9a2 2 0 00-2 2v1H4a1 1 0 000 2h1v11a3 3 0 003 3h8a3 3 0 003-3V7h1a1 1 0 100-2h-3zm-2-1H9v1h6V4zm2 3H7v11a1 1 0 001 1h8a1 1 0 001-1V7z' fill='%23980000'/%3E%3Cpath d='M9 9h2v8H9V9zM13 9h2v8h-2V9z' fill='%23980000'/%3E%3C/svg%3E") no-repeat center;
	outline: 0;
}
.trajetos-sprk1 {
	display: flex;
	width: auto;
	margin: 0 auto 10px 0;
}

.btCircleRing {
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	border-radius: 50%;
	display: block;
	width: 50px;
	height: 50px;
	text-indent: -999px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	z-index: 1000;
	transition: all .2s linear;
}
.chatProjetoConcorrente {
	display: flex;
	position: fixed;
	bottom: 15px;
	right: 75px;
	z-index: 1000;
}
.btChatTurma {
	background-image: url(../home/img/ico-chat.svg);
	position: fixed;
	bottom: 15px;
	right: 15px;
}
.btChatEquipe {
	background-image: url(../home/img/ico-groupchat.svg);
	margin-left: 10px;
}
.btChatColaboracao {
	background-image: url(../home/img/ico-colaboration.svg);
	margin-left: 10px;
}
.btCircleRing:hover {
	transform: translateY(-5px);
	box-shadow: inset 0 0 0 3px #636E89;
}

/* home.html */
.card-curso {
    background: #FBFBFB;
    box-shadow: 0 22px 45px rgba(0, 4, 99, 0.06), 0 50px 90px rgba(0, 4, 99, 0.07);
    border-radius: 30px;
	display: block;
    max-width: 270px;
    margin: 0 auto 30px auto;
    padding: 20px;
	position: relative;
	cursor: pointer;
	transition: all .2s linear;
}
.card-curso:hover {
    box-shadow: 0 0 0 2px rgba(58, 132, 252, 0.5), 0 40px 70px rgba(62, 58, 254, 0.2), 0 80px 120px rgba(58, 184, 255, 0.2);
	transform: translateY(-10px);
}
.card-curso-img {
	background-position: center;
	background-size: cover;
	border-radius: 15px;
	width: 100%;
	height: 0;
	padding: 100% 0 0;
}
.card-curso-title {
	background: rgba(54, 129, 255, 0.9);
	border-radius: 0 15px;
	font-size: 18px;
    letter-spacing: -0.04em;
    line-height: 20px;
	color: #fff;
	padding: 15px 20px;
    position: absolute;
	bottom: 20px;
    left: 20px;
}
/* home 5 cols */
.py-20 { padding-top: 20px !important; padding-top: 20px !important; }
.row-cols-5 .card-curso {
	border-radius: 16px;
	padding: 10px;
	margin-bottom: 0;
}
.row-cols-5 .card-curso .card-curso-img {
	border-radius: 8px;
	position: relative;
}
.row-cols-5 .card-curso-title {
	border-radius: 0 8px;
	bottom: 0;
    left: 0;
}
.card-curso-description {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(28, 51, 88, .7);
	margin: 8px 0 0;
}

.card-planet {
    background: #000;
    box-shadow: 0 22px 45px rgba(0, 4, 99, 0.06), 0 50px 90px rgba(0, 4, 99, 0.07);
    border-radius: 30px;
	display: block;
    max-width: 270px;
    margin: 0 auto 30px auto;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	transition: all .2s linear;
}
.card-planet::before {
	display: block;
	content: '';
	width: 100%;
    padding-top: 100%;
	z-index: -1;
}
.card-planet:hover {
	transform: translateY(-10px);
}
.card-planet:hover img {
	opacity: 1;
}
.card-planet img {
	display: block;
	width: 100%;
	height: 100%;
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	transition: all .2s linear;
}
.card-planet-title {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	display: block;
	width: 100%;
	font-size: 18px;
	font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 20px;
	text-align: center;
	color: #fff;
	padding: 15px;
    position: absolute;
	bottom: 0;
    left: 0;
}

/* input range */
input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 20px 0;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	background: #fff;
	border: 1px solid rgba(178, 185, 208, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 105, 135, 0.5), inset 0px 2px 2px rgba(94, 105, 135, 0.2);
	border-radius: 15px;
	width: 100%;
	height: 8px;
	cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%231C3358' /%3E%3C/svg%3E") no-repeat center, linear-gradient(180deg, #E9E9EF 0%, #D1D3DC 100%);
	border: 1px solid rgba(99, 110, 137, 0.3);
	box-shadow: 0px 1px 0px rgba(89, 96, 121, 0.12), 0px 4px 3px rgba(178, 185, 208, 0.25), inset 0px -1px 0px rgba(99, 110, 137, 0.2), inset 0px 2px 0px #FFFFFF;
	border-radius: 50%;
	display: block;
	width: 22px;
	height: 22px;
	margin: -8px 0 0;
	cursor: pointer;
	-webkit-appearance: none;
	position: relative;
}
input[type=range]::-webkit-slider-thumb::after {
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: red;
}
input[type=range]::-moz-range-track {
	background: #fff;
	border: 1px solid rgba(178, 185, 208, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 105, 135, 0.5), inset 0px 2px 2px rgba(94, 105, 135, 0.2);
	border-radius: 15px;
	width: 100%;
	height: 8px;
	cursor: pointer;
}
input[type=range]::-moz-range-thumb {
	background: linear-gradient(180deg, #E9E9EF 0%, #D1D3DC 100%);
	border: 1px solid rgba(99, 110, 137, 0.3);
	box-shadow: 0px 1px 0px rgba(89, 96, 121, 0.12), 0px 4px 3px rgba(178, 185, 208, 0.25), inset 0px -1px 0px rgba(99, 110, 137, 0.2), inset 0px 2px 0px #FFFFFF;
	border-radius: 3px;
	display: block;
	width: 22px;
	height: 22px;
	cursor: pointer;
	-webkit-appearance: none;
}
input[type=range]::-ms-track {
	background: #fff;
	border: 1px solid rgba(178, 185, 208, 0.5);
	box-shadow: inset 0px 1px 0px rgba(94, 105, 135, 0.5), inset 0px 2px 2px rgba(94, 105, 135, 0.2);
	border-radius: 15px;
	width: 100%;
	height: 8px;
	cursor: pointer;
}
input[type=range]::-ms-thumb {
	background: linear-gradient(180deg, #E9E9EF 0%, #D1D3DC 100%);
	border: 1px solid rgba(99, 110, 137, 0.3);
	box-shadow: 0px 1px 0px rgba(89, 96, 121, 0.12), 0px 4px 3px rgba(178, 185, 208, 0.25), inset 0px -1px 0px rgba(99, 110, 137, 0.2), inset 0px 2px 0px #FFFFFF;
	border-radius: 3px;
	display: block;
	width: 22px;
	height: 22px;
	cursor: pointer;
	-webkit-appearance: none;
}

#blocklyDiv {
	width: 100%;
    height: 100%;
}
.blocklySvg {
	width: 100%;
}
.blocklyHidden {
	display: none;
}
.col-code-container {
	display: flex;
	flex-direction: column;
}
.lesson-circuits .blocklyToolboxDiv,
.lesson-webvr-lab .blocklyToolboxDiv,
.lesson-mbot-lab .blocklyToolboxDiv {
	width: 190px !important;
}
.lesson-circuits .blocklyTreeIcon.undefined,
.lesson-pixel .blocklyTreeIcon.undefined,
.lesson-form .blocklyTreeIcon.undefined {
	display: none !important;
}

.stage-transferidor {
	background-color: #444;
}
.transferidor {
	width: 300px;
	margin: -160px auto 25px auto;
}
.transferidor img {
	display: block;
	width: 100%;
	height: auto;
}

.instructions-2 {
	background: #F3F5F7;
	box-shadow: 0px 20px 25px -20px rgba(0, 4, 99, 0.1), 0px 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #636E89;
	padding: 20px;
	overflow: hidden;
}
.mt-10 { margin-top: 10px !important; }
.mt-30 { margin-top: 30px; }
.instructions-2-header {
	display: flex;
	margin: -20px 0 20px -20px;
}
.instructions-2-title {
	background: #FEFEFE url(../home/img/ico-legenda-dica.svg) no-repeat 15px center;
	border-radius: 0px 0px 10px 0px;
	display: inline-block;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #636E89;
	padding: 15px 20px 15px 55px;
	margin: 0;
}
.instructions-2 p {
	margin: 0 0 10px;
}
.instructions-2 img {
	max-width: 100%;
	height: auto;
}
.stage-sprk-5 {
	overflow: visible;
}
.stage-sprk-5 img {
	display: block;
	max-width: 100%;
	height: auto;
}
.sphero-calibragem-dica {
	max-width: 600px;
	margin: 25px 0 0 75px;
}
.sphero-calibragem-dica img {
	display: block;
	width: 100%;
	max-width: 250px;
	height: auto;
	margin: 0 auto;
}

.old-version {
	background: url(../home/img/ico-versao.svg) no-repeat 10px center, linear-gradient(180deg, #F8F8F9 0%, #D8D8E6 100%);
	box-shadow: 0 1px 1px rgba(3, 11, 28, 0.25), 0 2px 4px rgba(3, 11, 28, 0.1), 0 10px 10px -2px rgba(3, 11, 28, 0.05);
	border-radius: 0 0 12px 12px;
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #636E89;
	padding: 12px 10px 10px 40px;
	position: absolute;
	top: -2px;
	right: 15px;
	z-index: 10;
	transition: all .2s linear;
}
.old-version:hover {
	color: #000;
	top: 0;
}

.palco-pixel {
	background-color:#333333;
	display: block;
	width: 551px;
	height: 401px;
	overflow:auto;
	position: relative;
}
#canvasImg:hover {
	cursor:crosshair;
}
.eixoCima, .eixoBaixo {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.axys-info {
	background: #F1F2F4;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: rgba(28, 51, 88, .6);
	padding: 5px 10px;
}
.eixoCima .axys-info { border-radius: 5px 5px 0 0; }
.eixoBaixo .axys-info { border-radius: 0 0 5px 5px; }
.axys-info strong {
	font-weight: 700;
	color: rgba(28, 51, 88, 1);
	margin-right: 10px;
}
.axys-info strong:last-child { margin-right: 0; }

.current-pixel {
	background: rgba(201, 207, 217,.2);
    border-radius: 0 10px;
    display: flex;
	flex-direction: column;
    flex-grow: 0;
    float: left;
	justify-content: center;
	width: 160px;
    height: 60px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: rgba(28, 51, 88, .6);
    padding: 0 10px;
    margin: 10px 10px -10px -10px;
	visibility: hidden;
}
.current-coordinate {
	background: url(../home/img/ico-cursor.svg) no-repeat 0 0;
	display: flex;
	width: 100%;
	border-style:1px;border-width:1px;
	height: 24px;
	line-height: 24px;
	padding: 0 0 0 30px;
}
.current-coordinate span {
	display: inline-block;
	width: 50px;
	margin: 0 5px 0 0;
}
.current-coordinate strong {
	color: rgba(28, 51, 88, 1);
}
.current-color {
	display: flex;
	align-items: center;
	height: 24px;
}
.current-color-preview {
	display: block;
	flex-shrink: 0;
	border-radius: 4px;
	width: 16px;
	height: 16px;
	margin: 4px 10px 4px 4px;
}
.current-color-rgb strong {
	font-weight: 700;
	color: rgba(28, 51, 88, 1);
}
.current-pixel-f2 {
	width: 260px;
}
.current-pixel-f2 .current-color-rgb span {
	display: inline-block;
	margin: 0 5px 0 0;
}
.current-pixel-f2 .current-color-rgb span:first-letter {
	font-weight: 500;
	color: rgba(28, 51, 88, 1);
}
.colorR { width: 55px !important; }
.colorG { width: 70px !important; }
.colorB { width: 60px !important; }
.rgb-info {
	background: #fff;
    border-radius: 4px;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: rgba(28, 51, 88, .6);
    padding: 5px 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.rgb-info strong { color: rgba(28, 51, 88, 1); }

.pixels-capturados-container {
	background: #F3F5F7;
	border-radius: 10px;
	display: none;
	width: 570px;
	padding: 40px 20px 20px;
	margin: -20px 0 0;
	z-index: -1;
}
.pixels-capturados-container h3 {
	background: url(../home/img/ico-eye-dropper.svg) no-repeat 0 center;
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.04em;
	color: #1C3358;
	padding: 2px 0 2px 30px;
	margin: 0 0 10px;
}
.pixels-capturados {
	display: flex;
	flex-wrap: wrap;
	max-height: 120px;
	overflow: auto;
}
.pixels-capturados::-webkit-scrollbar {
    background-color: transparent;
    width: 8px;
}
.pixels-capturados::-webkit-scrollbar-track {
    background: rgba(154, 164, 180, .4);
    border-radius: 4px;
}
.pixels-capturados::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.6);
    border-radius: 4px;
}
.pixels-capturados::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,1);
}
.pixels-capturados .pixelCapturado:first-child {
	flex: 0 0 100%;
	width: 100%;
}
.pixelCapturado {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 33.333%;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: rgba(28, 51, 88, .6);
}
.pixelCapturado strong {
	display: inline-block;
	color: rgba(28, 51, 88, 1);
	margin: 0 0 0 5px;
}
.palco-pixel [class*="d-"] {
	height: 100%;
}
.pixel-canvas-image {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}
.pixel-canvas-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}
.link-legenda {
	background-color: #FBFBFB;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	color: #2B7CFF;
	padding: 10px 12px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	transition: all .2s linear;
}
.link-legenda:hover {
	background-color: rgba(255,255,255,.4);
	color: #fff;
}

.ambienteVR {
	position: relative;
	overflow: hidden;
}
.vrDialog,
.formHelpDialog {
	background-color: rgba(128, 142, 166,.9);
	visibility: hidden;
    opacity: 0;
    position: fixed;
	z-index: -1;
    transition: all 400ms ease-in;
    pointer-events: none;
	padding: 30px 15px;
}
.vrDialog:target,
.formHelpDialog:target {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 99999;
    transition: all 400ms ease-in;
}
.vrDialogContainer,
.formHelpDialogContainer {
	background: #fff;
	box-shadow: 0 133px 123px -27px rgba(25, 6, 38, 0.12), 0 86.2037px 72.0347px -27px rgba(25, 6, 38, 0.0911111), 0 51.2296px 39.1778px -27px rgba(25, 6, 38, 0.0728889), 0 26.6px 19.9875px -27px rgba(25, 6, 38, 0.06), 0 10.837px 10.0222px -27px rgba(25, 6, 38, 0.0471111), 0 2.46296px 4.84028px -27px rgba(25, 6, 38, 0.0288889);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	max-width: 800px;
	padding: 20px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
.modalTitle,
.vrDialogTitle,
.formHelpDialogTitle {
	background: #3681FF;
	border-radius: 20px 0;
	display: flex;
	align-items: center;
	height: 50px;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: #fff;
	padding: 15px 20px;
	margin: -20px auto 20px -20px;
}
.modalClose,
.vrDialogClose,
.formHelpDialogClose {
    background: #C9CFD9 url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.757 6.343a1 1 0 1 0-1.414 1.414L10.586 12l-4.243 4.243a1 1 0 1 0 1.414 1.414L12 13.414l4.243 4.243a1 1 0 0 0 1.414-1.414L13.414 12l4.243-4.243a1 1 0 0 0-1.414-1.414L12 10.586 7.757 6.343Z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center;
	background-size: 24px;
	border-radius: 0 20px;
    width: 50px;
	height: 50px;
	text-indent: -999px;
	overflow: hidden;
	opacity: 0.6;
    position: absolute;
    top: 0;
	right: 0;
    transition: opacity .2s linear;
}
.modalClose:hover,
.vrDialogClose:hover,
.formHelpDialogClose:hover {
	opacity: 1;
}
.vrDialogContainer img,
.vrDialogContainer iframe {
	display: block;
	border: 0;
	max-width: 100%;
	height: auto;
}
.vrDialogContainer iframe {
	height: 400px;
}
.modalDialog {
	background-color: rgba(128, 142, 166,.9);
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    transition: all 400ms ease-in;
    pointer-events: none;
	padding: 30px 15px;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}
.modalDialogContent {	
	background: #fff;
	box-shadow: 0 133px 123px -27px rgba(25, 6, 38, 0.12), 0 86.2037px 72.0347px -27px rgba(25, 6, 38, 0.0911111), 0 51.2296px 39.1778px -27px rgba(25, 6, 38, 0.0728889), 0 26.6px 19.9875px -27px rgba(25, 6, 38, 0.06), 0 10.837px 10.0222px -27px rgba(25, 6, 38, 0.0471111), 0 2.46296px 4.84028px -27px rgba(25, 6, 38, 0.0288889);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	max-width: 800px;
	padding: 20px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.botaoVermelho {
	background: linear-gradient(180deg, #FF7575 -2.81%, #DD1B1B 97.17%);
	box-shadow: 0px 20px 14px -7px rgba(138, 16, 16, 0.5), 0px 7px 0px #8A1010, 0px 6px 0px #8A1010, 0px 5px 0px #8A1010, 0px 4px 0px #8A1010, 0px 3px 0px #8A1010, 0px 2px 0px #8A1010, 0px 1px 0px #8A1010, inset 0px -1px 0px rgba(255, 155, 155, 0.35);
	border-radius: 50%;
	display: block;
	width: 50px;
	height: 40px;
	margin: 22px auto 0 auto;
	position: relative;
}
.botaoVermelho:before {
	background: linear-gradient(180deg, #DFDFDF -2.81%, #B1B1B1 97.17%);
	display: block;
	content: '';
	width: 62px;
	height: 50px;
	border-radius: 50%;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
.botaoVermelho:hover {
	background: linear-gradient(180deg, #FF8282 -2.81%, #FF0000 97.17%);
	box-shadow: 0px 13px 25px -7px rgba(190, 0, 0, 0.7), 0px 7px 0px #BE0000, 0px 6px 0px #BE0000, 0px 5px 0px #BE0000, 0px 4px 0px #BE0000, 0px 3px 0px #BE0000, 0px 2px 0px #BE0000, 0px 1px 0px #BE0000, inset 0px -1px 0px rgba(255, 155, 155, 0.35);
}
.botaoVermelho:active {
	background: linear-gradient(180deg, #FF8282 -2.81%, #FF0000 97.17%);
	box-shadow: 0px 8px 14px -7px rgba(190, 0, 0, 0.7), 0px 4px 0px #BE0000, 0px 3px 0px #BE0000, inset 0px -1px 0px rgba(255, 155, 155, 0.35);
	top: 3px;
}
.botaoVermelho:active:before {
	top: 5px;
}
.bt-sorteio {
	position: absolute;
	left: 50%;
	bottom: 20px;
	margin-left: -32px;
	z-index: 1;
}
.bt-sorteio .botaoVermelho {
	margin: 0 0 15px;
}
.container-canvasBandeiras {
	margin: 30px 0;
}
.container-canvasBandeiras canvas {
	display: block;
	margin: 0 auto;
}
.container-canvasBandeirasAux {
	display: none;
}
.flag-colection {
	background: #FBFBFB;
    box-shadow: 0px 20px 25px -20px rgb(0 4 99 / 10%), 0px 50px 60px rgb(0 4 99 / 7%);
    border-radius: 10px;
    padding: 20px 20px 0;
	margin: 20px 0 0;
    position: relative;
}
.flag-colection .form-group {
	width: 100%;
}
.bt-add-flag,
.bt-remove-flag {
	background-color: transparent;
	border: 0;
	border-radius: 6px;
	display: block;
	width: 40px;
	height: 40px;
	text-indent: -999px;
	overflow: hidden;
	margin: 24px 0 0 5px;
	transition: all .2s linear;
}
.bt-add-flag:hover,
.bt-remove-flag:hover { background-color: rgba(99, 110, 137, .2); }
.bt-add-flag { background: url(../home/img/ico-seta-direita.svg) no-repeat center; }
.bt-remove-flag { background: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M17 5V4a2 2 0 00-2-2H9a2 2 0 00-2 2v1H4a1 1 0 000 2h1v11a3 3 0 003 3h8a3 3 0 003-3V7h1a1 1 0 100-2h-3zm-2-1H9v1h6V4zm2 3H7v11a1 1 0 001 1h8a1 1 0 001-1V7z' fill='%23636E89'/%3E%3Cpath d='M9 9h2v8H9V9zM13 9h2v8h-2V9z' fill='%23636E89'/%3E%3C/svg%3E") no-repeat center; }

.image-info {
	display: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: rgba(28, 51, 88, .6);
	margin: 10px 0;
}
.image-name {
	background: url(../home/img/ico-img-dimension.svg) no-repeat 0 center;
	display: block;
	font-weight: 700;
	color: rgba(28, 51, 88, 1);
	padding: 4px 0 4px 30px;
}
.image-dimension {
	display: block;
	margin: 0 0 0 30px;
}
.image-dimension-label {
	display: inline-block;
	font-weight: 400;
	margin-right: 10px;
}
.image-dimension strong {
	font-weight: 700;
	color: rgba(28, 51, 88, 1);
	margin-right: 10px;
}

.files-explorer {
	display: flex;
	align-items: center;
	height: 40px;
}
.files-explorer > div {
	display: flex;
}
.files-explorer #codename {
	width: 100%;
}
.files-explorer .form-control {
    padding: 6px 10px;
	margin-right: 5px;
}
.code-folder,
.code-save,
.code-delete,
.code-clone {
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 4px;
	display: block;
	width: 32px;
	height: 32px;
	text-indent: -999px;
	overflow: hidden;
	margin-right: 5px;
	opacity: .6;
	transition: all .2s linear;
}
.code-folder:hover,
.code-save:hover,
.code-delete:hover,
.code-clone:hover {
	background-color: #fff;
	opacity: 1;
}
.code-folder { background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.707 14.134h-2.963v-3.117a.877.877 0 00-.878-.878h-8.643L13.004 7.06a.224.224 0 00-.15-.06H5.877A.877.877 0 005 7.878v16.244c0 .486.392.878.878.878h19.153a.88.88 0 00.814-.549l3.677-9.11a.877.877 0 00-.815-1.207zM6.976 8.976h5.172l3.282 3.139h8.338v2.02H9.774a.88.88 0 00-.815.548L6.976 19.6V8.976zm17.432 14.048H7.607L10.44 16h16.804l-2.837 7.024z' fill='%23636E89'/%3E%3C/svg%3E"); }
.code-save { background-image: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 2a1 1 0 00-1 1v14a1 1 0 001 1h1v-7a1 1 0 011-1h10a1 1 0 011 1v7h1a1 1 0 001-1V6.414L13.586 2H6v3h7a1 1 0 110 2H5a1 1 0 01-1-1V2H3zm2-2H3a3 3 0 00-3 3v14a3 3 0 003 3h14a3 3 0 003-3V6a1 1 0 00-.293-.707l-5-5A1 1 0 0014 0H5zm1 12v6h8v-6H6z' fill='%23636E89'/%3E%3C/svg%3E"); }

.code-delete { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M17 5V4a2 2 0 00-2-2H9a2 2 0 00-2 2v1H4a1 1 0 000 2h1v11a3 3 0 003 3h8a3 3 0 003-3V7h1a1 1 0 100-2h-3zm-2-1H9v1h6V4zm2 3H7v11a1 1 0 001 1h8a1 1 0 001-1V7z' fill='%23636E89'/%3E%3Cpath d='M9 9h2v8H9V9zM13 9h2v8h-2V9z' fill='%23636E89'/%3E%3C/svg%3E"); }

#delete, #export { display: none; }

.timeline-buttons {
	display: flex;
	justify-content: end;
	margin: 5px 0 0;
}
.timeline-buttons [class^=code] {
	margin: 0 0 0 5px;
}
.timeline-buttons [class^=code]:hover {
	background-color: #C9CFD9;	
}

.quadro-pontos {
	background: #fff;
	border-radius: 10px;
	text-align: center;
	overflow: hidden;
}
.quadro-pontos-title {
	background-color: #3681FF;
	display: block;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
	padding: 10px 15px;
}
#pontosCorrentes {
	display: block;
	padding: 10px 15px;
}

.formshack-buttons {
	display: flex;
	align-items: center;
	min-height: 100px;
}
.formshack-buttons .bt-circle {
	margin: 5px;
}
.bt-circle {
	text-indent: -999px;
	overflow: hidden;
	width: 70px;
	padding: 0;
}

.selectPapelDisputa {
	width: auto;
    padding: 5px 36px 5px 10px;
	margin: 4px 0;
}
.img-hacker-etico {
	display: block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin: o auto;
}
.role-title {
	display: flex;
    align-items: center;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    position: relative;
    padding: 0 15px;
}
.role-title .bt {
	height: 32px;
    padding: 0 10px;
    margin: 0 -11px 0 auto;
}

.browser-simulator {
	max-width: 1200px;
	margin: 0 auto;
	overflow: auto;
}
.browser-simulator .ratio {
    background: rgba(0,0,0,.05);
}
#formTarget .ratio {
    background: rgba(0,0,0,.05);
	border-radius: 5px;
}
/* 
#url1 {
    background: rgba(0,0,0,.05) url(../mm/https.png) no-repeat 12px center;
    border: none;
	border-radius: 20px;
	display: block;
    padding: 10px 10px 10px 44px;
	margin: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #394963;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
*/

#msgSend .form-label {
	width: 80px;
	text-align: right;
	margin-top: 13px;
}
.block-areaRetorno {
	background-color: rgba(0,0,0,.05);
	box-shadow: none;
	margin: 20px 0 0;
}
#areaRetorno { }
#statusConexao {
	display: block;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 400;
	padding: 5px 8px;
}
#statusConexao.desconectado {
	background: #FF6666;
	color: #2B0000;
}
#statusConexao.conectado {
	background: #8FFF9B;
	color: #24762D;
}
.block-radius-10 {
	border-radius: 10px;
}
.block-radius-10  .block-title-h2 {
	border-radius: 10px 0;
}
#formTarget {
	padding: 10px;
}
#formURLBar.row {
	--bs-gutter-x: 10px;
	margin-bottom: 10px;
}
#formTarget #formTargetIFrame {
	border-radius: 5px;
}

#salaId, #estacaoId {
	background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F9 100%), #FFFFFF;
	box-shadow: 0 1px 1px rgba(3, 11, 28, 0.25), 0 2px 3px rgba(3, 11, 28, 0.05);
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 5px;
	display: none;
	height: 40px;
	font-size: 12px;
	line-height: 20px;
	color: #636E89;
	padding: 10px 10px 10px 44px;
	opacity: .95;
	position: fixed;
	left: 10px;
}
#salaId {
	background-image: url(../home/img/ico-videos.svg);
	bottom: 60px;
}
#estacaoId {
	background-image: url(../home/img/ico-network.svg);
	bottom: 10px;
}
.sala-estacao-contaniner {
	display: flex;
	gap: 10px;
	position: fixed;
	bottom: 10px;
	left: 10px;
}
.sala-estacao-contaniner #salaId, .sala-estacao-contaniner #estacaoId {
	position: relative;
	bottom: auto;
	left: auto;
}

#vars_show {
	background: #fff url("data:image/svg+xml,%0A%3Csvg width='25' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.191 18 6-6-6-6' stroke='%23636E89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 5px 8px;
	box-shadow: 0 20px 25px -20px rgb(0 4 99 / 10%), 0 50px 60px rgb(0 4 99 / 7%);
	border-radius: 4px;
	display: none;
	min-width: 100px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
    color: #636E89;
	padding: 10px 10px 10px 34px;
    margin: 0 10px 0 0;
}

.header .mindmakers-logo {
    text-indent: 0;
    overflow: visible;
	position: relative;
	z-index: 100;
}
.copyright {
	margin-left: 0;
}
.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;}

.mindmakers-logo-tag{
	visibility:hidden;
}

.compsci-logo,
.login-compsci {
    background: url(../../mmcode/home/img/compsci++.svg) no-repeat;
    background-size: contain;
    display: block;
    float: left;
    width: 163px;
    height: 24px;
    margin: 34px 0 0;
    text-indent: -999px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.lesson-lab .header .compsci-logo { margin: 18px 0 0; }
.footer .compsci-logo {
    float: none;
    filter: grayscale(1);
    margin: 0 auto 25px auto;
}
.login-compsci {
    margin: 0;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    .compsci-logo {
        float: none;
        margin: 18px auto;
    }
    .login-compsci {
        float: none;
        margin: 0 auto;
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
    }
}


/*  */
.tip-text-error { color: #ff0000; }
.js-img-legend {
	border-radius: 8px;
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin: 10px 0
}
.container-code {
	background: #F3F5F7;
	box-shadow: 0 20px 25px -20px rgba(0, 4, 99, 0.1), 0 50px 60px rgba(0, 4, 99, 0.07);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #636E89;
	padding: 20px;
	margin: 0 0 0 0;
	overflow: hidden;
}
.container-code-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: -20px -20px 20px -20px;
}
.container-code-title {
	background: #FEFEFE url(../home/img/ico-ver-codigo-aluno.svg) no-repeat 15px center;
	border-radius: 0px 0px 10px 0px;
	display: inline-block;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: #636E89;
	padding: 15px 20px 15px 55px;
	margin: 0;
}
.js-show-tip {
	background: #FFF7B0 url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6M10 22h4M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 1 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14' opacity='.5' stroke='%23493D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 10px center;
	border-radius: 5px;
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	color: #493D10;
	padding: 12px 15px 12px 40px;
	margin: 5px;
	cursor: pointer;
}
.container-code-area {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	display: flex;
	height: 100%;
	position: relative;
	overflow: hidden;
}
#lineCounter, #programaTextual {
    background: transparent;
	border: none;
	height: 100%;
	font: 14px/20px monospace;
	color: #636E89;
	padding: 5px 10px;
	margin: 0;
	height: 100%;
	resize: none;
	outline: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#programaTextual:disabled {
	background: #F3F5F7;
	opacity: .5;
	cursor: not-allowed;
}
#lineCounter {
	background: #EDF0F5;
	border-right: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	text-align: right;
	width: 50px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}
#programaTextual {
    width: 100%;
    padding-left: 60px;
    outline: none;
    resize: none;
    white-space: nowrap;
}
#lineCounter:focus-visible, 
#programaTextual:focus-visible {
	outline:none;
}
.compile-msg {
	display: flex;
	font: 14px/20px monospace;
	color: #333;
	margin: 10px 0 -10px;
}

.compilacaoOk {
	color: #00AD45;
}
.erroCompilacao {
	color: #ff0000;
}
.lesson-instructions-code {
	background-color: #f9f9f9;
	border: 1px solid #f0f0f0;
	border-radius: 5px;
	font-family: monospace;
	padding: 10px 15px;
	margin: 0 0 10px;
}
.lesson-instructions-content .table {
	color: inherit;
}
.instruction-hl {
	background-color: #F3F5F7;
	border-radius: 4px;
	display: inline-block;
	font-weight: 400;
	color: #1C3358;
	padding: 0 3px;
}
.instruction-comment {
	font-weight: 400;
	opacity: .9;
}
.msg-alert {
    background: #FFED91 url("data:image/svg+xml,%0A%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5601 16.3l-7.67-12.72a3.4292 3.4292 0 00-2.89-1.5826 3.4302 3.4302 0 00-2.89 1.5826l-7.67 12.72a3.0002 3.0002 0 00-.05 3 3.3699 3.3699 0 002.94 1.7h15.34a3.3698 3.3698 0 002.94-1.66 3 3 0 00-.05-3.04zm-1.7 2.05a1.3097 1.3097 0 01-1.19.65h-15.34a1.31 1.31 0 01-1.19-.65 1 1 0 010-1l7.68-12.73a1.4802 1.4802 0 012.36 0l7.67 12.72a.9998.9998 0 01.01 1.01z' fill='%23665D3C' opacity='.6'/%3E%3Cpath d='M12 17c.5523 0 1-.4477 1-1s-.4477-1-1-1-1 .4477-1 1 .4477 1 1 1zM12 8a1 1 0 00-1 1v4a1.0001 1.0001 0 002 0V9a1.0002 1.0002 0 00-1-1z' fill='%23665D3C' opacity='.6'/%3E%3C/svg%3E") no-repeat 10px 10px;
	box-shadow: 0 1px 1px rgba(186, 156, 0, 0.3), 0 4px 5px rgba(186, 156, 0, 0.13), 0 13px 10px rgba(186, 156, 0, 0.08);
    border-radius: 4px 10px 10px 10px;
    min-height: 44px;
    font-size: 14px;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #665D3C;
    padding: 14px 15px 14px 44px;
    margin: 0 0 20px 100px;
}
.container-btn-define-api {
	margin: 15px 0 0 auto;
}
.container-automatizar-execucao {
	margin: 15px 0 0;
}
.console-container {
	margin: 20px 0 0;
}
.console {
	background: #fff url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23636E89' stroke-linecap='round' stroke-linejoin='round' d='m8 15 5-5-5-5' opacity='.7'/%3E%3C/svg%3E") no-repeat 10px 11px;
	border: 1px solid #ddd;
	border-radius: 10px;
	display: flex;
	width: 100%;
	font: 14px/20px monospace;
	color: #636E89;
	padding: 10px 10px 10px 40px;
	margin: 0;
	resize: none;
	outline: none;
	white-space: nowrap;
}
.console-title {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px 10px 0 0;
	display: inline-block;
	padding: 10px 15px 5px;
	font: 14px/20px monospace;
	margin: 0;
	position: relative;
}
.console-title::before {
	background: #fff;
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -2px
}
.console-title + .console {
	border-radius: 0 10px 10px 10px;
}
.modalDialogContent p,
.modalDialogContent ul { margin-bottom: 10px }
.container-bt-publish {
	margin: 15px 0 0 auto;
}


.componentsContainer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: -10px 0 10px 0;
}

.componenteStatus {}

.componenteStatusContainer {
	background: #FBFBFB;
	box-shadow: inset 0 1px 0 #fff, 0 4px 5px -4px rgba(0, 4, 99, 0.1), 0 10px 10px rgba(0, 4, 99, 0.07);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: monospace;
	font-size: 11px;
	line-height: 12px;
	text-transform: uppercase;
	color: rgba(28, 51, 88, 1);
	padding: 5px;
	overflow: hidden;
}

.componenteStatusHeader,
.componenteStatusContent {
	display: flex;
	align-items: center;
	gap: 5px;
}

.componentMacAddress {
	flex: 1;
	white-space: nowrap;
}

.estacaoId {
	margin: 0 0 0 auto;
}

.componenteStatusContainer img,
.componenteStatusContainer #calibragem {
	display: block;
	height: 50px;
	cursor: pointer;
}

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

.componenteSensores {
	display: flex;
	gap: 4px;
}

.componenteSensor {
	background: #fff;
	box-shadow: 0 0 0 1px #C9CFD9;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	min-height: 30px;
	padding: 5px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.componenteSensor label {
	display: block;
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 2px;
}

#queda2 img {
	display: block;
	height: 30px;
}

#colisaoNumero {
	background: #FFED91;
	box-shadow: 0 0 0 1px #FFED91;
	color: #665D3C;
}

#calibragemOLD {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	font-size: 15px;
}

#calibragemOLD .bt {
	border-radius: 4px;
	width: 22px;
	height: 22px;
	font-size: 18px;
	font-weight: 400;
	padding: 0 0 2px;
}

#calibreESQAcao,
#calibreDIRAcao {
	display: flex;
	align-items: center;
	gap: 5px;
}

#calibreESQ,
#calibreDIR {
	display: block;
	width: 24px;
	text-align: center;
}

.eventoMicrobit {
	visibility: hidden;
}

.modo-config {
	background: #FBFBFB;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
	overflow: hidden;
}

.modo-status {
	background: #E1E4EA;
	color: #1C3358;
	font-size: 14px;
	line-height: 1.25;
	padding: 10px 15px;
	margin: -15px -15px 10px;
}

.modo-status span {
	display: block;
	font-size: 12px;
	font-weight: 400;
	opacity: .8;
}

.modo-config-field {
	margin-bottom: 15px;
}

.modo-config-field .form-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	margin: 0 0 2px;
}

.modo-config-field .form-select {
	padding: 5px 36px 5px 10px;
}

.modo-config-bt {
	text-align: right;
}

.desafio-externo-btns {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	margin-bottom: 20px;
}

.ble-bit-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

.ble-bli-macaddress {
	flex-basis: 100%;
	font-family: monospace;
	font-size: 13px;
	margin: 0 0 8px 8px;
}

.bit-ble-container {
	margin-left: -5px;
}

.ble-bit-container img {
	display: block;
	width: auto;
	height: 120px;
}

.block-rangeY .block-title-h3 {
	min-width: 100px;
	justify-content: center;
}

.rangeY-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rangeY-label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.rangeY {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
}

.rangeY input[type=range] {
	transform: rotate(-90deg);
	width: 220px;
}

.switch-iot-container,
.range-iot-container,
.gauge-iot-container {
	background: #fff;
	box-shadow: 0 20px 25px -20px rgba(0, 4, 99, 0.1), 0 50px 60px rgba(0, 4, 99, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	margin: 0 auto;
}

.switch-iot-container {
	border-radius: 75px;
	width: 150px;
	height: 450px;
}

.range-iot-container {
	border-radius: 25px;
	width: 400px;
}

.range-iot-container input {
	margin: 0
}

.gauge-iot-container {
	border-radius: 50%
}

.war-cards-container {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.war-cards-container img {
	border-radius: 8px;
	display: flex;
	max-width: 110px;
	height: auto;
}

.army-medal-container {
	display: flex;
	gap: 10px;
}

.army-medal-container img {
	display: block;
	width: auto;
	height: 150px;
}

.carta-simbolo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 0 10px 0 0;
}

.carta-simbolo-num {
	background-color: #ee7208;
	border-radius: 5px;
	width: 40px;
	margin: 0 15px 0 5px;
}

.carta-simbolo img {
	display: block;
	height: 40px;
}

.carta-simbolo-num img {
	height: 30px
}

.component-vars {
	background: #FBFBFB;
	box-shadow: inset 0 1px 0 #fff, 0 4px 5px -4px rgba(0, 4, 99, 0.1), 0 10px 10px rgba(0, 4, 99, 0.07);
	border-radius: 8px;
	min-width: 100px;
	font-family: monospace;
	font-size: 11px;
	line-height: 12px;
	text-transform: uppercase;
	color: rgba(28, 51, 88, .9);
	padding: 10px;
}

.pi-vars {
	display: flex;
	min-width: 150px;
	gap: 10px;
}

.pi-vars>div {
	flex: 1
}

.component-var {
	padding: 2px 0;
}

.component-var span {
	font-weight: bold;
}

#mbot-img {
	display: block;
	height: 50px;
}
.linesensorDiv{
	float:left;
}
.linesensorValue{
	text-align:center;
}
.alertify-notifier{z-index:1000000 !important;font-weight:bold;}

.ajustado{margin-top:10px;margin-left:15px;}

.no-click {
  pointer-events: none;
}

.black-and-white-background {
  filter: grayscale(100%);
}
.cursor-wait {
  cursor: wait;
}
#listaProgramas{
	height:400px;
	overflow-y:auto;
}
.blockly-url-field > rect {
  width: 150px !important; /* Define a largura desejada */
}
.lesson-instructions.remove-before::before {
    content: none !important;
}



.pergunta-dialog {
	position: fixed;
	bottom: -20px;
	left: 8px;
	padding: 16px;
	background-color: #fff;
	border: 1px solid #ccc;
	display: none; /* inicialmente escondido */
	z-index: 99999999; /* garante que o diálogo apareça acima do conteúdo da página */
}

#perguntaDialogInput {
    margin-top: 8px;
	width:250px;
	margin-bottom: 8px;
}

.pergunta-dialog > div {
	 text-align:center;
}


#meuMapa area {
    cursor: pointer;
}

/* Ajustes específicos para componente Sphero no laboratório IoT */
#spheroConnect .componenteStatusContainer {
    height: 76px !important; /* mantém altura uniforme aos outros componentes */
}

#sphero-atalho-calibrar {
    display: block;
}

/* Ajustes para seção do microbit - aumenta altura das caixas de variáveis */
#microbitConnect .componenteSensores {
	min-height: 46px; /* Aproximadamente a altura do microbit */
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2px;
}

#microbitConnect .componenteSensor {
	flex: 1;
	min-width: 30px;
	font-size: 11px;
	line-height: 1.2;
	/* Remove white-space: nowrap para permitir quebra natural */
}

.componentMacAddress {
	flex: 1;
	white-space: nowrap;
}

/* Instruções estendidas para desafios sem ilustração */
.lesson-instructions-extended .lesson-instructions-character {
	display: none;
}

.lesson-instructions-extended .lesson-instructions {
	border-radius: 10px;
	margin-left: 0;
}

.lesson-instructions-extended .lesson-instructions:before {
	display: none;
}

.lesson-instructions-extended .lesson-instructions-content {
	min-height: 120px;
	max-height: 300px;
	overflow-y: auto;
	padding: 20px 40px;
}

/* ========================================
   CARTOLA MMBlockly - Sistema de ajuda
   ======================================== */

.cartola-mmblockly {
	margin-top: 15px;
	width: 100%;
}

.cartola-mmblockly .mochila {
	position: relative;
	width: 100%;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.2s;
	font-size: 14px;
	font-weight: 500;
}

.cartola-mmblockly .mochila:hover {
	background-color: #e0e0e0;
}

.cartola-mmblockly .mochila-content {
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #ccc;
	border-top: none;
	display: none;
	padding: 10px;
	border-radius: 0 0 4px 4px;
	text-align: left;
}

.cartola-mmblockly .mochila.expanded + .mochila-content {
	display: block;
}

.cartola-mmblockly .mochila-content img {
	width: 45px;
	height: 45px;
	margin: 5px;
	cursor: pointer;
	transition: transform 0.2s;
}

.cartola-mmblockly .mochila-content img:hover {
	transform: scale(1.1);
}

.cartola-mmblockly .cartola-icon {
	width: 30px;
	height: 30px;
	margin: 0;
}

/* Modal de selecao de projeto */
.compartimento-modal {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.compartimento-modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px 25px;
	border: 1px solid #888;
	width: 350px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.compartimento-modal-content h5 {
	margin: 0 0 15px 0;
	display: flex;
	align-items: center;
	color: #333;
	font-size: 18px;
}

.compartimento-modal-content h5 img {
	width: 24px;
	height: 24px;
	margin-right: 8px;
}

.compartimento-close {
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	color: #aaa;
	line-height: 20px;
}

.compartimento-close:hover,
.compartimento-close:focus {
	color: #000;
}

#cartolaProjectList {
	list-style: none;
	padding: 0;
	margin: 0;
}

#cartolaProjectList li {
	padding: 12px 15px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	transition: background-color 0.2s;
	border-radius: 4px;
	margin-bottom: 5px;
}

#cartolaProjectList li:hover {
	background-color: #f0f0f0;
}

#cartolaProjectList li:last-child {
	border-bottom: none;
}

/* Estilos para links e tooltips da Mochila */
#mochila-minhas-funcoes a.mochila-funcao-link,
#mochila-equipe-funcoes a.mochila-funcao-link {
	position: relative;
	cursor: help;
	transition: all 0.2s ease;
}

#mochila-facilitador-funcoes a.mochila-funcao-link {
	position: relative;
	cursor: help;
	transition: all 0.2s ease;
}

#mochila-minhas-funcoes a.mochila-funcao-link:hover,
#mochila-equipe-funcoes a.mochila-funcao-link:hover {
	text-decoration: underline;
	color: #0052a3;
}

#mochila-facilitador-funcoes a.mochila-funcao-link:hover {
	text-decoration: underline;
	color: #0052a3;
}

/* ========================================
   MOCHILA - Destaque visual do Facilitador
   ======================================== */

/* Funções (MMBlockly) */
#mochila-facilitador-funcoes .mochila-secao-facilitador {
	border-left: 4px solid rgba(255, 87, 87, 0.6);
	padding-left: 8px;
}

#mochila-facilitador-funcoes .mochila-secao-facilitador h6 {
	color: #b00000;
}

/* Forms (MMBlockly) */
#mochilaForm-lista .mochilaForm-secao-facilitador {
	border-left: 4px solid rgba(255, 87, 87, 0.6);
	padding-left: 8px;
}

#mochilaForm-lista .mochilaForm-secao-facilitador h6 {
	color: #b00000;
}

/* Tooltip customizado estilo Bootstrap (caso Bootstrap não esteja ativo) */
.tooltip {
	position: absolute;
	z-index: 10000;
	display: block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
	opacity: 0;
	filter: alpha(opacity=0);
}

.tooltip.in {
	opacity: 0.95;
	filter: alpha(opacity=95);
}

.tooltip.top {
	padding: 5px 0;
	margin-top: -3px;
}

.tooltip-inner {
	max-width: 350px;
	padding: 8px 12px;
	color: #333;
	text-align: left;
	background-color: #ffffcc;
	border: 1px solid #bbb;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	white-space: pre-wrap;
	font-size: 11px;
	line-height: 1.5;
}

.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 5px 5px 0;
	border-top-color: #bbb;
}