@font-face {
  font-family: 'Source_Code_Pro';
  src: url("../fonts/Source_Code_Pro/static/SourceCodePro-Regular.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}


body, html {
  height: 100%;
  margin: 0;
  background-color: #fff;
  font-family: 'Source_Code_Pro';
  background-size:auto;
  background-repeat: no-repeat;
}

.bg {
  /* The image used */
  background: url('../images/background.png'); 

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blocklySvg {
  background: rgba(255, 255, 255, 1);
}

canvas {
  background-color: transparent;
  z-index:200;
}

.transparentButton {
  background-color: transparent; 
  color: white; 
  border-style: solid;
  border-width: 1px;
  border-color: white;
  padding: 5px;
}

.progressBar {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 20%;
  border-width: 0px;
  z-index: 101;
  opacity: 0.8;
  visibility: hidden;
}

.savingButton {
  content: url('../images/savefile.gif');
  position: absolute;
  bottom: 55%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
  opacity: 0.8;
  visibility: hidden;
}

.openConnectButton{
  content: url('../images/buttons/connect.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.openConnectButton:hover{
  opacity: 0.85;
}

.savePythonButton{
  content: url('../images/buttons/upload.png');
  width: 12rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.savePythonButton:hover{
  opacity: 0.85;
}

.runPythonButton:hover{
  opacity: 0.85;
}

.runPythonButton{
  content: url('../images/buttons/run.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.documentsButton{
  content: url('../images/buttons/doc.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.documentsButton:hover{
  opacity: 0.85;
}

.notConnectedButton{
  content: url('../images/buttons/notconnected.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.notConnectedButton:hover{
  opacity: 0.85;
}

.connectedButtonBLE{
  content: url('../images/connectedBLE.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.connectedButtonBLE:hover{
  opacity: 0.85;
}

.notConnectedButtonBLE{
  content: url('../images/notconnectedBLE.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.notConnectedButtonBLE:hover{
  opacity: 0.85;
}

.connectedButton{
  content: url('../images/buttons/connected.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.connectedButton:hover{
  opacity: 0.85;
}

.openCodeButton{
  content: url('../images/buttons/codepanel.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.openCodeButton:hover{
  opacity: 0.85;
}

.runButton{
  content: url('../images/buttons/run.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.runButton:hover{
  opacity: 0.85;
}

.runButton-d{
  content: url('../images/buttons/run-d.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.stopButton{
  content: url('../images/buttons/stop.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.stopButton:hover{
  opacity: 0.85;
}

.stopButton-d{
  content: url('../images/buttons/stop-d.png');
  width: 5rem; 
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  margin: 0.3rem;
}

.connectButton
{
  background-color: #fd5d0a;
  color: white;
  font-weight: bold;
  font-size: 11pt;
}

.connectButton:hover
{
  color: white;
}

.disconnectButton
{
  background-color: #fd5d0a;
  color: white;
  font-weight: bold;
  font-size: 11pt;
}

.disconnectButton:hover
{
  color: white;
}

.gotoEditorButton
{
  background-color: #fd5d0a;
  color: white;
  font-weight: bold;
  font-size: 11pt;
}

.gotoEditorButton:hover
{
  color: white;
}

.codeButton{
  margin:1px;
  background-color: #2dfe32; 
  color: #0d277d; 
  font-size: 1vw;
  font-family: sans-serif; 
  width: 9vw;  
}

.connectDevicePanel
{
  margin: 5px;
  padding: 10px; 
  background-color: #fff; 
  border-radius: 5px;
  cursor: pointer;
  font-size: small;
}

.blockButton{
  margin:1px;
  background-color: #fafe32; 
  color: #0d277d; 
  font-size: 1vw;
  font-family: sans-serif; 
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
} 

.blocklyDiv
{
  color: white;
  padding: 1px;
  font-family: cursive, sans-serif;
  font-size: 2vw;
  color: black;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #162d4a;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #162d4a;
}

/* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #162d4a;
    }

/*Loader*/

.spinner {
  width: 100px;
  height: 80px;
  text-align: center;
  font-size: 20px;

  position: absolute;
  top: 50%;
  left: 50%;
}

.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.tab
{
  padding: 10px;
}

.tablinks
{
  
}

.menuButton:hover
{
  opacity: 0.8;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #ff3333;
}

/* Create an active/current tablink class */
.tab button.active {
  color: #ff3333;
}

.tab button.active:hover {
  color: #ff3333;
}

.ace_editor {
    border: 1px solid lightgray;
    margin: auto;
    width: 100%;
}


/* Blockly*/

#importExport {
  font-family: monospace;
}

.ioLabel>.blocklyFlyoutLabelText {
  font-style: italic;
}

.blocklyFlyoutLabelText {
  fill: white !important;
}
.blocklyFlyoutHeading>.blocklyFlyoutLabelText {
  font-size: 1.5rem;
}
line.blocklyFlyoutLine {
  stroke: white;
}
.blocklyFlyoutLabelIcon {
  font-family: 'Font Awesome\ 5 Free';
  font-size: 1.5rem;
  font-weight: 900;
  fill: white;
}

.blocklyTreeRow {
  height: 45px !important;
  border-radius: 15px;
}

.basicBlocks
{
  background: url('../images/buttons/Basic1.png');
  background-repeat: no-repeat; 
  background-size: cover;
  margin: 0 .3em;
  padding: 0.2em;
  width: 30px !important;
  height: 100% !important;
  line-height: 45px;
  min-height: 45px;
  vertical-align: middle;
}

.blocklyTreeIconCustom {
  background: none !important;
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0 .3em;
  padding: 0.2em;
  width: 30px !important;
  height: 100% !important;
  line-height: 45px;
  min-height: 45px;
  vertical-align: middle;
}
.blocklyTreeIconCustom::before {
  content: "\f12e";
}
.blocklyTreeIconCustom.logic::before {
  content: "\f074";
}
.blocklyTreeIconCustom.loops::before {
  content: "\f01e";
}
.blocklyTreeIconCustom.math::before {
  content: "\f1ec";
}
.blocklyTreeIconCustom.text::before {
  content: "\f031";
}
.blocklyTreeIconCustom.lists::before {
  content: "\f0ca";
}
.blocklyTreeIconCustom.colour::before {
  content: "\f53f";
}
.blocklyTreeIconCustom.variables::before {
  content: "\f0c9";
}
.blocklyTreeIconCustom.functions::before {
  content: "\f141";
}