body
{
    font-size:12.74px;
}
.setFontSize {
	position: absolute;
	right: 20;
	background-image: url('../js/media/sprites.png');
	width: 32px;
	height: 32px;
}

#resetFontSize{
	bottom: 100;
	background-position: -96px -92px;
}
#increaseFontSize{
	bottom: 68;
	background-position: -32px -92px;
}
#decreaseFontSize{
	bottom: 36;
	background-position: -64px -92px;
}

#header
{
    background-color:#4D97FF;
}

#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000000;
    font-size: 22px;
}

#blockly {
    display: none;
    overflow: auto;
    resize: horizontal;
    padding-right: 10px;
}

#blockly:after {
    border-top: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid #888;
    border-bottom: 0.5em solid #888;
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    cursor: ew-resize;
}
.canvas-ouput
{

	width: auto;
	height: 60%;
	background-color: #F8F8FF;

}
.output{
		margin: 0.2%;
		background-color: #F5F5F5;
		width: auto;
		height: 40%;
		font-family:"Times New Roman",Georgia,Serif;
		font-size:20px;
		overflow-y: scroll;
}
/* Re-usable, generic rules */
.hidden {
  display: none !important;
}

.verlayout {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
}

.horlayout {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
}

.flex1 {
  flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}
.flex2 {
  width: 20px;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body, input {
  font-family: "Segoe UI Light", "Segoe UI", "Segoe WP Light", "Segoe WP",
    "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
  font-size: 1rem;
}

#main {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background: #F2F2F2;
}

#editor {
  position: relative;
  margin: 0;
}

/* Script info box */
#logo {
  margin-right: 1rem;
  margin-left: 1rem;
  text-align: left;
  width: 100%;
}

/* Toolbox and operation */
#merge-operation {
  margin-left: 3em;
}

#merge-operation > * {
  cursor: pointer;
}

#merge-operation > .label {
  color: #a40000;
  font-weight: bold;
}

#operation {
  min-width: 150px;
}

#operation a {
  text-align: center;
  padding-left: 0.75em;
  padding-right: 0.75em;
  background-color:#4D97FF;
}
#operation a:hover
{
    background-color:#63A2DD;
}


#merge-codeoperate {
  margin-left: 3em;
}

#merge-codeoperate > * {
  cursor: pointer;
}

#merge-codeoperate > .label {
  color: #a40000;
  font-weight: bold;
}

#codeoperate {
  min-width: 400px;
}

#codeoperate a {
  text-align: center;
  padding-left: 0.75em;
  padding-right: 0.75em;
  background-color:#4D97FF;
}
#codeoperate a:hover
{
    background-color:#63A2DD;
}


#log {
  overflow: auto;
  width: 500px;
  max-height: 500px;
}

.status {
  white-space: pre-wrap;
}

.status:first-letter {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif;
}

.status:not(:first-letter) {
  font-weight: bold;
}

.status.error {
  color: #a40000;
}

.status:not(.error) {
  color: #4e9a06;
}

/* Buttons */
.operationbtn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #336699;
  text-decoration: none;
}

.disabled div.btnblock {
  border-color: #AAA;
}

.disabled i {
  color: #AAA;
}

.disabled div.btnlabel {
  color: #AAA;
}

.btnblock {
  width: 2rem;
  height: 2rem;
  /*border: 6px solid #FFCC33;*/
  border-radius: 50%;
  margin: .2rem;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.6rem;
  line-height: 4.4rem;
  padding: .1em;
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif;
  color: #fff;
  background: trasparent;
}

.operationbtn:focus, .operationbtn:active {
  /*background-image: url("../img/triangle2.svg");*/
}

.btnlabel {
  padding-top: .3rem;
  padding-bottom: .3rem;
  font-size: 80%;
  text-align: center;
  /*color: #336699;*/
  color:#ffffff;
  width: 55px;
}

body:not(.hasFota) .fota {
  display: none;
}

body.hasFota .notfota {
  display: none;
}

/* Misc */
a.command, a.command:visited {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

a.command:hover {
  text-decoration: underline;
}

/* Some overrides for narrow displays */
@media (max-width: 890px) {
  .operationbtn {
    display: inline;
    padding: 0.75em;
    min-width: 48px;
  }

  #script-icons {
    display: none;
  }

  .btnblock {
    width: 2rem;
    height: 2rem;
    line-height: 2.05rem;
    font-size: 1.3rem;
    margin: 0;
  }

  .btnlabel {
    padding-top: 0;
    display: none;
  }

  .operationbtn > * {
    /*display: inline-block;*/
  }

  #script-name {
    font-size: 1.2rem;
    font-weight: bold;
    max-height: 50px;
  }

  .blocklyTreeRow {
    padding-right: .3em !important;
    height:35px;
  }

  .blocklyTreeIcon {
    width: 6px !important;
  }

  .blocklyTreeLabel {
    font-size: 12px !important;
    height:35px;
    line-height:35px;
  }

  #operation {
    min-width: 425px;
  }
}

@media (max-width: 480px) {
  #toolbox {
    flex-direction: column;
    -ms-flex-direction: column;
  }

  #script-box {
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: left;
    width: 100%;
  }
}

.snippet-selection:hover {
    background: #FFCC33;
    cursor: pointer;
}

.snippet-table {
    width: 100%;
    font-size:12.74px;
}

.snippet-table th {
    text-align: left;
    padding-right: 48px;
}

.snippet-table td {
    border-bottom: 1px dotted #CCC;
}

.snippet-name {
    display: none;
}

.share-label {
    display: inline-block;
    width: 200px;
}

#share-link {
    display: none;
}

/* .blocklySvg {
    background-image: url('../img/experimental.png');
    background-repeat: repeat;
} */

.load-form {
    display: none;
}

div.load-drag-target {
    height: 200px;
    background: #ddd;
    border: 1px solid #aaa;
    border-radius: 15px;
}


div.load-form {
    padding-top: 20px;
    height: 200px;
}

.load-form input {
    margin-bottom: 20px;
}

.load-drag-target p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#load-alt a, #load-alt a.visited {
    color: #336699;
    font-weight: bold;
}

.blocklyToolboxDiv{
	background-color: #F9F9F9;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: rgba(0, 0, 0, 0.15);
}

div>span.blocklyTreeIcon.blocklyTreeIconNone{
	width:24px;height:24px;
	float:left;
	margin:4px;
	background:url('../js/media/mark/default.png') no-repeat;
	background-size: 100% auto; 
}
.blocklyTreeSelected>span.blocklyTreeIcon.blocklyTreeIconNone{ 
	background:url('../js/media/mark/default.png') no-repeat;
	background-size: 100% auto; 
}

.is-dragover {
    background: #ccc !important;
}

#\:0 > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/screen.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/network.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/pin.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/pyb.png') no-repeat;
	background-size: 100% auto; 
}


#\:0 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/led.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/pin.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(4) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/timer.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(5) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/thermometer.png') no-repeat;
	background-size: 100% auto; 
}
#\:0 > div:nth-child(2) > div:nth-child(1) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/turtle.png') no-repeat;
	background-size: 100% auto; 
}
#\:0 > div:nth-child(2) > div:nth-child(2) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/logic.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(3) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/math.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(4) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/text.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(5) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/list.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(6) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/variable.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(7) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/func.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(8) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/tuple.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(10) >div.blocklyTreeRow.blocklyTreeSelected > span.blocklyTreeIcon {
	background:url('../js/media/mark/tuple2.png') no-repeat;
	background-size: 100% auto; 
}


#\:0 > div:nth-child(2) > div:nth-child(9) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/dic.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(10) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/set.png') no-repeat;
	background-size: 100% auto; 
}

#\:0 > div:nth-child(2) > div:nth-child(13) >div.blocklyTreeRow > span.blocklyTreeIcon.blocklyTreeIconNone {
	background:url('../js/media/mark/loop.png') no-repeat;
	background-size: 100% auto; 
}