/**
 * @license Licensed under the Apache License, Version 2.0 (the "License"):
 *          http://www.apache.org/licenses/LICENSE-2.0
 *
 * @fileoverview CSS file for the Ardublockly application.
 *
 * There are a lot of '!important' tags in this file as a lot of the rules set
 * here go against the css rules from the Materialize framework.
 */

.btn-flat {
  text-transform:none !important;
  padding:0px 15px 0px 15px;
  margin-right: 5px;
  margin-left: 5px;
}

.btn-modal {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  border: solid #666 1px;
}

.btn-tab {
  height: 30px;
  border-radius: 50% 50% 0% 0%;
}

#columna_full {
  margin-top:20px;
}

#header_full {
  float:left;
  z-index:8;
}

.header_columnas {
  margin-top:-30px;
}

.nav_btn::before{
  height:50px;
}

@media only screen and (min-width: 0) {
  .mdi-navigation-menu::before {
    height:40px;
  }
  #edit_btn::before {
    height:36px;
  }
}
@media only screen and (min-width: 601px) {
  .mdi-navigation-menu::before {
    height:50px;
  }
  #edit_btn::before {
    height:46px;
  }
}

/**********/
/*  HTML  */
/**********/

body {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/*********************/
/*  Arduino Colours  */
/*********************/
.arduino_teal_dark {
  background-color: #006468;
  /* background-color: #00878F; from community logo */
}
.arduino_teal_light {
  background-color: #62AEB2;
}
.arduino_brown:hover {
  background-color: #996550;
}

/********************/
/*  Navigation bar  */
/********************/
.nav-fixed {
  box-shadow: none !important;
  border-radius: 0;
  position: fixed;
  height: 40px;
  right: 0;
  left: 0;
  top: 0;
  z-index: 995;
}

/* Side nav Logo */
ul.side-nav li.logo {
  text-align: center;
  margin: 0px !important;
  padding: 0px 0px !important;
  border: none !important;
  height: 145px;
  background-color: transparent;
}
ul.side-nav li.logo:hover {
  background-color: transparent;
}
ul.side-nav li.side-menu-end {
  background-color: #eeeeee;
  border-radius: 0px 0px 25px 0px;
  border-left: 4px solid #ffffff;
  border-bottom: 4px solid #dddddd;
  border-right: 4px solid #dddddd;
  border-bottom: 4px solid #dddddd;
  line-height: 25px;
  margin-top: -10px;
}

.no-padding{
  margin-top: -10px;
}

.hard_link {
  cursor: pointer;
  text-decoration: underline;
}

.inline_link {
  cursor: pointer;
  display: contents;
  font-size: x-small;
}

#btn_menu {
  cursor: pointer;
  margin-right:15px;
  margin-left:10px;
}

/************************************/
/*  Blocks, Arduino, and XML areas  */
/************************************/
.content {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #ffffff;
}
.height_transition {
  transition: height 0.2s ease-out;
  -ms-transition: height 0.2s ease-out;
  -moz-transition: height 0.2s ease-out;
  -webkit-transition: height 0.2s ease-out;
}

#blocks_panel {
  padding: 0px;
  position: relative !important;
}
@media only screen and (min-width: 0) {
  .blocks_panel_large {
    height: -moz-calc(100vh - 95px);     /* Firefox  */
    height: -webkit-calc(100vh - 95px);  /* WebKit   */
    height: -o-calc(100vh - 95px);       /* Opera    */
    height: calc(100vh - 95px);          /* Standard */
  }
}
@media only screen and (min-width: 601px) {
  .blocks_panel_large {
    height: -moz-calc(100vh - 115px);     /* Firefox  */
    height: -webkit-calc(100vh - 115px);  /* WebKit   */
    height: -o-calc(100vh - 115px);       /* Opera    */
    height: calc(100vh - 115px);          /* Standard */
  }
}
#content_blocks {
  margin: 0;
  padding: 0;
  height: -moz-calc(100vh - 105px);     /* Firefox  */
  height: -webkit-calc(100vh - 105px);  /* WebKit   */
  height: -o-calc(100vh - 105px);       /* Opera    */
  height: calc(100vh - 105px);          /* Standard */
}
#content_blocks_search {
  margin: 0;
  padding: 0;
  height: -moz-calc(100vh - 105px);     /* Firefox  */
  height: -webkit-calc(100vh - 105px);  /* WebKit   */
  height: -o-calc(100vh - 105px);       /* Opera    */
  height: calc(100vh - 105px);          /* Standard */
}

#content_xml {
  resize: none;
  outline: none;
  border: none;
  padding: 0px 5px;
  font-family: monospace;
  font-size: smaller;
  overflow: auto;
  font-style: 0.2em !important;
  min-height: 120px;
}
@media only screen and (min-width: 0) {
  .content_xml_large {
    height: -moz-calc(100vh - 82px);     /* Firefox  */
    height: -webkit-calc(100vh - 82px);  /* WebKit   */
    height: -o-calc(100vh - 82px);       /* Opera    */
    height: calc(100vh - 82px);          /* Standard */
  }
}
@media only screen and (min-width: 601px) {
  .content_xml_large {
    height: -moz-calc(100vh - 98px);     /* Firefox  */
    height: -webkit-calc(100vh - 98px);  /* WebKit   */
    height: -o-calc(100vh - 98px);       /* Opera    */
    height: calc(100vh - 98px);          /* Standard */
  }
}

/* The materialize framework changes height of the div to show or hide */
/* the collapsible elements. */
#content_arduino {
  resize: none;
  outline: none;
  border: none;
  padding: 0px 5px;
  font-size: 0.9rem;
  font-family: "Droid Sans Mono", monospace;
  overflow: auto;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  min-height: 120px;
}
@media only screen and (min-width: 0) {
  .content_arduino_large {
    height: -moz-calc(100vh - 82px);     /* Firefox  */
    height: -webkit-calc(100vh - 82px);  /* WebKit   */
    height: -o-calc(100vh - 82px);       /* Opera    */
    height: calc(100vh - 82px);          /* Standard */
  }
}
@media only screen and (min-width: 601px) {
  .content_arduino_large {
    height: -moz-calc(100vh - 98px);     /* Firefox  */
    height: -webkit-calc(100vh - 98px);  /* WebKit   */
    height: -o-calc(100vh - 98px);       /* Opera    */
    height: calc(100vh - 98px);          /* Standard */
  }
}

/****************/
/*  IDE output  */
/****************/
#ide_output_wrapper {
  width: 50%;
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: -20px;
  right: 0px;
  z-index: 10;
}

.ide_output_collapsible {
  border-left: 0;
  border-right: 0;
  margin-top: 0;
}
.ide_output_header_normal {
  background-color: #660099/*#006468*/;
  color: #ffffff;
  -moz-transition: background-color 0.6s ease-in;;
  -o-transition: background-color 0.6s ease-in;
  -webkit-transition: background-color 0.6s ease-in;
}
.ide_output_header_highlight {
  background-color: #62AEB2;
  color: #ffffff;
  -moz-transition: background-color 0.6s ease-in;;
  -o-transition: background-color 0.6s ease-in;
  -webkit-transition: background-color 0.6s ease-in;
}
.ide_output_header_error {
  background-color: #E47128;
  color: #ffffff;
  -moz-transition: background-color 0.6s ease-in;;
  -o-transition: background-color 0.6s ease-in;
  -webkit-transition: background-color 0.6s ease-in;
}

#content_ide_output {
  resize: none;
  outline: none;
  border: none;
  padding: 0px 5px;
  font-family: monospace;
  overflow: auto;
  font-style: 0.2em !important;
  height: 160px;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  text-align: right;
}
/* IDE output content text formatting */
#content_ide_output .arduino_dialog_success {
  color: #00979C;   /* arduino light teal */
  font-size: 1.2rem;
  margin: 16px 0px 8px 0px;
}
#content_ide_output .arduino_dialog_failure {
  color: #E47128;   /* arduino orange */
  font-size: 1.2rem;
  margin: 16px 0px 8px 0px;
}
#content_ide_output .arduino_dialog_out {
  font-size: 0.9rem;
}
#content_ide_output .arduino_dialog_out_error {
  color: #E47128;   /* arduino orange */
  font-size: 0.9rem;
  padding-top: 8px;
  display: block;
}

/* Spacer is used to not leave any content behind the collapsible header */
#ide_output_spacer {
  height: 40px;
}
@media only screen and (min-width: 0) {
  #ide_output_spacer {
    height: 20px;
  }
}
@media only screen and (min-width: 601px) {
  #ide_output_spacer {
    height: 30px;
  }
}
@media only screen and (min-width: 993px) {
  #ide_output_spacer {
    height: 40px;
  }
}

/********************/
/*  Serial Monitor  */
/********************/
#serial_monitor_wrapper {
  width: 50%;
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: -20px;
  z-index: 11;
}

.serial_monitor_collapsible {
  border-left: 0;
  border-right: 0;
  margin-top: 0;
}
.serial_monitor_header_normal {
  background-color: #660099/*#006468*/;
  color: #ffffff;
  -moz-transition: background-color 0.6s ease-in;;
  -o-transition: background-color 0.6s ease-in;
  -webkit-transition: background-color 0.6s ease-in;
}
.serial_monitor_header_highlight {
  background-color: #62AEB2;
  color: #ffffff;
  -moz-transition: background-color 0.6s ease-in;;
  -o-transition: background-color 0.6s ease-in;
  -webkit-transition: background-color 0.6s ease-in;
}
.serial_monitor_header_error {
  background-color: #E47128;
  color: #ffffff;
  -moz-transition: background-color 0.6s ease-in;;
  -o-transition: background-color 0.6s ease-in;
  -webkit-transition: background-color 0.6s ease-in;
}

#monitor_clear {
  color: #fff;
  font-size:0.9rem;
  padding:0px 5px 0px 5px;
}

#auto_scroll {
  color: #fff;
  font-size:0.9rem;
  padding:0px 5px 0px 5px;
}

#auto_scroll_check {
  margin-top:-5px;
}

#content_serial_monitor {
  resize: none;
  outline: none;
  border: none;
  padding: 0px 5px;
  font-family: monospace;
  overflow: auto;
  font-style: 0.2em !important;
  height: 160px;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  white-space:pre;
}
/* Serial Monitor content text formatting */
#content_serial_monitor .arduino_dialog_success {
  color: #00979C;   /* arduino light teal */
  font-size: 1.2rem;
  margin: 16px 0px 8px 0px;
}
#content_serial_monitor .arduino_dialog_failure {
  color: #E47128;   /* arduino orange */
  font-size: 1.2rem;
  margin: 16px 0px 8px 0px;
}
#content_serial_monitor .arduino_dialog_out {
  font-size: 0.9rem;
}
#content_serial_monitor .arduino_dialog_out_error {
  color: #E47128;   /* arduino orange */
  font-size: 0.9rem;
  padding-top: 8px;
  display: block;
}

/* Spacer is used to not leave any content behind the collapsible header */
#serial_monitor_spacer {
  height: 40px;
}
@media only screen and (min-width: 0) {
  #serial_monitor_spacer {
    height: 20px;
  }
}
@media only screen and (min-width: 601px) {
  #serial_monitor_spacer {
    height: 30px;
  }
}
@media only screen and (min-width: 993px) {
  #serial_monitor_spacer {
    height: 40px;
  }
}


/*************/
/*  Buttons  */
/*************/
@media only screen and (min-width: 0px) and (max-width: 600px) {
  #ide_output_label {
    display: none;
  }
  #serial_monitor_label {
    display: none;
  }
  #grupo_bloques_label {
    display: none;
  }
  #grupo_codigo_label {
    display: none;
  }
  #grupo_xml_label {
    display: none;
  }
  #button_ide_large {
    width: 35px;
    height: 35px;
    top: 0px;
  }
  #button_ide_large i {
    line-height: 35px;
    font-size: 1.8rem !important;
  }
  #button_ide_middle {
    height: 35px;
    border-radius: 10% 0 0 10%;
  }
  #button_ide_left {
    height: 35px;
    border-radius: 10% 0 0 10%;
  }
  #button_ide_middle i {
    line-height: 35px;
  }
  #button_ide_left i {
    line-height: 35px;
  }
}
@media only screen and (min-width: 601px) {
  #button_ide_large {
    width: 45px;
    height: 45px;
    margin-right: 0px;
    top: 0px;
  }
  #button_ide_large i {
    line-height: 45px;
    font-size: 2.1rem !important;
  }
  #button_ide_middle {
    height: 45px;
    border-radius: 20% 0 0 20%;
  }
  #button_ide_left {
    height: 45px;
    border-radius: 20% 0 0 20%;
  }
  #button_ide_middle i {
    line-height: 45px;
  }
  #button_ide_left i {
    line-height: 45px;
  }
}

#ide_buttons_wrapper {
  position: absolute;
  z-index: 996;
}
#button_ide_large {
  position: absolute;
  right: 0px;
}
#button_ide_middle {
  width: 0px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  -moz-transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
  -webkit-transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
  -o-transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
  transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
}
#button_ide_left {
  width: 0px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  -moz-transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
  -webkit-transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
  -o-transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
  transition: width 0.3s cubic-bezier(0, 0.81, 0.68, 0.93);
}
#button_ide_last {
  position: absolute;
  width: 30px;
  height: 30px;
  -moz-transition: visibility 0.3s linear, opacity 0.3s linear;
  -webkit-transition: visibility 0.3s linear, opacity 0.3s linear;
  -o-transition: visibility 0.3s linear, opacity 0.3s linear;
  transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_ide_last_icon {
  line-height: 32px;
  font-size: 1.3rem !important;
}

#button_ide_large:hover:before,
#button_ide_middle:hover:before,
#button_ide_left:hover:before,
#button_ide_last:hover:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255, 0.25);
  transition: all .3s linear;
}
@media only screen and (min-width: 0) and (max-width: 600px) {
  .ide_buttons_wrapper_full {
    width: 150px;
  }
  .ide_buttons_wrapper_hidden {
    width: 35px;
  }
  #ide_buttons_wrapper {
    height: 35px;
    right: 15px;
    top: 5px;
  }
  #button_ide_middle {
    right: 20px;
    top: 0px;
  }
  #button_ide_left {
    right: 80px;
    top: 0px;
  }
  #button_ide_last {
    left: 10px;
    top: 5px;
  }
}
@media only screen and (min-width: 601px) {
  .ide_buttons_wrapper_full {
    width: 155px !important;
  }
  .ide_buttons_wrapper_hidden {
    width: 45px !important;
  }
  #ide_buttons_wrapper {
    height: 45px;
    right: 15px;
    top: 45px;
  }
  #button_ide_middle {
    right: 25px;
    top: 0px;
  }
  #button_ide_left {
    right: 85px;
    top: 0px;
  }
  #button_ide_last {
    left: 10px;
    top: 5px;
  }
}

.action_button {
  position: absolute;
  right: 15px;
}
.action_button i {
  font-size: 2.1rem !important;
}

#button_load_xml {
  bottom: 36px;
}

#button_verify {
  bottom: 30px;
}

#button_open_ide {
  bottom: 100px;
}

/* These floating buttons needs to be at a higher z index than card when */
/* floating and lower when clicked.  */
#button_ide_large:hover,
#button_ide_middle:hover,
#button_ide_left:hover,
#button_ide_last:hover,
.action_button:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#button_ide_large:active,
#button_ide_middle:active,
#button_ide_left:active,
#button_ide_last:active,
.action_button:active {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

/* Toggle the toolbox on and off button */
/*.button_toggle_toolbox_on { // Este tiene un borde lindo (?)
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  left: 12px;
  top: 8px;
  text-align: center;
  font-size: 1.5rem !important;
  z-index: 72;
  border-color: #e0e0e0 !important;
  border-width: 1px !important;
  -webkit-border-radius: 4px 4px 4px 4px !important;
  -moz-border-radius: 4px 4px 4px 4px !important;
  border-radius: 4px 4px 4px 4px !important;
  background: rgba(98, 174, 178, .2) !important;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: background 0.3s linear, box-shadow 0.3s linear, border-width 0.3s linear;
  -ms-transition: background 0.3s linear, box-shadow 0.3s linear, border-width 0.3s linear;
  -moz-transition: background 0.3s linear, -moz-box-shadow 0.3s linear, border-width 0.3s linear;
  -webkit-transition: background 0.3s linear, -webkit-box-shadow 0.3s linear, border-width 0.3s linear;
}*/
.button_toggle_toolbox_off {
  position: absolute;
  margin: 0 !important;
  padding: 0px !important;
  left: 12px;
  top: 8px;
  text-align: center;
  font-size: 1.5rem !important;
  z-index: 72;
}


/*****************************/
/*  Spinner and new colours  */
/*****************************/
.ide_loader {
  position: absolute !important;
  z-index: 5;
  top: 0px !important;
  right: 0px !important;
}

@media only screen and (min-width: 0) and (max-width: 600px) {
  .ide_loader {
    width: 35px !important;
    height: 35px !important;
  }
}
@media only screen and (min-width: 601px) {
  .ide_loader {
    width: 45px !important;
    height: 45px !important;
  }
}

.active .spinner-layer.spinner-orange {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-dark-teal {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-light-teal {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-purple {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}


/************************/
/*  Modals and content  */
/************************/
/* Large modal section blocks */
.modal_section {
  margin: 12px 0px;
  width: 100%;
}

.modal_label {
  font-size: 1.4rem !important;
}

/* Blocks tick label as a title */
.modal_label_title {
  font-size: 1.6rem !important;
}

/* Blocks modal divider */
#blocks_menu_body .divider {
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Arduino output modal dialog */
#arduino_dialog_body {
  padding-top: 25px;
}
.arduino_dialog_out {}
.arduino_dialog_out_error {
  color: #E47128;   /* arduino orange */
  padding-top: 25px;
  display: block;
}
.arduino_dialog_success {
  color: #00979C;   /* arduino light teal */
}
.arduino_dialog_failure {
  color: #E47128;   /* arduino orange */
}
.modal_more_data_box {
  border: solid 1px;
  padding: 5px;
  margin-right: 20px;
  overflow-y: auto;
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  position: absolute;
}

/* Footer buttons padding */
.modal_right_button {
  margin: 0px 0px 0px 48px !important;
}

.modal {
  min-height: 85% !important;
}

/* Small modal responsive design */
.modal_small {
  height: auto !important;
  min-height: 50% !important;
}
.modal_small .modal-content {
  margin-top: 0;
  padding-top: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.modal_small input {
  width: 50%;
}
@media only screen and (min-width: 0) {
  .modal_small {
    max-width: 75% !important;
    width: 75% !important;
  }
}
@media only screen and (min-width: 993px) {
  .modal_small {
    max-width: 55% !important;
    width: 55% !important;
  }
}

/*****************/
/*  Sketch name  */
/*****************/
.app_title {
  position: absolute;
  height: 40px;
}

#nombre_proyecto_wrapper {
  position: absolute;
  /*font-style: italic;*/
  /*font-family: monospace;*/
}

#nombre_proyecto {
  padding-right: 10px;
  overflow-x: clip;
  display: inline-block;
  white-space: nowrap;
}

#edit_btn {
  padding-left: 10px;
  cursor: pointer;
  position: absolute;
  display: inline;
  font-size: 1.2rem !important;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
  /* Remove the "Ardublockly title only leaving the sketch name */
  .nav-elem {
    height:40px !important;
  }
  .app_title {
    display: none;
  }
  #nombre_proyecto {
    font-size: 1.1rem !important;
  }
}
@media only screen and (min-width : 600px) {
  .nav-elem {
    height:50px !important;
  }
  .app_title {
    font-size:1.2rem;
  }
  #nombre_proyecto {
    font-size: 1.8rem !important;
  }
}
@media only screen and (min-width : 993px) {
  .app_title {
    font-size:2rem;
  }
}

/************/
/*  Others  */
/************/
/* Edit logo for code and xml collapsibles */
.collapsible_logo {
  width: 3rem;
  font-size: 1.6rem;
  line-height: 3rem;
  font-weight: bold;
  display: block;
  float: left;
  text-align: center;
  margin-right: 1rem;
}

.collapsible {
  box-shadow: none !important;
  border: 1px solid #888;
}

/* Colours for the new and deleted code highlighting */
.code_highlight_deleted {
  background-color: #FDBEBE;
}


/*****************************/
/*  Overwriting Blockly CSS  */
/*****************************/
/* Blockly text for the following components:  */
.blocklyTreeLabel,           /* Toolbox        */
.blocklyText,                /* Block          */
.goog-menuitem-content {     /* Drop down menu */
  font-family: "Roboto", sans-serif!important;
  font-size: 14px;
}

/* Entire Blockly area, Toolbox dranw on top */
.blocklySvg {
  border-width: 0 !important;
}

/* Toolbox */
.blocklyToolboxDiv {
  top: 35px;
  border-color: #e0e0e0 !important;
  border-width: 0px 1px 0px 0px !important;
  -webkit-border-radius: 0px 4px 4px 0px !important;
  -moz-border-radius: 4px 4px 0px 0px !important;
  border-radius: 0px 4px 4px 0px !important;
  border: none !important;
  margin: 0px !important;
  padding: 0px 0px 0px 0px !important;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  overflow-x: hidden !important;
}
.blocklyTreeRoot {
  background: none !important;
  border: none !important;
  margin: 36px 0px 0px 0px !important;
  padding: 0px 1px !important;
  height: -moz-calc(100% - 37px);     /* Firefox  */
  height: -webkit-calc(100% - 37px);  /* WebKit   */
  height: -o-calc(100% - 37px);       /* Opera    */
  height: calc(100% - 37px);          /* Standard */
  overflow-x: hidden;
  overflow-y: auto;
}
.blocklyTreeRow {
  margin: 0px 0px !important;
  padding: 0px 16px 0px 0px !important;
  box-sizing: content-box !important;
}
.blocklyTreeSeparator{
  padding: 0px !important;
  margin: 0px !important;
}

/* Toolbox second column with blocks*/
.blocklyFlyoutBackground {
  fill-opacity: 0.9 !important;
  -webkit-border-radius: 0px 4px 4px 0px !important;
  -moz-border-radius: 0px 4px 4px 0px !important;
  border-radius: 0px 4px 4px 0px !important;
}

/* Blockly scrollbars */
.blocklyScrollbarBackground {
  stroke-width: 0px !important;
  fill: none !important;
}

.blocklyHighlightedConnectionPath,.blocklyPlusSelected>.blocklyPath {
  stroke-width: 3px;
}

/*********************************/
/*  Overwriting Materialize CSS  */
/*********************************/
/* Modify container to have a larger width in all resolutions */
.container {
  width: 100%;
  height: 100%;
  max-width: initial !important;
}

/* Maximize horizontal space for mobile */
@media only screen and (min-width: 0px) and (max-width: 600px) {
  body {
    padding-top: 25px;
  }
  /* Expand to all visible horizontal space */
  .container {
    margin: 0 !important;
  }
  nav {
    margin: -15px 0px !important;
    padding: -10px 12px !important;
  }
  /* remove space between cards and navigation bar */
  .col {
    margin-top: 0px;
  }
}

/* Increase the text size of the side menu */
.side-nav {
  z-index: 999;
}
ul.side-nav {
  margin-top:40px;
  padding: 0px !important;
  line-height: 64px !important;
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
  ul.side-nav {
    margin-top:25px;
  }
}
ul.side-nav i {
  font-size: 1.8rem !important;
}
ul.side-nav .collapsible {
  margin: 0 !important;
}
/* Set the background effect in the side menu */
ul.side-nav {
  background-color: transparent;
  box-shadow: none !important;
}
ul.side-nav li {
  background-color: #eeeeee;
}
ul.side-nav li {
  background-color: #eeeeee;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-right: 2px solid #dddddd;
  border-left: 2px solid #ffffff;
}
ul.side-nav li ul li ul {
  cursor: pointer;
  border: none !important;
}
ul.side-nav li ul li ul li {
  border: none !important;
}

/* Increase the size of Materialize Modal in small resolutions */
@media only screen and (max-width : 600px) {
  .modal {
    width: 80% !important;
    max-width: 80% !important;
  }
}

.modal_big {
  width: 95% !important;
  max-width: 900px !important;
}

/* Circle clipper (loading animation) thickness */
.circle-clipper .circle {
  border-width: 4px !important;
}

/* Materialize messes with these, so reset them here */
.blocklyHtmlInput {
  border: none !important;
  border-radius: 4px !important;
  font-family: sans-serif !important;
  height: 100% !important;
  margin: 0 !important;
  outline: none !important;
  padding: 0 1px !important;
  width: 100% !important;
  background-color: white !important;
}

#toast-container {
  right: 5% !important;
  top: 25%;
}

#toast-container{display:block;position:fixed;z-index:10000}
@media only screen and (max-width: 600px){#toast-container{right:0%;min-width:90%;bottom:0%}}
@media only screen and (min-width: 601px) and (max-width: 992px){#toast-container{right:5%;bottom:7%;max-width:90%}}
@media only screen and (min-width: 993px){#toast-container{top:10%;right:7%;max-width:86%}}
.toast{border-radius:2px;top:0;width:auto;clear:both;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;line-height:1.5em;word-break:break-all;background-color:#323232;padding:10px 25px;font-size:1.1rem;font-weight:300;color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.toast .btn,.toast .btn-large,.toast .btn-modal{margin:0;margin-right:3rem}
.toast.rounded{border-radius:24px}
@media only screen and (max-width: 600px){.toast{width:100%;border-radius:0}}
@media only screen and (min-width: 601px) and (max-width: 992px){.toast{float:right}}
@media only screen and (min-width: 993px){.toast{float:right}}

#block_search {
  height: 34px;
  font-size: 12px;
  padding-left: 40px;
  position: absolute;
  margin-top: 8px !important;
  z-index: 71;
}

.blocklyWarningIconSymbol {
  fill: #000
}

.blocklyIconGroup .blocklyErrorIconOutline {
  stroke: #fff;
  stroke-width: 1px;
}

.blocklyIconGroup .blocklyErrorIconX {
  stroke: #fff;
  stroke-width: 2px;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:4;
  fill: none;
}

.float_msg {
  position: fixed;
  padding: 0px 0.5rem;
  text-align: right;
  border-radius: 5px;
  border: 2px solid #000;
  width:auto;
  height:auto;
}

.float_right {
  float:right;
  right: 20px;
}

.no-float {
  float:none !important;
}

.float_btn {
  padding: 10px 0.5rem;
  font-size: 1.2rem;
}

#xml_collapsible_header { display: none; }

#columna_left {

}

#columna_right {
  float: right;
}

@media only screen and (min-width: 0) {
  #vResize {
    top: 25px;
  }
  .vResize_large {
    height: -moz-calc(100vh - 65px);     /* Firefox  */
    height: -webkit-calc(100vh - 65px);  /* WebKit   */
    height: -o-calc(100vh - 65px);       /* Opera    */
    height: calc(100vh - 65px);          /* Standard */
  }
}

@media only screen and (min-width: 601px) {
  #vResize {
    top: 40px;
  }
  .vResize_large {
    height: -moz-calc(100vh - 80px);     /* Firefox  */
    height: -webkit-calc(100vh - 80px);  /* WebKit   */
    height: -o-calc(100vh - 80px);       /* Opera    */
    height: calc(100vh - 80px);          /* Standard */
  }
}

#vResize {
  float: left;
  width: 10px;
  cursor: col-resize;
  position: absolute;
  z-index: 1000;
}

#hResize {
  float: left;
  width:100%;
  height: 10px;
  cursor: row-resize;
  position: absolute;
  margin-bottom: 0 !important;
  z-index: 1000;
}

.customIcon {
  height: 20px;
  width:20px;
  margin-left:10px;
}
.blocklyTreeRowContentContainer {
  display: flex;
  align-items: center;
}
.IconSelected {
  color: white;
}

.icono_fa {
  margin-top:5px;
}

.blocklyTreeLabel_mdi {
  margin-top:0px;
}

.blocklyTreeLabel_fa {
  margin-top:-5px;
}

.glass {
  float: left;
  position: absolute;
}

.zona_glass {
  float: left;
  position: absolute;
  border: solid 5px #fa0;
}

.desc_glass {
  top: 30vh;
  height: 50vh;
  left: 25vw;
  width: 50vw;
  border: solid 2px #aaa;
  background-color: #ddd;
  padding: 25px;
  font-size: 5vh;
}

#glass_desc_body {
  font-size: 4vh;
}

.full_glass {
  top: 0px;
  width: 100%;
  height: 100%;
  /* border: solid 6px #faf; */
}

.z1000 {
  z-index: 1000;
}

.z5000 {
  z-index: 5000;
}

.ventana_glass {
  position: absolute;
  padding: 5px;
  border: 2px solid #444;
  background-color: #eee;
  cursor: all-scroll;
  z-index: 5000;
}

.menu_tutorial {
  padding: 5px;
  background-color: #aac;
}

.senial {
  position: absolute;
  pointer-events: none;
  border-style: solid;
  z-index: 5000;
}

.senial-color-1 {
  border-color: #ea0;
}

.senial-color-2 {
  border-color: #ccc;
}

.circulo {
  border-radius: 50%;
}

.blocklyMainWorkspaceScrollbar {
  display: none;
}

h7 {
  font-weight: bold;
}

h8 {
  margin-top: 10px;
  margin-left: 10px;
  font-style: italic;
  display: block;
}

h9 {
  margin-left: 20px;
  display: block;
}

.masInfo {
  margin-left: 5px;
  margin-right: 15px;
  border: 2px solid;
  border-radius: 50%;
  padding: 1px 3px 1px 2px;
  cursor: pointer;
}