body {
  overflow: hidden;
  user-select: none;
}

#header,
#blocks {
  position: relative;
  z-index: 99;
}

#header {
  height: 50px;
  background-color: rgb(83, 83, 83);
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

#header>div {
  display: flex;
}

#header>div:first-child {
  align-self: flex-start;
}

#header>div:last-child {
  align-self: flex-end;
  margin-left: 20px;
}

#header>div>#mini_blocks {
  border-radius: 5px;
  display: flex;
  /* display: none; */
  height: 40px;
  background-color: rgb(40, 40, 40);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
  border: 2px rgb(10, 191, 254) solid;
  box-sizing: border-box;
  box-shadow: 0 0 5px black;
}

#header>div>#mini_blocks>div {
  margin-right: 10px;
  display: flex;
}

#header>div>#mini_blocks>div:last-child {
  margin-right: 0;
}

#header>div>span {
  background-image: url('/images/icons/snap.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 17px;
  width: 40px;
  height: 40px;
  background-color: rgb(40, 40, 40);
  border-radius: 5px;
  border: 2px white solid;
  box-sizing: border-box;
  box-shadow: 0 0 5px black;
  cursor: pointer;
}

#header>div>span:hover {
  border: 2px rgb(10, 191, 254) solid;
  box-shadow: 0 0 5px rgb(10 191 254);
}

#header>div>span.robot_settings {
  background-image: url('/images/icons/robot_settings.png');
  background-size: auto 20px;
}

#header>div>span.save_project {
  background-image: url('/images/icons/save.png');
}

#header>div>span.build_robot {
  background-image: url('/images/icons/build_robot.png');
}

#header>div>span.block_highlight {
  background-image: url('/images/icons/target.png');
  background-size: 20px auto;
}

#header>div>span.zoom_in {
  background-image: url('/images/icons/zoom_in.png');
}

#header>div>span.zoom_out {
  background-image: url('/images/icons/zoom_out.png');
}

#header>div>span.change_snap_mode.on {
  border-color: rgb(51, 255, 0);
}

#header>div>span.change_snap_mode.on:hover {
  box-shadow: 0 0 5px #669999;
  border-color: #669999;
}

/* #viewport>div.snap_step_select {
  position: fixed;
  border: 2px rgb(10, 191, 254) solid;
  border-radius: 3px;
  display: flex;
  box-sizing: border-box;
  background-color: rgb(40, 40, 40);
  justify-content: space-around;
  width: 55px;
  z-index: 999999999;
}

#viewport>div.snap_step_select::before {
  content: "";
  display: block;
  width: 100%;
  height: 45px;
  position: absolute;
  top: -45px;
  left: 0;
}

#viewport>div.snap_step_select>span {
  font-family: 'roboto';
  color: white;
  font-size: 12px;
  width: 10px;
  cursor: pointer;
  text-align: center;
  position: relative;
  bottom: 0;
}

#viewport>div.snap_step_select>span.selected {
  background-color: rgb(10, 191, 254);
  color: white;
}

#viewport>div.snap_step_select>span:not(.selected):hover {
  bottom: 1px;
} */
/* #viewport>div.snap_step_select>span:not(.selected):hover::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgb(10, 191, 254);
} */
.block.mini_block.operator,
.block.mini_block.opening_bracket,
.block.mini_block.closing_bracket {
  color: white;
  background-color: rgb(83, 83, 83);
  height: 26px;
  line-height: 24px;
  padding-left: 2px;
  padding-right: 2px;
  font-family: 'roboto-bold';
  font-size: 18px;
  padding-top: 0;
  padding-bottom: 0;
}

.block.mini_block.opening_bracket,
.block.mini_block.closing_bracket {
  font-family: 'roboto';
  font-size: 16px;
}

.block.mini_block.operator.logical_operator {
  background: rgb(146, 191, 36);
  font-size: 12px;
}

.block.mini_block.operator,
.block.mini_block.opening_bracket,
.block.mini_block.closing_bracket {
  line-height: 22px;
}

.block.mini_block.operator.not {
  background: #FF3300;
  font-size: 12px;
}

.block.mini_block.operator.multiply {
  line-height: 29px !important;
}

.block.mini_block.operator.square_root {
  background-image: url('/images/icons/square_root.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 13px;
  width: 16.6px
}

.block.mini_block.operator.division_remainder {
  font-size: 16px;
}

.block.mini_block.value_input {
  width: 26px;
}

.block.mini_block.value_input,
.block.mini_block.variable_select,
.block.mini_block.constant_select {
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 15px;
  background-image: url('/images/icons/value_input.png');
  margin: 0;
}

.block.mini_block.variable_select,
.block.mini_block.constant_select {
  background-image: none;
  font-family: 'roboto-bold';
  color: white;
  padding: 0;
  font-size: 12px;
  line-height: 22px;
}

.block.mini_block.variable_select,
.block.mini_block.constant_select,
.block.mini_block.value_input {
  border: 2px rgb(51, 255, 0) solid;
  background-color: rgb(40, 40, 40);
  padding-left: 3px;
  padding-right: 3px;
}

#viewport .block.mini_block.variable_select,
#viewport .block.mini_block.constant_select,
#viewport .block.mini_block.value_input {
  padding: 0;
}

#viewport .block.mini_block.value_input {
  background-image: none;
  border: none;
}

#viewport .block.mini_block.value_input,
#viewport .block.mini_block.value_input>input {
  min-width: 26px;
  width: auto;
}

#viewport .block.mini_block.value_input input {
  font-family: 'ubuntumono';
  height: 26px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
  width: 24px;
  border: 2px rgb(51, 255, 0) solid;
  text-align: center;
}

#viewport .block.mini_block.value_input>input:focus {
  outline: none;
  box-shadow: none;
  border: 2px rgb(51, 255, 0) solid;
  box-shadow: 0 0 5px rgb(51, 255, 0);
}

.block.mini_block.variable_select:hover,
.block.mini_block.value_input:hover {
  border: 2px rgb(51, 255, 0) solid;
  box-shadow: 0 0 5px rgb(51, 255, 0) !important;
}

.block.mini_block.constant_select:hover {
  border: 2px rgb(10, 191, 254) solid;
  box-shadow: 0 0 5px rgb(10, 191, 254) !important;
}

#viewport .block.mini_block.variable_select,
#viewport .block.mini_block.constant_select,
#viewport .block.mini_block.value_input,
#viewport .block.mini_block.predefined_constant {
  border: none;
}

#scheme .block.predefined_constant>.select,
#scheme div.select.var_const {
  line-height: 22px;
  height: 100%;
}

div.select.var_const>span.option.selected,
#scheme .block.predefined_constant>.select>.option.selected {
  border-color: rgb(51, 255, 0);
}

div.select.var_const.open>span.option.selected,
#scheme .block.predefined_constant>.select.open>.option.selected {
  border-radius: 3px;
}

div.select.var_const.open>div.options_wrapper,
#scheme .block.predefined_constant>.select.open>.options_wrapper {
  border-radius: 3px;
  top: calc(100% + 5px);
  width: auto;
  box-shadow: 0 0 15px black;
  border-color: rgb(51, 255, 0);
}

div.select.var_const.open>div.options_wrapper>span.option,
#scheme .block.predefined_constant>.select.open>.options_wrapper>.option {
  border-top-color: rgb(51, 255, 0);
}

div.select.var_const::before {
  content: "VAR";
  position: absolute;
  left: -3px;
  top: -3px;
  background: #FF3300;
  font-family: 'roboto-bold';
  color: white;
  z-index: 5;
  font-size: 8px;
  height: 10px;
  border-radius: 3px;
  line-height: 10px;
  width: 20px;
  text-align: center;
}

div.select.var_const.constant::before {
  width: 30px;
  content: "CONST";
}

div.select.var_const.const.open::before {
  z-index: 1001;
}

div.select.var_const.open>div.options_wrapper>span.option {
  padding-top: 0;
  padding-bottom: 0;
  height: 23px;
  line-height: 23px;
}

div.select.var_const.constant>span.option.selected,
div.select.var_const.constant.open>div.options_wrapper,
div.select.var_const.constant.open>div.options_wrapper>span.option {
  border-color: rgb(10, 191, 254);
}

/* #viewport .block.mini_block.variable_select>div.make_number,
#viewport .block.mini_block.constant_select>div.make_number {
  top: -3px;
  right: -3px;
  position: absolute;
  background: #FF3300;
  border-radius: 3px;
  box-sizing: border-box;
  height: 10px;
  text-align: center;
  line-height: 10px;
  padding-left: 2px;
  padding-right: 2px;
}

#viewport .block.mini_block.variable_select>div.make_number>label,
#viewport .block.mini_block.constant_select>div.make_number>label {
  position: relative;
  top: -1px;
  font-size: 9px;
  font-family: 'roboto';
}

#viewport .block.mini_block.variable_select>div.make_number>label>input[type="checkbox"],
#viewport .block.mini_block.constant_select>div.make_number>label>input[type="checkbox"] {
  position: relative;
  top: 1px;
  margin-right: 2px;
  height: 8px;
  width: 8px;
} */
.block.mini_block.operator,
.block.mini_block.opening_bracket,
.block.mini_block.closing_bracket {
  box-sizing: border-box;
  border: 2px transparent solid;
}

.block.mini_block.operator:hover,
.block.mini_block.position_direction:hover,
.block.mini_block.opening_bracket:hover,
.block.mini_block.closing_bracket:hover {
  border: 2px rgb(10, 191, 254) solid;
  box-shadow: 0 0 5px rgb(10 191 254);
}

.block.mini_block.operator.logical_operator:hover {
  border: 2px white solid;
  box-shadow: 0 0 5px white;
}

.block.mini_block.operator.not:hover {
  border: 2px white solid;
  box-shadow: 0 0 5px white;
}

#viewport .block.mini_block.variable_select:hover,
#viewport .block.mini_block.constant_select:hover,
#viewport .block.mini_block.value_input:hover {
  box-shadow: none;
  border: none;
}

#viewport .block.mini_block.variable_select>div.select,
#viewport .block.mini_block.constant_select>div.select {
  height: 26px;
  line-height: 22px;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: auto;
}

div.select.no_variables>span.message,
div.select.no_constants>span.message {
  white-space: nowrap;
  /* border: 2px rgb(51, 255, 0) dashed; */
  background-color: rgb(40, 40, 40);
  border: 2px rgb(51, 255, 0) solid;
  box-sizing: border-box;
  display: block;
  position: relative;
  height: 100%;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
  color: white;
  font-family: 'roboto';
  font-size: 12px;
}

div.select.no_constants>span.message {
  border-color: rgb(10, 191, 254);
}

.block.top_level.teleport {
  background: none;
  border: 2px rgb(10, 191, 254) solid;
  border-radius: 3px;
  font-family: 'roboto-bold';
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
  height: 26px;
  padding: 0;
  padding-left: 3px;
  padding-right: 3px;
  width: auto;
}

#mini_blocks .block.top_level.teleport:hover {
  box-shadow: 0 0 5px rgb(10, 191, 254);
}

.block.format_type {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  color: white;
  font-family: 'roboto-bold';
  font-size: 14px;
  box-sizing: border-box;
  text-align: center;
  line-height: 22px;
  cursor: grab;
  padding: 0;
  background-color: rgb(40, 40, 40);
}

.block.format_type.string,
.block.format_type.datetime {
  border: 2px #FF3300 solid;
}

#mini_blocks .block.format_type.string:hover,
#mini_blocks .block.format_type.datetime:hover {
  box-shadow: 0 0 5px #FF3300;
}

.block.format_type.double,
.block.format_type.integer {
  border: 2px rgb(51, 255, 0) solid;
}

#mini_blocks .block.format_type.double:hover,
#mini_blocks .block.format_type.integer:hover {
  box-shadow: 0 0 5px rgb(51, 255, 0);
}

.block.maxval {
  border: 2px rgb(10, 191, 254) solid;
  font-family: 'roboto-bold';
  color: white;
  font-size: 12px;
  background-color: rgb(40, 40, 40);
  height: 26px;
  line-height: 22px;
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.block.maxval:hover {
  box-shadow: 0 0 5px rgb(10, 191, 254);
}

.block.new_line {
  border: 2px rgb(10, 191, 254) solid;
  background-image: url(/images/icons/new_line.png);
  background-position: center;
  background-size: 12px auto;
  background-repeat: no-repeat;
  background-color: rgb(40, 40, 40);
  width: 26px;
  height: 26px;
}

.block.new_line:hover {
  box-shadow: 0 0 5px rgb(10, 191, 254);
}

/* #viewport .block.mini_block.min {
  display: flex;
  background: none;
  box-shadow: none;
}

#viewport .block.mini_block.min>span.title {
    background-color: rgb(83, 83, 83);
    box-shadow: 0 0 5px black;
    border-radius: 3px;
    border: 2px #99FF33 solid;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 2px;
}

#viewport .block.mini_block.min>div.arguments{
  min-width: 50px;
}

#viewport .block.mini_block.min>div.arguments>div.droppable{
  background-color: rgba(40, 40, 40, 1);
  border: 2px white solid;
  margin-top: 0;
} */
#header>div.blocks_containers {
  display: flex;
}

#header>div>* {
  margin-right: 10px;
}

#header>div>*:last-child {
  margin-right: 0;
}

#header>div>#mini_blocks:last-child {
  margin-right: 0;
}

#header>div>#mini_blocks>div>span {
  margin-right: 5px;
}

#header>div>#mini_blocks>div>span:last-child {
  margin-right: 0;
}

/* #header>div.blocks_containers>span.group_blocks{

background-image: url('/images/icons/group_blocks.png');
  height: 26px;
  width: 26px;
  background-repeat: no-repeat;
  background-position: center;
} */
#header>div:last-child>* {
  margin-right: 5px;
}

#header>div:last-child>*:last-child {
  margin-right: 0;
}

#header>div:last-child>a,
#header>div:last-child>button {
  color: white;
  text-decoration: none;
  font-family: 'montserrat-semibold';
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px rgb(51, 255, 0) solid;
  border-radius: 5px;
  background-color: rgb(40, 40, 39);
  white-space: nowrap;
  height: 40px;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 0 5px rgb(20, 20, 20);
}

#header>div:last-child>a {
  line-height: 36px;
}

#header>div:last-child>a:hover,
#header>div:last-child>button:hover {
  box-shadow: 0 0 5px rgb(51, 255, 0);
}

/* #header>div:last-child>div.account_dropdown {
  position: relative;
}

div.account_dropdown>div.links {
  opacity: 0;
  pointer-events: none;
  transition: 0.15s ease;
  position: absolute;
  top: 100%;
  right: 0;
}

#header>div:last-child>div.account_dropdown>div.links>a {
  font-family: 'roboto-bold';
  color: white;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}

#header>div:last-child>div.account_dropdown>div.links>a:hover{
  text-decoration: underline;
}

#header>div:last-child>div.account_dropdown:hover>div.links {
  opacity: 1;
  pointer-events: all;
  padding-top: 5px;
} */
/* #header>div:last-child>a.guide>img {
  width: 20px;
  margin-right: 4px;
  width: 15px;
  margin-right: 5px;
  position: relative;
  top: 1px;
} */
#header>div:last-child>a.account {
  position: relative;
  width: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 17px;
  background-image: url('/images/icons/user.png');
}

#header>div:last-child>a.account:hover {
  box-shadow: 0 0 5px rgb(51, 255, 0);
}

#header>div:last-child>a.account>img {
  height: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#editor {
  display: flex;
  width: 100vw;
  height: 100vh;
}

#blocks {
  min-width: 200px;
  background-color: rgb(83, 83, 83);
  box-sizing: border-box;
}

#blocks>div {
  height: calc(100% - 50px);
}

#editor>div:nth-of-type(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#blocks>a.logo {
  width: 100%;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  background-color: rgb(40, 40, 40);
  color: white;
  margin: 0;
  font-family: 'montserrat-extrabold';
  font-size: 20px;
  padding-left: 10px;
  text-decoration: none;
  display: block;
  position: relative;
}

#blocks>a.logo>img {
  display: inline-block;
  height: 25px;
  margin-right: 10px;
  position: relative;
  top: 4px;
}

.block {
  box-sizing: border-box;
  padding: 7px;
  cursor: grab;
  border-radius: 5px;
  background-color: rgb(83, 83, 83);
  box-shadow: 0 0 5px rgb(20 20 20);
  position: relative;
  transform-origin: left top;
}

/* #scheme>.block.top_level{
  background-color: rgba(10, 191, 254, 0.2);
} */
/* .block.contextmenu{
  box-shadow: 0 0 10px white !important;
} */
.block.mini_block:not(#blocks .block) {
  border-radius: 3px;
}

#blocks .block {
  margin-bottom: 10px;
}

.block:hover {
  z-index: 1000;
}

.block.indicator {
  /* border: 2px #FF3300 solid; */
  border: 2px #99CCFF solid;
}

.block.indicator:hover {
  /* box-shadow: 0 0 5px #FF3300; */
  box-shadow: 0 0 5px #99CCFF;
}

.block.trade_event {
  border: 2px #33FF00 solid;
}

.block.trade_event:hover {
  box-shadow: 0 0 5px #33FF00;
}

.block.telegram {
  border: 2px #24abec solid;
}

.block.telegram:hover {
  box-shadow: 0 0 5px #24abec;
}

.block.other {
  border: 2px #CCFF99 solid;
}

.block.other:hover {
  box-shadow: 0 0 5px #CCFF99;
}

.block.condition {
  border: 2px #66FFFF solid;
}

.block.condition:hover {
  box-shadow: 0 0 5px #66FFFF;
}

.block.transaction {
  border: 2px #33FF00 solid;
}

.block.transaction:hover {
  box-shadow: 0 0 5px #33FF00;
}

.block.info {
  border: 2px rgb(10, 191, 254) solid;
}

.block.info:hover {
  box-shadow: 0 0 5px rgb(10, 191, 254);
}

.block.variable {
  border: 2px #FFCCFF solid;
}

.block.variable:hover {
  box-shadow: 0 0 5px #FFCCFF;
}

.block.interface {
  border: 2px rgb(10, 191, 254) solid;
}

.block.interface:hover {
  box-shadow: 0 0 5px rgb(10, 191, 254);
}

/* .block.math {
  border: 2px #99FF33 solid;
}

.block.math:hover {
  box-shadow: 0 0 5px #99FF33;
} */
.block.debug {
  border: 2px #CCCCFF solid;
}

.block.debug:hover {
  box-shadow: 0 0 5px #CCCCFF;
}

.block.sound {
  border: 2px #99CCFF solid;
}

.block.sound:hover {
  box-shadow: 0 0 5px #99CCFF;
}

.block.chart_analysis {
  border: 2px #33FF00 solid;
}

.block.chart_analysis:hover {
  box-shadow: 0 0 5px #33FF00;
}

.block.dom_analysis {
  border: 2px #00CCFF solid;
}

.block.dom_analysis:hover {
  box-shadow: 0 0 5px #00CCFF;
}

.block.enumeration {
  border: 2px #33FF00 solid;
}

.block.enumeration:hover {
  box-shadow: 0 0 5px #33FF00;
}

.block.predefined_constant {
  border: 2px #33FF00 solid;
}

.block.predefined_constant:hover {
  box-shadow: 0 0 5px #33FF00;
}

#scheme .block.predefined_constant {
  padding: 0 !important;
  background-color: rgb(40, 40, 40);
}

#scheme .block.predefined_constant>.select {
  margin: 0;
}

.block.loop {
  border: 2px #33FF00 solid;
}

.block.loop:hover {
  box-shadow: 0 0 5px #33FF00;
}

#scheme .block.predefined_constant>span.title {
  position: absolute;
  top: -3px;
  left: -3px;
  font-family: 'roboto';
  color: white;
  font-size: 8px;
  border-radius: 2px;
  padding-left: 3px;
  padding-right: 3px;
  height: 10px;
  line-height: 10px;
  background-color: rgb(146, 191, 36);
  z-index: 1001;
  box-shadow: 0 0 5px black;
  pointer-events: none;
}

#blocks .block:last-child {
  margin-bottom: 0;
}

.block.top_level>span.title {
  color: white;
  font-family: 'roboto-bold';
  white-space: nowrap;
}

.block>p.short_description {
  font-size: 12px;
  margin: 0;
  margin-top: 5px;
  color: white;
  font-family: 'roboto';
}

.block>div>p.title {
  margin: 0;
  color: white;
  font-size: 14px;
  font-family: 'roboto-bold';
  /* word-break: break-all; */
}

/*
.block:not(#scheme>.block)>div>div>span.info {
  background-image: url("/images/icons/info.png");
  background-size: cover;
  background-position: center;
  width: 14px;
  height: 14px;
  display: none;
} */
.block>div.title_wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.block span.pro {
  width: 32px;
  height: 18px;
  color: white;
  font-family: 'montserrat-bold';
  border-radius: 3px;
  background-color: black;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  margin-left: 5px;
  padding-left: 5px;
  padding-right: 5px;
  flex: 0;
}

div.blocks_category {
  margin-top: 15px;
  /* border-top: 2px rgb(10, 191, 254) solid; */
  /* border-top: 2px rgb(40, 40, 40) solid; */
  border-top: 1px white solid;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

/* div.blocks_category:first-of-type {
  border-top: 0;
} */
div.blocks_category:last-child {
  margin-bottom: 15px;
}

div.blocks_category>h2.title {
  font-family: 'roboto-bold';
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 10px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 0;
  text-shadow: 0 5px 5px rgb(60 60 60);
}

div.blocks_category>h2.title>span.img_wrapper {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 3px;
  margin-right: 7px;
  box-shadow: 0 5px 5px rgb(60 60 60);
  position: relative;
}

div.blocks_category.event>h2.title>span.img_wrapper,
div.blocks_category.condition>h2.title>span.img_wrapper,
div.blocks_category.loop>h2.title>span.img_wrapper,
div.blocks_category.transaction>h2.title>span.img_wrapper,
div.blocks_category.variable>h2.title>span.img_wrapper,
div.blocks_category.sound>h2.title>span.img_wrapper,
div.blocks_category.other>h2.title>span.img_wrapper,
div.blocks_category.interface>h2.title>span.img_wrapper,
div.blocks_category.predefined_constant>h2.title>span.img_wrapper,
div.blocks_category.debug>h2.title>span.img_wrapper {
  background-color: rgb(51, 255, 0);
}

div.blocks_category.indicator>h2.title>span.img_wrapper,
div.blocks_category.chart_analysis>h2.title>span.img_wrapper,
div.blocks_category.dom_analysis>h2.title>span.img_wrapper,
div.blocks_category.info>h2.title>span.img_wrapper,
div.blocks_category.enumeration>h2.title>span.img_wrapper,
div.blocks_category.telegram>h2.title>span.img_wrapper {
  background-color: rgb(10, 191, 254);
}

div.blocks_category.indicator>h2.title>span.img_wrapper>.img,
div.blocks_category.chart_analysis>h2.title>span.img_wrapper>.img,
div.blocks_category.dom_analysis>h2.title>span.img_wrapper>.img,
div.blocks_category.info>h2.title>span.img_wrapper>.img,
div.blocks_category.enumeration>h2.title>span.img_wrapper>.img,
div.blocks_category.telegram>h2.title>span.img_wrapper>.img {
  filter: drop-shadow(0px 2px 1px rgb(83, 83, 83));
}

div.blocks_category>h2.title>span.img_wrapper>span.img {
  display: inline-block;
  /* width: 15px; */
  /* height: 15px; */
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* margin-top: -7.5px; */
  /* margin-left: -7.5px; */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
}

div.blocks_category>h2.title>span.fold {
  display: inline-block;
  width: 9px;
  height: 9px;
  background-size: 9px auto;
  background-position: center;
  background-image: url(/images/icons/triangle_arrow.png);
  background-repeat: no-repeat;
  margin-left: 5px;
  transform: rotate(180deg);
  /* transition: 0.15s ease; */
}

div.blocks_category.hidden>*:not(h2.title) {
  display: none;
}

div.blocks_category.hidden>h2.title {
  margin-bottom: 0;
}

div.blocks_category>h3 {
  font-size: 14px;
  margin: 0;
  margin-bottom: 10px;
  color: white;
  font-family: 'montserrat-bold';
  /* text-shadow: 0 0 5px rgb(40 40 40); */
  border-left: 4px rgb(51, 255, 0) solid;
  padding-left: 5px;
  box-sizing: border-box;
}

div.blocks_category:first-child {
  border-top: none;
  margin-top: 0;
}

#viewport {
  background-color: rgb(40, 40, 40);
  flex: 1;
  position: relative;
  overflow: hidden;
}

#scheme {
  position: absolute;
  z-index: 2;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
}

#viewport .block.top_level {
  position: absolute;
  box-shadow: black 0px 0px 10px;
  z-index: 1;
}

#viewport .block>.controls {
  position: absolute;
  top: 0px;
  right: 10px;
  background-color: rgba(40, 40, 40, 0.5);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 10;
  padding-left: 4px;
  padding-right: 4px;
  cursor: pointer;
}

#viewport .block>.controls>span {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 10px;
  height: 10px;
}

#viewport .block>.controls>span:last-child {
  margin-right: 0;
}

#viewport .block>.controls span:hover {
  opacity: 0.5;
}

#viewport .block>.controls span:active {
  opacity: 0.25;
}

#viewport .block>.controls span.remove {
  background-image: url('/images/icons/remove.png');
}

#viewport .block>.controls span.settings {
  background-image: url(/images/icons/block_settings.png);
}

#viewport .block>.controls span.minimize {
  background-image: url('/images/icons/minimize.png');
}

#viewport .block>.controls span.maximize {
  background-image: url('/images/icons/maximize.png');
}

#viewport .block:not(.top_level)>.controls,
#viewport .block.top_level.teleport>.controls {
  width: 100%;
  min-width: 24px;
  height: 100%;
  box-sizing: border-box;
  background: none;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#viewport .block:not(.top_level)>.controls,
#viewport .block.top_level.teleport>.controls {
  display: flex;
  width: 100px;
  justify-content: center;
  padding: 0;
  height: auto !important;
}

#viewport .block:not(.top_level)>.controls>span,
#viewport .block.top_level.teleport>.controls>span {
  margin: 0;
  border-radius: 20px;
  border: 2px rgb(146, 191, 36) solid;
  background-color: rgba(40, 40, 40, 0.8);
  box-shadow: 0 0 5px black;
  width: 20px;
  height: 20px;
  background-size: auto 10px;
  margin-right: 4px;
}

#viewport .block:not(.top_level)>.controls>span:last-child {
  margin-right: 0;
}

#viewport .block:not(.top_level)>.controls>span:hover,
#viewport .block.top_level.teleport>.controls>span:hover {
  transform: none;
  background-size: auto 11px;
}

#viewport span.connector {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border-color: inherit;
  border-style: solid;
  border-width: 2px;
  position: absolute;
  background-color: rgb(40, 40, 40);
  box-sizing: border-box;
  cursor: pointer;
  z-index: 3;
}

#viewport span.connector.out {
  right: -5px;
  top: calc(50% - 5px);
}

#viewport span.connector.in {
  left: -5px;
  top: calc(50% - 5px);
}

#viewport span.connector:hover {
  transform: scale(1.1);
}

#viewport .block.top_level {
  padding: 3px;
}

#viewport .block.top_level.minimized div.container {
  width: 100px;
  overflow: hidden;
  pointer-events: none;
}

#viewport .block.top_level.minimized div.container:not(:first-child) {
  display: none;
}

#viewport .block.top_level:not(.interface_element_block.settings_opened, .interface_element_text, .teleport).selected {
  border-style: dashed !important;
}

#viewport .interface_element_text:not(.settings_opened).selected>span.text {
  outline: 2px white dashed;
}

#viewport .block.top_level:not(.interface_element.settings_opened):not(.interface_element_text).selected::before,
#viewport .interface_element_text:not(.settings_opened).selected>span.text::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(10, 191, 254, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#viewport .interface_element_text:hover>span.text {
  outline: 2px white solid;
}

#viewport .block.top_level>span.title {
  padding: 3px;
}

#viewport .block.top_level>span.title {
  margin-right: 50px;
  font-size: 12px;
  display: inline-block;
  white-space: nowrap;
}

#viewport .block.condition>span.connector>span {
  display: inline-block;
  font-family: 'roboto-bold';
  color: white;
  position: absolute;
  font-size: 10px;
  left: 10px;
  text-align: center;
  width: 25px;
  padding: 2px;
  top: -6px;
  border-radius: 25px;
  border: 2px rgb(146, 191, 36) solid;
  height: 20px;
  line-height: 12px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.4);
}

#viewport .block.condition:hover>span.connector>span {
  display: inline-block;
}

#viewport .block.condition>span.connector.out.first {
  top: 5px;
}

#viewport .block.condition>span.connector.out.second {
  top: auto;
  bottom: 5px;
}

#viewport .droppable {
  min-height: 26px;
  border-radius: 3px;
  background-color: rgba(40, 40, 40, 0.5);
  margin-top: 2px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#viewport .droppable div.container>div.indicator {
  border: 2px #FF3300 solid;
  color: white;
  font-family: 'roboto-bold';
  border-radius: 3px;
  font-size: 14px;
  padding: 2px;
}

#viewport .droppable div.container:first-child {
  margin-top: 0;
}

#viewport .droppable div.containers_wrapper:first-child {
  margin-top: 0;
}

#viewport .droppable div.containers_wrapper {
  flex-direction: column;
}

#viewport .droppable div.container,
#viewport .droppable div.containers_wrapper {
  padding: 5px;
  box-sizing: border-box;
  border: 2px white solid;
  border-radius: 3px;
  min-height: 25px;
  margin-top: 5px;
  display: flex;
  position: relative;
}

#viewport .droppable div.container.selected,
#viewport .droppable div.containers_wrapper.selected {
  border-style: dashed;
}

#viewport div.container_shift_controls {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  right: -25px;
  padding-left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

#viewport div.containers_wrapper>div.container_shift_controls {
  right: -35px;
  padding-left: 20px;
}

div.container_shift_controls>span {
  width: 15px;
  height: 15px;
  background-size: 7px auto;
  background-repeat: no-repeat;
  border: 2px rgb(146, 191, 36) solid;
  background-color: rgb(40, 40, 40);
  background-position: center;
  border-radius: 50px;
  cursor: pointer;
  background-image: url('/images/icons/triangle_arrow.png');
  transform: rotate(180deg);
}

#viewport div.containers_wrapper>div.container_shift_controls>span {
  border: 3px white solid;
  width: 18px;
  height: 18px;
}

#viewport div.container_shift_controls>span.move_down {
  transform: none;
  margin-top: 3px;
}

#viewport .droppable .block.mini_block.operator.logical_operator {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 8px;
  height: 15px;
  line-height: 13px;
  font-family: 'roboto';
  align-self: center;
}

#viewport .droppable .block.mini_block.operator.logical_operator+div.container,
#viewport .droppable .block.mini_block.operator.logical_operator+div.containers_wrapper {
  margin-top: 0;
}

/* #viewport .block.condition>div.condition_body div.container>.block { */
#viewport .block.mini_block {
  margin-left: 5px;
  height: 26px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 3px;
  padding-left: 3px;
  line-height: 22px;
}

#viewport .block.mini_block:hover {
  z-index: 1000;
}

#viewport .block.format_type {
  position: absolute;
  width: 17px;
  height: 17px;
  line-height: 13px;
  font-size: 12px;
  top: -7.5px;
  right: -7.5px;
  cursor: pointer;
}

#viewport .block.format_type:not(.ghost):hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(40, 40, 40);
  background-image: url('/images/icons/delete_white.png');
  background-size: auto 9px;
  background-position: center;
  background-repeat: no-repeat;
}

#viewport .block.mini_block.has_format_type {
  z-index: 2;
}

.block.mini_block.plus {
  font-size: 16px;
}

#viewport .droppable div.container>.block:first-child {
  margin-left: 0;
}

#viewport .block.mini_block.info {
  font-size: 12px;
}

/* .block.mini_block.buy_direction,
.block.mini_block.no_direction,
.block.mini_block.sell_direction {
  background-image: url('/images/icons/buy_direction.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 16px;
  color: black;
  margin: 0;
  width: 26px;
  height: 26px;
}

.block.mini_block.sell_direction {
  background-image: url('/images/icons/sell_direction.png');
}

.block.mini_block.no_direction {
  background-image: url('/images/icons/sell_direction.png');
} */
#viewport>svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

#viewport>canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#viewport span.path_num {
  position: absolute;
  display: inline-block;
  color: white;
  font-family: 'roboto-bold';
  background: rgb(83, 83, 83);
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  border: 3px rgb(51, 255, 0) solid;
  font-size: 15px;
  z-index: -1;
}

#viewport>svg>path {
  cursor: pointer;
}

#viewport>svg>path:not(.is_being_drawn):hover {
  /* stroke-width: 4px; */
  stroke: rgb(255, 51, 0);
}

#viewport>div.selection_zone {
  z-index: 2;
  box-sizing: border-box;
  outline: 2px rgb(10, 191, 254) solid;
  position: absolute;
  background: rgba(10, 191, 254, 0.2);
}

#viewport .block.top_level.top_level_blocks_group {
  display: flex;
  flex-direction: column;
  border: 2px #66FFFF solid;
  padding: 3px;
  border-radius: 5px;
  display: inline-block;
  z-index: 2;
  position: absolute;
  background-color: rgb(40, 40, 40);
}

#viewport div.top_level_blocks_group>div.block.top_level {
  border-radius: 3px;
  position: relative !important;
  margin-top: 5px !important;
  margin-bottom: 0 !important;
}

#viewport div.top_level_blocks_group>div.block.top_level:first-of-type {
  margin-top: 0 !important;
}

#viewport div.top_level_blocks_group>div.block.top_level {
  box-shadow: none;
}

#viewport div.top_level_blocks_group>div.block.top_level span.connector {
  display: none;
}

#settings_window.interface_element {
  width: 180px;
}

#settings_window.interface_element_modify>div.modifications_wrapper>div.modification:not(.selected) {
  display: none;
}

#settings_window.interface_element_modify>div.modifications_wrapper>div.modification {
  margin: 0;
}

#settings_window.interface_element_modify>div.modifications_wrapper>div.modification>label.with_checkbox {
  margin-top: 5px;
}

#settings_window {
  box-shadow: 0 0 10px black;
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-radius: 5px;
  border: 2px rgb(51, 255, 0) solid;
  padding: 5px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  /* width: 225px; */
  max-height: 100vh;
  box-sizing: border-box;
}

#settings_window p.comment {
  font-family: 'roboto';
  margin: 0;
  font-size: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: white;
}

#settings_window>p.comment+p.comment {
  margin-top: 0;
}

#settings_window>p.comment.bold {
  font-family: 'roboto-bold';
}

#settings_window>span.triangle {
  display: inline-block;
  position: absolute;
  top: -10px;
  left: calc(50% - 8px);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgb(51, 255, 0);
}

#settings_window.interface_element>span.triangle {
  transform: rotate(-90deg);
  top: calc(50% - 4px);
  left: -14px;
}

#settings_window>div,
#settings_window div.widget>div,
#settings_window div.inline_fields>div {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}

/* #settings_window>div+.widget{
  margin-top: 5px;
} */
#settings_window>*:last-child,
#settings_window div.widget>*:last-child {
  margin-bottom: 0 !important;
}

#settings_window div.inline_fields {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0;
}

#settings_window div.inline_fields>div {
  display: inline-block;
  width: calc(50% - 2.5px);
}

#settings_window>div:last-child {
  margin-bottom: 0;
}

#settings_window label {
  font-family: 'roboto';
  font-size: 12px;
  color: white;
}

#settings_window p.comment,
#settings_window label {
  max-width: 225px;
}

#settings_window>label:first-child {
  margin-right: 10px;
}

#settings_window div.checkboxes+button.submit {
  margin-top: 10px;
}

#settings_window div.widget {
  padding: 5px;
  border-radius: 5px;
  border: 2px rgb(51, 255, 0) solid;
  box-shadow: 0 0 5px black;
  /* margin-top: 5px; */
  margin-bottom: 5px;
}

#settings_window div.select.open {
  box-shadow: none;
}

#settings_window div.color_select {
  padding: 3px;
  border-radius: 3px;
  display: flex;
  border: 2px white solid;
  justify-content: space-around;
  margin-top: 5px;
}

#settings_window div.color_select>span.color {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  display: inline-block;
  border: 2px white solid;
  box-sizing: border-box;
  cursor: pointer;
  transition: 0.15s;
}

#settings_window div.color_select>span.color.black {
  background-color: rgb(0, 0, 0);
}

#settings_window div.color_select>span.color.white {
  background-color: rgb(255, 255, 255);
}

#settings_window div.color_select>span.color.gray {
  background-color: rgb(20, 20, 20);
}

#settings_window div.color_select>span.color.light_gray {
  background-color: rgb(83, 83, 83);
}

#settings_window div.color_select>span.color.blue {
  background-color: rgb(10, 191, 254);
}

#settings_window div.color_select>span.color.yellow {
  background-color: rgb(51, 255, 0);
}

#settings_window div.color_select>span.color.red {
  background-color: rgb(255, 51, 0);
}

#settings_window div.color_select>span.color.selected {
  border-radius: 10px;
}

#settings_window.interface_element div.checkboxes>label:not(:last-child),
#settings_window.interface_element div.radios>label:not(:last-child) {
  margin-bottom: 5px !important;
}

#settings_window.chart_keydown>.widget.know_keycode {
  /* border-color: rgb(10 191 254); */
  margin-top: 5px;
}

#settings_window.chart_keydown>.widget.know_keycode>label {
  font-family: 'montserrat-bold';
  font-size: 12px;
}

#settings_window.chart_keydown>.widget.know_keycode>p.comment {
  margin-top: 5px;
}

#settings_window.chart_keydown>.widget.know_keycode>div {
  display: flex;
  flex-direction: row;
}

#settings_window.chart_keydown>.widget.know_keycode>div>input {
  height: 25px;
  width: 25px;
  font-family: 'montserrat-bold';
  line-height: 13px;
  margin-right: 5px;
  flex: 0;
  text-align: center;
}

#settings_window.chart_keydown>.widget.know_keycode>div>span.result {
  display: block;
  border-radius: 3px;
  margin-top: 5px;
  padding: 5px;
  border: 2px rgb(146, 191, 36) solid;
  color: white;
  font-family: 'montserrat-semibold';
  font-size: 12px;
  height: 25px;
  box-sizing: border-box;
  line-height: 13px;
  flex: 1;
  user-select: text;
  cursor: text;
}

div.input_wrapper.var_const_name>input {
  border: 2px rgb(51, 255, 0) solid !important;
}

div.input_wrapper.var_const_name>input:focus {
  box-shadow: 0 0 5px rgb(51, 255, 0) !important;
}

div.input_wrapper.var_const_name.constant>input {
  border: 2px rgb(10, 191, 254) solid !important;
}

div.input_wrapper.var_const_name.constant>input:focus {
  box-shadow: 0 0 5px rgb(10, 191, 254) !important;
}

div.input_wrapper.var_const_name::before {
  content: "VAR";
  position: absolute;
  left: -1px;
  top: -4px;
  background: #FF3300;
  font-family: 'roboto-bold';
  color: white;
  z-index: 5;
  font-size: 8px;
  height: 10px;
  border-radius: 3px;
  line-height: 10px;
  width: 20px;
  text-align: center;
}

div.input_wrapper.var_const_name.constant::before {
  width: 30px;
  content: "CONST";
}

div.input_wrapper.input_value_type_change>input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  width: calc(100% - 15px) !important;
}

div.input_wrapper.input_value_type_change>div.input_value_type_switch {
  width: 15px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  height: 25px;
  box-sizing: border-box;
  border-top: 2px white solid;
  border-right: 2px white solid;
  border-bottom: 2px white solid;
  text-align: center;
  line-height: 21px;
  font-family: 'roboto-bold';
  color: white;
  font-size: 12px;
  cursor: pointer;
  /* background-color: #FF99FF; */
  background-color: rgb(10, 191, 254);
  z-index: 1;
}

div.input_wrapper.input_value_type_change>div.input_value_type_switch.variable {
  border-color: rgb(51, 255, 0);
}

div.input_wrapper.input_value_type_change>div.input_value_type_switch.constant {
  border-color: rgb(10, 191, 254);
}

div.input_wrapper.input_value_type_change>div.select {
  margin-top: 0;
  width: calc(100% - 15px);
}

div.input_wrapper.input_value_type_change>div.select>span.option.selected,
div.input_wrapper.input_value_type_change>div.select>span.message {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* div.input_wrapper.linked_block>input{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

div.input_wrapper.linked_block>span.highlight_linked_block {
  width: 20px;
  display: inline-block;
  background-color: rgb(10, 191, 254);
  height: 25px;
  box-sizing: border-box;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 2px white solid;
  border-left: none;
  cursor: pointer;
  background-image: url('/images/icons/block_highlight.png');
  background-size: auto 15px;
  background-position: center;
  background-repeat: no-repeat;
} */
#settings_window>span.close {
  width: 25px;
  height: 25px;
  background-size: auto 10px;
}

#viewport .container_shift_controls span:active {
  opacity: 0.5 !important;
}

#viewport .block.variable,
#viewport .block.condition {
  padding: 5px;
}

#viewport .block.variable>span.title {
  margin-right: 0;
}

#viewport .block.set_simple_variable_value>div.wrapper {
  display: flex;
}

#viewport .block.set_simple_variable_value>div.wrapper>div {
  display: flex;
  flex-direction: column;
}

#viewport .block.set_simple_variable_value>div.wrapper {
  margin-top: 5px;
}

#viewport .block.set_simple_variable_value>div.wrapper * {
  margin-top: 0 !important;
}

#viewport .block.set_simple_variable_value>div.wrapper>span.assign {
  font-family: 'roboto-bold';
  font-size: 18px;
  color: white;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 24px;
}

#viewport .block.set_simple_variable_value>div.wrapper>div>input {
  width: 75px;
}

#viewport .block.set_complex_variable_value>div.wrapper {
  display: flex;
  flex-direction: column;
}

#viewport .block.set_complex_variable_value>div.wrapper>label:first-child {
  margin-top: 0;
}

#viewport .block.set_complex_variable_value>div.wrapper>label {
  font-family: 'roboto';
  color: white;
  margin-top: 7px;
  font-size: 12px;
  margin-bottom: 2px;
}

#viewport .block.set_complex_variable_value>span.title {
  padding-left: 0;
}

label.with_checkbox,
label.with_radiobutton {
  cursor: pointer;
}

label.with_checkbox>input[type='checkbox'],
label.with_radiobutton>input[type='radio'] {
  vertical-align: middle;
}

#robot_managers_window {
  position: fixed;
  max-height: 650px;
  background: white;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #27282b;
  display: flex;
  box-shadow: 0 0 20px black;
  width: 90vw;
  min-width: 300px;
  max-width: 600px;
  border: 2px rgba(10, 191, 254, 0.1) solid;
}

#robot_managers_window>div.manager_select {
  display: flex;
  flex-direction: column;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 7px;
  background-color: #1d1e21;
}

#robot_managers_window>div.manager_select>span {
  font-family: 'roboto';
  color: white;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 10px;
  white-space: nowrap;
  background-color: rgba(10, 191, 254, 0.2);
  border-radius: 3px;
  height: 25px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
  box-shadow: 0 0 10px rgb(20 20 20);
}

#robot_managers_window>div.manager_select>span:last-child {
  margin-bottom: 0;
}

#robot_managers_window>div.manager_select>span.selected {
  font-family: 'roboto-bold';
  background-color: rgba(10, 191, 254, 0.3);
}

#robot_managers_window>div.manager_select>span:hover {
  opacity: 0.5;
}

#robot_managers_window>span.close {
  width: 40px;
  height: 40px;
  background-size: auto 15px;
}

#robot_managers_window>div.managers {
  width: 100%;
}

#robot_managers_window>div.managers div.manager:not(.shown) {
  display: none;
}

#robot_managers_window>div.managers div.manager {
  padding: 10px;
}

#robot_managers_window>div.managers div.manager>h1 {
  color: white;
  margin: 0;
  font-family: 'montserrat-bold';
  font-size: 26px;
  margin-bottom: 10px;
}

#robot_managers_window>div.managers div.manager>button.submit {
  margin-top: 15px;
  border-radius: 5px;
}

#robot_managers_window>div.managers div.manager>div.manager_category {
  margin-top: 10px;
  padding: 7px;
  border: 2px rgb(51, 255, 0) solid;
  border-radius: 5px;
  box-shadow: 0 0 10px black;
  position: relative;
}

#robot_managers_window>div.managers div.manager>div.manager_category::before{
  content: "PRO";
  position: absolute;
  border-radius: 3px;
  font-family: 'montserrat-bold';
  color: black;
  background-color: rgb(51, 255, 0);
  font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;
  top: -5px;
  right: -5px;
  line-height: 18px;
}

#robot_managers_window>div.managers div.manager>div.manager_category.not_enabled>*:not(label.manager_category_title) {
  display: none;
}

#robot_managers_window>div.managers div.manager>div.manager_category>div {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

/* #robot_managers_window>div.managers div.manager>div.manager_category>div label { */
#robot_managers_window>div.managers div.manager label{
  font-family: 'roboto';
  color: white;
  margin-right: 10px;
  font-size: 14px;
}

#robot_managers_window>div.managers div.manager p.comment {
  color: white;
  font-family: 'roboto';
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 5px;
}

#robot_managers_window>div.managers div.manager p.comment>b {
  font-weight: normal;
  font-family: 'roboto-bold';
}

#robot_managers_window>div.managers div.manager>div.manager_category>p.comment:last-child {
  margin-bottom: 0;
}

#robot_managers_window>div.managers div.manager h2,
#robot_managers_window>div.managers div.manager label.manager_category_title {
  font-family: 'roboto-bold';
  color: white;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
}

input[type='checkbox'] {
  cursor: pointer;
  margin: 0;
  margin-right: 5px;
}

div.checkboxes,
div.radios {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}

div.checkboxes>label,
div.radios>label {
  color: white !important;
  font-size: 12px !important;
  margin-bottom: 5px !important;
  cursor: pointer;
}

/* div.radios>label {
  margin-bottom: 0 !important;
} */
div.checkboxes>label:last-child,
div.radios>label:last-child {
  margin-bottom: 0 !important;
}

div.checkboxes>label>input,
div.radios>label>input {
  margin: 0;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  box-shadow: none;
}

#robot_managers_window div.money_management>h1 {
  margin-bottom: 0;
}

#robot_managers_window div.constants_manager table.constants,
#robot_managers_window div.variables_manager table.variables {
  border-collapse: collapse;
}

#robot_managers_window div.constants_manager table.constants input,
#robot_managers_window div.variables_manager table.variables input {
  font-family: 'roboto';
  width: 100%;
}

#robot_managers_window div.constants_manager table.constants th,
#robot_managers_window div.variables_manager table.variables th {
  text-align: left;
  color: white;
  font-family: 'roboto-bold';
  font-size: 14px;
  font-weight: normal;
  white-space: nowrap;
}

#robot_managers_window div.constants_manager table td:last-child,
#robot_managers_window div.variables_manager table td:last-child {
  width: 15px;
}

#robot_managers_window div.constants_manager table.constants span.delete_constant,
#robot_managers_window div.variables_manager table.variables span.delete_variable {
  width: 15px;
  height: 15px;
  background-image: url(/images/icons/delete_red.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  cursor: pointer;
  position: relative;
  top: calc((25px - 15px)/2 + 5px);
}

#robot_managers_window div.constants_manager>span.add_constant,
#robot_managers_window div.variables_manager>span.add_variable {
  color: white;
  font-family: 'helveticaneue-light';
  font-size: 14px;
  margin-top: 10px;
  display: block;
  cursor: pointer;
  position: relative;
  padding-left: 20px;
}

#robot_managers_window div.constants_manager>span.add_constant>img,
#robot_managers_window div.variables_manager>span.add_variable>img {
  height: 15px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

div.variables_manager table td,
div.constants_manager table td {
  width: 50%;
  vertical-align: top;
}

div.variables_manager table td:first-child,
div.constants_manager table td:first-child{
  padding-right: 5px;
}

div.variables_manager table td:last-child,
div.constants_manager table td:last-child{
  padding-left: 5px;
}

div.variables_manager table td>div.var_const_name_wrapper,
div.constants_manager table td>div.var_const_name_wrapper {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}

div.variables_manager table td>div.var_const_name_wrapper>div.input_wrapper,
div.constants_manager table td>div.var_const_name_wrapper>div.input_wrapper {
  flex: 1;
}

div.variables_manager table td>div.var_const_name_wrapper>span.move_variable,
div.constants_manager table td>div.var_const_name_wrapper>span.move_constant {
  display: flex;
  flex-direction: column;
  margin-right: 5px;
  margin-top: 5px;
}

div.variables_manager table td>div.var_const_name_wrapper>span.move_variable>span,
div.constants_manager table td>div.var_const_name_wrapper>span.move_constant>span {
  width: 10px;
  height: 10px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 7px auto;
  background-position: center;
  background-image: url('/images/icons/triangle_arrow.png');
  transform: rotate(180deg);
}

div.variables_manager table td>div.var_const_name_wrapper>span.move_variable>span:hover,
div.constants_manager table td>div.var_const_name_wrapper>span.move_constant>span:hover {
  opacity: 0.5;
}

div.variables_manager table td>div.var_const_name_wrapper>span.move_variable>span:first-child,
div.constants_manager table td>div.var_const_name_wrapper>span.move_constant>span:first-child {
  margin-bottom: 5px;
}

div.variables_manager table td>div.var_const_name_wrapper>span.move_variable>span.down,
div.constants_manager table td>div.var_const_name_wrapper>span.move_constant>span.down {
  transform: none;
}

div.variables_manager table td>div.var_const_name_wrapper>span.bad_value_message,
div.constants_manager table td>div.var_const_name_wrapper>span.bad_value_message {
  flex-basis: 100%;
}

/* div.variables_manager table td>div.var_const_name_wrapper>span.bad_value_message,
div.constants_manager table td>div.var_const_name_wrapper>span.bad_value_message {
  position: absolute;
  z-index: 10;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  padding: 5px;
  border: 2px rgb(146, 191, 36) solid;
  text-align: center;
  font-family: 'montserrat-semibold';
  color: white;
  top: -5px;
  transform: translate(0, -100%);
  box-shadow: 0 0px 10px rgb(20 20 20);
} */
#robot_managers_window div.telegram_manager h2+input {
  width: 100%;
  margin-top: 0;
}

label.input_file>input {
  display: none;
}

label.input_file {
  font-family: 'roboto';
  font-size: 14px;
  color: white;
  background-color: rgb(40, 40, 40);
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
  height: 30px;
  line-height: 26px;
  border: 2px rgb(51, 255, 0) solid;
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

label.input_file:hover {
  box-shadow: 0 0 5px rgb(51 255 0);
}

label.input_file>img {
  height: 15px;
  position: relative;
  top: 3px;
  margin-right: 2px;
}

div.function_code_editor {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3000;
  box-shadow: 0 0 20px black;
  max-height: 90vh;
  width: 90vw;
  min-height: 200px;
  background-color: rgb(40, 40, 40);
}

div.function_code_editor::before {
  content: "";
  display: block;
  position: fixed;
  top: -50vw;
  left: -50vh;
  width: 1000vw;
  height: 1000vh;
  background-color: rgba(0, 0, 0, 0.7);
}

div.function_code_editor>div.textarea_wrapper {
  max-height: 90vh;
  width: 90vw;
  overflow: auto;
}

div.function_code_editor>span.close {
  width: 40px;
  height: 40px;
  background-size: auto 15px;
}

div.function_code_editor>button.save_changes {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  width: 167px;
  border-radius: 5px;
  height: 40px;
}

div.function_code_editor>div.warning {
  position: absolute;
  right: 10px;
  bottom: 60px;
  width: 170px;
  background-color: black;
  border-radius: 5px;
  box-sizing: border-box;
  border: 2px white solid;
  z-index: 5;
  padding: 10px;
}

div.function_code_editor>div.warning>span.close {
  width: 35px;
  height: 35px;
  background-size: auto 10px;
}

div.function_code_editor>div.warning>p {
  font-family: 'roboto';
  color: white;
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 10px;
}

div.function_code_editor>div.warning>h1 {
  font-family: 'roboto-bold';
  margin: 0;
  font-size: 18px;
  color: rgb(51, 255, 0);
}

.CodeMirror {
  height: auto;
}

.cm-s-abcdef .CodeMirror-gutters {
  background: rgb(83, 83, 83);
}

#viewport .block.mini_block {
  color: white;
  font-family: 'roboto-bold';
  /* font-size: 14px; */
  font-size: 12px;
  white-space: nowrap;
}

.block.mini_block.info {
  font-size: 12px;
}

#settings_window div.checkboxes,
#settings_window div.radios {
  /* margin: 0 !important; */
  margin: 0;
}

div.checkboxes span.checkboxes_title,
div.radios span.radios_title {
  color: white;
  font-family: 'roboto-bold';
  margin-bottom: 5px;
  font-size: 14px;
  margin-top: 5px;
}

#viewport>#zoom_value,
#viewport>#snap_value {
  position: fixed;
  top: 55px;
  right: calc(5px + 40px + 5px);
  /* font-family: 'roboto-bold'; */
  font-family: 'helveticaneue-medium';
  color: white;
  font-size: 12px;
  transition: 0.5s;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  box-shadow: 0 0 5px black;
  border: 2px rgb(10, 191, 254) solid;
  pointer-events: none;
  backdrop-filter: blur(1px);
  height: 27.4px;
  line-height: 23.4px;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

#viewport>#snap_value {
  border-color: rgb(146, 191, 36);
}

#block_locate_window {
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  border: 2px rgb(51 255 0) solid;
  width: 200px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 0 0 20px black;
}

#block_locate_window::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: calc(50% - 8px);
  right: -14px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgb(51 255 0);
  transform: rotate(90deg);
}

#block_locate_window>label {
  font-family: 'roboto-bold';
  color: white;
  font-size: 14px;
  margin-bottom: 10px;
}

#block_locate_window>input {
  margin: 0;
}

#block_locate_window>p.comment {
  margin: 0;
  margin-top: 10px;
  color: white;
  font-family: 'roboto';
  font-size: 12px;
}

#block_locate_window>span.close {
  width: 30px;
  height: 30px;
  background-size: auto 12px;
}

#block_locate_window>button.submit {
  margin-top: 10px;
}

#block_highlight {
  position: absolute;
  background: rgba(115, 161, 61, 0.9);
  z-index: 2;
  animation: block_highlight 0.5s infinite;
  pointer-events: none;
}

@keyframes block_highlight {
  0% {
    background-color: rgba(115, 161, 61, 0);
  }

  50% {
    background-color: rgba(115, 161, 61, 0.9);
  }

  100% {
    background-color: rgba(115, 161, 61, 0);
  }
}

.block.ghost {
  cursor: default;
}

.block.ghost>.controls,
.block.ghost>.connector,
.block.ghost>.container_shift_controls {
  display: none !important;
}

.block.ghost:hover {
  box-shadow: none;
}

.error_tooltip {
  position: absolute;
  background: rgb(10, 191, 254);
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -5px;
  right: -5px;
  font-family: 'roboto-bold';
  text-align: center;
  line-height: 15px;
  cursor: pointer;
  box-shadow: 0 0 5px black;
  z-index: 1000;
  animation: pulse_blue 1.5s infinite;
  color: white;
  font-size: 12px;
}

#viewport .block.error_highlight {
  animation: pulse_blue 1.5s infinite;
}

.tooltip {
  position: fixed;
  display: inline-block;
  padding: 3px;
  border-radius: 3px;
  background-color: rgba(40, 40, 40, 0.6);
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  border: 2px rgb(10, 191, 254) solid;
  z-index: 999999999999;
  font-family: 'roboto';
  color: white;
  font-size: 12px;
  box-shadow: 0 0 5px black;
}

.tooltip>span.triangle {
  display: inline-block;
  position: absolute;
  left: calc(50% - 5px);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgb(10, 191, 254);
}

.tooltip>span.triangle.bottom {
  transform: rotate(180deg);
  bottom: -6px;
}

.tooltip>span.triangle.top {
  top: -6px;
}

.block.dnd {
  opacity: 0.7;
  cursor: grabbing;
  z-index: 1000;
  position: absolute;
}

#viewport .block.top_level.teleport.dnd>.controls {
  display: none;
}

#viewport .block.top_level.teleport {
  width: 27px;
  height: 30px;
  background-color: transparent;
  box-shadow: none !important;
  border: none;
}

#viewport .block.top_level.teleport>img {
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  /* filter: drop-shadow(0 0 4px black); */
}

#viewport .block.top_level.teleport>span.connector {
  border-color: rgb(10, 191, 254) !important;
}

#viewport .block.top_level.teleport_out>span.connector.out {
  right: -2px !important;
}

#viewport .block.top_level.teleport>input {
  margin: 0;
  background: none;
  border: none;
  color: white;
  font-family: 'roboto-bold';
  font-size: 14px;
  padding: 0;
  width: 100%;
  height: 30px;
  pointer-events: none;
  position: absolute;
  left: 4px;
  top: 0;
}

#viewport .block.top_level.teleport>input:focus {
  box-shadow: none;
}

#viewport .block.top_level.teleport.selected:before {
  border: 2px white dashed;
  border-radius: 5px;
  box-sizing: border-box;
}

#app_version {
  text-decoration: none;
  position: fixed;
  right: 0;
  bottom: 0;
  color: white;
  font-family: 'roboto-bold';
  padding: 5px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top-left-radius: 5px;
  z-index: 10000;
  box-sizing: border-box;
  cursor: pointer;
}

#app_version:hover {
  text-decoration: underline;
}

.editor_mode_switch_and_project_name_wrapper {
  position: absolute;
  left: 5px;
  top: 5px;
  display: flex;
  z-index: 10;
}

#editor_mode_switch {
  border-radius: 5px;
  display: flex;
  border: 2px rgb(10, 191, 254) solid;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px black;
  backdrop-filter: blur(1px);
  margin-right: 5px;
}

#editor_mode_switch>span {
  color: white;
  font-family: 'roboto-bold';
  padding: 3px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px rgb(10, 191, 254) solid;
}

#editor_mode_switch>span.selected {
  border-bottom: 3px rgb(146, 191, 36) solid;
}

#project_name {
  font-family: 'roboto-bold';
  color: white;
  height: 27.4px;
  top: 5px;
  border: 2px rgb(146, 191, 36) solid;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px black;
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 12px;
  line-height: 23.4px;
  padding-left: 5px;
  padding-right: 5px;
  transition: 0.25s ease;
  margin: 0;
  width: auto;
  cursor: text;
}

#project_name:focus {
  outline: none;
  box-shadow: 0 0 5px rgb(146, 191, 36);
}

/* #unsaved_changes_counter {
  position: absolute;
  box-sizing: border-box;
  border-radius: 5px;
  z-index: 10;
  left: calc(5px + 146.55px + 5px);
  top: 5px;
  background-color: #27282b;
  padding: 10px;
  border: 2px rgb(10, 191, 254) solid;
  box-shadow: 0 0 10px black;
  height: 27.4px;
}

#unsaved_changes_counter>span.close {
  position: absolute;
}

#unsaved_changes_counter>p {
  font-family: 'roboto-bold';
  font-size: 14px;
  color: white;
  margin: 0;
}

#unsaved_changes_counter>button {
  width: 90px;
  border-radius: 5px;
  margin-top: 10px;
  background-color: #1d1e21;
} */
#viewport .block.interface_element {
  box-sizing: border-box;
  border-radius: 0;
  padding: 0 !important;
  box-shadow: none !important;
}

#viewport .interface_element>span.text {
  white-space: nowrap;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translate(0, -50%);
  font-family: 'ubuntumono';
}

#viewport .interface_element_text>span.text {
  position: relative;
  left: auto;
  top: auto;
  transform-origin: top left;
  display: inline-block;
  transform: none;
}

#viewport .interface_element_text {
  border: none;
  background-color: transparent;
}

#viewport .interface_element>.manipulator {
  display: none;
  width: 10px;
  height: 10px;
  position: absolute;
  border: 2px white solid;
  border-radius: 10px;
  background: black;
  box-sizing: border-box;
  z-index: 2;
}

/* #viewport .interface_element:hover,
#viewport .interface_element.transform {
  border-style: dashed;
} */
/* #viewport .interface_element.selected {} */
#viewport .interface_element:hover>.manipulator,
#viewport .interface_element.transform>.manipulator {
  display: inline-block;
}

#viewport .interface_element>.manipulator_top_left {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

#viewport .interface_element>.manipulator_top_center {
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  cursor: n-resize;
}

#viewport .interface_element>.manipulator_top_right {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

#viewport .interface_element>.manipulator_bottom_left {
  bottom: -5px;
  left: -5px;
  cursor: ne-resize;
}

#viewport .interface_element>.manipulator_bottom_center {
  bottom: -5px;
  left: calc(50% - 5px);
  width: 10px;
  cursor: n-resize;
}

#viewport .interface_element>.manipulator_bottom_right {
  bottom: -5px;
  right: -5px;
  cursor: nw-resize;
}

#viewport .interface_element>.manipulator_left_center {
  left: -5px;
  top: calc(50% - 5px);
  height: 10px;
  cursor: e-resize;
}

#viewport .interface_element>.manipulator_right_center {
  top: calc(50% - 5px);
  right: -5px;
  height: 10px;
  cursor: e-resize;
}

#scheme[data-editor_mode="logic"]>.interface_element,
#scheme[data-editor_mode="interface"]>:not(.interface_element, .restriction) {
  display: none !important;
}

#scheme[data-editor_mode="interface"]>div.restriction {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  display: block;
  box-sizing: border-box;
}

#scheme[data-editor_mode="interface"]>div.top_restriction {
  width: 100000px;
  height: 100000px;
  left: -5000px;
  top: -100000px;
}

#scheme[data-editor_mode="interface"]>div.left_restriction {
  width: 100000px;
  left: -100000px;
  top: 0;
}

#scheme[data-editor_mode="interface"]>div.right_restriction {
  width: 100000px;
  top: 0;
}

#scheme[data-editor_mode="interface"]>div.bottom_restriction {
  width: 100000px;
  height: 100000px;
  left: -50000px;
}

#viewport>div.coords_data {
  position: fixed;
  z-index: 2;
  box-sizing: border-box;
}

#viewport>div.y_coord_data,
#viewport>div.height_data {
  width: 1px;
  border-right: 1px white dashed;
}

#viewport>div.x_coord_data,
#viewport>div.width_data {
  height: 1px;
  border-top: 1px white dashed;
}

#viewport>div.coords_data>span.value {
  color: white;
  font-family: 'roboto';
  font-size: 10px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px;
  border-radius: 3px;
  border: 1px white solid;
  box-sizing: border-box;
  display: inline-block;
}

/* #viewport>div.coords_data>span.arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

#viewport>div.coords_data>span.arrow::before {
  top: 0;
  content: "";
  position: absolute;
  left: 0;
  height: 7.07px;
  width: 1px;
  background-color: white;
  transform: rotate(27.88deg);
}

#viewport>div.coords_data>span.arrow::after {
  top: 0;
  content: "";
  position: absolute;
  right: 0;
  height: 7.07px;
  width: 1px;
  background-color: white;
  transform: rotate(-27.88deg);
} */
#viewport>div.y_coord_data>span.value,
#viewport>div.height_data>span.value {
  top: 50%;
  margin-left: 5px;
  transform: translate(0, -50%);
}

#viewport>div.x_coord_data>span.value,
#viewport>div.width_data>span.value {
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 5px;
}

#mql5_code {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  font-family: Consolas, Monaco, monospace;
  font-size: 10px;
  display: none;
  padding: 20px;
  padding-top: 45px;
  background: rgb(40, 40, 40);
  user-select: text;
  box-sizing: border-box;
}

#toolbox {
  position: fixed;
  right: 5px;
  top: 55px;
  width: 40px;
  border-radius: 5px;
  backdrop-filter: blur(1px);
  /* background-color: rgb(0, 0, 0, 0.25); */
  background-color: rgba(10, 191, 254, 0.15);
  z-index: 10;
  box-sizing: border-box;
  padding: 2.5px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
}

#toolbox>div:not(:last-child) {
  margin-bottom: 10px;
}

#toolbox>div {
  flex-direction: column;
}

#toolbox>div>span {
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background-color: rgb(0, 0, 0, 0.5);
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  /* background-size: auto 17px; */
  background-size: 17px auto;
  display: block;
  box-sizing: border-box;
  position: relative;
}

/* #toolbox>div>span.snap_increase,
#toolbox>div>span.snap_decrease {
  background-size: 19px auto;
}

#toolbox>div>span.export_json,
#toolbox>div>span.import_json {
  background-size: auto 20px;
} */
#toolbox>div>span:hover {
  opacity: 0.7;
}

#toolbox>div>span.on::before,
#toolbox>div>span.off::before {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  display: inline-block;
}

#toolbox>div>span.on::before {
  background-color: rgb(51 255 0);
}

#toolbox>div>span.off::before {
  background-color: rgb(83, 83, 83);
}

#toolbox>div>span.snap {
  background-image: url('/images/icons/snap.png');
}

#toolbox>div>span.snap_increase {
  background-image: url('/images/icons/snap_increase.png');
}

#toolbox>div>span.snap_decrease {
  background-image: url('/images/icons/snap_decrease.png');
}

#toolbox>div>span.delete_all {
  background-image: url('/images/icons/eraser.png');
}

#toolbox>div>span.block_locate {
  background-image: url('/images/icons/target.png');
}

#toolbox>div>span.robot_settings {
  background-image: url('/images/icons/robot_settings.png');
}

#toolbox>div>span.save_project {
  background-image: url('/images/icons/save.png');
}

#toolbox>div>span.build_robot {
  background-image: url('/images/icons/build_robot.png');
}

#toolbox>div>span.optimizatation {
  background-image: url('/images/icons/rabbit.png');
}

#toolbox>div>span.export_json {
  background-image: url('/images/icons/export_json.png');
}

#toolbox>div>span.import_json {
  background-image: url('/images/icons/import_json.png');
}

#toolbox>div>span.download_files {
  background-image: url('/images/icons/download.png');
}

#toolbox>div>span:not(:last-child) {
  margin-bottom: 5px;
}

#import_json {
  box-shadow: 0 0 10px black;
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-radius: 10px;
  border: 4px rgba(10, 191, 254, 0.1) solid;
  padding: 15px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#import_json>span.close {
  width: 35px;
  height: 35px;
  background-size: auto 15px;
}

#import_json>h1 {
  font-family: 'montserrat-extrabold';
  color: white;
  margin: 0;
  text-align: center;
  font-size: 24px;
}

#import_json>p {
  font-family: 'montserrat-regular';
  color: white;
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0;
}

#import_json>div.dropzone {
  border: 4px rgb(51, 255, 0) solid;
  border-radius: 10px;
  margin-top: 20px;
  position: relative;
  text-align: center;
  box-shadow: 0 0px 10px black;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: 0.25s ease;
}

#import_json>div.dropzone.active {
  box-shadow: 0 0 15px rgb(51 255 0);
}

#import_json>div.dropzone>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#import_json>div.dropzone>img {
  height: 50px;
}

#import_json>div.dropzone>p {
  font-family: 'montserrat-extrabold';
  color: white;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 0;
}

#import_json>div.dropzone>span {
  font-family: 'montserrat-bold';
  color: white;
  font-size: 12px;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}

#import_json>div.dropzone>label {
  display: inline-block;
  border-radius: 5px;
  font-family: 'montserrat-semibold';
  color: white;
  padding: 10px;
  font-size: 12px;
  box-shadow: 0 0 10px rgb(20 20 20);
  cursor: pointer;
  transition: 0.25s ease;
  border: 2px rgb(51, 255, 0) solid;
}

#import_json>div.dropzone>*:not(label) {
  pointer-events: none;
}

#import_json>div.dropzone.active>label {
  pointer-events: none;
}

#import_json>div.dropzone>label:hover {
  box-shadow: 0 0 5px rgb(51, 255, 0);
}

#import_json>div.dropzone>label>input {
  display: none;
}

#subscription_ad {
  position: fixed;
  width: 90vw;
  max-width: 530px;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0 0 10px black;
  background-color: rgb(40, 40, 40);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px;
  border: 6px rgba(10, 191, 254, 0.1) solid;
  box-sizing: border-box;
}

#subscription_ad>span.close {
  width: 40px;
  height: 40px;
  background-size: auto 15px;
  /* animation: subscription_ad_close_show 0.5s; */
}

@keyframes subscription_ad_close_show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#subscription_ad>h1 {
  margin: 0;
  color: white;
  font-family: 'montserrat-bold';
  text-align: center;
  /* text-shadow: 0 0 10px black; */
  font-size: 36px;
}

#subscription_ad>p {
  color: white;
  margin: 0;
  margin-top: 10px;
  font-family: 'montserrat-light';
  text-align: center;
  font-size: 16px;
  /* text-shadow: 0 0 10px black; */
}

#subscription_ad>a {
  border-radius: 5px;
  margin-top: 15px;
  font-family: 'montserrat-semibold';
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  animation: pulse_yellow 1.5s infinite;
  height: 35px;
  line-height: 33px;
  border-width: 3px;
}

#subscription_ad>a:hover {
  /* opacity: 1; */
}

#download_files_window {
  box-shadow: 0 0 10px black;
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-radius: 10px;
  border: 4px rgba(10, 191, 254, 0.1) solid;
  padding: 15px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#download_files_window>span.close {
  width: 35px;
  height: 35px;
  background-size: auto 15px;
}

#download_files_window>h1 {
  margin: 0;
  font-family: 'montserrat-bold';
  color: white;
  font-size: 26px;
}

#download_files_window>label {
  font-family: 'roboto';
  color: white;
  margin-top: 10px;
  font-size: 16px;
}

#download_files_window>div.radiobuttons {
  display: flex;
  flex-direction: column;
}

#download_files_window>div.radiobuttons>label {
  font-family: 'roboto';
  color: white;
  font-size: 13px;
  margin-top: 5px;
}

#download_files_window>div.radiobuttons>label>input {
  margin: 0;
  margin-right: 5px;
}

#download_files_window>button.submit {
  margin-top: 15px;
}

#download_files_window>p.dependencies_install_instruction {
  font-family: 'roboto';
  color: white;
  font-size: 12px;
  padding: 5px;
  border-radius: 3px;
  border: 2px rgb(10, 191, 254) solid;
  margin: 0;
  margin-top: 10px;
}

#download_files_window>p.dependencies_install_instruction>a {
  color: white;
}