#windowMain{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

/* Top panel objects position */

#paneTop{
  position: absolute;
  top: 0px;
  left: 256px;
  right: 0px;
  height: 70px;
  width: auto;
}

#slideoutTop {
  position: absolute;
  top: 6px;
  right: 540px;
  width: 130px;
  height: auto;
}

#slideoutTop img{
  width: 100%;
  height: 100%;
}

#slideoutTop .text{
  width: 100%;
  height: 36px;

  margin-top: 8px;
  padding: 0px 8px 0px 8px;

  overflow: hidden;
}

#slideoutTopButton{
  position: relative;
  top: -3px;
  left: 120px;
  height: 16px;
  width: 60px;
}

#slideoutTopButton .centerHor{
  width: 20px;
}

#slideoutTopButton img{
  width: 20px;
  height: auto;
}

#gameLevels{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  margin: 10px 10px 0px 0px;
}

/* Left panel objects position */

#paneLeft{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  height: auto;
  width: 256px;
}

#ozogameLogo{
  position: absolute;
  top: 55px;
  left: 0px;
  width: 100%;
}

#settingsToolboxBackground{
  position: absolute;
  top: 150px;
  bottom: 0px;
  height: auto;
  width: 100%;
}

#detachedToolbox{
  position: absolute;
  top: 0px;
  bottom: 60px;
  z-index: 1;
  height: auto;
  width: 100%;

  overflow-y: auto;
  overflow-x: hidden;
}

#detachedToolbox .blocklyToolboxDiv{
  width: 100%;
}

#settings{
  position: absolute;
  bottom: 10px;
  left: 0;
}

/* Blockly position */

#blocklyBorder{
  position: absolute;
  top: 70px;
  bottom: 0px;
  left: 256px;
  right: 300px;
  height: auto;
  width: auto;
  overflow: hidden;

  border-top-left-radius: 55px;
  border: 4px solid white;
  border-bottom: none;
}

#blockly{
  width: 100%;
  height: 100%;
}

/* Right panel objects position */

#paneRight{
  position: absolute;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  top: 70px;
  right: 0px;
  bottom: 0px;
  height: auto;
  width: 300px;
  z-index: 1;
  overflow: auto;
  text-align: center;

  border-top: 4px solid white;
}

#mapArea {
  width: auto;
  padding: 10px;
}

#visualization{
  /*height: 260px;*/
  /*width: 260px;*/

  margin-top: 10px;
  margin-bottom: 15px;

  /*background: white;*/
  border-radius: 10px;

  overflow: hidden;
}

#visualization canvas{
  width: 100%;
  height: 100%;

  direction: ltr;
  border-radius: 10px;
}

#paneRightDelimiter{
  position: relative;
  top: 0px;
  width: 100%;
  height: auto;
}

#paneRightDelimiter.bounce{
  top: 10px;
}

#paneRightDelimiter img{
  width: 100%;
}

#programmingArea{
  /*position: absolute;*/
  /*top: 440px;*/
  width: 100%;
  flex: 1;
}

#loadingHelpImage{
  position: absolute;
  top: -100px;
  height: 95px;
  width: 100%;
}

#loadingHelpImage img{
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms ease;
  -webkit-transition: opacity 500ms ease;
  -moz-transition: opacity 500ms ease;
}

#programmingZone{
  position: relative;
  height: 250px;
  width: 250px;

  margin-top: 10px;
  margin-bottom: 15px;
}

#programmingZone .ozobotSiluete{
  position: absolute;
  top: 0px;
  z-index: 1;

  height: 100%;
  width: 100%;
}

#programmingZone .ozobotSiluete img{
  height: 100%;
  width: 100%;
}

#programmingZone #colorFlashZone{
  margin-top: 2px;
  height: 98%;
  width: 98%;
  border-radius: 50%;
}

#programLoadProgress .progress {
  height: 10px;
  width: 240px;
  margin-top: 10px;
  margin-bottom: 5px;
  overflow: hidden;
}

#programLoadProgress .progress-bar {
  float: left;
  width: 0;
  height: 100%;
}

/* buttons layout */
#backButton{
  display: none;
  margin-left: 10px;
  margin-top: 10px;
}

#personButton{
  margin-left: 10px;
  margin-top: 10px;

  height: 25px;
  padding-bottom: 0px;
}

#runButton img, #resetButton img, #resetLoadButton img {
  height: 17px;
}

#paneRightLogo {
  position: absolute;
  width: 100%;
}

#paneRightLogo img {
  width: 90%;
}

.blocklySvg {
  background-color: #939597;
  border: none !important;
  outline: none;
  overflow: hidden;
}

.blocklyMainBackground {
  stroke-width: 0 !important;
}

.blocklyScrollbarBackground {
  fill: none !important;
  stroke: none !important;
}