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

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

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

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

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;
}

#msccBanner {
    /* Don't change! This legal text should always be above everything else */
    z-index: @aboveEverythingZIndex;
}

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

#filelist,
#maineditor,
#sidedocs {
  position: absolute;
  bottom: 0rem;
}

#filelist, #maineditor, #sidedocs {
    top: @mainMenuHeight;
}

.hideMenuBar #filelist,
    .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;
@editorToolsThinHeight: 3rem;
#editortools {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: @editorToolsZIndex;
    height: @editorToolsCollapsedHeight;
    background-color: @editorToolsBackground;
}

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

#blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #filelist {
    bottom: @editorToolsCollapsedHeight;
}

.hideEditorToolbar #blocksArea,
    .hideEditorToolbar #monacoEditor,
    .hideEditorToolbar #pxtJsonEditor,
    .hideEditorToolbar #serialEditor,
    .hideEditorToolbar #filelist {
    bottom: 0rem !important;
}

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

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

#filelist {
    padding: 1em 2em 1em 2em;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    background-color: @simulatorBackground;
    z-index: @simulatorZIndex;
}

#filelist .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;
}

#downloadArea {
    margin-top: 0 !important;
    padding-top: 0.55rem;
    background-color: @simulatorBackground;
}

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

.filemenu {
    direction:ltr;
}

#filelist .menu {
    width: 100%;
    margin: 0;
    margin-top: 1rem;
}

#filelist .nested.item {
    padding: .92857143em 1.14285714em;
    padding-left: 2rem;
}

#filelist .header {
    background: rgba(0,0,0,0.05);
}

#simulators {
    text-align: center;
}

.simulator .ui.embed .icon.xicon::before {
    transform: translateX(-77%) translateY(-120%);
    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: @green;
}

.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%;
}

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

/* Menu */
.menubar .ui.menu .item.editor-menuitem {
    padding: 0;
}
.menubar .ui.menu .item.editor-menuitem:hover {
    background: none;
}
.menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
    background: fade(@black, 40%) !important;
    border: 3px solid fade(@black, 20%);
    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 .ui.item.editor-menuitem .item.link:hover {
    background: none;
}
.menubar .ui.menu.fixed .ui.item.editor-menuitem .item:not(.active) {
    opacity: 0.6;
}
.menubar .ui.menu.inverted.fixed .ui.item.editor-menuitem .active.item {
    background: none;
    color: @mainMenuInvertedBackground !important;
}
.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.item.blocks-menuitem ~ .toggle {
    margin-left: 0 !important;
    box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important;
    background: @editorToggleColor !important;
}
.active.item.javascript-menuitem ~ .toggle {
    margin-left: 140px !important;
    box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
    background: @editorToggleColor !important;
}
.active.item.python-menuitem ~ .toggle {
    margin-left: 280px !important;
    box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
    background: @editorToggleColor !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.item.logo .name {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, inherit;
    color: #666666;
    padding: 0 0.3rem;
}
.ui.item.logo svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ui.item.logo img {
    max-height: 1.6rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Powered by Microsoft logo*/
#editorlogo {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 42px;
    background-color: @blocklySvgColor;
    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);
}

/* 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 */
#togglesim, #sidedocstoggle {
    position: absolute;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    top: 40%;
    height: 20%;
    z-index: @sidedocZIndex;
    padding: 0;
    margin: 0;
    background: grey;
    box-shadow: none!important;
    transition: none;

    &:hover,
    &:focus {
      background: #5A5A5A;
    }
}

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

.collapsedEditorTools #togglesim {
    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 #filelist,
.notificationBannerVisible #maineditor,
.notificationBannerVisible #sidedocs {
    top: calc(@mainMenuHeight + @bannerHeight);
}

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

#notificationBanner {
    padding: 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    height: @bannerHeight;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    .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;
                color: darken(@bannerContrastColor, 25%);
            }
        }
    }
}

#notificationBanner.default {
    background-color: @bannerBackgroundColor;
    color: @bannerContrastColor;
    outline: 2px solid @bannerContrastColor;
    a.link {
        color: @bannerLinkColor;
        &:hover, &:focus {
            color: darken(@bannerLinkColor, 10%);
        }
    }
}

/******************************
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;
}

.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: #00aced;
}
.social-icons a.discourse {
    color: white;
    background-color: @primaryColor;
}

/*******************************
        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;
    }
}

/* Mobile + Tablet */
@media only screen and (max-width: @largestTabletScreen) {
    #root.sandbox .active.item.sim-menuitem ~ .toggle {
        margin-left: 0 !important;
        box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    #root.sandbox .active.item.blocks-menuitem ~ .toggle {
        margin-left: 40px !important;
        box-shadow: 2px 0px 0px rgba(0,0,0,0.1), -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    #root.sandbox .active.item.javascript-menuitem ~ .toggle {
        margin-left: 80px !important;
        box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    #root.sandbox .active.item.python-menuitem ~ .toggle {
        margin-left: 120px !important;
        box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }

    .simView #boardview {
        padding-top: @sandboxMobileMenuHeight;
    }

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

/* Mobile only */
@media only screen and (max-width: @largestMobileScreen) {
    .ui.mobile.only {
        display:unset !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;
    }
}
@media only screen and (min-height: @thinEditorBreakpoint) {
    .ui.thin.only {
        display:none !important;
    }
}

/*******************************
        fuyllscreensim
*******************************/
.fullscreensim {
    /* Full screen */
    #filelist {
        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;
    }
    #filelistOverlay {
        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: @fullscreenBackgroundGradientStart;
        background: @fullscreenBackgroundGradientStart; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Firefox 3.6 to 15 */
        background: linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* Standard syntax */
    }
    #simulator .hidefullscreen,
    .menubar .ui.item:not(.logo),
    #maineditor,
    #editortools,
    #serialPreview {
        display: none !important;
        z-index: -10 !important;
    }
    .sandboxfooter {
        z-index: @sandboxFooterZIndex;
        bottom: 1rem;
    }
    #mainmenu {
        background: transparent !important;
    }
    #filelist .simtoolbar {
        position: fixed;
        bottom: 1rem;
        left: auto;
        right: auto;
        display: block !important;
    }
    #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;
    }
}

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

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

    #filelist .simtoolbar.item {
        margin: 1rem 0;
    }

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

#root.headless.collapsedEditorTools {
    #filelist {
        position: absolute;
        width: auto;
        top: auto;
        left: 5rem;
        background: none transparent;
        min-width: inherit;
        max-width: inherit;
    }

    #boardview {
        display: none;
    }
}

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

/*******************************
        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;
    }
}

/* 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;
    }
}

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

    .collapsedEditorTools:not(.headless) #filelist > * {
        display: none;
    }

    .collapsedEditorTools #downloadArea {
        background: @editorToolsBackground;
    }

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

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

/* <= Small Monitor (Mobile + Tablet + Small Monitor) */
@media only screen and (max-width: @largestSmallMonitor) {
    /* Layout */
    #filelist, #downloadArea {
        min-width:@simulatorWidthSmall;
        max-width:@simulatorWidthSmall;
    }
    #maineditor {
        left:@simulatorWidthSmall;
    }
    /* Logo */
    .ui.logo.brand .name {
        display: none !important;
    }
    /* Help card */
    #helpcard {
        top: auto;
        bottom: 2.2rem;
        margin: 0;
    }
}

/* <= 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;
    }
    /* Layout */
    #filelist {
        position:absolute;
        padding: 0;
        margin: 1em;
        bottom: 4rem !important;
        top: auto;
        width: auto;
        min-width: inherit;
        max-width: inherit;
        background: transparent !important;
        overflow: visible;
    }
    .collapsedEditorTools #filelist {
        display: none;
    }
    #filelistOverlay {
        display: block;
        top: auto;
        left: 4rem; /* match left pos of #boardview */
        bottom: -3rem;
        width: 10rem; /* match width of div.simframe */
        height: 9rem;
    }
    #root:not(.fullscreensim):not(.headless) {
        #boardview {
            position: absolute;
            left: 4rem;
            width: 10rem;
        }
        #filelist .simtoolbar {
            margin: 0.5em 0;
        }
        #filelist .simtoolbar > div:not(:first-child),
        #filelist .simtoolbar > .buttons > .button {
            display: none;
        }
        #filelist .simtoolbar > .buttons > .play-button,
        #filelist .simtoolbar > .buttons > .restart-button {
            display: block;
        }
        #filelist .simtoolbar > div:first-child {
            flex-direction: column;
            border-radius: 4px;
            overflow: hidden;
        }
        #filelist .simtoolbar > div:first-child > button {
            border-radius: 0;
            font-size: .92857143rem;
        }
        #editortools .left .buttons:first-child {
            position: absolute;
            bottom: 0;
        }
    }
    #root.headless {
        #filelist {
            left: 5rem!important;
            z-index: 42!important;
        }
    }
    #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;
    }
    #editortools {
        height: 10rem;
    }
    #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #msg {
        bottom: 10rem;
    }
    #tutorialcard.bottom {
        bottom: 11rem;
    }
    .hideEditorFloats #editortools {
        height: @editorToolsCollapsedHeight;
    }
    .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor, .hideEditorFloats #msg {
        bottom: @editorToolsCollapsedHeight;
    }
    .hideEditorFloats #tutorialcard.bottom {
        bottom: @editorToolsCollapsedHeight;
    }
    /* Simulator */
    div.simframe {
        display:inline-block;
        width: 10rem;
        margin-right:0.5rem;
        padding-bottom: 81.96% !important;
    }
    div.simframe:not(:first-child) {
        display:none;
    }
    #simulators {
        flex-direction: row;
        display: flex !important;
    }
    /* Simulator Toggle Button */
    #togglesim, .collapsedEditorTools #togglesim {
        border-top-right-radius: 100px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        top: unset;
        left: 40%;
        width: 20%;
        height: unset;
        bottom: 10rem;
    }
    .collapsedEditorTools #togglesim {
        bottom: 4.7rem;
    }
    /* Hide floating editors */
    .hideEditorFloats .editorFloat {
        display:none;
    }
    #downloadArea {
        display: none;
    }
    /* Menu spacing */
    #root:not(.sandbox) .menubar .ui.menu .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;
    }
    .active.item.javascript-menuitem ~ .toggle {
        margin-left: 40px !important;
    }
    .active.item.python-menuitem ~ .toggle {
        margin-left: 80px !important;
    }
    /* Top Menu */
    #maineditor {
        top: @mobileMenuHeight;
    }
    .hideMenuBar #maineditor {
        top: 0;
    }
    .sandbox #maineditor {
        top: @sandboxMobileMenuHeight;
    }

    /* Logo */
    .ui.item.logo img {
        max-height: 2.5rem;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
    }
    .ui.mini.image {
        display: block !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;
    }

    .logo-wide #mainmenu {
        .ui.logo.brand,
        .ui.logo.organization {
            display: none !important;
        }
    }
    .fullscreensim .simtoolbar .ui.button {
        font-size: 1rem;
    }
    .collapsedEditorTools #togglesim {
        bottom: 3.4rem;
    }
}


@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    /* Top Menu */
    #maineditor {
        top: @thinMenuHeight;
    }
    #filelist {
        top: @thinMenuHeight;
        padding: 0.5rem 1.5rem;
    }
    #editortools {
        height: @editorToolsThinHeight; 
    }
    #blocksArea, #monacoEditor, #pxtJsonEditor, #serialEditor, #filelist {
        bottom: @editorToolsThinHeight;
    }    
    #editortools .ui.button {
        padding: .5em;
    }
    #downloadArea {
        padding-top: 0;
    }
    #editorToolbarArea, #projectNameArea {
        padding-top: 0.5rem;
        font-size: 0.8em;
    }
}

.simView #filelist {
    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: @fullscreenBackgroundGradientStart;
    background: @fullscreenBackgroundGradientStart; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Firefox 3.6 to 15 */
    background: linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* 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 */
    #filelistOverlay {
        display: none;
    }

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

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

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

    .active.item.sim-menuitem ~ .toggle {
        margin-left: 0 !important;
        box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    .active.item.blocks-menuitem ~ .toggle {
        margin-left: 140px !important;
        box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    .active.item.javascript-menuitem ~ .toggle {
        margin-left: 280px !important;
        box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    .active.item.python-menuitem ~ .toggle {
        margin-left: 420px !important;
        box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !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;
}

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

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

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

img.pixelart {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}