/* Import all components */
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";

/*******************************
             Layout
*******************************/

@mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
@tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
@computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
@largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 16px!important;
}

body {
    height: 100%;
    width: 100%;
    padding: 0;
    overflow: auto;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    position: fixed;
}

* {
  min-height: 0;
  min-width: 0;
}

pre {
    tab-size: 4;
}

/* Main Layout */
#allcontent {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
}

#editorcontent {
    flex: 1 1 auto;
    position: relative;
}

#simulator .editor-sidebar,
#maineditor,
#sidedocs {
  position: absolute;
  bottom: 0rem;
}

#simulator .editor-sidebar, #maineditor, #sidedocs {
    top: @mainMenuHeight;
}

.hideMenuBar:not(.headless) #simulator .editor-sidebar,
    .hideMenuBar #maineditor,
    .hideMenuBar #sidedocs {
    top: 0 !important;
}

.full-abs {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                    not supported by any browser */
}

/* Main Editor layout */
#maineditor {
    left: @simulatorWidth;
    right: 0;
    overflow: visible;
}

/* Editor tools */
@editorToolsHeight: 10rem;
@editorToolsCollapsedHeight: 4.7rem;
@editorToolsCollapsedMobileHeight: 3.4rem;
#editortools {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: @editorToolsZIndex;
    height: @editorToolsCollapsedHeight;
    background-color: var(--pxt-target-background3);
    color: var(--pxt-target-foreground3);
    border-top: 2px solid var(--pxt-target-stencil3);

    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
        padding: 1rem;
    }
}

.zoomSliderBar {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%;
    height: .5rem;
    background: @black;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    top: 50%;
    position: relative;
    border-bottom: .2rem solid @grey;
    margin-left: 10px;
    margin-right: 10px;
}

#zoomSlider {
    display: inline-block;
    position: relative;
}

#root {
    --extra-mobile-sim-padding: 0px;
    &.errorListHeader {
        --extra-mobile-sim-padding: @errorListHeaderHeight;
    }
    &.errorListExpanded {
        --extra-mobile-sim-padding: @errorListHeight;
    }
}

.transparentEditorTools #editortools {
    background-color: transparent;
    z-index: (@blocklyFlyoutZIndex)-1;
    border: unset;
}

#blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #assetEditor, #simulator .editor-sidebar {
    bottom: @editorToolsCollapsedHeight;
}

.hideEditorToolbar #blocksArea,
.hideEditorToolbar #monacoEditor,
.hideEditorToolbar #pxtJsonEditor,
.hideEditorToolbar #serialEditor,
.hideEditorToolbar #githubEditor,
.hideEditorToolbar #assetEditor,
.hideEditorToolbar #simulator .editor-sidebar {
    bottom: 0rem !important;
}

#miniSimOverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    cursor: pointer;
}

/* File list / Simulator layout */
#simulator {
    height: 100%;
}
#simulator .editor-sidebar, #downloadArea {
    min-width: @simulatorWidth;
    max-width: @simulatorWidth;
    left: 0;
}

#simulator .editor-sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    margin-bottom: 0;
    right: 0;
    background-color: var(--pxt-target-background2);
    color: var(--pxt-target-foreground2);
    z-index: @filelistZIndex;
}

.invisibleScrollbar::-webkit-scrollbar {
    background: transparent !important;
}
.invisibleScrollbar::-webkit-scrollbar-thumb {
    display: none !important;
}
.invisibleScrollbar::-webkit-scrollbar-track {
    background: transparent !important;
}


#simulator .editor-sidebar .simtoolbar {
    -webkit-transition: opacity 0.2s; /* Safari */
    -moz-transition: opacity 0.2s; /* Mozilla */
    -webkit-transition-timing-function: linear; /* Mozilla */
    -o-transition: opacity 0.2s; /* Opera */
    transition: opacity 0.2s;
    transition-timing-function: linear;

    .debug-button.active,
    .mute-button.active {
        background-color: var(--pxt-secondary-accent);

        &:focus, &:hover {
            filter: none;
        }
    }

    .fullscreen-button {
        i {
            margin: 0;
            width: inherit;
            opacity: 0.9;
        }
    }
}

.editor-sidebar .simtoolbar .ui.button:focus-visible {
    outline: @editorFocusBorderSize solid var(--pxt-focus-border);
}

#downloadArea {
    margin: unset;

    > div {
        margin: 0;
    }
    .ui.button:focus, .ui.button:hover {
        // Semantic UI darkens background using a filter, which affects the menu as well as the button that opened it.
        // Turn that off for the download menu, then simply change bkg color instead.
        filter: none;
        background-color: var(--pxt-primary-background-hover) !important;
        color: var(--pxt-primary-foreground-hover) !important;
    }
}

#downloadArea .button:focus-visible,
#editortools .button:focus-visible
{
    outline: @editorFocusBorderSize solid var(--pxt-focus-border);
    outline-offset: 2px;
}

#editorToolbarArea {
    margin: 0;
    margin-left: auto;
}

#editortools .download-button {
    text-align: center;
}

.transparentEditorTools #downloadArea {
    background-color: transparent !important;
}

#simulator .editor-sidebar .filemenu {
    direction: ltr;
    width: 100% !important;
    margin: 0;
    margin-top: 1rem;

    background: var(--pxt-primary-background);
    color: var(--pxt-primary-foreground);

    .item, .link.item {
        color: var(--pxt-primary-foreground) !important; // override !important in semantic ui
        border-radius: inherit;

        &:hover {
            background: var(--pxt-primary-background-hover) !important;
            color: var(--pxt-primary-foreground-hover) !important;
        }
    }
}

.filemenu .nested.item {
    padding: .92857143em 1.14285714em;
    padding-left: 1rem;
}

.filemenu .header.item {
    background: var(--pxt-neutral-alpha10);
}

.filemenu .folder.item {
    font-weight: bold;
}

.filemenu .folderitem.item {
    padding-left: 2rem;
}

#simulators {
    text-align: center;
}

.simulator .ui.embed .icon.xicon::before {
    transform: translateX(-50%) translateY(-50%);
    transition: opacity .25s ease,color .25s ease;
}

.simulator .ui.embed .icon.xicon::after {
    background: rgba(0,0,0,.3);
    transition: opacity .25s ease;
}

.simulator .ui.embed .icon.xicon:hover:before {
    color: var(--pxt-colors-green-background);
}

.simulator .ui.embed .icon.xicon:hover:after {
    opacity: 0.6;
}

/* Simulator */
div.simframe {
    border:none;
    margin:0 0 0.5rem 0;
    position: relative;
    background:transparent;
    width:100%;
    padding-bottom: 81.96%;
}

div.simframe > iframe {
    position:absolute;
    top:0; left: 0; width:100%; height:100%;
}

#boardview:focus-visible {
    outline: 3px solid var(--pxt-focus-border);
    outline-offset: 3px;
}

.simHeadless {
    height: 0 !important;
    width: 0 !important;
}

/* Menu */
// The classname .menubar is also used by monaco. This rule just negates the clashing
// values
#root > .menubar,
#homescreen > .home > .menubar {
    height: unset;
    overflow: unset;
}
.menubar .ui.menu .item.editor-menuitem {
    padding: 0;
}
.menubar .ui.menu .item.editor-menuitem:hover {
    background: none !important;
}
.menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
    background: var(--pxt-neutral-alpha20) !important;
    border: 3px solid var(--pxt-neutral-alpha10);
    border-radius: 2.5rem !important;
    position: relative;
}
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
    border-radius: 2.5rem !important;
    width: 140px;
    z-index: 2;
}
.menubar .ui.menu.fixed #editordropdown .item {
    border-radius: 0 !important;
}

.menubar .ui.menu.fixed .ui.item.editor-menuitem .item.link:hover {
    background: none;
}
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item:not(.active) * {
    opacity: 0.8;
}
.menubar .ui.menu.inverted.fixed .ui.item.editor-menuitem .active.item {
    background: none;
    color: var(--pxt-header-background) !important;
}

.menubar {
    .left.menu, .right.menu, .center.menu {
        display: flex;
        flex: 1;
    }
    .right.menu {
        justify-content: flex-end;
    }
    .center.menu {
        justify-content: center;
    }

    .ui.item {
        margin: 0;
    }

    .ui.menu .brand {
        &::before {
            position: relative;
            height: 1.5rem;
            border-left: 2px solid @white;
            content: " ";
        }
    }
}

.sandbox .menubar {
    .logo.organization,
    .logo.brand::before {
        display: none;
    }
}

.ui.menu .ui.dropdown.item .menu .item.link.menuitemcheckbox {
    display: flex;
}

.settings-menuitem, .help-dropdown-menuitem {
    flex-shrink: 0;

    ul.common-menu-dropdown-pane {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - @mainMenuHeight);
    }

    & > button.common-button {
        &:focus-visible {
            background: var(--pxt-neutral-alpha10);
            color: #fff;
            outline: 3px solid var(--pxt-neutral-stencil3);
            outline-offset: -3px
        }

        &:focus-visible::after {
            outline: none;
            border: none;
        }

        & > span > i {
            opacity: 0.9;
        }
    }
}


/* toggle style */
.ui.item.editor-menuitem .item.toggle {
    z-index: 1 !important;
    margin: 1px;
    height: 46px;
    left: 0;
    position: absolute;
    opacity: 1 !important;
    background: none;
    margin: 0;
    -webkit-transition: margin-left .3s; /* Safari */
    -moz-transition: margin-left .3s; /* Mozilla */
    -webkit-transition-timing-function: ease-in; /* Mozilla */
    -o-transition: margin-left .3s; /* Opera */
    transition: margin-left .3s;
    transition-timing-function: ease-in;
}

/* active toggle */
.ui.item.editor-menuitem .active ~ .item.toggle {
    box-shadow: 2px 0 0 rgba(0,0,0,.1)!important;
    background: #fff!important;
}

#editortoggle > .link {
    justify-content: center;
}

#editortoggle > .item {
    outline: none;
}

#editortoggle {
    /* toggle positioning, no dropdown */
    .base-menuitem:nth-of-type(1).active ~ .toggle { margin-left: 0!important; }
    .base-menuitem:nth-of-type(2).active ~ .toggle { margin-left: 140px!important; }
    .base-menuitem:nth-of-type(3).active ~ .toggle { margin-left: 280px!important; }

    /* toggle positioning after dropdown */
    & > #editordropdown:nth-of-type(2) ~ .active ~ .toggle { margin-left: 185px!important; }
    & > #editordropdown:nth-of-type(3) ~ .active ~ .toggle { margin-left: 326px!important; }

    .toggle.dropdown-attached {
        border-top-right-radius: 0!important;
        border-bottom-right-radius: 0!important;
    }

    .base-menuitem:focus-visible {
        outline: 3px solid white;
        outline-offset: -5px;
    }

    .base-menuitem.active:focus-visible {
        outline-color: var(--pxt-target-stencil1);
    }
}

#editordropdown {
    width: auto;
    border-top-left-radius: 0px!important;
    border-bottom-left-radius: 0px!important;
}
#editordropdown .menu > .item {
    width: 184px;
    opacity: 1;
}
#editordropdown .menu > .item.selected:after {
    content: '✔';
    float: right;
}

.main:not(.hc) #editordropdown {
    .menu {
        background-color: var(--pxt-neutral-background1) !important;

        > .item {
            background: none;
            color: var(--pxt-neutral-foreground1) !important;

            &:hover {
                background: var(--pxt-neutral-background1-hover) !important;
                color: var(--pxt-neutral-foreground1-hover) !important;
            }
        }
    }

    &.active, #mainmenu #editordropdown.active:focus {
        background-color: var(--pxt-header-foreground) !important;
        color: var(--pxt-header-background) !important;
    }
}

/* Help card */
#helpcard {
    position: absolute;
    right: 7rem;
    bottom: 2.2rem;
    margin: 0;
    z-index: @helpCardZIndex;
    font-size:0.8rem;
}

/* Logo */
.ui.menu .ui.item.logo {
    font-size: 2.2rem;
    margin: 0;
    padding: 0rem !important;
}
.ui.menu .ui.item.logo:hover {
    background: none;
}

.ui.item.logo.organization,
.inHome .ui.item.logo.brand {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.ui.item.logo.brand[role=menuitem] {
    cursor: pointer;
}

.ui.item.logo .name,
.ui.item.logo .name-short {
    font-family: @segoeUIFont;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-left: 1rem;
    margin-bottom: 1px;
}

.ui.item.logo button.name,
.ui.item.logo button.name-short {
    margin-left: 0 !important;
}

.ui.item.logo .name-short {
    display: none;
}

.ui.item.logo svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ui.item.logo img {
    margin: 0 1rem;
    height: 1.4rem;
}

.ui.item.logo .logo-button {
    img {
        margin: 3px 0 0 0 !important;
    }
}


/* Native Host (iOS app) back button */
.nativeback.ui.item {
    margin-right: -1rem;
}

/* Powered by Microsoft logo*/
#editorlogo {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 42px;
    background-color: var(--pxt-target-background1);
    color: var(--pxt-target-foreground1);
    z-index: @editorLogoZIndex;
    display: none;
}
#editorlogo > .poweredbylogo {
    position: absolute;
    left: 10px;
    bottom: 5px;
    width: 100%;
    height: 32px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Sandbox */
.sandboxfooter {
    position:absolute;
    bottom:0rem;
    right:0rem;
    z-index: @sandboxFooterZIndex;
    margin-bottom: 0.2rem !important;
}
.sandboxfooter .item {
    font-size: 0.8rem !important;
}

/* code card */

.ui.card {
    .image pre {
        margin-left:0.5rem;
        margin-right:0.5rem;
        color: #000;
        font-size:0.7rem;
        white-space: pre-wrap;
        max-height: 10rem;
        overflow-y: hidden;
    }
}

/* Popup message */
#msg {
    position: absolute;
    bottom: 5rem;
    left: 0;
    right: 0;
    text-align: center;
}

#msg > div {
    display: inline-block !important;
    z-index: @editorMessageZIndex;
}

#msg > div:empty {
   display: none !important;
}

/* Button Colors */
.ui.button.editortools-btn {
    &:extend(.ui.grey.button all);

    /* Fixes an error in some webkit browsers where icons get repositioned on hover */
    position: relative;
}

.ui.button.big-play-button,
.ui.button.hw-button,
.ui.button.hw-button > .icon.caret {
    /* Fixes an error in some webkit browsers where icons get repositioned on hover */
    position: relative;
}

.hw-button.ui.dropdown .menu  {
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    border: 1px solid var(--pxt-neutral-stencil1);

    & > .item {
        color: var(--pxt-neutral-foreground1);

        &:hover, &:focus {
            background: var(--pxt-neutral-background1-hover);
            color: var(--pxt-neutral-foreground1-hover);
        }
    }
}

.ui.button:hover,
.ui.button:focus {
    filter: grayscale(.15) brightness(.85) contrast(1.3);
}

/* Icon and text */
.ui.item.link.dbg-btn > .icon-and-text.icon ~ .ui.text,
.ui.item.link > .icon-and-text.icon ~ .ui.text.exit-debugmode-btn,
.ui.item.icon > .icon-and-text.icon ~ .ui.text,
.ui.button.icon > .icon-and-text.icon ~ .ui.text {
    margin-left: 0.5em !important;
}

/* Beta */
.ui.label.betalabel {
    padding: 0.3em;
}

/* Collapse/expand button for simulator, sidedocs */
#computertogglesim,
#mobiletogglesim,
#sidedocstoggle {
    position: absolute;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    top: 40%;
    height: 20%;
    padding: 0;
    margin: 0;
    background: @grey;
    box-shadow: none!important;
    transition: none;
    opacity: 0.8;

    &:hover,
    &:focus {
      opacity: 1;
    }

    &:focus-visible {
        outline: @editorFocusBorderSize solid  var(--pxt-focus-border);
    }
}
#computertogglesim,
#sidedocstoggle {
    z-index: @sidedocZIndex;
}
#mobiletogglesim {
    z-index: @blocklyToolboxZIndex;
}

// Factor in 4rem height of top bar
#mobiletogglesim,
#computertogglesim {
    left: -21px;
    top: calc(~'40% - 2.4rem');
    height: calc(~'20% + 0.8rem');
}

.collapsedEditorTools #computertogglesim,
.collapsedEditorTools #mobiletogglesim {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    left: -21px;
}

/*******************************
      Notification banner
*******************************/

#notificationBanner {
    z-index: 1000;
}

.notificationBannerVisible #simulator .editor-sidebar,
.notificationBannerVisible #maineditor,
.notificationBannerVisible.sideDocs #sidedocs {
    top: calc(@mainMenuHeight + @bannerHeight);
}

.notificationBannerVisible #mainmenu {
    top: @bannerHeight;
    margin: 0;
}

#notificationBanner {
    padding: 0;
    font-family: @segoeUIFont;
    height: @bannerHeight;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    .bannerLeft {
        display: block;
        .content {
            display: flex;
            flex-direction: row;
            align-items: center;
            line-height: 100%;
            > * {
                margin-left: 0.25rem;
            }
            img {
                height: @bannerHeight;
            }
            a.link {
                font-weight: bold;
                text-decoration: underline;
                &:hover, &:focus {
                    cursor: pointer;
                }
            }
        }
    }
    .bannerRight {
        display: flex;
        flex-direction: row-reverse;
        flex-grow: 1;
        line-height: 100%;
        .close {
            &:hover, &:focus {
                cursor: pointer;
                opacity: 0.7;
            }
        }
    }
}

#notificationBanner.default {
    background-color: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    outline: 2px solid var(--pxt-neutral-stencil1);
    a.link {
        color: var(--pxt-link);
        &:hover, &:focus {
            color: var(--pxt-link-hover);
        }
    }
}

/******************************
Avatar
******************************/

.avatar {
    position: relative;
}

@media only screen {
    .avatar .avatar-image {
        position: absolute;
        left: 0;
        top: 1em;
        width: 3em;
        height: 3em;
        background-size: contain;
        background-image: @avatarImage;
    }
}

@media only print {
    .avatar .avatar-image {
        display: list-item;
        list-style-image: @avatarImage;
        list-style-position: inside;
    }
}

.avatar .message:after {
    top: 1.1em;
    left: -1em;
    bottom: auto;
    border-width: 0px 1em 0.7em 0;
    border-color: rgba(0, 0, 0, 0) #EEE;
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

/* Json editor */
#pxtJsonEditor .ui.content {
    padding: 1rem;
}

.rtl #fileNameInput {
    text-align: right;
}

/* Simulator effects */
@keyframes glow {
    to {
         outline-color: yellow;
    }
}

.glow > div {
    outline: 3px solid transparent;
    animation: glow 0.3s infinite alternate;
    transition: outline 0.3s linear;
}

/* ping anim */
@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.ping2s {
    animation: ping 1s;
    animation-iteration-count: 2;
}
.ping {
    animation: ping 1s infinite;
}

.grayscale {
    -moz-filter: grayscale(1);
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

.blur {
    -moz-filter: blur(1);
    -webkit-filter: blur(1);
    filter: blur(1);
}

// clashes with highlighted typescript code snippets
svg .highlight {
    border-bottom: 2px solid #FFC107;
}

/* Modulator */
#modulatorWrapper, #modulatorAudioOutput {
    display: none;
}

/*******************************
Field editors
*******************************/

.hidden {
    display: none !important;
}

/*******************************
        Social Buttons
*******************************/

.social-icons a.facebook {
    color: white;
    background-color: #3b5998;
}
.social-icons a.twitter {
    color: white;
    background-color: #1da1f2;
}
.social-icons a.discourse {
    color: var(--pxt-primary-foreground);
    background-color: var(--pxt-primary-background);
}

/*******************************
        Extensions
*******************************/
.extensions-browser.hide {
    display: none;
}

@keyframes cardGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.extension-card.loading {
    background: @loadingAnimation;
    background-size: 400% 400%;
    animation: cardGradient 3s infinite alternate;
}


.fullscreen.extensions-browser > {
    .common-modal > {
        .common-modal-header {
            height: @mainMenuHeight;
            background-color: var(--pxt-header-background);
            z-index: 202;
            display: flex;
            padding-left: 0rem;

            .header-left, .header-right, .header-center {
                flex: 1
            }

            .header-left {
                display: flex;
                height: 100%;
            }

            .header-center {
                color: @white;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .common-modal-body {
            padding: 0rem;
        }
    }
}

@media @tabletAndBelow {
    .fullscreen.extensions-browser > .common-modal > .common-modal-header {
        height: @mobileMenuHeight;
    }

    .extensions-browser {
        .extension-header > .import-button>.common-button {
            .common-button-label {
                display: none;
            }
        }
    }

    .settings-menuitem, .help-dropdown-menuitem {
        ul.common-menu-dropdown-pane {
            overflow-y: auto;
            max-height: calc(100vh - @mobileMenuHeight);
        }
    }
}

@media @mobileAndBelow {
    .extensions-browser {
        .common-modal > .common-modal-header > .common-modal-back {
            .common-button-label {
                display: none;
            }
        }
    }
}

.extensions-browser {
    position: absolute;
    background-color: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    width: 100%;
    min-height: 100%;
    z-index: 200;
    font-size: 1.2rem;

    .extension-search-header {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: var(--pxt-neutral-alpha10);

        .common-input-wrapper {
            width: 70%;

            .common-input-group {
                height: 3rem;
                border-radius: 500rem;
                padding: 0.7rem 1rem;

                & i.fas.fa-search {
                    position: relative;
                    margin-top: 0.1rem;
                    right: 0;
                    bottom: 0;

                    opacity: .5;
                    transition: opacity 0.3s ease;
                }
                & > button:focus-visible {
                    outline: 3px solid var(--pxt-focus-border);
                    border-radius: 20%;
                    &::after {
                        content: none;
                    }
                }
                &:focus-within {
                    outline: 3px solid var(--pxt-focus-border);
                    &:has(button:focus-visible) {
                        outline: none;
                    }
                }
                &:focus-within::after {
                    content: none;
                }
                & > input:focus {
                    outline: none !important;
                }
            }

            &:focus-within .common-input-group > i.fas.fa-search {
                opacity: 1;
            }
        }
    }

    .importButton {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 3rem;
        gap: .8rem;

        .importButtonLink {
            color: var(--pxt-link);
            cursor: pointer;
        }

        .importButtonLink:hover {
            text-decoration: underline;
        }
    }

    .extension-display {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2rem;
        gap: .8rem;

        .breadcrumbs {
            font-family: @segoeUIFont;
            width: 100%;
            padding-bottom: 1.5rem;

            .link {
                color: var(--pxt-link);
                cursor: pointer;
            }

            >span {
                padding-right: .5rem;
            }

            .common-button {
                font-size: 1.2rem;
                padding-right: .5rem;
                margin-right: 0rem;
            }
        }
    }

    .extension-header {
        font-family: @segoeUIFont;
        width: 95%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .import-button>.common-button {
        padding: .8rem 1rem .95rem;

        background-color: var(--pxt-neutral-background1) !important;
        color: var(--pxt-neutral-foreground1) !important;

        /* Add some additional contrast against bkg */
        box-shadow: 0 1px var(--pxt-neutral-stencil1) !important;

        &:hover {
            background-color: var(--pxt-neutral-background1-hover) !important;
            color: var(--pxt-neutral-foreground1-hover) !important;
        }

        &:focus-visible {
            outline: 3px solid var(--pxt-focus-border);
        }
    }

    .extension-grid {
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
    }

    .extension-card:hover {
        border: var(--pxt-focus-border) .15rem solid;
    }

    .extension-tags {
        display: flex;
        gap: 1rem;
        width: 80%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .extension-tag {
        border: .1rem solid var(--pxt-neutral-foreground1);
        padding: .6rem 1.25rem;
        border-radius: 1.6rem;
        cursor: pointer;
        color: var(--pxt-neutral-foreground1);
        background-color: inherit;
    }

    .extension-tag:hover {
        background-color: var(--pxt-neutral-alpha20);
    }

    .extension-tag.selected {
        background-color: var(--pxt-focus-border);
        border-color: var(--pxt-focus-border);
        color: @white
    }

    .extension-tag:focus-visible {
        outline: 3px solid var(--pxt-focus-border);
        &::after {
            content: none;
        }
    }

    .tab-header {
        width: 100%;

        .common-button {
            border: 2px solid var(--pxt-neutral-stencil1);
            background-color: var(--pxt-neutral-background1);
            color: var(--pxt-neutral-foreground1);

            &:hover {
                background-color: var(--pxt-neutral-background1-hover);
                color: var(--pxt-neutral-foreground1-hover);
            }
        }

        .common-button.selected {
            border-bottom: 2px solid var(--pxt-focus-border);
            font-weight: 600;
        }
    }

    .common-modal > .common-modal-body {
        overflow-y: auto;
        padding: 0rem;
    }

    .extension-grid {
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 0.5rem;
    }
    .ui.card {
        height: 20rem;
        .ui.cardimage {
            background-color: transparent;
            height: 11rem;
            &.upload {
                margin: 3em auto;
            }
        }
        .content:not(.extra) {
            .header {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .description {
                height: 2.8em;
                overflow: hidden;
            }
            .description.long  {
                height: 14em;
            }
        }
    }
    .ui.card.loading {
        background: @loadingAnimation;
        background-size: 400% 400%;
        animation: gradient 3s infinite alternate;
    }
    /* Search input */
    .ui.search {
        margin: auto;
    }

    .ui.inline.loader {
        margin-top: 4em;
        :after, :before {
            width: 4rem;
            height: 4rem;
        }
    }
}

.extension-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, 18rem);
    justify-content: center;
    gap: 1rem;
    max-width: 95%;
    width: 95%;
}

.import-extension-modal {
    .common-modal-body {
        display: flex;
        flex-direction: column;
    }
}

// reduce all card sizes
@media @mobileAndBelow {
    .extensions-browser {
        .ui.card, .ui.cards > .card {
            width: 9rem;
            height: 9rem;

            .ui.cardimage {
                height: 5rem;
                &.upload {
                    margin: auto;
                }
            }
        }
    }
}
/*******************************
        Editor Sidebar
*******************************/

@sidebarPrimaryColor: var(--pxt-colors-blue-background);
@sidebarSecondaryColor: var(--pxt-focus-border);
@sidbarActiveTabIconColor: var(--pxt-focus-border);

#simulator .editor-sidebar {
    border-right: 2px solid var(--pxt-neutral-stencil1);

    .tab-navigation {
        color: @sidebarSecondaryColor;
        background-color: @sidebarPrimaryColor;
    }

    .tab-icon.active {
        color: @sidbarActiveTabIconColor;
        background-color: @sidebarPrimaryColor;
    }
}

#serialPreview .label:focus {
    outline: 3px solid var(--pxt-focus-border) !important;
    outline-offset: -15px;
}

/*******************************
        Layout Variables
*******************************/

.ui.widedesktop.only {
    display:none !important;
}
.ui.tablet.only {
    display:none !important;
}
.ui.mobile.only {
    display: none !important;
}

/*******************

Font size

*************************/

p.ui.font.small {
    font-size:0.8em;
}

/** App **/

.ui.app .ui.app.hide {
    display: none !important;
}

/** Screen modes **/

@media only screen and (min-width: @largeMonitorBreakpoint) and (min-height:30em) {
    .ui.widedesktop.only {
        display:unset !important;
    }
    .ui.widedesktop.hide {
        display:none !important;
    }
}

/* smaller desktop screen */
@media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 12/10) {
    .ui.desktop.only {
        display:none !important;
    }
}

/* thin desktop portrait mode */
@media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 7/10) {
    .ui.landscape.only {
        display:none !important;
    }
}

@media only screen and (min-width: @computerBreakpoint) {
    .ui.portrait.only {
        display:none !important;
    }
}

/* Tablet only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    .ui.tablet.only {
        display:unset !important;
    }
    .collapse-button.ui.tablet.only {
        display:inherit !important; // fix for simulator toggle, IE11 does not have "unset"
    }
}

/* Mobile + Tablet */
@media only screen and (max-width: @largestTabletScreen) {
    .simView #boardview {
        padding-top: @sandboxMobileMenuHeight;
    }

    .ui.portrait.only {
        display:unset !important;
    }
    .ui.portrait.hide {
        display:none !important;
    }
    .collapse-button.ui.computer.only {
        display:none !important; // hide desktop simulator toggle
    }

    .hideEditorToolbar #simulator .editor-sidebar {
        display:none !important;
    }

    // Menu bar text logos ("MakeCode Arcade")
    .ui.item.logo .name {
        display: none;
    }
    .ui.item.logo .name-short {
        display: block;
    }

    .menubar .right.menu .signin-button {
        height: 2.5rem;
    }

    .sign-in-dropdown {
        padding-left: .1rem;
        padding-right: .1rem;
    }
}

/* Mobile only */
@media only screen and (max-width: @largestMobileScreen) {
    .menubar .right.menu .signin-button .icon {
        margin-left: -.2rem;
    }

    .ui.mobile.only {
        display:unset !important;
    }
    .ui.mobile.only.inherit {
        display:inherit !important;
    }
    .ui.mobile.hide {
        display:none !important;
    }
}

/* Scren heights */
/** Thin **/
@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    .ui.tall.only {
        display:none !important;
    }
    .simView #boardview {
        padding-top: @thinMenuHeight;
    }

    .menubar .right.menu .signin-button {
        height: 2.5rem;
    }
}
@media only screen and (min-height: @thinEditorBreakpoint) {
    .ui.thin.only {
        display:none !important;
    }
}

/*******************************
        fullscreensim
*******************************/
.fullscreensim {
    z-index: @aboveEverythingZIndex;

    /* Full screen */
    .simPanel {
        position: fixed;
        z-index: @fullscreenZIndex;
        top:0 !important;
        left:0 !important;
        bottom:0 !important;
        right:0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100%;
        min-width: 100%;
        height:100% !important;
        background-color: var(--pxt-target-background2);
        color: var(--pxt-target-foreground2);
    }
    #miniSimOverlay {
        display: none;
    }
    #boardview {
        position: relative;
        height:100%;
        background-color: white;
        padding-top: 1rem;
        padding-bottom: 4.5rem;
        padding-left: 0rem;
        padding-right: 0rem;

        background-color: var(--pxt-target-background2);
        background: var(--pxt-target-background2); /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(var(--pxt-secondary-background) 50%, var(--pxt-target-background2)); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(var(--pxt-secondary-background) 50%, var(--pxt-target-background2)); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(var(--pxt-secondary-background) 50%, var(--pxt-target-background2)); /* For Firefox 3.6 to 15 */
        background: linear-gradient(var(--pxt-secondary-background) 50%, var(--pxt-target-background2)); /* Standard syntax */
    }
    #simulator .hidefullscreen,
    .menubar .ui.item:not(.logo),
    #maineditor,
    #editortools,
    #serialPreview,
    .settings-menuitem,
    .help-dropdown-menuitem  {
        display: none !important;
        z-index: -10 !important;
    }
    .tutorialWrapper {
        display: none;
    }
    .sandboxfooter {
        z-index: @sandboxFooterZIndex;
        bottom: 1rem;
    }
    #mainmenu {
        background: transparent !important;
    }
    .simPanel .simtoolbar {
        position: fixed;
        bottom: 1rem;
        left: auto;
        right: auto;
        display: block !important;
    }
    .simPanel .multiplayer-presence {
        position: fixed;
        bottom: 4rem;
    }
    .simPanel.multiplayer-preview #simulators {
        height: calc(100% - 1.5rem);
    }
    #simulators {
        position: relative;
        padding: 3rem 1rem 3rem;
        width: 100%;
        height: 100%;
    }
    div.simframe {
        position:relative;
        width: 50%;
        height: 100%;
        float: left;
        padding-bottom: 0 !important;
    }
    div.simframe > iframe {
        position:relative;
        max-width: 90%;
    }
    div.simframe:only-child {
        width: 100%;
    }
    div.simframe:only-child > iframe {
        max-width: 100%;
    }
    .simtoolbar .ui.button {
        font-size: 1.7rem;
    }
    div.simframe:not(:first-child) {
        display: unset;
    }
}

.sandbox .simPanel .simtoolbar {
    display: none !important;
}

/***********************************
   Headless Simtoolbar (Minecraft)
************************************/

#root.headless {
    .simPanel {
        display: block;
        bottom: 0 !important;
    }

    .simPanel .simtoolbar.item {
        margin: 1rem 0;
    }

    i.green.icon {
        color: rgba(0,0,0,.6)!important;
    }

    #boardview.headless-sim {
        height: 100%;
        padding: 1rem;
        width: @simulatorWidth;
    }
}

#root.headless.collapsedEditorTools {
    #simulator .editor-sidebar {
        display: none;
    }

    #boardview, .filemenu {
        display: none;
    }
}

#root.headless:not(.collapsedEditorTools) {
    #simulator .editor-sidebar {
        left: 0;
        z-index: 40;
    }
}

#root.headless.transparentEditorTools {
    #editortools {
        left: auto;
        height: 5.7rem;
        margin-right: 1rem;
        bottom: var(--extra-mobile-sim-padding);
    }

    #editortools #downloadArea,
    #editortools > div > div > .ui.grid > .column.left {
        display: none;
    }

    @media only screen and (max-width: @largestTabletScreen) {
        #editortools > div > div > .ui.grid > .column.right {
            width: 100%!important;
        }
    }
}

#editortools #projectNameArea {
    padding: 1rem 0;
    input {
        font-size: 0.95rem;
    }
}

.cloudstatusarea {
    color: var(--pxt-tertiary-background);
    align-self: center;
    display: flex;

    .cloudicon {
        margin-left: 0.5rem;
    }

    .cloudprogress {
        margin-left: 0.5rem !important;
    }

    .cloudtext {
        margin-left: 0.5rem;
    }

    .ui.loader:after {
        border-top-color: var(--pxt-tertiary-background);
    }
}

/*******************************
        Download dialogs
*******************************/

.ui.modal .actions .dialog-help-large,
.downloaddialog.ui.modal .actions .icon.help {
    float: left;
    margin-left: 4px;
}

.downloaddialog.ui.modal .actions .icon-and-text.icon~.ui.text {
    margin-left: -0.5em !important;
}

.ui.modal .actions .left-action {
    float: left;
}

.download-callout {
    background-color: #EAE7FF;
    color: #4C309D;
    border-radius: 1em;
    padding: 1em;
    position: relative;
    margin-top: 1.5rem;

    .ui.purple.ribbon.label {
        position: absolute;
        left: -1rem;
        top: -1rem;
        padding-left: 1.5rem;
    }

    > .content {
        padding-top: .25rem;
    }

    button.ui.button {
        margin-top: .5rem;
    }
}

.ui.grid>.icon-align.wide.column {
    display: flex;
    flex-direction: column;

    div {
        flex-grow: 1;
    }
}

.download-device-name {
    color: #4C309D;
}

.header>.header-inline-icon ~ .header-title {
    display: inline;
}

.downloaddialog .content .webusb-connect-image {
    padding: 0 !important;
    margin: 0 auto;
}

.download-dialog-image img:not(.large) {
    max-height: 200px;
    object-fit: contain;
}

.download-dialog .column .ui, .download-dialog .column .ui .content {
    height: 100%;
    display: flex;
    height: 100%;
    align-items: center;
}

.downloaddialog .actions .approve.secondary {
    float: left;
}

#downloadArea button .icon.xicon {
    font-family: "xicon";
}

.download-troubleshoot-header {
    padding: 0 1rem;
}

.download-troubleshoot {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;

    .download-column {
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
    }

    .download-row {
        padding-bottom: 1rem;
        min-height: 30%;

        img {
            width: 300px;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }
    }

    .download-row.image-row {
        flex: 2;
    }
}


/*******************************
           Mini sim view
*******************************/

#root.miniSim:not(.fullscreensim):not(.sandbox) {
    /* Layout */
    .simPanel.ui.items {
        position: fixed;
        padding: 0;
        margin: 1em 1em 0;
        bottom: ~"calc(5.5rem + var(--extra-mobile-sim-padding))" !important;
        right: 0.5rem;
        top: unset;
        left: unset;
        width: auto;
        height: auto;
        min-width: inherit;
        max-width: inherit;
        background: transparent !important;
        overflow: visible;
        z-index: 20;
    }
    .simPanel .simtoolbar > .buttons {
        > .debug-button {
            display: block !important;
        }
    }
    &.collapsedEditorTools:not(.tabTutorial) .simPanel {
        > div {
            display: none !important;
        }
    }
    &.collapsedEditorTools .simPanel {
        aside.simtoolbar button:not(.expand-button) {
            display: none !important;
        }
    }
    #miniSimOverlay {
        position: absolute;
        display: block;
        width: 10rem; /* match width of div.simframe */
        height: 8rem;
    }

    .simPanel {
        bottom: @editorToolsCollapsedMobileHeight;
    }

    &:not(.headless):not(.sandbox) {
        #boardview {
            display: inline-block;
            width: 10rem;
        }
        .simPanel .simtoolbar {
            margin: 1rem 0;
            width: 3rem;
            float: right;
        }
        .simPanel .simtoolbar > div:not(:first-child),
        .simPanel .simtoolbar > .buttons > .button {
            display: none;
        }
        .simPanel .simtoolbar > div:first-child {
            flex-direction: column;
            border-radius: 4px;
            overflow: hidden;
        }
        .simPanel .simtoolbar > div:first-child > button {
            border-radius: 0;
            font-size: .92857143rem;
        }
        #editortools .left .buttons:first-child {
            position: absolute;
            bottom: 0;
        }
    }
    &.headless {
        .simPanel {
            left: 5rem!important;
            z-index: 42!important;
        }
    }

    /* Simulator */
    div.simframe {
        display:inline-block;
        width: 10rem;
        margin-right:0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 81.96% !important;
    }
    div.simframe:not(:first-child) {
        display:none;
    }
    #simulators {
        flex-direction: row;
        display: flex !important;
    }
    /* Simulator Toggle Button */
    #mobiletogglesim,
    .collapsedEditorTools #mobiletogglesim {
        border-top-right-radius: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        top: auto;
        left: 40%;
        width: 20%;
        height: auto;
        bottom: 10rem;
    }
    .collapsedEditorTools #mobiletogglesim {
        bottom: @editorToolsCollapsedHeight;
    }
}

/*******************************
        Media Adjustments
*******************************/

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
    #editorlogo > .poweredbylogo {
        .includePoweredByLogos(); // set the @poweredByLarge variable
        background-image: @poweredByLarge;
    }
}

/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
    #editorlogo > .poweredbylogo {
        .includePoweredByLogos(); // set the @poweredByLarge variable
        background-image: @poweredByLarge;
    }
}

/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    #editorlogo {
        height: 18px;
    }
    #editorlogo > .poweredbylogo {
        height: 12px;
        bottom: 3px;
        .includePoweredByLogos(); // set the @poweredBySmall variable
        background-image: @poweredBySmall;
    }
    #root.headless.transparentEditorTools {
        #editortools {
            margin-bottom: 1.5rem;
        }
    }
    .ui.button.hw-button > .icon.ellipsis {
        left: -1px;
        position: relative;
    }
    .collapsedEditorTools .hw-button:hover:after {
        transform: translateX(0%)!important;
        left: -2rem;
    }

    #downloadArea {
        // .25rem from padding around editortoolbar in portrait mode
        width: ~"calc(@{blocklyRowWidthTablet} - .25rem)";
        margin-right: 0 !important;
    }

    .download-troubleshoot .download-column .download-row img {
        width: 200px;
    }
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    #editorlogo {
        height: 18px;
    }
    #editorlogo > .poweredbylogo {
        height: 13px;
        bottom: 3px;
        .includePoweredByLogos(); // set the @poweredBySmall variable
        background-image: @poweredBySmall;
    }
    .hw-button:hover:after {
        transform: translateX(-100%)!important;
        left: 3rem;
    }
    .collapsedEditorTools .hw-button:hover:after {
        transform: translateX(0%)!important;
        left: -2rem;
    }

    #root:not(.fullscreensim):not(.headless):not(.sandbox) {
        #boardview {
            width: 6.5rem !important;
        }
        #miniSimOverlay {
            width: 6.5rem !important;
            height: 5.5rem !important;
        }
    }

    .download-troubleshoot .download-column .download-row img {
        width: 200px;
    }
}

/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
@media only screen and (min-width: @computerBreakpoint) {
    .collapsedEditorTools:not(.headless):not(.tabTutorial) #simulator .editor-sidebar {
        min-width: 21px;
        width: 21px;
        padding: 0;
        > * {
            display: none;
        }
    }

    .collapsedEditorTools #downloadArea {
        background: var(--pxt-target-background3);
        color: var(--pxt-target-foreground3);
    }

    .collapsedEditorTools:not(.headless):not(.tabTutorial) #maineditor {
        left: 21px;
    }

    .collapsedEditorTools.headless #maineditor {
        left: 0;
    }

    #editortools {
        z-index: @simulatorZIndex + 1;
    }

    .ui.button.hw-button > .icon.ellipsis {
        left: -1px;
        top: 4px;
        position: relative;
    }

    #simulator .topInstructions {
        left: @simulatorWidth;
        min-width: unset;
        max-width: unset;
        padding: 0;
    }
}

/* <= Small Monitor (Mobile + Tablet + Small Monitor) */
@media only screen and (max-width: @largestSmallMonitor) {
    /* Layout */
    #simulator .editor-sidebar, #downloadArea {
        min-width:@simulatorWidthSmall;
        max-width:@simulatorWidthSmall;
    }

    #simulator .topInstructions {
        left: @simulatorWidthSmall;
        min-width: unset;
        max-width: unset;
    }

    #boardview.headless-sim {
        width: @simulatorWidthSmall;
    }

    #maineditor {
        left:@simulatorWidthSmall;
    }

    /* Help card */
    #helpcard {
        top: auto;
        bottom: 2.2rem;
        margin: 0;
    }

    .ui.card .meta .date.small-screen.hide {
        display: none;
    }
}

@media only screen and (min-width: @tabletBreakpoint) {
    .ui.phone.hide {
        display: none;
    }
}

/* <= Tablet (Mobile + Tablet) */
@media only screen and (max-width: @largestTabletScreen) {
    /* Logo */
    .ui.logo.brand, .ui.logo.organization {
        font-size: 0rem;
        padding-right: 0;
    }
    /* Help card */
    #helpcard {
        top: auto;
        bottom: 2rem;
        margin: 0;
    }

    #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #assetEditor {
        bottom: @editorToolsCollapsedMobileHeight;
    }

    #editortools {
        height: @editorToolsCollapsedMobileHeight;
        padding: 0.25rem;

        > div {
            padding: 0 !important;
        }

        #downloadArea {
            background-color: inherit;
            min-width: unset;
            max-width: unset;
            margin-right: 0.25rem;

            .ui.item {
                margin-top: 0;
                padding-top: 0;
            }
        }
    }

    #simulator .editor-sidebar {
        min-width: unset;
        max-width: unset;
        width: 0;
        padding: 0;
    }

    #root.collapsedEditorTools #editortools .left .buttons:first-child {
        bottom: auto!important; // undo bottom positioning for collapsed toolbar
    }
    #maineditor {
        left: 0;
        right:0;
    }
    #maineditor:not(.sandbox) {
        bottom: 0rem;
    }
    #tutorialcard.bottom {
        bottom: 11rem;
    }
    .hideEditorFloats #editortools {
        height: @editorToolsCollapsedMobileHeight;
    }
    .hideEditorFloats.transparentEditorTools #editortools > div > div > .ui.grid {
        margin: auto;
    }
    .hideEditorFloats.transparentEditorTools #editorToolbarArea {
        padding-top: 0;
    }
    .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor, .hideEditorFloats #msg {
        bottom: @editorToolsCollapsedMobileHeight;
    }
    .hideEditorFloats #tutorialcard.bottom {
        bottom: @editorToolsCollapsedMobileHeight;
    }

    /* Hide floating editors */
    .hideEditorFloats .editorFloat {
        display:none;
    }
    /* Menu spacing */
    #root:not(.sandbox) .menubar .ui.menu .dropdown .item {
        padding: 0.3em !important;
    }
    #root .menubar .ui.menu .item.editor-menuitem .item {
        padding: 0.7em !important;
    }
    #root .menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
        width: 40px;
        height: 38px;
    }

    #editortoggle {
        /* toggle positioning, no dropdown */
        .base-menuitem:nth-of-type(1).active ~ .toggle { margin-left: 0!important; }
        .base-menuitem:nth-of-type(2).active ~ .toggle { margin-left: 40px!important; }
        .base-menuitem:nth-of-type(3).active ~ .toggle { margin-left: 80px!important; }

        /* toggle positioning after dropdown */
        & > #editordropdown:nth-of-type(2) ~ .active ~ .toggle { margin-left: 80px!important; }
        & > #editordropdown:nth-of-type(3) ~ .active ~ .toggle { margin-left: 120px!important; }
    }

    /* Top Menu */
    #maineditor {
        top: @mobileMenuHeight;
    }
    .hideMenuBar #maineditor {
        top: 0;
    }
    .sandbox #maineditor {
        top: @sandboxMobileMenuHeight;
    }

    .ui.mini.image {
        display: block !important;
    }

    /* Python/JS dropdown */
    #editordropdown .menu > .item.selected:after {
        display: none;
    }
    #root #editordropdown .menu .item {
        width: auto;
    }
    #root #editordropdown .menu .item .text {
        display: inline-block!important;
    }

    #root.miniSim:not(.fullscreensim):not(.sandbox) {
        div.simframe {
            margin-bottom: -0.4rem
        }

        &:not(.headless):not(.sandbox) {
            .simPanel .simtoolbar {
                margin-bottom: -0.2rem;
            }
        }
    }
}

@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    /* Top Menu */
    #maineditor {
        top: @thinMenuHeight;
    }
    .hideMenuBar #maineditor {
        top: 0;
    }
    .sandbox #maineditor {
        top: @sandboxMobileMenuHeight;
    }
}

/* Thin view, likely zoomed in; view toggle needs to drop to the bottom to make sure it's accessible  */
@media only screen and (max-height: 450px) {
    #mobiletogglesim.collapse-button.toggle-hide {
        z-index: @editorToolsZIndex + 1;
        bottom: 0 !important;
    }
}

/* Custom width treshold to force vertical stacking on the start page */
@media only screen and (max-width: 1095px) {
    .ui.modal.projectsdialog h2.editorname {
        top: 5%;
    }

    .ui.modal.projectsdialog .loader.editoravatar {
        top: 60%;
    }
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    .hideEditorFloats #editortools {
        height: @editorToolsCollapsedMobileHeight;
    }
    .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor {
        bottom: @editorToolsCollapsedMobileHeight;
    }

    .ui.modal.projectsdialog h2.editorname {
        font-size: 1.2rem;
    }

    .hideEditorFloats #editortools .column.mobile.only {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .fullscreensim .simtoolbar .ui.button {
        font-size: 1rem;
    }

    .collapsedEditorTools #mobiletogglesim {
        bottom: @editorToolsCollapsedMobileHeight;
    }

    #editortools {
        .hw-button:before,
        .hw-button:after {
            display: none;
        }

        > .grid.padded {
            margin: -0.5rem !important;
        }

        .ui.button {
            font-size: .92857143rem;
        }

        .save-editortools-btn {
            border-radius: 0.2em;
            margin: 0 .25em 0 0;
        }
    }
}


@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestTabletScreen) {
    /* Top Menu */
    #maineditor {
        top: @thinMenuHeight;
    }
    #simulator .editor-sidebar {
        top: @thinMenuHeight;
    }
}

.simView .simPanel {
    position: fixed;
    z-index: @fullscreenZIndex;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    right:0 !important;
    padding: 0;
    margin: 0;
    max-width: 100%;
    min-width: 100%;
    height:100%;
}

.simView #boardview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: hidden;

    background-color: white;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-top: @mainMenuHeight;

    background-color: var(--pxt-target-background2);
    background: var(--pxt-target-background2); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(var(--pxt-target-background2) 50%, var(--pxt-target-background2)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(var(--pxt-target-background2) 50%, var(--pxt-target-background2)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(var(--pxt-target-background2) 50%, var(--pxt-target-background2)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(var(--pxt-target-background2) 50%, var(--pxt-target-background2)); /* Standard syntax */
}

.simView #maineditor {
    display: none !important;
    z-index: -10 !important;
}

.sandboxfooter {
    left: 0.5em !important;
    right: 0.5em !important;
    margin: 0rem !important;
    right: auto;
    text-align: center;
}

.sandboxfooter .item{
    font-size: 0.7rem !important;
}

.simView .sandboxfooter {
    z-index: @sandboxFooterZIndex;
}

.simView #simulators {
    position: absolute;
    top: @mainMenuHeight;
    bottom: 4rem;
    left: 0;
    right: 0;
}

.simView div.simframe {
    position:relative;
    width: 50%;
    height: 100%;
    float: left;
    padding-bottom: 0 !important;
}

.simView div.simframe > iframe {
    position:relative;
    max-width: 90%;
}

.simView div.simframe:only-child {
    width: 100%;
}

.simView div.simframe:only-child > iframe {
    max-width: 100%;
}

/* ui embed overrides */
div.simframe.ui.embed {
    background: transparent;
}

.sandbox {
    #simulators, #simulator, #editortools {
        display: none;
    }

    #maineditor {
        overflow: hidden;
        left: 0;
    }

    /* Not needed in triple toggle view */
    #miniSimOverlay {
        display: none;
    }

    #simulators {
        flex-direction: row;
        display: flex !important;
    }

    div.simframe:not(:first-child) {
        display: inherit;
    }

    #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #assetEditor, #editortools, #msg {
        bottom: 1.5rem !important;
    }
}

/* Hardware selection dialog */
.hardwaredialog .ui.cardimage {
    background-position: top;
    image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.ui.menu .item.logged-in-dropdown {
    padding-right: .25rem;
    width: auto !important; // override .menu @largestMobileScreen breakpoint in menu.overrides
}

.ui.menu .item.sign-in-dropdown {
    padding-right: .25rem;
    width: auto !important; // override .menu @largestMobileScreen breakpoint in menu.overrides
}

.ui.menu .signin-button {
    display: flex;
    align-items: center;
    background-color: var(--pxt-neutral-background2);
    color: var(--pxt-neutral-foreground2);
    border-radius: 6px;
    height: 3rem;
    padding: 0 .6rem;
    font-family: @segoeUIFont;
    font-weight: 500;

    .icon {
        margin: 0 !important; // override .menu @largestMobileScreen breakpoint in menu.overrides
    }

    .text {
        margin-right: .5rem;
    }

    &:focus {
        border: 3px solid var(--pxt-neutral-stencil2);
        outline: 1px ridge var(--pxt-neutral-foreground2);
    }

    &:hover {
        background-color: var(--pxt-neutral-background2-hover);
        color: var(--pxt-neutral-foreground2-hover);
    }
}

button.ui.button.hostmultiplayergame-button {
    display: inline-flex;
    align-items: center;

    .text {
        font-weight: normal;
    }
    .icon.xicon.multiplayer {
        font-size: 24px;
        margin-top: 0.25rem !important;
    }
}

#root {
    --multiplayer-presence-icon-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='29' fill='%23FF0000'%3E%3Cpath d='M12.754 14.686a7 7 0 100-14 7 7 0 000 14zm-8.5 2a3.5 3.5 0 00-3.5 3.5v.5c0 2.393 1.523 4.417 3.685 5.793 2.174 1.384 5.117 2.207 8.315 2.207 3.199 0 6.141-.823 8.315-2.206 2.163-1.377 3.685-3.4 3.685-5.794v-.5a3.5 3.5 0 00-3.5-3.5h-17z'/%3E%3C/svg%3E");
    --multiplayer-presence-icon-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='29' fill='%230038FF'%3E%3Cpath d='M12.754 14.686a7 7 0 100-14 7 7 0 000 14zm-8.5 2a3.5 3.5 0 00-3.5 3.5v.5c0 2.393 1.523 4.417 3.685 5.793 2.174 1.384 5.117 2.207 8.315 2.207 3.199 0 6.141-.823 8.315-2.206 2.163-1.377 3.685-3.4 3.685-5.794v-.5a3.5 3.5 0 00-3.5-3.5h-17z'/%3E%3C/svg%3E");
    --multiplayer-presence-icon-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='29' fill='%23FF9A14'%3E%3Cpath d='M12.754 14.686a7 7 0 100-14 7 7 0 000 14zm-8.5 2a3.5 3.5 0 00-3.5 3.5v.5c0 2.393 1.523 4.417 3.685 5.793 2.174 1.384 5.117 2.207 8.315 2.207 3.199 0 6.141-.823 8.315-2.206 2.163-1.377 3.685-3.4 3.685-5.794v-.5a3.5 3.5 0 00-3.5-3.5h-17z'/%3E%3C/svg%3E");
    --multiplayer-presence-icon-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='29' fill='%234DA64D'%3E%3Cpath d='M12.754 14.686a7 7 0 100-14 7 7 0 000 14zm-8.5 2a3.5 3.5 0 00-3.5 3.5v.5c0 2.393 1.523 4.417 3.685 5.793 2.174 1.384 5.117 2.207 8.315 2.207 3.199 0 6.141-.823 8.315-2.206 2.163-1.377 3.685-3.4 3.685-5.794v-.5a3.5 3.5 0 00-3.5-3.5h-17z'/%3E%3C/svg%3E");
}

#root:not(.fullscreensim):not(.sandbox) .multiplayer-presence {
    margin: 0;
    margin-bottom: -.5rem;
}

.miniSim:not(.fullscreensim):not(.sandbox):not(.tabTutorial) .multiplayer-presence {
    display: none;
}

#root.tabTutorial:not(.fullscreensim):not(.collapsedEditorTools) .simulator-container.hidden .simPanel > .multiplayer-presence {
    display: block;
    position: fixed;
    bottom: 7rem;
    right: 16.5rem;
    width: 4rem;

    .sim-presence-bar {
        flex-direction: column;
    }
}

.sim-presence-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    gap: 1rem;
    padding: 0;

    .sim-presence-bar-player {
        border-radius: 3rem;
        height: 2.5rem;
        width: 2.5rem;
        padding: 0.2rem;
        border: 2px solid;

        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;

        &.player-1 {
            border-color: #FF0000;
            // TODO: what to use for background color? just leave as default white?
            // background-color: #FF00001A;
            // !importants here as we have to override hc nulling background properties
            background-image: var(--multiplayer-presence-icon-1) !important;
        }
        &.player-2 {
            border-color: #0038FF;
            // background-color: #0038FF1A;
            background-image: var(--multiplayer-presence-icon-2) !important;
        }
        &.player-3 {
            border-color: #FF9A14;
            // background-color: #FF9A141A;
            background-image: var(--multiplayer-presence-icon-3) !important;
        }
        &.player-4 {
            border-color: #4DA64D;
            // background-color: #4DA64D1A;
            background-image: var(--multiplayer-presence-icon-4) !important;
        }
    }
}

// win the specificity fight with hc mode
#root.hc .sim-presence-bar .sim-presence-bar-player {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 75% !important;
}

/* Profile dialog */
.profiledialog {
    .ui.card {
        margin: 0;
        margin-right: 14px;
        margin-bottom: 14px;
        border-radius: @homeCardBorderRadius;
        color: var(--pxt-neutral-foreground1);
        border: @homeCardBorderSize solid var(--pxt-neutral-stencil1) !important;
        background-color: var(--pxt-neutral-background1);

        button {
            margin: 0;
        }

        label.title {
            font-weight: bold;
        }

        p.value {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        p.description {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        p.warning {
            background-color: var(--pxt-colors-yellow-background);
            padding: 6px;
        }

        div.header-text {
            font-size: 20px;
            white-space: nowrap;
            grid-row-start: 1;
            grid-row-end: 1;
            grid-column-start: 1;
            grid-column-end: 2;
            justify-self: start;
        }

        div.profile-pic {
            grid-row-start: 1;
            grid-row-end: 1;
            grid-column-start: 2;
            grid-column-end: 2;
            justify-self: end;
        }

        &.panel {
            width: fit-content;
            min-width: 350px;
            max-width: 500px;
            padding: 14px;
            display: inline-grid;
            row-gap: 20px;
            grid-template-rows: auto;
            grid-template-columns: auto;

            div.row {
                grid-row-start: auto;
                grid-row-end: auto;
                grid-column-start: 1;
                grid-column-end: 2;
                justify-self: start;
                max-width: 100%;
            }

            div.row-span-two {
                grid-row-start: auto;
                grid-row-end: auto;
                grid-column-start: 1;
                grid-column-end: 3;
                justify-self: start;
                max-width: 100%;
            }
        }
    }
}

.sandbox.simView {
    #simulators, #simulator, #editortools {
        display: inherit;
    }

    .editorSidebar .simtoolbar {
        position: fixed;
        bottom: 0.25em;
        left: auto;
        right: auto;

        flex-direction: row !important;
        margin-bottom: 1em !important;
    }
}

.image.pixelart {
    background-color: @white;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}


/** language modal **/
#langmodal {
    #availablelocales .langoption .header {
        color: var(--pxt-secondary-background);
    }

    #langmodalfooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2em;

        a {
            text-decoration: underline;
        }
    }
}

#blocks-editor-field-div {
    position: absolute;
    z-index: @blocklyDropdownDivZIndex;

    .sound-effect-editor {
        max-width: 30rem;
        margin: auto;
    }
}

#blocks-editor-field-div,
.sound-effect-editor-widget {
    // Header colors are hard-coded for field editors, so hard-code the toggle
    // colors as well to ensure good contrast.
    .common-editor-toggle {
        border: 3px solid rgba(52, 73, 94, .2);
        background: rgba(52, 73, 94, .4);

        .common-editor-toggle-item {
            &> .common-button {
                color: #fff;
            }

            &.selected > .common-button {
                color: #323130;
            }
        }

        .common-editor-toggle-handle {
            background: #fff;
        }
    }
}

.blocks-editor-field-overlay {
    position: absolute;
    z-index: @blocklyWidgetDivZIndex;
    background-color: var(--pxt-neutral-alpha50);
}

a.ui.link {
    cursor: pointer;
}

p > a.ui.link {
    margin-left: 0.5rem;
}

p.ui.tiny {
    font-size: 80%;
}
p.ui.small {
    font-size: 90%;
}

.expandable-menu {
    > .menu-header {
        text-decoration: none;
        cursor: pointer;
        :hover {
            text-decoration: none;
        }
    }

    > .expanded-items {
        padding: .5em 1.5em;
    }
}

select.ui.dropdown {
    &:focus, &:active {
        outline: 1px dotted #212121;
        outline: 5px auto -webkit-focus-ring-color;
    }

    font-family: @pageFont;
}

.newproject {
    .expandable-menu {
        font-size: 12px !important;
    }

    .language-restriction-dropdown > button {
        min-width: 18rem;
    }
}

.ui.modal.auto-save-disabled-warning {
    .header {
        background-color: var(--pxt-colors-yellow-background);
    }
}


/** Project settings */

.palette-picker-field {
    display: flex;
    align-items: center;
}

.palette-picker-label {
    margin-right: 0.5rem;
}

// main loader progress bar
.ui.loader.large.main .common-progressbar-wrapper {
    margin-top: 1em;
    width: ~"min(25rem, 50vw)";
    height: 1em;

    --progress-bar-filled-color: @white;
    --progress-bar-unfilled-color: transparency;
    --progress-bar-border-color: @white;

    progress[value].common-progressbar {
        border-radius: 1px;
    }
}