body, html {
	margin:0;
	padding:0;
	border:0;
	overflow: hidden!important;
	font-family: sans-serif;
	background:#fff;
}

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

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

#blocklyUI {
	height: 100vh;
    margin: 0;
    border: 0;
    padding: 0;
}

#blocklyIframe {
width:100%; height:100%; padding:0; margin:0; border:0;
}

#activityIframe {
width:100%; height:100%; padding:0; margin:0; border:0;
}

#log{
	padding:0;
	margin:0;
	border:0;
}

#log h2 {
    text-transform: uppercase;
    text-align: left;
    padding: 6px;
    margin: 0;
    color: #6e6e6e;
    border-bottom: 1px solid #ddd;
    font-size: 84%;
    font-weight: 800;
    line-height: 30px;
}

#logText {
    margin-top: 0;
    width: calc(100% - 0px);
    font-family: monospace;
    height: calc(100% - 0px);
    border: 0;
    padding-left: 6px;
    background: #fff;
    resize: none;
    white-space: pre;
    font-size: 100%;
    tab-size: 20px;
    margin-bottom: -20px;
}

#blockInfo{
	overflow: auto;
}
 
.additionalData{
	top:0px; left:0px; min-width:400px; display: none;
	width: calc(100% - 4px);
}

#clearLogBtn {
    position: relative;
    top: -35px;
    padding: 0px 6px;
    left: calc(100% - 59px);
    border-radius: 20px;
    }

#fullscreenBtn {
    position: fixed;
    padding: 3px!important;
    top: calc(100% - 46px);
    left: calc(100% - 45px);
    width: 32px;
}
 
#running {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #0008;
    display:none;
    text-align: center;
    cursor: default;
}
#messageRunning{
	display: inline-block;
	margin-top: 70px;
	padding: 4px 10px;
	background: #993232;
	color: #fff;
	border-radius: 30px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animRunning {
    animation: rotating 2s linear infinite;
    display: inline-block;
    height: 21px;
    width: 21px;
    line-height: 22px;
}

#runningSeparator {
    width: 3px;
    display: inline-block;
}

#runningSpace {
    width: 84px;
    display: inline-block;
}

#stopButton {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 85%;
    
    cursor: pointer;
    color: #993232;
background: #fff;padding: 2px 6px;border-radius: 20px;}

#stopButton:hover {

    
background: #ddd;}



#executionIframe {
	top:70px;
	left:150px;
	width:100px;
	height:100px;
	background:#fff;
	position:fixed;
}








.disconnectedElement {
    padding: 7px;
    border-left: 0;
    border-right: 0;
    background: #ffe69c;
    border-radius: 0!important;
    font-style: italic;
    font-size: 90%;
}

.disconnectedElementButtons{
	text-align: right;
	font-style: initial;
}

#disconnectedDeviceDiv{
	display:none;
}

#disconnectedDeviceDiv h2 {
    text-transform: uppercase;
    text-align: left;
    padding: 6px;
    margin: 0;
    color: #fff;
    border-bottom: 0px solid #ddd;
    font-size: 84%;
    font-weight: 800;
    line-height: 30px;
    background: #7d5000;
}

.disconnectedElementButtons span{
	cursor:pointer;
}


ul.timeline {
    list-style-type: none;
    position: relative;
	margin-right: 10px;
	top: 10px;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #33db1d;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
margin-top: 0px;}
ul.timeline > li:first-child:before {
    background: transparent;
height: 0px;border-radius: 0;border: 1px;margin-top: 0px;border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
  border-top: 20px solid #33db1d;left: 15px;}

ul.timeline > li:last-child:before {
    background-image: url(https://dev.protobject.com/myProtoBjeCtdev/tutorials/img/welldonesm.png);
background-color: #fff;background-repeat: no-repeat;background-position: 46% 58%;background-size: 14px;width: 30px;height: 30px;left: 15px;margin-top: -4px;}

#mainTitle{
	
font-size: 130%;margin: 0px 0px 10px 0px;}


.sideButtonsTutorial{
	display: inline-block; 
	background-color: rgb(221 221 221);    
	border-left: 8px solid rgb(90, 90, 90);   
	border-radius: 0px;    
	color: black;    
	padding: 1px 16px 3px 16px;
}

.addDeviceTutorial{
	display: inline-block; 
	padding: 1px 4px; 
	background-color:#478383; 
	border: 2px solid #478383;
	border-radius: 5px;
	color:white;
}

.addDeviceTutorial::before{
	content: '\2719  ';
}

.selectDeviceTutorial{
	display: inline-block; 
	background-color: #E9EBEC; 
	border: 2px solid #E9EBEC; 
	border-radius: 1px; 
	padding: 0 10px;
	font-weight: bold;
}

.qrCodeTutorial{
	display: inline-block; 
	padding: 0 8px; 
	background-color:#E9EBEC; 
	border: 1px solid #E9EBEC;
	border-radius: 3px;
}

.qrCodeTutorial::before{
	content: '\25A3  ';
}

.openInThisWindowTutorial{
	background-color:#17a2b8; 
	border: 1px solid #17a2b8;
	border-radius: 3px;
	color:white;
	padding: 0px 6px 1px 6px;
	display: inline-block;
}

.confirmDeviceTutorial {
	display: inline-block; 
	padding: 0 5px;
	background-color:#007bff; 
	border: 4px solid #007bff;
	border-radius: 3px;
	color:white;
}

.iFrameTutorial{
	border:0;
}

.playButtonTutorial {
	background: #dd4b39;
	font-size: inherit;
	color: white;
	padding: 6px 16px 8px 17px;
	border-radius: 20px;
	font-family: sans-serif;
}

.playButtonTutorial::before{
	content: '\25B6';
}








.tutorialImgMargin {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
	max-width: calc(100% - 5px);
}

.tutorialImg {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 0px;
    border-radius: 5px;
	max-width: calc(100% - 5px);
}

.tutorialImgNoBorder {
    border: 0px solid #ddd;
    display: inline-block;
    padding: 0px;
    border-radius: 5px;
	max-width: calc(100% - 5px);
}

.tutorialImgWide {
    border: 1px solid #ddd;
    display: grid;
    padding: 0px;
    border-radius: 5px;
    width: calc(100% + 60px);
    margin-left: -60px;
}

.tutorialImg img, .tutorialImgWide img {
	width:100%;
	z-index:9999;
	border-radius: 5px;
}

.tutorialImgFC{
	border: 1px dotted #555;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
	max-width: calc(100% - 5px);}
	
}

.tutorialImgFC img{
	width:100%;
	
}