@font-face {
  font-family: Manjari-Bold;
  src: url(../fonts/Manjari/Manjari-Bold.ttf);
}

@font-face {
  font-family: Manjari-Regular;
  src: url(../fonts/Manjari/Manjari-Regular.ttf);
}

@font-face {
  font-family: Manjari-Thin;
  src: url(../fonts/Manjari/Manjari-Thin.ttf);
}

@font-face {
  font-family: Roboto;
  font-weight: normal;
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
  font-family: Roboto;
  font-weight: bold;
  src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

.f-manjari-b {
  font-family: Manjari-Regular, sans-serif !important;
  font-weight: bold !important;
}

.blocklyTreeLabel, .blocklyText, .loading {
	font-family: Manjari-Bold, sans-serif !important;
	font-weight: 700 !important;
}

.blocklyTreeLabel {
	padding-right: 20px;
}

.blocklyTreeSelected .blocklyTreeLabel {
	color: black !important;
}

.blocklyTreeSelected, .blocklyFlyoutBackground {
	fill: aliceblue !important;
	background-color: aliceblue !important;
}

/* loading dots */

.loading {
  color: black;
  font: 300 4em/150% Impact;
  text-align: center;
}

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: black;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 black;}}