body {
  overflow: hidden;
}

a, button {
  touch-action: manipulation;
}

.disable, .disable:hover {
  cursor: no-drop!important;
  background: #78807d;
}

.background--overlay {
  background: rgba(0,0,0,.05);
}

.background-image-arduino {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('../images/theme/arduino.png');
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.5;
  transform: rotate(40deg) translateY(68vh);
}

#arduino-sketch #content-code {
  margin: 0;
  background: #FFFFFF;
  font-family: monospace,monospace;
  font-size: 1.2em;
  /* padding-left: 10px; */
  height: 100%;
}

#arduino-sketch #content-code li {
  font-family: monospace!important;
  background: inherit;
}

#arduino-sketch {
  overflow: auto;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.important-height-auto {
  height: auto!important;
}

.cd-button-behavior-bg {
  background: rgba(255,255,255,.4);
  transition: background 300ms;
}

.cd-button-behavior-bg:hover {
  background: rgba(255,255,255,1);
}

.menu-bar {
  width: 100%;
  background-color: #F3F3F3;
  overflow: auto;
}

.menu-bar a {
  float: left;
  text-align: center;
  padding: 12px;
  transition: all 0.2s ease;
  color: #666666;
  font-size: 16px;
  background-color: #ECECEC;
}

.blocklyTreeRow:hover,
.menu-bar a:hover {
  cursor: pointer;
}

.blocklyTreeRow {
  padding: 5px 20px 5px 0;
}

.blocklyTreeRow .blocklyTreeLabel:hover {
  cursor: pointer!important;
}

.myLabelStyle > .blocklyFlyoutLabelText {
  font-style: italic!important;
  fill: #161616!important;
}

.blocklyCheckboxLedContainer > rect.blocklyFieldRect {
  width: 14px;
}

.blocklyCheckboxLedContainer--selected > rect.blocklyFieldRect {
  fill: red !important;
  fill-opacity: 1!important; 
}
.blocklyText.blocklyCheckboxLed {
  display: none!important;
  
  /* fill: red !important;
  font-size: 20pt !important; */
}

/* Panel style */
.accordion .a-container .a-panel {
  width: 100%;
  color: #262626;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  height: auto;
  max-height: 0;
  overflow: hidden;
  padding: 0px 10px;
}

/* Panel style when active */
.accordion .a-container.active .a-panel {
  padding: 15px 10px 10px 10px;
  opacity: 1;
  height: auto;
  max-height: 500px;
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.accordion .a-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 5px;
}
.accordion .a-container .a-btn{
  margin: 0;
  position: relative;
  padding: 15px 30px;
  width: 100%;
  color: #bdbdbd;
  font-weight: 400;
  display: block;
  font-weight: 500;
  background-color: #262626;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15),0 10px 10px -5px rgba(0,0,0,.1)!important;
}
.accordion .a-container .a-btn span{
  display: block;
  position: absolute;
  height: 14px;
  width: 14px;
  right: 20px;
  top: 18px;
}
.accordion .a-container .a-btn span:after{
  content: '';
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
}
.accordion .a-container .a-btn span:before{
  content: '';
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel{
    width: 100%;
    color: #262626;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    height: auto;
    max-height: 0;
    overflow: hidden;
    padding: 0px 10px;
}

.accordion .a-container.active .a-btn{
  color: #fff;
}
.accordion .a-container.active .a-btn span::before{
  transform: rotate(0deg);
}

.accordion .a-container.active .a-panel{
  padding: 15px 10px 10px 10px;
  opacity: 1;
  max-height: 500px;
}

.menu-bar a:hover {
  color: #000000;
  text-decoration: none;
}

.menu-bar a.active {
  background-color: #FFFFFF;
  color: #000000;
}

.menu-bar #upload-code-btn {
  margin: 4px 0 4px 4px;
}

.menu-bar #flush-code-btn {
  margin-left: 0;
  margin-right: 15px;
  padding: 0 15px;
}

.blocklyToolboxDiv {
  background-color: #F3F3F3;
}

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}

.header-with-bottom-gradient {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 0;
  height: calc(100vh - 2rem);
  overflow: hidden;
}

.header-with-bottom-gradient .mui-container-fluid {
  overflow: auto;
  max-height: 100%;
  height: 100%;
}

.header-with-bottom-gradient .start-arduino-image {
  position: absolute;
  top: 30vh;
  right: 60%;
  max-width: 40%;
  opacity: 0.4;
  transform: rotate(60deg);
  z-index: -1;
}

.header-gradient-after {
  background-image: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
  background-image: linear-gradient(to right,#ff8a00,#da1b60);
  /* background-image: linear-gradient(to right,#0095ffd9,#1eabb9 48%); */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.header-gradient-after a,
.header-gradient-after a:hover {
  color: #000;
}

.header-gradient-content {
  padding: .4rem 1rem 0.3rem 1rem;
}

.header-gradient-content a img {
  max-height: 16px;
  width: 65px;
}

.header-gradient-content a {
  text-decoration: none;
}

#arduino-connected.active,
#arduino-monitor-connected.active {
  color: lightgreen;
  text-shadow: 1px 0px 0px #888;
}

#current-app-version {
  color: #fff;
}

.tooltip {
  position: relative;
  display: inline-block;
  color: #409CD1;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #409CD1;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 150%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #409CD1 transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.license-info {
  font-size: 11px;
  margin-right: 20px;
}

#messages {
  color: #fff;
  font-style: italic;
  font-size: 10px;
}

a.checkNewVersionLink {
  color: #fff;
  font-style: normal;
  text-decoration: underline;
}
a.checkNewVersionLink:hover {
  color: #ddd
}

#license-container {
  margin-top: 20px;
  margin-bottom: 80px;
}

#license-container .mui-container {
  display: flex;
  align-items: center;
  min-height: 80vh;
}

#license-container .base-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-template-areas:
    "login comercial-buy"
    "login comercial-buy"
    "login comercial-buy"
    "login comercial-buy"
    "login free"
    "login free";
  min-height: 540px;
}
/* TODO media query for small screen */

#license-container .login-panel { grid-area: login; }
#license-container .commercial-buy-panel { grid-area: comercial-buy; }
#license-container .free-panel { grid-area: free; }

#license-container .free-panel,
#license-container .commercial-buy-panel {
  position: relative;
}

#license-container .free-panel .panel--align-space-between,
#license-container .commercial-buy-panel .panel--align-space-between {
  justify-content: space-between;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 30px;
  right: 30px;
}

#license-container .error-message {
  font-style: italic;
}

#checking-license {
  transform: translateY(25vh);
  text-align: center;
}

#form-select-license-modal {
  width: 400px;
  margin: 10% auto;
  padding: 20px;
  background-color: #fff;
}

#project-type-container {
  padding-top: 8vh;
}

.menu-operation {
  padding-top: 25vh;
  font-size: 2rem;
  padding-left: 5%;
  text-shadow: 0px 1px 10px white;
}

.menu-operation li i {
  width: 2.5rem;
}

.menu-operation li:hover span {
  text-decoration: underline;
  cursor: pointer;
}

#project-type-container a {
  text-decoration: none;
  color: #636363;
}

#project-type-container .images-select {
  padding-bottom: 10%;
  overflow: hidden;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: center;
}

#project-type-container .module-image {
  opacity: 0.7;
  position: relative;
  width: 100%;
  height: 50vh;
  max-height: 200px;
  background-position: center!important;
  background-size: contain!important;
  background-repeat: no-repeat!important;
}

#project-type-container .module-image#easy-shield-image {
  background: url('../images/theme/easy-shield-module-v1.png');
}

#project-type-container .module-image#education-board-image {
  background: url('../images/theme/education_board_v1.png');
}

#project-type-container .module-image#car-image {
  background: url('../images/theme/arduino-car.png');
}

#project-type-container .module-image#robot-image {
  background: url('../images/theme/otto.png');
}
#project-type-container .module-image#cdrobot-image {
  background: url('../images/robot.png');
}

#project-type-container .module-image#mbot-image {
  background: url('../images/theme/mbot.png');
}

#project-type-container .module-image#wedo-image {
  background: url('../images/theme/lego-wedo.jpeg');
}

#project-type-container .module-image#arduino-image {
  background: url('../images/theme/arduino.png');
}

#project-type-container .module-image:after,
#project-type-container .module-image:before {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: 100%;
  bottom: -101%;
}

#project-type-container .module-image:after {
  background: inherit;
  transform: scaleY(-1);
}

#project-type-container .module-image:before {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff 50%);
}

@media (max-width: 767px) {
  #project-type-container .module-image:after,
  #project-type-container .module-image:before {
    display: none;
  }
}

#project-type-container .available .module-image {
  transition: all 0.2s;
}

#project-type-container .available:hover .module-image {
  opacity: 1;
}

#project-type-container .disabled h5 {
  position: relative;
}

#project-type-container .disabled h5:after {
  content: "Dostępne wkrótce";
  transform: rotate(-20deg);
  position: absolute;
  top: 100px;
  color: #ffdb56;
  text-shadow: 0px 0 10px #000;
  z-index: 1;
  left: 0;
  right: 0;
  font-size: 2rem;
}

#project-type-container .disabled:hover .module-image {
  opacity: 0.5;
}

#programming-container {
  padding-right: 40px;
  padding-left: 0;
}

#programming-container #board-menu {
  position: absolute;
  top: 80px;
  bottom: 0;
  right: 0;
  left: auto;
  max-width: 40px;
  background: #ECECEC;
  z-index: 100;
  width: 100%;
}

#top-menu .arduino-type-select {
  margin: 0 9px;
  padding-top: 6px;
  position: initial;
}

#top-menu .arduino-type-select legend {
  font-size: .6rem;
}

#top-menu .arduino-type-select select#arudino-type {
  height: 20px;
}

#top-menu .arduino-type-select .mui-select__menu {
  min-width: 0;
  top: 90px!important;
}

#top-menu .mui-btn {
  margin-bottom: 4px;
  margin-top: 4px;
}

body[data-project="otto"] .arduino-type-select .mui-select__menu > div:first-child {
  display: none;
}

#top-menu .board-type-select,
#top-menu .robot-type-select {
  margin: 0 9px;
  padding-top: 6px;
  position: initial;
}

#top-menu .board-type-select .mui-select__menu,
#top-menu .robot-type-select .mui-select__menu{
  min-width: 0;
  top: 90px!important;
}

#programming-container.tutorial #board-menu,
#programming-container.legend #board-menu,
#programming-container.serial #board-menu {
  max-width: 30%;
}

#programming-container.legend,
#programming-container.tutorial,
#programming-container.serial {
  padding-right: 30%;
}

#programming-container.legend .mui-table.mui-table--bordered>tbody>tr>td {
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 0;
}

#programming-container.legend .mui-table>thead>tr>th {
  border-bottom: 0;
}

#programming-container.legend .mui-table>thead {
  border-bottom: 2px solid rgba(0,0,0,.12);
}

#programming-container.monitor #board-menu {
  max-width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#programming-container #board-menu .full-details,
#programming-container #board-menu .serial-port-data {
  display: none;
  max-width: 100%;
  padding: 10px;
  height: calc(100% - 1.3rem);
}

#programming-container #board-menu .tutorial-container,
#programming-container #board-menu .monitor-container {
  display: none;
  max-width: 100%;
  padding: 10px;
  background: #fff;
  overflow: auto;
  height: calc(100% - 1.3rem);
  margin-top: 20px;
  margin-left: 20px;
}

#programming-container #board-menu .tutorial-container {
  margin-top: 0;
  margin-left: 1px;
}

#programming-container #board-menu .tutorial-container h2 {
  margin-top: 0;
}

#programming-container #board-menu .lessons-container .category {
  font-weight: bold;
  border-bottom: 1px solid #aaa;
}

#programming-container #board-menu .lessons-container ol,
#programming-container #board-menu .lessons-container ul {
  padding-inline-start: 20px;
}

#programming-container #board-menu .lessons-container ol > ul,
#programming-container #board-menu .lessons-container ul > ul {
  padding-inline-start: 1em;
}

#programming-container #board-menu .lessons-container .subcategory {
  margin: 0;
}

#programming-container #board-menu .menu {
  width: 40px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  /* border-left: 1px solid #ccc; */
  z-index: 1;
  background: rgb(44,44,44);
  padding-top: 10px;
}

#programming-container #board-menu .menu .icon-container {
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

#programming-container #board-menu .menu .icon-container i {
  font-size: 1.5em;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.6);
}

#programming-container #board-menu .auto-scroll-container {
  max-width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}

#programming-container #board-menu #lesson-toggle {
  margin-top: 30px;
  position: relative;
  display: none;
}

#programming-container #board-menu #lesson-toggle i {
  color: lightseagreen;
}

#programming-container #board-menu .icon-container.notify i:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  right: 8px;
  top: 6px;
}

#programming-container.legend #board-menu #board-legend-toggle i,
#programming-container.serial #board-menu #serial-toggle i,
#programming-container.monitor #board-menu #monitor-toggle i,
#programming-container.tutorial #board-menu #tutorial-toggle i,
#programming-container #board-menu .menu .icon-container:hover i {
  color: #fff;
}

#programming-container #board-menu #tutorial-toggle {
  display: none;
}

#programming-container #settings-toggle {
  position: absolute;
  bottom: 0;
}

#programming-container #board-menu .close-menu {
  position: absolute;
  right: 60px;
  top: 10px;
  font-size: 1.3em;
  cursor: pointer;
  color: #000;
  transition: color 0.2s ease;
}

#programming-container #board-menu #back-programming-btn {
  top: 35px;
  right: 50px;
  position: absolute;
}

#programming-container.tutorial #board-menu .tutorial-container,
#programming-container.monitor #board-menu .monitor-container,
#programming-container.serial #board-menu .serial-port-data,
#programming-container.legend #board-menu .full-details {
  display: block;
  margin-right: 40px;
}

#programming-container.monitor #board-menu .monitor-container {
  padding-right: 15px;
}

#programming-container #board-menu .full-details .board-details {
  margin-left: 40px;
}

#programming-container #board-menu .full-details .board-details .board-name {
  font-style: italic;
}

#programming-container #board-menu .full-details h5 {
  width: 100%;
  text-align: left;
  font-weight: bold;
}

#programming-container #board-menu .full-details .board-image {
  text-align: center;
}

#programming-container #board-menu .full-details .board-image img {
  max-width: 90%;
  max-height: 20vh;
}

#programming-container #board-menu .full-details .table-details-pin li a {
  cursor: pointer;
}

#programming-container #board-menu #text_from_serial_monitor {
  background: #fff;
  border: 1px solid #ccc;
  height: 80%;
  height: calc(100% - 90px);
  margin-top: 0px;
  margin-bottom: 0px;
  overflow: auto;
}

#programming-container #board-menu #form-serial-monitor input {
  background: #fff;
  width: 240px;
}

#programming-container #board-menu #form-serial-monitor label {
  padding-left: 5px;
}

#programming-container #board-menu #form-serial-monitor .send-message {
  margin-bottom: 1px;
  width: 90px;
}

#programming-container #board-menu .mui-table {
  background: #fff;
  height: calc(100% - 20px);
  margin: 0;
}

#programming-container #board-menu .mui-tabs__pane {
  height: 70%;
}

#programming-container #board-menu .table-details-pin {
  position: absolute;
  top: 30%;
  bottom: 0;
  padding-right: 50px;
}

#programming-container #board-menu .table-details-pin thead,
#programming-container #board-menu .table-details-pin tbody,
#programming-container #board-menu .table-details-pin tr,
#programming-container #board-menu .table-details-pin td,
#programming-container #board-menu .table-details-pin th {
  display: block;
  text-align: center;
}

#programming-container #board-menu .table-details-pin td:first-child,
#programming-container #board-menu .table-details-pin th:first-child {
  /* text-align: right; */
  width: 20%;
}

#programming-container #board-menu .table-details-pin td:last-child,
#programming-container #board-menu .table-details-pin th:last-child {
  text-align: left;
}

#programming-container #board-menu .table-details-pin tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

#programming-container #board-menu .table-details-pin thead th {
  /* height: 30px; */
  /*text-align: left;*/
}

#programming-container #board-menu .table-details-pin tbody {
  height: 100%;
  overflow-y: auto;
  background: #fff;
}

#programming-container #board-menu .table-details-pin tbody td,
#programming-container #board-menu .table-details-pin thead th {
  width: 80%;
  padding: 2px 0;
  float: left;
}

#monitor-container .board-image {
  position: relative;
  float: right;
  max-width: 80vh;
}

#monitor-container .board-image img {
  width: 100%;
}

#monitor-container #pin-status,
#monitor-container #pin-description {
  margin-top: 20px;
}

#monitor-container #pin-status input {
  margin: 5px 5px 0 0;
}

#monitor-container #pin-status .buzzer-tone-select {
  display: inline-block;
  margin-right: 10px;
}

#monitor-container #map-elements .element {
  position: absolute;
  border: 3px solid blue;
  box-shadow: 1px 1px 10px lightblue;
}

#monitor-container #map-elements .element.selected,
#monitor-container #map-elements .element:hover {
  border-color: lightgreen;
  border-width: 4px;
}

#monitor-container #pin-state-value {
  background: #f8f8f8;
  border: 1px solid #888;
  width: 64px;
  padding: 5px;
  float: left;
  display: block;
  margin: 6px 5px 6px 0;
}

#monitor-container .details-panel {
  min-height: 50vh;
  max-width: 700px;
}

#monitor-container .top-information {
  padding-bottom: 20px;
}

#state-rgb-led-widget .blocklyColourTable tr>td>div {
  border: 1px solid #666;
  height: 13px;
  width: 15px;
}

#widget-containers .single-widget {
  display: none;
}

#widget-containers.show-011 #state-rgb-led-widget {
  display: block;
}

/* MODAL */
.mui-ovelay .message {
  white-space: pre-wrap;
  overflow: auto;
}

/* Banners */
.banner-background {
  background-color: #313856;
  box-shadow: 0px 0px 10px rgba(0,0,0,.3);
  height: 80px;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-template-columns: min-content;
}

.banner-background img {
  max-height: 100%;
  padding: 10px;
}

.banner-background .canvas-banner {
  position: relative;
  height: 80px;
  overflow: hidden;
}

@keyframes slidy {
  0% { left: 0%; }
  8% { left: 0%; }
  10% { left: -33%; }
  28% { left: -33%; }
  30% { left: -67%; }
  48% { left: -67%; }
  50% { left: -100%; }
  68% { left: -100%; }
  70% { left: -133%; }
  88% { left: -133%; }
  90% { left: -166%; }
  98% { left: -166%; }
  100% { left: -200%; }
}

div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}

div.slider {
  position: relative;
  width: 300%;
  animation: 30s slidy infinite;
  display: flex;
  justify-content: space-between;
  margin: 0;
  will-change: left;
}

div.slider > div {
  width: 100px;
  height: auto;
  display: inline-block;
  position: inherit;
  margin: 0 auto;
  text-align: center;
}

div.slider img {
  width: auto;
  height: 60px;
}

.blocklyToolboxDiv .blocklyTreeIcon:not(.blocklyTreeIconClosed):not(.blocklyTreeIconOpen) {
  display: none !important;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow {
  position: relative;
  border: 0 none !important;
  padding-left: 10px!important;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow.blocklyTreeSelected {
  background-color: #e4e4e4!important;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow.blocklyTreeSelected:hover {
  background-color: #ccc!important;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow > .blocklyTreeRowContentContainer >.blocklyTreeIconClosed {
  transform: scaleX(-1);
  background-position: -32px -1px
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow> .blocklyTreeRowContentContainer {
  display: inline-block;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow> .blocklyTreeRowContentContainer >.blocklyTreeIconClosed,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow> .blocklyTreeRowContentContainer >.blocklyTreeIconOpen {
  position: absolute;
  right: 3px;
  top: 9px;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow.blocklyTreeSelected > .blocklyTreeRowContentContainer > .blocklyTreeIconOpen {
  background-position: -16px -1px;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow.blocklyTreeSelected .blocklyTreeLabel {
  color: inherit;
}

.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  width: 28px;
  text-align: center;
  font-size: 1.3em;
}

/** base arduino */
.blocklyToolboxDiv .cat-data[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__dane']:before {
  content: "\f1c0";
  color: rgb(89, 192, 89);
}

.blocklyToolboxDiv .cat-control[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__kontrola']:before {
  content: "\f11b";
  color: rgb(255, 171, 25);
  font-size: 1.6em;
}

.blocklyToolboxDiv .cat-components[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__komponenty']:before {
  content: "\f1b3";
  /* content: "\f2db"; */
  color: rgb(230, 52, 98);
  font-size: 1.6em;
}

.blocklyToolboxDiv .cat-sensors[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__czujniki']:before {
  content: "\f7c0";
  color: rgb(92, 177, 214);
  font-size: 1.6em;
}

.blocklyToolboxDiv .cat-communication[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__wej-cie-wyj-cie']:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__komunikacja']:before {
  content: "\f362";
  color: rgb(4, 56, 167);
  font-size: 1.6em;
}

.blocklyToolboxDiv .cat-configuration[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__konfiguracja']:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__konfiguracje']:before {
  content: "\f7d9";
}
/** end base arduino */
.blocklyToolboxDiv .cat-buildin[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__elementy-wbudowane']:before {
  content: "\f126";
  color: rgb(92, 177, 214);
  font-size: 1.6em;
}

.blocklyToolboxDiv .cat-leds[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__sygnalizacja']:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__diody']:before {
  content: "\f0eb";
  color: rgb(230, 52, 98);
}

.blocklyToolboxDiv .cat-sounds[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__d-wi-ki']:before {
  content: "\f001";
  /* content: "\f0f3";*/
  /* content: "\f0a1"; */
  color: rgb(189, 66, 189);
}

.blocklyToolboxDiv .cat-action[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__zdarzenia']:before {
  content: "\f245";
  color: rgb(200, 131, 48);
}

.blocklyToolboxDiv .cat-expression[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__wyra-enia']:before {
  content: "\f1ec";
  color: rgb(89, 192, 89);
}

/* cat-messages chyba nie ma w projekcie */
.blocklyToolboxDiv .cat-messages[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__wiadomo-ci']:before {
  content: "\f362";
  color: rgb(166, 128, 91);
}

.blocklyToolboxDiv .cat-servo[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__servo-silniki']:before {
  content: "\f4de";
  color: rgb(184, 130, 0);
}

.blocklyToolboxDiv .cat-screen[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__wy-wietlanie']:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__wy-wietlacz']:before {
  content: "\f108";
  color: #8e8686;
}

/* prawdopodobnie nie ma */
.blocklyToolboxDiv .cat-ir-sensor[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__odbiornik-irda']:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__odbiornik-ir']:before {
  content: "\f62e";
  transform: rotate(90deg);
  font-size: 1em;
}

.blocklyToolboxDiv .cat-temp[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__temp-wilgo-']:before {
  content: "\f2c9";
  color: rgb(92, 177, 214);
}

/* prawdopodobnie nie ma */
.blocklyToolboxDiv .cat-bluetooth[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__bluetooth']:before {
  font-family: 'Font Awesome 5 Brands';
  content: "\f293";
  color: rgb(4, 56, 167);
}

.blocklyToolboxDiv .cat-variable[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__zmienne']:before {
  content: "\f133";
  transform: scaleY(.6);
  color: rgb(92, 177, 214);
  font-size: 1.6em;
}

.blocklyToolboxDiv .cat-function[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__funkcje']:before {
  content: "\f542";
  color: rgb(153, 91, 166);
}

.blocklyToolboxDiv .cat-move[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__otto']:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__ruch']:before {
  content: "\f70c";
  color: #d17bd1;
}

.blocklyToolboxDiv .cat-message[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__tekst']:before {
  content: "\f031";
  color: #8cc1af;
}

.blocklyToolboxDiv .cat-list[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__listy']:before {
  content: "\f03a";
}

.blocklyToolboxDiv .cat-led-matrix[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__usta-led-matrix']:before {
  content: "\f00a";
  color: #6e5ba6;
}

.blocklyToolboxDiv .cat-lcd-screen[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__wy-wietlacz-lcd']:before {
  content: "\f240";
  color: rgb(147, 91, 166);
}

.blocklyToolboxDiv .cat-control2[aria-level="0"] > .blocklyTreeRow:before,
.blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__sterowanie']:before {
  content: "\f04e";
  color: rgb(92, 177, 214);
}

[data-project="mbot"] .blocklyToolboxDiv .cat-move[aria-level="0"] > .blocklyTreeRow:before,
[data-project="mbot"] .blocklyToolboxDiv [aria-level="0"] > .blocklyTreeRow[data-id='toolbox__ruch']:before {
  content: "\f70c";
  color: #4A90E2;
}
[data-project="mbot"] .blocklyCheckboxLedContainer--selected > rect.blocklyFieldRect {
  fill: #0fc0ff !important;
}

.hidden-modal {
  position: absolute;
  z-index: 100000002;
  top: 0;
  left: 0;
  right: 0;
}

#settings-modal {
  width: 900px;
  height: 70vh;
  max-width: 90vw;
  min-width: 45vw;
  margin: 7rem auto 0;
  padding-top: 0;
  padding-bottom: 0;
}

#settings-modal .modal-header {
  border-bottom: 1px solid lightgray;
  height: 40px;
  position: relative;
  background-color: #409CD1;
  color: #fff;
  box-shadow: 0 1px 8px #ccc;
}

#settings-modal .modal-header .close-modal {
  position: absolute;
  top: 0;
  right: 0;
  height: 39px;
  margin: 0;
  background-color: #278ac3;
  border-radius: 0;
  box-shadow: 0 0 0;
  color: #fff;
  font-size: 16px;
}

#settings-modal .modal-header h2 {
  margin-top: 5px;
  margin-left: 15px;
  font-size: 20px;
}

#settings-modal > .modal-body {
  height: calc(100% - 41px);
}

#settings-modal .settings-nav {
  height: 100%;
  padding: 15px 0 0;
  background-color: #F5F5F5;
}

#settings-modal .settings-content {
  padding: 10px 15px;
  height: 100%;
  overflow: auto;
}

#settings-modal .settings-content h5 {
  font-weight: bold;
}

#settings-modal .button-edit-container {
  padding-right: 0;
}

#settings-modal .settings-nav > .mui-tabs__bar > li {
  display: block;
  /* border-bottom: 2px solid white; */
}

#settings-modal .settings-nav > .mui-tabs__bar > li a {
  padding: 0 0 0 18px;
  color: #585C65;
  text-transform: unset;
  font-size: 1rem;
}

#settings-modal .settings-nav > .mui-tabs__bar>li.mui--is-active {
  border-bottom: 0 none;
}

#settings-modal .settings-nav > .mui-tabs__bar > li a:hover {
  cursor: pointer;
  background-color: #ddd;
}

#settings-modal .settings-nav > .mui-tabs__bar > li.mui--is-active a {
  color: #000;
  font-weight: bold;
}

#settings-modal .settings-nav > .mui-tabs__pane.mui--is-active {
  padding: 15px 0;
}

/* #settings-modal .mui-tabs__bar > li.mui--is-active { */
  /* border-bottom: 2px solid #2196F3; */
/* } */

#settings-modal img.user-avatar {
  border-radius: 50%;
  box-shadow: -4px 6px 19px #ccc;
  max-width: 60px;
}

#settings-modal .user-name {
  font-weight: bold;
}

#settings-modal .user-email {
  font-style: italic;
}

#settings-modal .license-key-container {
  margin-top: 10px;
}

.person-user #settings-modal .license-key-container {
  display: none;
}

#settings-modal .user-license {
  margin-bottom: 10px;
}

#settings-modal .app-license {
  font-weight: bold;
}

#settings-modal .license-type {
  background-color: #ccc;
  display: inline-block;
  padding: 2px 12px;
  border-radius: 10px;
  color: #fff;
  font-style: italic;
  margin-top: 4px;
}

#settings-modal .license-group-current {
  display: inline-block;
}

#settings-modal .mui-panel--account span.licensekey {
  font-weight: bold;
  font-style: italic;
}

#settings-modal #school-info .admin-email {
  font-style: italic;
  font-weight: bold;
}

#settings-modal .field-message--info,
#settings-modal .field-message--error {
  margin-top: -18px;
  font-size: 12px;
}

#settings-modal .field-message--info {
  color: lightslategrey;
  font-style: italic;
}

#settings-modal .mui-select .field-message--info,
#settings-modal .mui-select .field-message--error {
  margin-top: 0;
}

#settings-modal #support a {
  cursor: pointer;
}

#settings-modal .license-admin {
  margin-top: 3rem;
}

#settings-modal .avatars-list {
  margin-bottom: 10px;
}

#settings-modal .avatars-list img {
  max-width: 100%;
  max-height: 56px;
  border: 4px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

#settings-modal .avatars-list img.selected {
  border: 4px solid orange;
}

/* VISIBILITY of container */
.license-free #settings-modal #other-devices,
.license-free #settings-modal #school-info {
  display: none;
}

.license-pro-profit:not(.person-teacher) #settings-modal #other-devices,
.license-pro-profit:not(.person-teacher) #settings-modal #unsafe-zone,
.license-pro:not(.person-teacher) #settings-modal #other-devices,
.license-pro:not(.person-teacher) #settings-modal #unsafe-zone,
.license-pro-edu:not(.person-teacher) #settings-modal #other-devices,
.license-pro-edu:not(.person-teacher) #settings-modal #unsafe-zone {
  display: none;
}

.person-teacher #settings-modal .license-admin {
  display: none;
}

.person-user .mui-panel--additionals,
.person-user.license-pro #settings-modal #pane-account .pro-fields-visible,
.license-free #settings-modal #pane-account .pro-fields-visible,
.person-user #settings-modal .settings-nav > .mui-tabs__bar > li.pane-groups,
.person-user #settings-modal .settings-nav > .mui-tabs__bar > li.pane-lessons,
.license-free #settings-modal  .settings-nav > .mui-tabs__bar > li.pane-groups {
  display: none;
}

#settings-modal .mui-panel--account .default-view-container {
  display: block;
}

#settings-modal .teacher-form,
#settings-modal .simple-user-form {
  display: none;
}

.person-user #settings-modal .simple-user-form {
  display: block;
}

.person-teacher #settings-modal .teacher-form,
.person-teacher #settings-modal .simple-user-form {
  display: block;
}

.person-user #settings-modal #change-school-description {
  display: none;
}

#settings-modal #pane-account .school-logo {
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
}

#settings-modal .view-current-user-edit-form #school-info,
#settings-modal .view-current-user-edit-form .mui-panel--additionals,
#settings-modal .view-current-user-edit-form .mui-panel--account,
#settings-modal .view-current-user-edit-form #other-devices,
#settings-modal .view-current-user-edit-form #support.mui-row,
#settings-modal .view-current-user-edit-form #unsafe-zone {
  display: none;
}

#settings-modal .view-license-edit-form .mui-panel--additionals,
#settings-modal .view-license-edit-form .mui-panel--account,
#settings-modal .view-license-edit-form #school-info,
#settings-modal .view-license-edit-form #other-devices,
#settings-modal .view-license-edit-form #support.mui-row,
#settings-modal .view-license-edit-form #unsafe-zone {
  display: none;
}

#settings-modal .mui-panel--account .change-account-container,
#settings-modal .edit-view-container,
#settings-modal .edit-license-view-container {
  display: none;
}

.person-user #settings-modal .mui-panel--account .user-license,
.person-user #settings-modal .mui-panel--account .license-type {
  display: none;
}

#settings-modal .view-current-user-edit-form .edit-view-container {
  display: block;
}

#settings-modal .view-license-edit-form .edit-license-view-container {
  display: block;
}

#settings-modal .view-relogin .default-view-container,
#settings-modal .view-relogin .edit-view-container,
#settings-modal .view-relogin #school-info,
#settings-modal .view-relogin #other-devices,
#settings-modal .view-relogin #support.mui-row,
#settings-modal .view-relogin #unsafe-zone {
  display: none;
}

#settings-modal .view-relogin .mui-panel--account .change-account-container {
  display: block;
}

#settings-modal #unsafe-zone {
  margin-top: 1.8rem;
}

#settings-modal .confirm-delete {
  text-align: right;
  display: none;
}

#settings-modal .confirm-delete .title-confirm {
  font-weight: bold;
  font-style: italic;
}

#settings-modal .confirm-delete .confirm-message {
  margin-top: -10px;
  margin-bottom: 4px;
}

#settings-modal .confirm-delete .mui-btn--danger {
  height: 20px;
  line-height: 20px;
}

#settings-modal .confirm-delete .mui-btn--raised {
  background: #EDEDED;
}

#settings-modal #pane-lessons .active-lesson {
  margin-bottom: 20px;
  margin-top: 20px;
}

#settings-modal #pane-lessons .mui-select__menu {
  top: 0!important;
}

#settings-modal #pane-lessons .mui-table {
  margin-top: 30px;
  border-spacing: 0;
}

#settings-modal #pane-lessons .mui-table .mui-btn {
  padding: 0 10px;
  margin: 0;
}

#settings-modal #pane-lessons .mui-table>thead>tr>th {
  border: 0 none;
  white-space: nowrap;
  font-size: 14px;
  padding: 10px 5px;
}

#settings-modal #pane-lessons .mui-table tr.lesson-disabled a {
  color: grey;
}

#settings-modal #pane-lessons .mui-table tr.lesson-disabled a,
#settings-modal #pane-lessons .mui-table tr.lesson-disabled button {
  cursor: not-allowed;
}

#settings-modal #pane-lessons table th:nth-child(n+2),
#settings-modal #pane-lessons table td:nth-child(n+2) {
  text-align: center;
}

#settings-modal #pane-lessons table tbody tr:nth-child(2n+1){
  background-color: #F5F4FF;
}

#settings-modal .active-lesson {
  margin-bottom: 20px;
}

#pane-groups .view-teams-all--show,
#pane-groups .view-teams-add--show,
#pane-groups .view-teams-edit--show,
#pane-groups .view-teams-view--show,
#pane-groups .view-user-add--show,
#pane-groups .view-user-edit--show,
#pane-groups .view-user-view--show {
  display: none;
}

#pane-groups.view-teams-all .view-teams-all--show {
  display: inherit;
}

#pane-groups .top-bar--category-group {
  margin-bottom: 10px;
}

#pane-groups .refresh-link {
  margin-left: 10px;
}

.list-view-container .list-container,
#pane-groups .groups-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

#pane-groups.view-teams-all .groups-list {
  text-align: center;
}

#pane-groups.view-teams-all .groups-list .team-item {
  cursor: pointer;
  margin-bottom: 0;
}

#pane-groups.view-teams-all .groups-list .team-item:hover {
  background-color: #efefef;
}

#pane-groups .groups-list .add-new-group i {
  font-size: 3em;
  margin: 10px;
}

#pane-groups.view-teams-add .view-teams-add--show {
  display: inherit;
}

#pane-groups.view-teams-edit .view-teams-edit--show {
  display: inherit;
}

#pane-groups.view-teams-view .view-teams-view--show {
  display: inherit;
}

#pane-groups.view-user-edit .view-user-edit--show {
  display: inherit;
}

#pane-groups.view-user-add .view-user-add--show {
  display: inherit;
}

#pane-groups.view-user-view .view-user-view--show {
  display: inherit;
}

#pane-groups[data-team="null"] .button--change-role,
#pane-groups[data-team="null"] .view-teams-view--show .view-action-buttons,
#pane-groups[data-team="0"] .button--change-role,
#pane-groups[data-team="0"] .view-teams-view--show .view-action-buttons {
  display: none;
}

#pane-groups .view-action-buttons {
  text-align: right;
}

#pane-groups .groups-list .user-item {
  font-size: 10px;
  margin-bottom: 0;
  cursor: pointer;
  position: relative;
}

#pane-groups .groups-list .user-item:hover {
  background-color: #efefef;
}

#settings-modal .user-details img,
#pane-groups .groups-list .user-item img {
  max-width: 90%;
  border-radius: 10px;
  box-shadow: 1px 1px 3px #444;
  background-color: #efefef;
  min-width: 60px;
  min-height: 60px;
}

#settings-modal .user-details img {
  max-height: 100px;
}

#pane-groups .groups-list .user-item h5 {
  line-height: 1em;
  margin-top: 0;
}

#pane-groups .groups-list .user-item.add-new-teacher,
#pane-groups .groups-list .user-item.add-new-user {
  text-align: center;
  display: inline-grid;
  font-size: 1em;
  align-items: center;
}

#pane-groups #students-list {
  margin-top: 20px;
}

#pane-groups #students-list h5.title {
  margin-top: 30px;
}

.mui-panel--additionals .list-view-container,
.mui-panel--additionals .add-view-container,
#pane-account.view-additional-list .mui-panel--additionals .default-view-container,
#pane-account.view-additional-add .mui-panel--additionals .default-view-container,
#pane-account.view-additional-list .default-view-container,
#pane-account.view-additional-add .default-view-container,
#pane-account.view-additional-list .edit-view-container,
#pane-account.view-additional-add .edit-view-container,
#pane-account.view-additional-list .mui-panel--account,
#pane-account.view-additional-add .mui-panel--account,
#pane-account.view-additional-list #school-info,
#pane-account.view-additional-add #school-info,
#pane-account.view-additional-list #support.mui-row,
#pane-account.view-additional-add #support.mui-row,
#pane-account.view-additional-list #unsafe-zone,
#pane-account.view-additional-add #unsafe-zone {
  display: none;
}

#pane-account.view-additional-add .mui-panel--additionals .add-view-container,
#pane-account.view-additional-list .mui-panel--additionals .list-view-container {
  display: block
}

.list-view-container .list-container.additional-list {
  grid-template-columns: repeat(2, 1fr);
}

.list-view-container .list-container.additional-list .mui-panel {
  text-align: center;
  display: inline-grid;
  font-size: 1em;
  align-items: center;
  margin: 0;
}

.list-view-container .list-container.additional-list .mui-panel.add-new-additional {
  cursor: pointer;
}

.list-view-container .list-container.additional-list .mui-panel.add-new-additional:hover {
  opacity: 0.6;
}

.list-view-container .list-container.additional-list .mui-panel .fa {
  font-size: 2em;
}

.list-view-container .list-container.additional-list .mui-panel:hover .fa {
  font-size: 2em;
}

.additionals-breadcrumbs ul,
.panel-breadcrumbs ul {
  list-style: none;
  padding: 0;
}

.additionals-breadcrumbs ul li,
.panel-breadcrumbs ul li {
  display: inline;
}

.panel-breadcrumbs ul li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

.panel-breadcrumbs ul li a {
  color: black;
  text-decoration: none;
}

.panel-breadcrumbs ul li a:hover {
  color: #01447e;
  text-decoration: underline;
}

body[data-project="wedo"] #top-menu,
body[data-project="wedo"] #serial-toggle,
body[data-project="wedo"] #board-legend-toggle {
  display: none;
}

body[data-project="wedo"] #programming-container {
  background: url('../images/theme/lego-wedo-zestaw.jpg');
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
}

body[data-project="wedo"] #content-blocks {
  background-color: rgba(255,255,255,0.7);
}

body[data-project="wedo"] #content-blocks:after {
  content: '';
}

body[data-project="wedo"] #content-blocks .injectionDiv {
  display: none;
}

#content-blocks,
#code-sketch {
  position: relative;
  height: 100%;
  width: 100%;
}


#content-blocks #alternative-button-container {
  display: none;
}

#content-blocks #content-lesson-web {
  display: none;
}

#code-sketch pre {
  margin: 0;
  height: 100%;
  overflow: auto;
  padding: 0 10px;
}

.wedo-settings {
  display: none;
}

body[data-project="wedo"] #content-blocks #alternative-button-container {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #00963E;
  padding: 14px 14px;
  border-radius: 8px;
  width: 10%;
  text-align: center;
  max-width: 240px;
  min-width: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  box-shadow: 0px 3px 20px #888;
  transition: background 0.2s;
  cursor: pointer;
  z-index: 1;
}

body[data-project="wedo"] #content-blocks #content-lesson-web {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
}

body[data-project="wedo"] #content-blocks #alternative-button-container:hover {
  background: #04b74e;
}

body[data-project="wedo"] .wedo-settings {
  display: initial;
}

#programming-container #board-menu #video-toggle {
  display: none;
}

#video-modal {
  width: 30%;
  height: 30%;
  margin: 50vh 5rem 0 auto;
  padding: 0;
  position: absolute;
  z-index: 1;
  background: rgb(0,0,0);
  user-select: none;
}

#video-modal .navigation-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 2;
  opacity: 0;
}

#video-modal i.fa-compress-alt {
  display: none;
}
#video-modal.fullsize i.fa-compress-alt {
  display: initial;
}
#video-modal.fullsize i.fa-expand-alt {
  display: none;
}

#video-modal.fullsize {
  width: auto!important;
  height: auto!important;
  top: 77px !important;
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
}

#video-modal.fullsize .resize-container {
  display: none!important;
}

#video-modal .resize-container {
  opacity: 0;
  height: 15px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

#video-modal .modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
}

#video-modal .modal-header:active {
  cursor: move;
}

#video-modal.fullsize .modal-header {
  cursor: default;
}

#video-modal .navigation-video .buttons {
  margin-top: 2px;
  margin-right: 2px;
}

#video-modal .resizer {
  width: 13px;
  height: 13px;
  z-index: 2;
  position: absolute;
  bottom: 2px;
  border-bottom: 1px solid black;
}

#video-modal .resizer.resizer--right {
  right: 2px;
  border-right: 1px solid black;
  cursor: se-resize;
}

#video-modal .resizer.resizer--left {
  left: 2px;
  border-left: 1px solid black;
  cursor: sw-resize;
}

#video-modal .resizer.resizer--right i {
  transform: rotate(45deg);
  position: absolute;
}

#video-modal .resizer.resizer--left i {
  transform: rotate(-45deg);
  position: absolute;
}

#video-modal .webcam-cover,
#video-modal .display-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

#video-modal .webcam-cover {
  display: none;
  height: 100%;
  width: 100%;
}

#video-modal .webcam-cover webview {
  height: 100%;
  width: 100%;
}

#video-modal video {
  width: 100%;
  height: 100%;
}

#video-modal .video-options {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;
}

#video-modal .navigation-video .video-options,
#video-modal .navigation-video .buttons {
  display: none;
}

#video-modal.show-controls .resize-container,
#video-modal.show-controls .navigation-video {
  opacity: 1;
}

#video-modal.show-controls .navigation-video .video-options,
#video-modal.show-controls .navigation-video .buttons,
#video-modal.show-controls .resize-container .resizer {
  display: block;
}

body.license-pro #programming-container #board-menu #lesson-toggle,
body.license-pro #programming-container #board-menu #video-toggle,
body.license-pro-edu #programming-container #board-menu #lesson-toggle,
body.license-pro-edu #programming-container #board-menu #video-toggle,
body.license-pro-profit #programming-container #board-menu #lesson-toggle,
body.license-pro-profit #programming-container #board-menu #video-toggle {
  display: block;
}

.notify__close svg {
  width: 16px;
}

.notifications-container {
  max-width: 240px !important;
  bottom: 40px !important;
}

.notifications-container .notify {
  padding: 5px;
}