/* Taken from micro::bit makecode editor inline styles */

.pxt-renderer.classic-theme .blocklyText,
.pxt-renderer.classic-theme .blocklyFlyoutLabelText {
font: 600 12pt "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "source-code-pro", monospace;
}
.pxt-renderer.classic-theme .blocklyTextInputBubble textarea {
font-weight: normal;
}
.pxt-renderer.classic-theme .blocklyText {
fill: #fff;
}
.pxt-renderer.classic-theme .blocklyNonEditableField>rect:not(.blocklyDropdownRect),
.pxt-renderer.classic-theme .blocklyEditableField>rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pxt-renderer.classic-theme .blocklyNonEditableField>text,
.pxt-renderer.classic-theme .blocklyEditableField>text,
.pxt-renderer.classic-theme .blocklyNonEditableField>g>text,
.pxt-renderer.classic-theme .blocklyEditableField>g>text {
fill: #575E75;
}
.pxt-renderer.classic-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pxt-renderer.classic-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled)
 .blocklyEditableField:not(.blocklyEditing):hover>rect,
.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled)
 .blocklyEditableField:not(.blocklyEditing):hover>.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pxt-renderer.classic-theme .blocklyHtmlInput {
font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "source-code-pro", monospace;
font-weight: 600;
color: #575E75;
}
.pxt-renderer.classic-theme .blocklyDropdownText {
fill: #fff !important;
}
.pxt-renderer.classic-theme.blocklyWidgetDiv .blocklyMenuItem,
.pxt-renderer.classic-theme.blocklyDropDownDiv .blocklyMenuItem {
font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "source-code-pro", monospace;
}
.pxt-renderer.classic-theme.blocklyDropDownDiv .blocklyMenuItemContent {
color: #fff;
}
.pxt-renderer.classic-theme .blocklyHighlightedConnectionPath {
stroke: #fff200;
}
.pxt-renderer.classic-theme .blocklyDisabledPattern > .blocklyOutlinePath {
fill: var(--blocklyDisabledPattern)
}
.pxt-renderer.classic-theme .blocklyInsertionMarker>.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.pxt-renderer.classic-theme .blocklySelected>.blocklyPath.blocklyPathSelected {
fill: none;
filter: var(--blocklySelectedGlowFilter);
}
.pxt-renderer.classic-theme .blocklyReplaceable>.blocklyPath {
filter: var(--blocklyReplacementGlowFilter);
}
.pxt-renderer.classic-theme .blocklyConnectionIndicator, .pxt-renderer.classic-theme .blocklyInputConnectionIndicator {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 3px;
}
.pxt-renderer.classic-theme .blocklyConnectionIndicator {
display: none;
}
.pxt-renderer.classic-theme .blocklyBlockDragSurface > g > .blocklyDraggable > .blocklyConnectionIndicator {
display: block;
}
.pxt-renderer.classic-theme .blocklyConnectionLine {
stroke: #ffff00;
stroke-width: 4px;
}
.pxt-renderer.classic-theme .blocklyConnectionLine.hidden {
display: none;
}
.pxt-renderer.classic-theme .blocklyFlyoutHeading .blocklyFlyoutLabelText {font-size: 1.5rem;
}

/* Taken from the Micro::bit makecode editor, inline styles 
 * Also available at https://github.com/google/blockly/blob/f37e7fede20ed81237f65626cdb1dd20c8f6d5e3/core/css.ts#L61
 * */

.blocklySvg {
  background-color: #fff;
  outline: none;
  overflow: hidden;  /* IE overflows by default. */
  position: absolute;
  display: block;
}

.blocklyWidgetDiv {
  display: none;
  position: absolute;
  z-index: 99999;  /* big value for bootstrap3 compatibility */
}

.injectionDiv {
  height: 100%;
  position: relative;
  overflow: hidden;  /* So blocks in drag surface disappear at edges */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
  transition: transform .5s;
}

.blocklyEmboss {
  filter: var(--blocklyEmbossFilter);
}

.blocklyTooltipDiv {
  background-color: #ffffc7;
  border: 1px solid #ddc;
  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
  color: #000;
  display: none;
  font: 9pt sans-serif;
  opacity: .9;
  padding: 2px;
  position: absolute;
  z-index: 100000;  /* big value for bootstrap3 compatibility */
}

.blocklyDropDownDiv {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  border: 1px solid;
  border-color: #dadce0;
  background-color: #fff;
  border-radius: 2px;
  padding: 4px;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}

.blocklyDropDownDiv:focus {
  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}

.blocklyDropDownContent {
  max-height: 300px;  /* @todo: spec for maximum height. */
}

.blocklyDropDownArrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  z-index: -1;
  background-color: inherit;
  border-color: inherit;
  border-top: 1px solid;
  border-left: 1px solid;
  border-top-left-radius: 4px;
  border-color: inherit;
}

.blocklyHighlighted>.blocklyPath {
  filter: var(--blocklyEmbossFilter);
}

.blocklyHighlightedConnectionPath {
  fill: none;
  stroke: #fc3;
  stroke-width: 4px;
}

.blocklyPathLight {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1;
}

.blocklySelected>.blocklyPathLight {
  display: none;
}

.blocklyDraggable {
  cursor: grab;
  cursor: -webkit-grab;
}

.blocklyDragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  /* Drag surface disables events to not block the toolbox, so we have to
   * reenable them here for the cursor values to work. */
  pointer-events: auto;
}

  /* Changes cursor on mouse down. Not effective in Firefox because of
     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.blocklyDragging.blocklyDraggingDelete {
  cursor: url("https://cdn.makecode.com/commit/16d9232e651b69604b348704da307b4075b2e5d5/blockly/media/handdelete.cur"), auto;
}

.blocklyDragging>.blocklyPath,
.blocklyDragging>.blocklyPathLight {
  fill-opacity: .8;
  stroke-opacity: .8;
}

.blocklyDragging>.blocklyPathDark {
  display: none;
}

.blocklyDisabledPattern>.blocklyPath {
  fill: var(--blocklyDisabledPattern);
  fill-opacity: .5;
  stroke-opacity: .5;
}

.blocklyDisabled>.blocklyPathLight,
.blocklyDisabled>.blocklyPathDark {
  display: none;
}

.blocklyInsertionMarker>.blocklyPath,
.blocklyInsertionMarker>.blocklyPathLight,
.blocklyInsertionMarker>.blocklyPathDark {
  fill-opacity: .2;
  stroke: none;
}

.blocklyNonEditableField>text {
  pointer-events: none;
}

.blocklyFlyout {
  position: absolute;
  z-index: 20;
}

.blocklyText text {
  cursor: default;
}

/*
  Don't allow users to select text.  It gets annoying when trying to
  drag a block and selected text moves instead.
*/
.blocklySvg text {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  cursor: inherit;
}

.blocklyIconGroup {
  cursor: default;
}

.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
  opacity: .6;
}

.blocklyIconShape {
  fill: #00f;
  stroke: #fff;
  stroke-width: 1px;
}

.blocklyIconSymbol {
  fill: #fff;
}

.blocklyMinimalBody {
  margin: 0;
  padding: 0;
  height: 100%;
}

.blocklyHtmlInput {
  border: none;
  border-radius: 4px;
  height: 100%;
  margin: 0;
  outline: none;
  padding: 0;
  width: 100%;
  text-align: center;
  display: block;
  box-sizing: border-box;
}

/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.blocklyMainBackground {
  stroke-width: 1;
  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
}

.blocklyMutatorBackground {
  fill: #fff;
  stroke: #ddd;
  stroke-width: 1;
}

.blocklyFlyoutBackground {
  fill: #ddd;
  fill-opacity: .8;
}

.blocklyMainWorkspaceScrollbar {
  z-index: 20;
}

.blocklyFlyoutScrollbar {
  z-index: 30;
}

.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
  position: absolute;
  outline: none;
}

.blocklyScrollbarBackground {
  opacity: 0;
  pointer-events: none;
}

.blocklyScrollbarHandle {
  fill: #ccc;
}

.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
  fill: #bbb;
}

/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
  fill: #bbb;
}

.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
  fill: #aaa;
}

.blocklyInvalidInput {
  background: #faa;
}

.blocklyVerticalMarker {
  stroke-width: 3px;
  fill: rgba(255,255,255,.5);
  pointer-events: none;
}

.blocklyComputeCanvas {
  position: absolute;
  width: 0;
  height: 0;
}

.blocklyNoPointerEvents {
  pointer-events: none;
}

.blocklyContextMenu {
  border-radius: 4px;
  max-height: 100%;
}

.blocklyDropdownMenu {
  border-radius: 2px;
  padding: 0 !important;
}

.blocklyDropdownMenu .blocklyMenuItem {
  /* 28px on the left for icon or checkbox. */
  padding-left: 28px;
}

/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
  /* Flip left/right padding for BiDi. */
  padding-left: 5px;
  padding-right: 28px;
}

.blocklyWidgetDiv .blocklyMenu {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
  font: normal 13px Arial, sans-serif;
  margin: 0;
  outline: none;
  padding: 4px 0;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
}

.blocklyWidgetDiv .blocklyMenu:focus {
  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}

.blocklyDropDownDiv .blocklyMenu {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
  outline: none;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
}

/* State: resting. */
.blocklyMenuItem {
  border: none;
  color: #000;
  cursor: pointer;
  list-style: none;
  margin: 0;
  /* 7em on the right for shortcut. */
  min-width: 7em;
  padding: 6px 15px;
  white-space: nowrap;
}

/* State: disabled. */
.blocklyMenuItemDisabled {
  color: #ccc;
  cursor: inherit;
}

/* State: hover. */
.blocklyMenuItemHighlight {
  background-color: rgba(0,0,0,.1);
}

/* State: selected/checked. */
.blocklyMenuItemCheckbox {
  height: 16px;
  position: absolute;
  width: 16px;
}

.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
  background: url(https://cdn.makecode.com/commit/16d9232e651b69604b348704da307b4075b2e5d5/blockly/media/sprites.png) no-repeat -48px -16px;
  float: left;
  margin-left: -24px;
  position: static;  /* Scroll with the menu. */
}

.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
  float: right;
  margin-right: -24px;
}

.blocklyMenuSeparator {
  background-color: #ccc;
  height: 1px;
  border: 0;
  margin-left: 4px;
  margin-right: 4px;
}

.blocklyBlockDragSurface, .blocklyAnimationLayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible !important;
  z-index: 80;
  pointer-events: none;
}

.blocklyField {
  cursor: default;
}

.blocklyInputField {
  cursor: text;
}

.blocklyDragging .blocklyField,
.blocklyDragging .blocklyIconGroup {
  cursor: grabbing;
}

.blocklyActiveFocus:is(
  .blocklyFlyout,
  .blocklyWorkspace,
  .blocklyField,
  .blocklyPath,
  .blocklyHighlightedConnectionPath,
  .blocklyComment,
  .blocklyBubble,
  .blocklyIconGroup,
  .blocklyTextarea
) {
  outline: none;
}


.blocklyZoom>image, .blocklyZoom>svg>image {
  opacity: .4;
}

.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover {
  opacity: .6;
}

.blocklyZoom>image:active, .blocklyZoom>svg>image:active {
  opacity: .8;
}


.blocklyToast {
  font-size: 1.2rem;
  position: absolute;
  bottom: -10rem;
  right: 2rem;
  padding: 1rem;
  color: black;
  background-color: white;
  border: 2px solid black;
  border-radius: 0.4rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  line-height: 1.5;
  transition: bottom 0.3s ease-out;
}

.blocklyToast .blocklyToastMessage {
  maxWidth: 18rem;
}

.blocklyToast .blocklyToastCloseButton {
  margin: 0;
  padding: 0.2rem;
  background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
}


.injectionDiv {
  --commentFillColour: #FFFCC7;
  --commentBorderColour: #F2E49B;
}

.blocklyComment .blocklyTextarea {
  background-color: var(--commentFillColour);
  border: 1px solid var(--commentBorderColour);
  box-sizing: border-box;
  display: block;
  outline: 0;
  padding: 5px;
  resize: none;
  width: 100%;
  height: 100%;
}

.blocklyReadonly.blocklyComment .blocklyTextarea {
  cursor: inherit;
}

.blocklyDeleteIcon {
  width: 20px;
  height: 20px;
  display: none;
  cursor: pointer;
}

.blocklyFoldoutIcon {
  width: 20px;
  height: 20px;
  transform-origin: 12px 12px;
  cursor: pointer;
}
.blocklyResizeHandle {
  width: 12px;
  height: 12px;
  cursor: se-resize;
}
.blocklyReadonly.blocklyComment .blocklyResizeHandle {
  cursor: inherit;
}

.blocklyCommentTopbarBackground {
  fill: var(--commentBorderColour);
  height: 24px;
}

.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: #000;
  dominant-baseline: middle;
  visibility: hidden;
}

.blocklyCollapsed.blocklyComment .blocklyCommentPreview {
  visibility: visible;
}

.blocklyCollapsed.blocklyComment .blocklyCommentForeignObject,
.blocklyCollapsed.blocklyComment .blocklyResizeHandle {
  display: none;
}

.blocklyCollapsed.blocklyComment .blocklyFoldoutIcon {
  transform: rotate(-90deg);
}

.blocklyRTL .blocklyCommentTopbar {
  transform: scale(-1, 1);
}

.blocklyRTL .blocklyCommentForeignObject {
  direction: rtl;
}

.blocklyRTL .blocklyCommentPreview {
  /* Revert the scale and control RTL using direction instead. */
  transform: scale(-1, 1);
  direction: rtl;
}

.blocklyRTL .blocklyResizeHandle {
  transform: scale(-1, 1);
  cursor: sw-resize;
}

.blocklyCommentHighlight {
  fill: none;
}

.blocklyCommentText.blocklyActiveFocus {
  border-color: #fc3;
  border-width: 2px;
}

.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}


.blocklyFlyoutButton {
  fill: #888;
  cursor: default;
}

.blocklyFlyoutButtonShadow {
  fill: #666;
}

.blocklyFlyoutButton:hover {
  fill: #aaa;
}

.blocklyFlyoutLabel {
  cursor: default;
}

.blocklyFlyoutLabelBackground {
  opacity: 0;
}


.blocklyTextInputBubble .blocklyTextarea {
  background-color: var(--commentFillColour);
  border: 0;
  box-sizing: border-box;
  display: block;
  outline: 0;
  padding: 5px;
  resize: none;
  width: 100%;
  height: 100%;
}


.blocklyToolboxCategory:not(.blocklyToolboxSelected):hover {
  background-color: rgba(255, 255, 255, .2);
}

.blocklyToolbox[layout="h"] .blocklyToolboxCategoryContainer {
  margin: 1px 5px 1px 0;
}

.blocklyToolbox[dir="RTL"][layout="h"] .blocklyToolboxCategoryContainer {
  margin: 1px 0 1px 5px;
}

.blocklyToolboxCategory {
  height: 22px;
  line-height: 22px;
  margin-bottom: 3px;
  padding-right: 8px;
  white-space: nowrap;
}

.blocklyToolbox[dir="RTL"] .blocklyToolboxCategory {
  margin-left: 8px;
  padding-right: 0;
}

.blocklyToolboxCategoryIcon {
  background-image: url(https://cdn.makecode.com/commit/16d9232e651b69604b348704da307b4075b2e5d5/blockly/media/sprites.png);
  height: 16px;
  vertical-align: middle;
  visibility: hidden;
  width: 16px;
}

.blocklyToolboxCategoryIconClosed {
  background-position: -32px -1px;
}

.blocklyToolbox[dir="RTL"] .blocklyToolboxCategoryIconClosed {
  background-position: 0 -1px;
}

.blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed {
  background-position: -32px -17px;
}

.blocklyToolbox[dir="RTL"] .blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed {
  background-position: 0 -17px;
}

.blocklyToolboxCategoryIconOpen {
  background-position: -16px -1px;
}

.blocklyToolboxSelected>.blocklyToolboxCategoryIconOpen {
  background-position: -16px -17px;
}

.blocklyToolboxCategoryLabel {
  cursor: default;
  font: 16px sans-serif;
  padding: 0 3px;
  vertical-align: middle;
}

.blocklyToolboxDelete .blocklyToolboxCategoryLabel {
  cursor: url("https://cdn.makecode.com/commit/16d9232e651b69604b348704da307b4075b2e5d5/blockly/media/handdelete.cur"), auto;
}

.blocklyToolboxSelected .blocklyToolboxCategoryLabel {
  color: #fff;
}


.blocklyTreeSeparator {
  border-bottom: solid #e5e5e5 1px;
  height: 0;
  margin: 5px 0;
}

.blocklyToolbox[layout="h"] .blocklyTreeSeparator {
  border-right: solid #e5e5e5 1px;
  border-bottom: none;
  height: auto;
  margin: 0 5px 0 5px;
  padding: 5px 0;
  width: 0;
}


.blocklyToolboxDelete {
  cursor: url("https://cdn.makecode.com/commit/16d9232e651b69604b348704da307b4075b2e5d5/blockly/media/handdelete.cur"), auto;
}

.blocklyToolboxGrab {
  cursor: url("https://cdn.makecode.com/commit/16d9232e651b69604b348704da307b4075b2e5d5/blockly/media/handclosed.cur"), auto;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* Category tree in Toolbox. */
.blocklyToolbox {
  box-sizing: border-box;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  background-color: #ddd;
  overflow-x: visible;
  overflow-y: auto;
  padding: 4px 0 4px 0;
  position: absolute;
  z-index: 70;  /* so blocks go under toolbox when dragging */
  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
}

.blocklyToolboxCategoryGroup {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.blocklyToolboxCategoryGroup:focus {
  outline: none;
}


.blockly-menuseparator {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: 4px 0;
    padding: 0;
}


.blocklyDropDownButtonContainer,
.blocklyDropDownButton {
    display: inline-block;
    float: left;
    border-radius: 4px;
    text-align: center;
    margin: 0;
}

.blocklyDropDownButtonContainer {
    padding: 4px;
}

.blocklyDropDownButton {
    border: 1px solid;
    transition: box-shadow .1s;
    cursor: pointer;
    outline: none;
}

.blocklyDropDownButtonHover {
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.blocklyDropDownButtonFocus {
    box-shadow: 0px 0px 0px 4px rgb(255, 255, 255);
}

.blocklyDropDownButton:active {
    box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.2);
}

.blocklyDropDownButton > img {
    width: 80%;
    height: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.blocklyImageMenu .blocklyDropDownButton > img {
    top: unset;
    transform: unset;
    margin-top: 4px;
}
.blocklyImageMenu .blocklyDropdownTextLabel {
    line-height: 1.15;
    margin-top: 2px;
}


.blocklyGridPickerTooltip {
    z-index: 995;
}

.blocklyGridPickerPadder {
    outline: none;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .3)
}

.blocklyWidgetDiv .blocklyGridPickerRow {
    display: table-row;
}

.blocklyWidgetDiv .blocklyGridPickerMenu {
    display: table;
    outline: none;
    border-spacing: 7px;
}

.blocklyGridPickerScroller {
    outline: none;
    padding: 4px;
    border-radius: 4px;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.blocklyGridPickerPadder {
    border-radius: 4px;
    outline: none;
    position: relative;
}

.blocklyGridPickerPadder .ui.input i.search.icon {
    margin-top: -0.2rem;
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-menuitem {
    background: white;
    cursor: pointer;
    min-width: unset;
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-menuitem-highlight, .blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-menuitem-hover {
    background: #d6e9f8;
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-option {
    border: solid 1px black;
    border-radius: 4px;
    color: #fff;
    font-size: 12pt;
    font-weight: bold;
    display: table-cell;
    padding: 8px;
    text-align: center;
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
        user-select: none;
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-menuitem-content {
    color: #fff;
    font-size: 13px;
    font-family: var(--pxt-page-font);
}

.blocklyWidgetDiv .blocklyGridPickerMenu .floatLeft {
    float: left;
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-option.gridpicker-option-selected {
    position: relative;
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-menuitem .gridpicker-menuitem-checkbox {
    display: none;
}

.blocklyWidgetDiv .blocklyGridPickerMenu .gridpicker-option.gridpicker-option-focused {
    box-shadow: 0px 0px 0px 4px rgb(255, 255, 255);
}

.blocklyGridPickerTooltip {
    z-index: 955;
}

.blocklyGridPickerSelectedBar {
    display: flex;
    padding-top: 5px;
    justify-content: space-between;
}

.blocklyGridPickerSelectedImage {
    padding: 3px;
    display: inline-block;
    vertical-align: middle;
}

.ui.input input.blocklyGridPickerSearchBar {
    background: none;
    border: none;
    color: white;
}

.ui.input input.blocklyGridPickerSearchBar::placeholder {
    color: white;
}

.ui.input input.blocklyGridPickerSearchBar::-webkit-input-placeholder {
    color: white;
}

.ui.input input.blocklyGridPickerSearchBar::-moz-placeholder {
    color: white;
}

.ui.input input.blocklyGridPickerSearchBar:-ms-input-placeholder {
    color: white;
}

.ui.input input.blocklyGridPickerSearchBar:-moz-placeholder {
    color: white;
}


   .blocklyFieldGridContainer {
     padding: 7px;
     overflow: auto;
   }
   
  .blocklyFieldGrid {
    display: grid;
    grid-gap: 7px;
    grid-template-columns: repeat(var(--grid-columns), min-content);
  }

 .blocklyFieldGrid .blocklyFieldGridItem {
   border: 1px solid rgba(1, 1, 1, 0.5);
   border-radius: 4px;
   color: white;
   min-width: auto;
   background: none;
   white-space: nowrap;
   cursor: pointer;
   padding: 6px 15px;
 }
 
 .blocklyFieldGrid .blocklyFieldGridRow {
   display: contents;
 }
 
 .blocklyFieldGrid .blocklyFieldGridItem.blocklyFieldGridItemSelected {
   background-color: rgba(1, 1, 1, 0.25);
 }

 .blocklyFieldGrid .blocklyFieldGridItem:focus {
   box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);
   outline: none;
 }
 

.blocklyColourSwatch {
    width: 22px;
    height: 22px;
}

.blocklyFieldColour.blocklyFieldGridContainer {
    padding: 0px;
}

.blocklyFieldColour .blocklyFieldGrid {
    grid-gap: 0px;
    row-gap: 0px;
    outline: none;
}

.blocklyFieldColour .blocklyFieldGrid .blocklyFieldGridItem {
    padding: 0;
    border: none;
    margin: 2px;
}

.blocklyFieldColour .blocklyFieldGrid .blocklyFieldGridItem .blocklyColourSwatch {
    border: 2px solid rgba(0,0,0,.1);
    border-radius: 4px;
}

.blocklyFieldColour .blocklyFieldGridItem:focus .blocklyColourSwatch {
    box-shadow: 2px 2px 7px 2px rgba(0,0,0,.3);
    border-color: #eee;
    border-width: 1px;
}

.blocklyFieldColour .blocklyFieldGrid .blocklyFieldGridItemSelected .blocklyColourSwatch {
    outline: 1px solid #000;
    border-color: #eee;
    border-width: 1px;
}


    .blocklyMatrix:focus-visible {
        outline: none;
    }


:root {
    --blocklyFieldSliderBackgroundColor: #547AB2;
}
.blocklyFieldSliderLabel {
    font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
    font-size: 0.65rem;
    color: $colour_toolboxText;
    margin: 8px;
}
.blocklyFieldSliderLabelText {
    font-weight: bold;
}
.blocklyFieldSliderReadout {
    margin-left: 10px;
}

input[type=range].blocklyFieldSlider {
    -webkit-appearance: none;
    width: 100%;
}
input[type=range].blocklyFieldSlider:focus {
    outline: none;
}
input[type=range].blocklyFieldSlider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    margin: 8px;
    height: 22px;
    width: 150px;
    outline: none;
    border-radius: 11px;
    margin-bottom: 20px;
    background: var(--blocklyFieldSliderBackgroundColor);
}
input[type=range].blocklyFieldSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -1px;
    background-color: white;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
input[type=range].blocklyFieldSlider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid white; 
    outline-offset: 3px;
    -webkit-box-shadow: 0 0 0 3px var(--pxt-focus-border);
    -moz-box-shadow: 0 0 0 3px var(--pxt-focus-border);
    box-shadow: 0 0 0 3px var(--pxt-focus-border);
}
input[type=range].blocklyFieldSlider::-moz-range-track {
    margin: 8px;
    height: 22px;
    width: 95%;
    outline: none;
    border-radius: 11px;
    margin-bottom: 20px;
    background: #547AB2;
}
input[type=range].blocklyFieldSlider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    margin-top: -1px;
    background-color: white;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}


.field-text-quote {
    fill: #a31515 !important;
}


.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyFieldLedMatrixGroup.blocklyEditableField:not(.blocklyEditing):hover>rect {
    stroke: none;
}
.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyFieldLedMatrixGroup.blocklyActiveFocus.blocklyEditableField:not(.blocklyEditing):hover>rect {
    stroke: var(--blockly-active-node-color);
    stroke-width: var(--blockly-selection-width);
}
.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyFieldLedMatrixGroup.blocklyPassiveFocus.blocklyEditableField:not(.blocklyEditing):hover>rect {
    stroke: var(--blockly-active-node-color);
    stroke-dasharray: 5px 3px;
    stroke-width: var(--blockly-selection-width);
}
.blocklyFieldLedMatrixGroup > .blocklyFieldRect {
    fill: none !important;
}


.argumentEditorInput {
    overflow: visible;
}

.functioneditor i.argumentEditorTypeIcon {
    color: var(--pxt-target-foreground1);
    position: absolute;
    width: 24px;
    height: 24px;
    top: 40px;
    left: 50%;
    margin-left: -12px;
}

.argumentEditorRemoveIcon {
    position: absolute;
    width: 24px;
    height: 24px;
    top: -40px;
    left: 50%;
    margin-left: -12px;
    cursor: pointer;
}



.blockly-dotted-outline-on-hover {
    transition: stroke .4s;
}
.blockly-dotted-outline-on-hover.hover {
    stroke-dasharray: 2;
    stroke: white;
    stroke-width: 2;
}
.blocklyDisabledPattern>.blocklyPath.pxtRendererHighlight {
    fill: none;
}


.blocklyDropdownMenu .blocklyMenuItemCheckbox {
    filter: contrast(0) brightness(100);
}

.blocklyVerticalMarker {
    fill: none;
}


.pxtFlyoutHidden {
    display: none;
}


.blocklyBubble .blocklyDeleteIcon, .blocklyBubble .blocklyFoldoutIcon {
    filter: grayscale(100%) brightness(100000);
}

.blocklyBubble .blocklyTextarea.blocklyText {
    color: #575E75;
}


.blocklyTextInputBubble .blocklyTextarea {
  background-color: var(--commentFillColour);
  border: 0;
  display: block;
  margin: 0;
  outline: 0;
  padding: 3px;
  resize: none;
  text-overflow: hidden;
}


.blockly-ws-search {
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    border: solid var(--pxt-neutral-alpha50) 1px;
    border-top: none;
    border-right: none;
    box-shadow: 0px 2px 15px var(--pxt-neutral-alpha50);
}

.blockly-ws-search input {
    -webkit-tap-highlight-color: transparent;
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    border: none;
}

.blockly-ws-search input::-webkit-input-placeholder {
    color: var(--pxt-neutral-alpha50);
}

.blockly-ws-search input::-moz-placeholder {
    color: var(--pxt-neutral-alpha50);
}

.blockly-ws-search input::-ms-input-placeholder {
    color: var(--pxt-neutral-alpha50);
}

.blockly-ws-search input:active,
.blockly-ws-search input:focus {
    border-color: var(--pxt-neutral-alpha50);
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
}

.blockly-ws-search input::selection {
    color: var(--pxt-neutral-foreground1);
}

.blockly-ws-search button {
    padding-left: 6px;
    padding-right: 6px;
    color: var(--pxt-neutral-foreground1);
}

:root {
  --divider-border-color: #eee;
  --key-border-color: #ccc;
  --shortcut-modal-border-color: #9aa0a6;
}

.shortcut-modal {
  border: 1px solid var(--shortcut-modal-border-color);
  border-radius: 12px;
  box-shadow: 6px 6px 32px rgba(0,0,0,.5);
  flex-direction: column;
  gap: 12px;
  margin: auto;
  max-height: 82vh;
  max-width: calc(100% - 10em);
  padding: 24px 12px 24px 32px;
  position: relative;
  z-index: 99;
}

.shortcut-modal[open] {
  display: flex;
}

.shortcut-modal .close-modal {
  border: 0;
  background: transparent;
  float: inline-end;
  margin: 0 0 0 0;
  position: absolute;
  top: 16px;
  right: 24px;
}

.shortcut-modal h1 {
  font-weight: 600;
  font-size: 1.2em;
}

.shortcut-modal:before {
  background: radial-gradient(rgba(244, 244, 244, 0.43), rgba(75, 75, 75, 0.51));
  align-items: center;
  display: block;
  font-family: Roboto;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.shortcut-tables {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  row-gap: 1em;
  column-gap: 2em;
}

@media (min-width: 950px) {
  .shortcut-tables {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width: 1360px) {
  .shortcut-tables {
    grid-template-columns: 1fr 1fr 1fr
  }
}

.shortcut-table {
  border-collapse: collapse;
  font-family: Roboto;
  font-size: .9em;
}

.shortcut-table th {
  padding-inline-end: 0.5em;
  text-align: left;
  text-wrap: nowrap;
  vertical-align: baseline;
}

.shortcut-table td:first-child {
  text-wrap: auto;
  width: 40%;
}

.shortcut-table tr:has(+ .category) {
  --divider-border-color: transparent;
  margin-end: 1em;
}

.shortcut-table tr:not(.category, :last-child) {
  border-bottom: 1px solid var(--divider-border-color);
}

.shortcut-table td {
  padding: 0.2em 1em 0.3em 0;
  text-wrap: nowrap;
}

.shortcut-table h2 {
  border-bottom: 1px solid #999;
  font-size: 1em;
  padding-block-end: 0.5em;
}

.shortcut-table .key {
  border: 1px solid var(--key-border-color);
  border-radius: 8px;
  display: inline-block;
  margin: 0 4px;
  min-width: 2em;
  padding: .3em .5em;
  text-align: center;
}

.shortcut-table .separator {
  color: gray;
  display: inline-block;
  padding: 0 0.5em;
}

.shortcut-container {
  font-size: 0.95em;
  overflow: auto;
  padding: 0.5em;
}

.shortcut-combo {
  display: inline-block;
  padding: 0.25em 0;
  text-wrap: nowrap;
}