/* OBSOLETE:
$color-primary-rgb: color.red($color-primary)+','+color.green($color-primary)+','+color.blue($color-primary);
$color-secondary-rgb: color.red($color-secondary)+','+color.green($color-secondary)+','+color.blue($color-secondary);
$color-success-rgb: color.red($color-success)+','+color.green($color-success)+','+color.blue($color-success);
$color-info-rgb: color.red($color-info)+','+color.green($color-info)+','+color.blue($color-info);
$color-warning-rgb: color.red($color-warning)+','+color.green($color-warning)+','+color.blue($color-warning);
$color-danger-rgb: color.red($color-danger)+','+color.green($color-danger)+','+color.blue($color-danger);
*/
:root, [data-bs-theme=light] {
  --bs-primary: #337ab7;
  --bs-primary-rgb: 51,122,183;
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108,117,125;
  --bs-success: #5cb85c;
  --bs-success-rgb: 92,184,92;
  --bs-info: #5bc0de;
  --bs-info-rgb: 91,192,222;
  --bs-warning: #f0ad4e;
  --bs-warning-rgb: 240,173,78;
  --bs-danger: #d9534f;
  --bs-danger-rgb: 217,83,79;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #337ab7;
  --bs-link-color: #337ab7;
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: #337ab7;
}

.btn-primary {
  --bs-btn-bg: #337ab7;
  --bs-btn-border-color: rgb(45.4423076923, 108.7051282051, 163.0576923077);
  --bs-btn-hover-bg: rgb(98.9807692308, 159.5128205128, 211.5192307692);
  --bs-btn-hover-border-color: rgb(79.0384615385, 147.3076923077, 205.9615384615);
  --bs-btn-active-bg: rgb(34.3269230769, 82.1153846154, 123.1730769231);
  --bs-btn-active-border-color: rgb(34.3269230769, 82.1153846154, 123.1730769231);
  --bs-btn-focus-border-color: rgb(59.0961538462, 135.1025641026, 200.4038461538);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(59.0961538462, 135.1025641026, 200.4038461538);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(147.0769230769, 188.9487179487, 224.9230769231);
  --bs-btn-disabled-border-color: rgb(125.4923076923, 175.7384615385, 218.9076923077);
}

.btn-secondary {
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: rgb(96.1802575107, 104.19527897, 111.3197424893);
  --bs-btn-hover-bg: rgb(147.4356223176, 155.1802575107, 162.0643776824);
  --bs-btn-hover-border-color: rgb(133.7553648069, 142.4849785408, 150.2446351931);
  --bs-btn-active-bg: rgb(72.5407725322, 78.5858369099, 83.9592274678);
  --bs-btn-active-border-color: rgb(72.5407725322, 78.5858369099, 83.9592274678);
  --bs-btn-focus-border-color: rgb(120.0751072961, 129.7896995708, 138.4248927039);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(120.0751072961, 129.7896995708, 138.4248927039);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(180.6974248927, 186.0472103004, 190.8025751073);
  --bs-btn-disabled-border-color: rgb(165.8369098712, 172.2566523605, 177.9630901288);
}

.btn-success {
  --bs-btn-bg: #5cb85c;
  --bs-btn-border-color: rgb(76.0064102564, 174.4935897436, 76.0064102564);
  --bs-btn-hover-bg: rgb(145.2884615385, 207.2115384615, 145.2884615385);
  --bs-btn-hover-border-color: rgb(127.5256410256, 199.4743589744, 127.5256410256);
  --bs-btn-active-bg: rgb(60.5320512821, 138.9679487179, 60.5320512821);
  --bs-btn-active-border-color: rgb(60.5320512821, 138.9679487179, 60.5320512821);
  --bs-btn-focus-border-color: rgb(109.7628205128, 191.7371794872, 109.7628205128);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(109.7628205128, 191.7371794872, 109.7628205128);
}

.btn-info {
  --bs-btn-bg: #5bc0de;
  --bs-btn-border-color: rgb(69.7715736041, 183.845177665, 217.7284263959);
  --bs-btn-hover-bg: rgb(154.6852791878, 216.4644670051, 234.8147208122);
  --bs-btn-hover-border-color: rgb(133.4568527919, 208.3096446701, 230.5431472081);
  --bs-btn-active-bg: rgb(39.616751269, 160.8680203046, 196.883248731);
  --bs-btn-active-border-color: rgb(39.616751269, 160.8680203046, 196.883248731);
  --bs-btn-focus-border-color: rgb(112.2284263959, 200.154822335, 226.2715736041);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(112.2284263959, 200.154822335, 226.2715736041);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.btn-warning {
  --bs-btn-bg: #f0ad4e;
  --bs-btn-border-color: rgb(238.0078125, 162.109375, 54.4921875);
  --bs-btn-hover-bg: rgb(245.9765625, 205.671875, 148.5234375);
  --bs-btn-hover-border-color: rgb(243.984375, 194.78125, 125.015625);
  --bs-btn-active-bg: rgb(222.6328125, 138.359375, 18.8671875);
  --bs-btn-active-border-color: rgb(222.6328125, 138.359375, 18.8671875);
  --bs-btn-focus-border-color: rgb(241.9921875, 183.890625, 101.5078125);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(241.9921875, 183.890625, 101.5078125);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.btn-danger {
  --bs-btn-bg: #d9534f;
  --bs-btn-border-color: rgb(212.4719626168, 62.5046728972, 58.0280373832);
  --bs-btn-hover-bg: rgb(230.5841121495, 144.4859813084, 141.9158878505);
  --bs-btn-hover-border-color: rgb(226.0560747664, 123.9906542056, 120.9439252336);
  --bs-btn-active-bg: rgb(180.523364486, 43.0794392523, 38.976635514);
  --bs-btn-active-border-color: rgb(180.523364486, 43.0794392523, 38.976635514);
  --bs-btn-focus-border-color: rgb(221.5280373832, 103.4953271028, 99.9719626168);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(221.5280373832, 103.4953271028, 99.9719626168);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #eca9a7;
  --bs-btn-disabled-border-color: rgb(232.2, 151.8, 149.4);
}

.btn-outline-danger {
  --bs-btn-color: #d9534f;
  --bs-btn-border-color: #d9534f;
  --bs-btn-hover-bg: #d9534f;
  --bs-btn-hover-border-color: #d9534f;
  --bs-btn-focus-shadow-rgb: 217,83,79;
  --bs-btn-active-bg: #d9534f;
  --bs-btn-active-border-color: #d9534f;
  --bs-btn-disabled-color: #d9534f;
  --bs-btn-disabled-border-color: #d9534f;
}

.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108,117,125;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

:root {
  --bs-body-font-family: ABeeZee;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #fff;
  font-family: sans-serif;
  font-family: ABeeZee;
  font-size: 112%;
  overflow: hidden;
}

h1 {
  font-weight: normal;
  font-size: 140%;
}

table {
  height: 100%;
  width: 100%;
}

body:not(.beta) .beta {
  display: none;
}

#main-div {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  flex-direction: column;
  background-color: #ddd;
  padding: 0;
  margin: 0;
}

#main-head {
  display: flex;
  background-image: linear-gradient(to top, #ffffff 0%, #a1b3b9 100%);
}

#main-head > .background-front {
  position: absolute;
  height: 38px;
  width: 100%;
  margin: 51px 0 0px 0;
  background-image: url("/media/images/holzbalken.png");
  background-size: 100% 100%;
}

#main-body {
  display: flex;
  background-color: #ddd;
  height: 99%;
}

#main-foot {
  display: flex;
  background-color: #ddd;
}

/* top, bottom and height */
#main-head > div {
  margin-top: 0;
}

#main-foot > div {
  margin-bottom: 0;
}

@media screen and (min-height: 1000px) {
  #main-head > div {
    margin-top: calc(1vh - 10px);
  }
  #main-foot > div {
    margin-bottom: calc(1vh - 10px);
  }
}
@media screen and (min-height: 1600px) {
  #main-head > div {
    margin-top: calc(2vh - 22px);
  }
  #main-foot > div {
    margin-bottom: calc(1vh - 10px);
  }
}
@media screen and (min-height: 2400px) {
  #main-head > div {
    margin-top: 26px;
  }
  #main-foot > div {
    margin-bottom: 14px;
  }
}
/* left, right and width */
#main-head > div,
#main-body > div,
#main-foot > div {
  width: 100%;
  margin-left: 2px;
  margin-right: 2px;
  display: flex;
}

@media screen and (min-width: 1000px) {
  #main-head > div,
  #main-body > div,
  #main-foot > div {
    margin-left: calc(1% - 8px);
    margin-right: calc(1% - 8px);
  }
}
@media screen and (min-width: 1600px) {
  #main-head > div,
  #main-body > div,
  #main-foot > div {
    margin-left: calc(2% - 20px);
    margin-right: calc(2% - 20px);
  }
}
@media screen and (min-width: 2400px) {
  #main-head > div,
  #main-body > div,
  #main-foot > div {
    margin-left: 28px;
    margin-right: 28px;
  }
}
/* Additinal items */
.img-bob {
  background-image: url("/media/tile-combis/bob-front-combi.png");
  width: 100px;
  height: 100px;
  background-size: 200%;
  margin: 5px 5px;
}

.img-lotte {
  background-image: url("/media/tile-combis/lotte-combi.png");
  width: 100px;
  height: 100px;
  background-size: 700%;
  margin: 5px 5px;
}

.img-troet {
  background-image: url("/media/tile-combis/troet-combi.png");
  width: 100px;
  height: 100px;
  background-size: 500%;
  margin: 5px 5px;
}

.img-tanne {
  background-image: url("/media/tile-combis/tanne-combi.png");
  width: 100px;
  height: 100px;
  background-size: 600%;
  margin: 5px 5px;
}

.img-hoernli {
  background-image: url("/media/tile-combis/hoernli-combi.png");
  width: 100px;
  height: 100px;
  background-size: 400%;
  margin: 5px 5px;
}

.img-zack {
  background-image: url("/media/tile-combis/zack-combi.png");
  width: 100px;
  height: 100px;
  background-size: 300%;
  margin: 5px 5px;
}

.img-kugel {
  background-image: url("/media/tile-combis/kugel-combi.png");
  width: 100px;
  height: 100px;
  background-size: 300%;
  margin: 5px 5px;
}

.img-tinte {
  background-image: url("/media/tile-combis/tinte-combi.png");
  width: 100px;
  height: 100px;
  background-size: 100%;
  margin: 5px 5px;
}

.img-pelzi {
  background-image: url("/media/tile-combis/pelzi-combi.png");
  width: 100px;
  height: 100px;
  background-size: 100%;
  margin: 5px 5px;
}

.img-buh {
  background-image: url("/media/tile-combis/buh-combi.png");
  width: 100px;
  height: 100px;
  background-size: 100%;
  margin: 5px 5px;
}

.img-dummy-1px {
  width: 1px;
  height: 100px;
  margin: 5px 5px;
}

.col-form-label {
  font-weight: bold;
}

/****************************/
/*         BOOTBOX          */
.bootbox-prompt-message {
  margin-bottom: 1em;
}

.dropdown-item .far.selectable-dot::before {
  content: "\f111";
}

.dropdown-item.selected .far.selectable-dot::before {
  content: "\f192";
}

#head-left > div > div.dropdown {
  overflow: visible;
}

/* dynamic overlay: */
.wwtools-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: white;
  opacity: 0.7;
  z-index: 55;
}

.wwtools-overlay > .icon {
  position: relative;
  top: 50%;
  margin: -0.4em auto;
  text-align: center;
  font-size: 400%;
}

.pulse-button {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  animation: pulse 3s infinite;
}

.pulse-button:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  }
  70% {
    box-shadow: 0 0 3px 10px rgba(100, 100, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 3px 0px rgba(100, 100, 0, 0);
  }
}
/* MAIN PAGE */
#blocklyArea {
  height: 99%;
}

#programs-tab > li.selected-tab > button,
#programs-tab > li > div.dropdown {
  display: none;
}

#programs-tab > li.selected-tab > div.dropdown {
  display: block;
}

#programs-tab > li.selected-tab > div.dropdown > button {
  font-weight: bold;
}

#programs-tab {
  position: relative;
  top: 2px;
  z-index: 1;
}

#programs-tab > li > div.background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#programs-tab > li > div.background i:nth-of-type(1) {
  display: inline-block;
  height: 100%;
  width: 1em;
  background-image: url("/media/images/tab-shield-1-bg1.png");
  background-size: 100% 100%;
}
#programs-tab > li > div.background i:nth-of-type(2) {
  display: inline-block;
  height: 100%;
  width: calc(100% - 2em);
  background-image: url("/media/images/tab-shield-1-bg2.png");
  background-size: 100% 100%;
}
#programs-tab > li > div.background i:nth-of-type(3) {
  display: inline-block;
  height: 100%;
  width: 1em;
  background-image: url("/media/images/tab-shield-1-bg3.png");
  background-size: 100% 100%;
}

.compile .hide-compile.hide-compile {
  display: none;
}

.show-compile.show-compile {
  display: none;
}

.compile .show-compile.show-compile {
  display: inline-block;
}

#head-left {
  vertical-align: top;
}

#user-control {
  width: max-content;
}

#head-left div h6 {
  margin-top: 14px;
  font-size: 16px;
}

#head-left div h6 b {
  color: #777;
}

.start-hidden {
  display: none;
}

.hide-invalid-tooltip {
  display: none;
}

#logoArea .bobblocks-logo {
  height: 2.5em;
  float: right;
  margin: 0.8em;
}

@media (min-width: 576px) {
  #logoArea .bobblocks-logo {
    height: 3em;
  }
}
@media (min-width: 768px) {
  #logoArea .bobblocks-logo {
    height: 3.5em;
  }
}
@media (min-width: 992px) {
  #logoArea .bobblocks-logo {
    height: 4em;
  }
}
@media (min-width: 1200px) {
  #logoArea .bobblocks-logo {
    height: 4.5em;
  }
}
@media (min-width: 1400px) {
  #logoArea .bobblocks-logo {
    height: 5em;
  }
}
#btn-file.disabled {
  opacity: 0.2;
}

#btn-file {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 1s ease-in-out;
}

#btn-file.hidden {
  display: none;
}

.modal-content {
  box-shadow: 18px 18px 29px 10px rgba(0, 0, 0, 0.3333333333);
}

.btn.btn {
  font-weight: 600;
}

.accordion.showing .accordion-button.collapsed {
  background: #eee;
}

body > div.display-beta {
  position: absolute;
  font-size: xxx-large;
  text-shadow: 0 0 7px white;
  font-weight: bold;
  z-index: 999;
  margin: 1ex;
  line-height: 100%;
  pointer-events: none;
}

/* PAGE LOADER */
#page-loader {
  background-color: white;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9998;
  opacity: 0.9;
}
#page-loader > .loader-head {
  z-index: 9999;
  position: fixed;
  background-color: #ccc;
  border-color: #080808;
  border-width: 0 0 1px;
  width: 100%;
  height: 7em;
  top: 0;
  margin: 0;
}
#page-loader > .loader-cont {
  width: 100%;
  height: 100%;
}
#page-loader > .loader-foot {
  z-index: 9999;
  position: fixed;
  border-color: #080808;
  background-color: #ccc;
  border-width: 1px 0 0;
  width: 100%;
  height: 7em;
  bottom: 0;
  margin: 0;
}
#page-loader .loader-icon-div,
#page-loader .loader-icon-div:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
#page-loader .loader-icon-div {
  top: 50%;
  margin: -5em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(155, 155, 155, 0.2);
  border-right: 1.1em solid rgba(155, 155, 155, 0.2);
  border-bottom: 1.1em solid rgba(155, 155, 155, 0.2);
  border-left: 1.1em solid rgb(155, 155, 155);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
#page-loader .loader-info-div {
  position: relative;
  top: 50%;
  margin: 4em auto;
  text-align: center;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#user-control {
  position: relative;
}
#user-control > .dropdown > .btn,
#user-control > .btn {
  color: black;
  border: none;
  margin: 0.3rem 0.9rem 0.3rem 2.5rem;
  padding: 0.15rem 0.5rem;
  font-size: 1.2rem;
}
#user-control > .dropdown > .btn :hover,
#user-control > .dropdown > .btn :active,
#user-control > .dropdown > .btn + .btn-check:active,
#user-control > .dropdown > .btn + .btn-check:checked,
#user-control > .dropdown > .btn + .active,
#user-control > .dropdown > .btn + .dropdown-toggle.show,
#user-control > .btn :hover,
#user-control > .btn :active,
#user-control > .btn + .btn-check:active,
#user-control > .btn + .btn-check:checked,
#user-control > .btn + .active,
#user-control > .btn + .dropdown-toggle.show {
  color: #fff;
  background-color: #df9d00;
  border-color: #bf8600;
}

.user-block {
  position: absolute;
  bottom: 8px;
  right: 0;
}
.user-block .symbol {
  position: absolute;
  color: black;
  top: 0.6rem;
  left: 1.3rem;
}
.user-block > div.background {
  position: absolute;
  width: 100%;
  height: 100%;
}
.user-block > div.background i:nth-of-type(1) {
  display: inline-block;
  height: 100%;
  width: 1em;
  background-image: url("/media/images/user-button-bg1.png");
  background-size: 100% 100%;
}
.user-block > div.background i:nth-of-type(2) {
  display: inline-block;
  height: 100%;
  width: calc(100% - 2em);
  background-image: url("/media/images/user-button-bg2.png");
  background-size: 100% 100%;
}
.user-block > div.background i:nth-of-type(3) {
  display: inline-block;
  height: 100%;
  width: 1em;
  background-image: url("/media/images/user-button-bg3.png");
  background-size: 100% 100%;
}

/****************************/
/*           BLOCKLY        */
.blocklyToolboxContents .blocklyTreeRow.blocklyTreeRow {
  line-height: unset;
  height: unset;
  color: white;
}
.blocklyToolboxContents .blocklyTreeRow.blocklyTreeRow .blocklyTreeRowContentContainer {
  padding: 8px;
}
.blocklyToolboxContents .blocklyTreeLabel.blocklyTreeLabel {
  font-family: "ABeeZee";
  font-size: 22px;
}
.blocklyToolboxContents .blocklyTreeSeparator {
  border-bottom: solid #e5e5e5 2px;
  height: 0;
  margin: 13px 0;
}
#blockly-toolbox-bot {
  position: absolute;
  bottom: 0;
}
#blockly-toolbox-bot .btn.btn-link {
  font-size: 0.8em;
  font-weight: 400;
  text-decoration: none;
  color: #888;
  padding: 0;
}
#blockly-toolbox-bot .btn.btn-link:hover, #blockly-toolbox-bot .btn.btn-link:active {
  text-decoration: underline;
  color: #222;
}

.blocklyWidgetDiv.rblk-theme .blocklyMenu {
  font: normal 1rem ABeeZee, sans-serif;
  border: none;
  padding: 0.5rem 0.3rem;
}

@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 100;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-ThinItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 200;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 300;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 700;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 800;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: italic;
  font-weight: 900;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 100;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 200;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Exo2";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://static.bob3.org/fonts/Exo2-Black.ttf") format("truetype");
}
@font-face {
  font-family: "BubblegumSans";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://static.bob3.org/fonts/BubblegumSans-Regular.ttf") format("truetype");
}
/* <NEW> */
html {
  font-size: max(min(5px + 2vh, 5px + 2vw), 15px);
  font-size: max(5px + 2 * var(--vm), 15px);
  height: unset;
}

body {
  font-size: unset;
  overflow: unset;
  height: unset;
}

#main-div {
  position: unset;
  height: 100vh;
}

.img-bob {
  background-image: url(/media/world/bob3-avatar.png);
  width: 3.5rem;
  height: 3.5rem;
  background-size: 800%;
  margin: 0.5rem 1rem;
}

#main-div > #main-head > div,
#main-div > #main-foot > div {
  width: 100%;
  margin-left: var(--dx);
  margin-right: var(--dx);
  display: flex;
}

#main-div > #main-head > div,
#main-div > #main-body > div,
#main-div > #main-foot > div {
  width: 100%;
  margin-left: var(--dx);
  margin-right: var(--dx);
}

#main-div > #main-head > div {
  margin-top: var(--dy);
  height: 4.5rem;
}

#main-div > #main-foot > div {
  margin-bottom: var(--dy);
}

#div-navigation {
  position: relative;
  margin-top: 1.5rem;
  flex-shrink: 0;
  font-size: 80%;
  margin-left: -0.72em;
  z-index: 0;
}

#div-instructions {
  text-align: center;
  margin: auto;
  color: #fff;
  text-shadow: 0px 0px 5px #888;
  font-family: Exo2;
  font-weight: 700;
  font-size: 3em;
}

.blocks-block {
  position: relative;
  z-index: 1;
  width: 100%;
  font-size: 80%;
}

/* </NEW> */
#main-body, #main-foot {
  background-color: #fff;
}

#main-foot {
  height: 4px;
}

body.loading #main-body,
body.loading #blocklyDiv {
  visibility: hidden;
}

/* MAIN WELCOME CONTENT */
#main-div div.content {
  margin: auto;
  width: 40em;
  text-align: center;
}
#main-div div.content .row {
  text-align: left;
}
#main-div div.content h1 {
  font-size: 3em;
  font-family: BubblegumSans;
}
#main-div div.content a.card {
  text-decoration: none;
}
#main-div div.content a.link {
  text-decoration: none;
}
#main-div div.content a.link:hover {
  text-decoration: underline;
}

/*# sourceMappingURL=blocks-welcome.css.map */