[EBE-3828] Fixed login form labels overlapping

@import "../../colors";

.ek-login {

    &__title {
        margin-top: 60px;
        margin-bottom: 50px;
        font-size: 38px;
        font-weight: 300;
    }

    &__email,
    &__password {
        margin: 0 0 18px 0;

        &__forgot {
            position: absolute;
            cursor: pointer;
            top: 0;
            right: 0;
        }

        label, input {
            font-size: 16px;
        }

        label {
            &:not(.md-no-float):not(.md-container-ignore) {
                z-index: inherit;
            }
        }

        input {
            width: 410px;
        }
    }

    &__password {
        input {
            padding-right: 60px;
        }
    }

    &__divider {
        width: 410px;
        color: @grey600;
        border-bottom: 1px solid @grey200;
        text-align: center;
        position: relative;
        margin-bottom: 45px;

        span {
            background: @white;
            height: 20px;
            padding: 5px 10px;
            display: inline-block;
            position: absolute;
            top: -12px;
            left: 50%;
            margin-left: -20px;
        }

    }

    &__submit-btn {
        width: 220px;
        height: 45px;
        margin: 0 0 45px 0;
        font-weight: bold;
        color: @white !important;
        border-radius: 2px;
        &.md-raised:not([disabled]) {
            box-shadow: none;
        }
        &.md-raised[disabled] {
            background-color: rgba(38, 198, 218, 0.4);
            color: @white !important;
        }
        .md-ripple-container {
            border-radius: 2px;
        }
    }

    &__google-btn {
        width: 220px;
        padding: 4px 6px;
        font-weight: bold;
        background: @grey100;
        border: 1px solid @grey400;
        border-radius: 2px;

        img {
            height: 20px;
            margin-right: 10px;
            position: relative;
            top: 5px;
            width: 20px;
        }

        &:hover, &:active {
            border-color: @grey450;
        }

        &.md-raised:not([disabled]) {
            box-shadow: none;
        }

        .md-ripple-container {
            border-radius: 1px;
        }
    }

    &__saml-btn {
        width: 220px;
        padding: 4px 6px;
        font-weight: bold;
        background: @grey100;
        border: 1px solid @grey400;
        border-radius: 2px;

        img {
            height: 20px;
            margin-right: 10px;
            position: relative;
            top: 5px;
            width: 20px;
        }

        &:hover, &:active {
            border-color: @grey450;
        }

        &.md-raised:not([disabled]) {
            box-shadow: none;
        }

        .md-ripple-container {
            border-radius: 1px;
        }
    }
}

@import "../../colors";

.ek-login {

    &__title {
        margin-top: 60px;
        margin-bottom: 50px;
        font-size: 38px;
        font-weight: 300;
    }

    &__email,
    &__password {
        margin: 0 0 18px 0;

        &__forgot {
            position: absolute;
            cursor: pointer;
            top: 0;
            right: 0;
        }

        label, input {
            font-size: 16px;
        }

        input {
            width: 410px;
        }
    }

    &__password {
        input {
            padding-right: 60px;
        }
    }

    &__divider {
        width: 410px;
        color: @grey600;
        border-bottom: 1px solid @grey200;
        text-align: center;
        position: relative;
        margin-bottom: 45px;

        span {
            background: @white;
            height: 20px;
            padding: 5px 10px;
            display: inline-block;
            position: absolute;
            top: -12px;
            left: 50%;
            margin-left: -20px;
        }

    }

    &__submit-btn {
        width: 220px;
        height: 45px;
        margin: 0 0 45px 0;
        font-weight: bold;
        color: @white !important;
        border-radius: 2px;
        &.md-raised:not([disabled]) {
            box-shadow: none;
        }
        &.md-raised[disabled] {
            background-color: rgba(38, 198, 218, 0.4);
            color: @white !important;
        }
        .md-ripple-container {
            border-radius: 2px;
        }
    }

    &__google-btn {
        width: 220px;
        padding: 4px 6px;
        font-weight: bold;
        background: @grey100;
        border: 1px solid @grey400;
        border-radius: 2px;

        img {
            height: 20px;
            margin-right: 10px;
            position: relative;
            top: 5px;
            width: 20px;
        }

        &:hover, &:active {
            border-color: @grey450;
        }

        &.md-raised:not([disabled]) {
            box-shadow: none;
        }

        .md-ripple-container {
            border-radius: 1px;
        }
    }

    &__saml-btn {
        width: 220px;
        padding: 4px 6px;
        font-weight: bold;
        background: @grey100;
        border: 1px solid @grey400;
        border-radius: 2px;

        img {
            height: 20px;
            margin-right: 10px;
            position: relative;
            top: 5px;
            width: 20px;
        }

        &:hover, &:active {
            border-color: @grey450;
        }

        &.md-raised:not([disabled]) {
            box-shadow: none;
        }

        .md-ripple-container {
            border-radius: 1px;
        }
    }
}


Use a fixed width for the path <span>.

Use a fixed width for the path <span>.

This lines up the progress bars nicely. It'll look ugly if you have a really long
filename, though.

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.merge-conflicts {
  .navigate {
    cursor: pointer;
  }

  .navigate:hover {
    background-color: @background-color-highlight;
  }

  .path {
    width: 20%;
  }
}

.editor.conflicted {
  .conflict-line {
    &.ours {
      border-left: solid 2px @ui-site-color-1;
      border-right: solid 2px @ui-site-color-1;
      background: mix(@ui-site-color-1, @base-background-color);
    }

    &.theirs {
      border-left: solid 2px @ui-site-color-2;
      border-right: solid 2px @ui-site-color-2;
      background: mix(@ui-site-color-2, @base-background-color);
    }

    &.resolved {
      background: @background-color-highlight;
    }

    &.dirty {
      background: darken(@ui-site-color-5, 40%);
      border-left: solid 2px @ui-site-color-5;
      border-right: solid 2px @ui-site-color-5;
    }
  }

  .side {
    padding: 0 20px;
    width: 100%;
    position: absolute;
    left: 0;
    span {
      margin-left: 10px;
    }
    span.pull-right {
      clear: right;
      margin-right: 20px;
    }

    button.revert {
      display: none;
    }

    &.ours {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      button {
        margin-top: 5px;
      }
    }

    &.theirs {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      button {
        margin-top: -35px;
      }
    }

    &.dirty {
      background-color: @ui-site-color-5;

      button.revert {
        display: inline-block;
      }
    }
  }

  .navigation {
    padding: 0 20px;
    background: @base-background-color;
    border-left: solid 2px @background-color-highlight;
    border-right: solid 2px @background-color-highlight;
    width: 100%;
    position: absolute;
    left: 0;

    span.pull-right {
      clear: right;
      margin-right: 20px;
    }

    button {
      margin-left: 5px;
      margin-top: -15px;
    }
  }
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.merge-conflicts {
  .navigate {
    cursor: pointer;
  }

  .navigate:hover {
    background-color: @background-color-highlight;
  }
}

.editor.conflicted {
  .conflict-line {
    &.ours {
      border-left: solid 2px @ui-site-color-1;
      border-right: solid 2px @ui-site-color-1;
      background: mix(@ui-site-color-1, @base-background-color);
    }

    &.theirs {
      border-left: solid 2px @ui-site-color-2;
      border-right: solid 2px @ui-site-color-2;
      background: mix(@ui-site-color-2, @base-background-color);
    }

    &.resolved {
      background: @background-color-highlight;
    }

    &.dirty {
      background: darken(@ui-site-color-5, 40%);
      border-left: solid 2px @ui-site-color-5;
      border-right: solid 2px @ui-site-color-5;
    }
  }

  .side {
    padding: 0 20px;
    width: 100%;
    position: absolute;
    left: 0;
    span {
      margin-left: 10px;
    }
    span.pull-right {
      clear: right;
      margin-right: 20px;
    }

    button.revert {
      display: none;
    }

    &.ours {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      button {
        margin-top: 5px;
      }
    }

    &.theirs {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      button {
        margin-top: -35px;
      }
    }

    &.dirty {
      background-color: @ui-site-color-5;

      button.revert {
        display: inline-block;
      }
    }
  }

  .navigation {
    padding: 0 20px;
    background: @base-background-color;
    border-left: solid 2px @background-color-highlight;
    border-right: solid 2px @background-color-highlight;
    width: 100%;
    position: absolute;
    left: 0;

    span.pull-right {
      clear: right;
      margin-right: 20px;
    }

    button {
      margin-left: 5px;
      margin-top: -15px;
    }
  }
}


head.less: copyright note

head.less: copyright note

/*
Copyright (C) 2012 Adriano Monteiro Marques

Author: Piotrek Wasilewski <wasilewski.piotrek@gmail.com>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@bg_color: #efefef;
@meta_bg: #f9f9f9;
@border_color: #ddd;
@font_color: #000;
@nav_highlight_color: #f9f9f9;
@nav_light_color: #888;

#header {
    min-width: 1024px;
    width: 100%;
    height: 51px;
    padding: 0 50px;
    border-bottom: 1px solid @border_color;

    background: @bg_color;
    color: @font_color;

    position: fixed;
    top: 0;
    left: 0;

    a {
        color: @font_color;
        font-weight: normal;
    }

    h1 {
        display: inline-block;
        font-size: 15px;
        width: 280px;
        padding: 0;
        margin: 15px 5px 0 0;

        a {
            font-weight: bold;
            color: @nav_light_color;
        }
    }

    ul.navigation {
        list-style-type: none;
        display: inline-block;
        padding: 0;
        margin: 0;
        font-size: 16px;

        li {
            display: inline-block;
            padding: 15px 0;

            a {
                width: 100%;
                height: 100%;
                padding: 15px 10px;

                font-weight: bold;
            }

            a:hover {
                text-decoration: none;
                background: @nav_highlight_color;
            }
        }
    }

    #toolbar {
        position: absolute;
        top: 0;
        right: 150px;

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

            font-size: 14px;

            li {
                padding: 17px 0;

                color: @nav_light_color;

                a {
                    color: @nav_light_color;
                    text-decoration: underline;
                }

                a:hover {
                    color: #000;
                }
            }
        }
    }

    #meta {
        margin-left: -50px;
        padding: 0 45px;

        background: #ac4747;
        color: #fff;

        ul {
            margin: 0 0 0 295px;
            padding: 7px 0;

            list-style-type: none;
            font-size: 14px;

            li {
                padding: 5px 10px;
                display: inline;

                a {
                    color: #fff;
                }
            }
        }
    }
}


Handled hiding elements for different screens

@import "layout/layout";

#header {
  position: relative;
  height: 80px;
  z-index: 3;
  .header-title-wrapper-fullscreen {
    position: absolute;
    left: 27vw;
    .navbar-brand-title-fullscreen.hidden-sm {
      white-space: nowrap;
      margin: 20px 0 5px;
      font-family: Amiri;
      font-size: 31px;
      color: black;
      line-height: 18px;
      letter-spacing: 0.3px;
      font-weight: 600;
    }
    .navbar-brand-sub-title.hidden-sm {
      text-align: center;
      span {
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 500;
        color: @grey;
      }
    }
  }
  .fixed-header-wrapper {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 82px;
  }

  .home-hamburger {
    &:hover {
      color: @primary-color;
    }
    .hamburger-icon {
      padding: 30px 15px;
      color: @grey;
      font-size: 1.1666666666666667rem;
      font-weight: 300;
      letter-spacing: .3px;
    }
  }

  ul.header-social-icons {
    position: absolute;
    left: 125px;
    top: 14px;
    z-index: 9999;
    display: none;
    li {
      list-style-type: none;
      display: inline-block;
      vertical-align: middle;
      padding: 0px 5px;

      .fa {
        font-size: 18px;
      }

      &.link-light {
        display: none;
      }
    }
  }
}

#main_content > .container {
  margin-top: 40px;
  &.story-grid {
    margin-top: 0px;
  }
}

#mainnav .navbar-header {
  width: 100%;
}

.single-category, .author-detail, .archive-detail, .article-detail {
  .show-content-type {
    display: none;
  }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .nav-header-icon-title {
    padding-right: 0px;
  }

  .stories {
    a {
      padding-left: 0 !important;
    }
  }
}

@media only screen and (max-width: 768px) {
  .header-title-wrapper-fullscreen, .home-hamburger {
    display: none !important;
  }

  #header, #header .fixed-header-wrapper {
    height: 56px;

    .navbar-collapse {
      max-height: ~"calc(100vh - 55px)";
      overflow: auto;
    }

  }

  .album-list, .single-category, .Visible, .PhotoZone, .Little, .VideoZone, .AudioZone, .Tongues, .gallery-home,
  .face-list, .resource-list, .about-the-editor, .authors, .donate, .archive-detail, .location-detail {

    #header ul.header-social-icons {
      display: block;
      position: fixed;
      top: 20px;
    }

    .gallery-title-icon.share-icon, .gallery-title-icon.face-upload-share {
      display: none;
    }
  }

  .header-back-to-categories {
    display: none;
  }

  .single-category {
    #header ul.header-social-icons {
      top: 13px;
    }
    .header-back-to-categories {
      border-right: 1px solid @light-grey;
      display: block;
      letter-spacing: 1px;
      padding: 0 10px 0 0;
      line-height: 30px;
      .fa-angle-left {
        color: @link-primary;
        font-size: 12px !important;
      }
    }
  }

  .single-category, .Visible, .Little, .Tongues, .gallery-home, .about-the-editor, .authors, .donate, .archive-detail,
  .location-detail {
    #header ul.header-social-icons {
      left: 20px;
    }
  }

  .face-list {
    #header ul.header-social-icons li.link-light {
      display: inline-block;
    }
  }
}

.listing-image {
  width: 100%;
  max-width: 270px;
  height: 180px !important;
}

.full-image-center {
  position: relative;
  height: 100%;
  background: #000;

  img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    width: auto !important;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    vertical-align: middle;
  }
}

@media (max-width: 500px) {
  #holder {
    overflow: hidden;

    &.single-category, &.article-detail, &.author-detail, &.archive-detail, &.location-detail {
      overflow: visible;
    }
  }

  .dropdown.custom-dropdown {
    &.open > .dropdown-menu {

      li {
        padding: 8px 10px;
      }
    }
  }
}

// common styles
.dropdown.custom-dropdown {
  z-index: 2;
  button {
    border-style: solid;
    background-color: @lighter-grey;
    border-width: 1px;
    border-color: lightgrey;
    color: #b5b5b5;
    margin-top: 6px;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    font-weight: 400;
    text-transform: capitalize;
    &:hover {
      color: #444;
      border: 1px solid #444;
    }
  }
  &.open > .dropdown-menu {
    min-width: 105px;
    display: block;
    text-align: center;
    border-radius: 0;
    color: @grey;
    li {
      font-size: 14px;
      cursor: pointer;
      margin: 2px;
      &:hover {
        background: #f4f4f4;
      }
      a {
        width: 100%;
        margin: 0px;
        font-size: 14px;
        display: inline-block;
      }
      a:hover {
        color: @primary-color;

      }
    }
  }
}

@import "layout/layout";

#header {
  position: relative;
  height: 80px;
  z-index: 3;
  .header-title-wrapper-fullscreen {
    position: absolute;
    left: 27vw;
    .navbar-brand-title-fullscreen.hidden-sm {
      white-space: nowrap;
      margin: 20px 0 5px;
      font-family: Amiri;
      font-size: 31px;
      color: black;
      line-height: 18px;
      letter-spacing: 0.3px;
      font-weight: 600;
    }
    .navbar-brand-sub-title.hidden-sm {
      text-align: center;
      span {
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 500;
        color: @grey;
      }
    }
  }
  .fixed-header-wrapper {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 82px;
  }

  .home-hamburger {
    &:hover {
      color: @primary-color;
    }
    .hamburger-icon {
      padding: 30px 15px;
      color: @grey;
      font-size: 1.1666666666666667rem;
      font-weight: 300;
      letter-spacing: .3px;
    }
  }

  ul.header-social-icons {
    position: absolute;
    left: 125px;
    top: 14px;
    z-index: 9999;
    display: none;
    li {
      list-style-type: none;
      display: inline-block;
      vertical-align: middle;
      padding: 0px 5px;

      .fa {
        font-size: 18px;
      }

      &.link-light {
        display: none;
      }
    }
  }
}

#main_content > .container {
  margin-top: 40px;
  &.story-grid {
    margin-top: 0px;
  }
}

#mainnav .navbar-header {
  width: 100%;
}

.single-category, .author-detail, .archive-detail, .article-detail {
  .show-content-type {
    display: none;
  }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  .nav-header-icon-title {
    padding-right: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .header-title-wrapper-fullscreen,.home-hamburger{
    display: none !important;
  }

  #header, #header .fixed-header-wrapper {
    height: 56px;

    .navbar-collapse {
      max-height: ~"calc(100vh - 55px)";
      overflow: auto;
    }

  }

  .album-list, .single-category, .Visible, .PhotoZone, .Little, .VideoZone, .AudioZone, .Tongues, .gallery-home,
  .face-list, .resource-list, .about-the-editor, .authors, .donate, .archive-detail, .location-detail {

    #header ul.header-social-icons {
      display: block;
      position: fixed;
      top: 20px;
    }

    .gallery-title-icon.share-icon, .gallery-title-icon.face-upload-share {
      display: none;
    }
  }

  .header-back-to-categories {
    display: none;
  }

  .single-category {
    #header ul.header-social-icons {
      top: 13px;
    }
    .header-back-to-categories {
      border-right: 1px solid @light-grey;
      display: block;
      letter-spacing: 1px;
      padding: 0 10px 0 0;
      line-height: 30px;
      .fa-angle-left {
        color: @link-primary;
        font-size: 12px !important;
      }
    }
  }

  .single-category, .Visible, .Little, .Tongues, .gallery-home, .about-the-editor, .authors, .donate, .archive-detail,
  .location-detail {
    #header ul.header-social-icons {
      left: 20px;
    }
  }

  .face-list {
    #header ul.header-social-icons li.link-light {
      display: inline-block;
    }
  }
}

.listing-image {
  width: 100%;
  max-width: 270px;
  height: 180px !important;
}

.full-image-center {
  position: relative;
  height: 100%;
  background: #000;

  img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    width: auto !important;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    vertical-align: middle;
  }
}

@media (max-width: 500px) {
  #holder {
    overflow: hidden;

    &.single-category, &.article-detail, &.author-detail, &.archive-detail, &.location-detail {
      overflow: visible;
    }
  }

  .dropdown.custom-dropdown {
    &.open > .dropdown-menu {

      li {
        padding: 8px 10px;
      }
    }
  }
}

// common styles
.dropdown.custom-dropdown {
  z-index: 2;
  button {
    border-style: solid;
    background-color: @lighter-grey;
    border-width: 1px;
    border-color: lightgrey;
    color: #b5b5b5;
    margin-top: 6px;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    font-weight: 400;
    text-transform: capitalize;
    &:hover {
      color: #444;
      border: 1px solid #444;
    }
  }
  &.open > .dropdown-menu {
    min-width: 105px;
    display: block;
    text-align: center;
    border-radius: 0;
    color: @grey;
    li {
      font-size: 14px;
      cursor: pointer;
      margin: 2px;
      &:hover {
        background: #f4f4f4;
      }
      a {
        width: 100%;
        margin: 0px;
        font-size: 14px;
        display: inline-block;
      }
      a:hover {
        color: @primary-color;

      }
    }
  }
}


Make sidebar slides scrollable

Make sidebar slides scrollable

@duration: .3s;
main {
  position: relative;
  background-color: @color3;
  box-shadow: 0px 0px 15px black;
  min-height: 100vh;
  z-index: @content-index;
  padding-top: 120px;
  text-align: center;

  transform: translateZ(0);
  transition: transform @duration;
  will-change: transform;
  .nav-left-is-visible & {
    transform: translateX(@nav-width);
  }
  .nav-right-is-visible & {
    transform: translateX(-@nav-width);
  }

  .overlay {
    /* shadow layer visible when navigation is active */
    position: fixed;
    z-index: @above-content-index;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    background-color: fade(@color2, 80%);
    visibility: hidden;
    opacity: 0;

    .transition(opacity @duration, visibility @duration;);
    .backface-visibility(hidden);

    .nav-is-visible & {
      visibility: visible;
      opacity: 1;
    }
  }
}

@nav-bar-height: 50px;

.nav-left-is-visible nav.nav-right {
  display: none;
}

.nav-right-is-visible nav.nav-left {
  display: none;
}

nav.nav-left,
nav.nav-right {
  position: fixed;
  top: 0;
  width: @nav-width;
  height: 100%;
  background-color: @nav-bg;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: @below-content-index;

  header {
    display: block;
    height: @nav-bar-height;
    line-height: @nav-bar-height;
    background-color: @nav-header-bg;

    .go-back {
      position: absolute;
      left: 0;
      z-index: 2;
      transition: opacity 1s;
      will-change: opacity, visibility;
      opacity: 0;
      visibility: hidden;
      height: @nav-bar-height;
      width: 30px;

      &.active {
        opacity: 1;
        visibility: visible;
      }

      &::before, &::after {
        transform-origin: 1px 50%;
        left: 10px;
      }
    }

    > nav {
      position: absolute;
      width: @nav-width;
      left: @nav-width;
      transform: translateX(0);
      transition: transform @duration, opacity @duration;
      will-change: transform, opacity;
      opacity: 0;
      text-align: center;

      &.active {
        transform: translateX(-100%);
        opacity: 1;
      }
      &.slide-out {
        transform: translateX(-120%);
        opacity: 0;
      }
    }

    &.back {
      > nav {
        transform: translate(-120%);
      }
      > nav.active {
        transform: translateX(-100%);
      }
      > nav.slide-out {
        transform: translateX(0);
      }
    }
  }

  a[data-toggle] {
    position: relative;
    padding-right: 40px;

    &::before, &::after {
      /* arrow goes on the right side - children navigation */
      right: 20px;
      transform-origin: 9px 50%;
    }
  }

  .go-back,
  a[data-toggle] {
    &::before, &::after {
      /* arrow icon in CSS - for element with nested unordered lists */
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -1px;
      display: inline-block;
      height: 2px;
      width: 10px;
      background: darken(@nav-bg, 20%);
      .backface-visibility(hidden);
    }

    &::before {
      transform: rotate(45deg);
    }
    &::after {
      transform: rotate(-45deg);
    }
  }

  @menu-item-height: @nav-bar-height;
  ul a {
    display: block;
    height: @menu-item-height;
    line-height: @menu-item-height;
    padding: 0 20px;
    color: @nav-links;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .slide {
    position: fixed;
    height: ~"calc(100% - @{nav-bar-height})";
    width: @nav-width;
    transform: translateX(100%);
    transition: transform @duration, opacity @duration;
    will-change: transform, opacity;
    opacity: 0;
    overflow-y: auto;

    &.active {
      transform: translateX(0%);
      opacity: 1;
    }
    &.slide-out {
      transform: translateX(-20%);
      opacity: 0;
    }
  }
}

.nav-left {
  left: 0;
  right: auto;
}

.nav-right {
  right: 0;
}

@duration: .3s;
main {
  position: relative;
  background-color: @color3;
  box-shadow: 0px 0px 15px black;
  min-height: 100vh;
  z-index: @content-index;
  padding-top: 120px;
  text-align: center;

  transform: translateZ(0);
  transition: transform @duration;
  will-change: transform;
  .nav-left-is-visible & {
    transform: translateX(@nav-width);
  }
  .nav-right-is-visible & {
    transform: translateX(-@nav-width);
  }

  .overlay {
    /* shadow layer visible when navigation is active */
    position: fixed;
    z-index: @above-content-index;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    background-color: fade(@color2, 80%);
    visibility: hidden;
    opacity: 0;

    .transition(opacity @duration, visibility @duration;);
    .backface-visibility(hidden);

    .nav-is-visible & {
      visibility: visible;
      opacity: 1;
    }
  }
}

@nav-bar-height: 50px;

.nav-left-is-visible nav.nav-right {
  display: none;
}

.nav-right-is-visible nav.nav-left {
  display: none;
}

nav.nav-left,
nav.nav-right {
  position: fixed;
  top: 0;
  width: @nav-width;
  height: 100%;
  background-color: @nav-bg;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: @below-content-index;

  header {
    display: block;
    height: @nav-bar-height;
    line-height: @nav-bar-height;
    background-color: @nav-header-bg;

    .go-back {
      position: absolute;
      left: 0;
      z-index: 2;
      transition: opacity 1s;
      will-change: opacity, visibility;
      opacity: 0;
      visibility: hidden;
      height: @nav-bar-height;
      width: 30px;

      &.active {
        opacity: 1;
        visibility: visible;
      }

      &::before, &::after {
        transform-origin: 1px 50%;
        left: 10px;
      }
    }

    > nav {
      position: absolute;
      width: @nav-width;
      left: @nav-width;
      transform: translateX(0);
      transition: transform @duration, opacity @duration;
      will-change: transform, opacity;
      opacity: 0;
      text-align: center;

      &.active {
        transform: translateX(-100%);
        opacity: 1;
      }
      &.slide-out {
        transform: translateX(-120%);
        opacity: 0;
      }
    }

    &.back {
      > nav {
        transform: translate(-120%);
      }
      > nav.active {
        transform: translateX(-100%);
      }
      > nav.slide-out {
        transform: translateX(0);
      }
    }
  }

  a[data-toggle] {
    position: relative;
    padding-right: 40px;

    &::before, &::after {
      /* arrow goes on the right side - children navigation */
      right: 20px;
      transform-origin: 9px 50%;
    }
  }

  .go-back,
  a[data-toggle] {
    &::before, &::after {
      /* arrow icon in CSS - for element with nested unordered lists */
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -1px;
      display: inline-block;
      height: 2px;
      width: 10px;
      background: darken(@nav-bg, 20%);
      .backface-visibility(hidden);
    }

    &::before {
      transform: rotate(45deg);
    }
    &::after {
      transform: rotate(-45deg);
    }
  }

  @menu-item-height: @nav-bar-height;
  ul a {
    display: block;
    height: @menu-item-height;
    line-height: @menu-item-height;
    padding: 0 20px;
    color: @nav-links;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .slide {
    position: fixed;
    height: 100%;
    width: @nav-width;
    transform: translateX(100%);
    transition: transform @duration, opacity @duration;
    will-change: transform, opacity;
    opacity: 0;

    &.active {
      transform: translateX(0%);
      opacity: 1;
    }
    &.slide-out {
      transform: translateX(-20%);
      opacity: 0;
    }
  }
}

.nav-left {
  left: 0;
  right: auto;
}

.nav-right {
  right: 0;
}


Fixed color of primary-btn text

Fixed color of primary-btn text


fixed bug with missing mixins

fixed bug with missing mixins

// Reset and dependencies
@import (less)"resets/normalize.css";
@import (less)"resets/ht5bp-main.css";
@import (less)"resets/formalize.css";
@import "resets/typography-resets.less";

//Fonts
@import (less)"reactive-paper-icons/style.css";

// Core variables and mixins
@import "variables.less";
@import "mixins/mixins.less";
@import "custom-variables.less";

// Reset and dependencies
@import (less)"resets/normalize.css";
@import (less)"resets/ht5bp-main.css";
@import (less)"resets/formalize.css";
@import "resets/typography-resets.less";

//Fonts
@import (less)"reactive-paper-icons/style.css";

// Core variables and mixins
@import "variables.less";
@import "custom-variables.less";


chore(dmn): drop DRD name + id editing

chore(dmn): drop DRD name + id editing

* users may now edit these properties via the
  properties panel

@import (less) "dmn-js/dist/assets/dmn-js-drd.css";
@import (less) "dmn-js/dist/assets/dmn-js-shared.css";
@import (less) "dmn-js/dist/assets/dmn-js-decision-table.css";
@import (less) "dmn-js/dist/assets/dmn-js-decision-table-controls.css";
@import (less) "dmn-js/dist/assets/dmn-js-literal-expression.css";

.dmn-editor {
  .warnings-overlay;

  .flex-container(row);

  flex-grow: 1;

  overflow: hidden;

  > .editor-container {
    flex: 1;

    position: relative;
    outline: none;

    > .editor-parent {

      > div {
        .full-size();
      }

      .viewer-container,
      .dmn-decision-table-container {
        overflow: auto;
        height: 100%;
        max-height: 100%;
      }

      .viewer-container .tjs-container,
      .dmn-decision-table-container .tjs-container,
      .dmn-literal-expression-container .viewer-container {
        display: table;
        width: 100%;
        padding: 10px;
      }
    }
  }

  > .properties {
    flex: initial;
    .flex-container(row);

    position: relative;
    outline: none;

    background: #f8f8f8;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

    .toggle {
      position: absolute;
      left: -29px;
      top: 50%;
      background: #f8f8f8;
      padding: 7px 10px;
      transform: rotate(-90deg);
      white-space: nowrap;
      font-size: 13px;
      border: solid 1px #CCC;
      border-bottom: none;
      border-radius: 2px 2px 0 0;
      transform-origin: top left;
      z-index: 10;
    }

    .resize-handle {
      .no-user-select;

      margin-left: -5px;
      cursor: ew-resize;
      z-index: 11;
      position: relative;

      &:before {
        content: '';
        width: 5px;
        display: block;
      }
    }

    .properties-container {
      flex: 1;
      position: relative;

      border-left: solid 1px #CCC;
    }

    .properties-parent {
      .full-size();

      overflow-y: auto;
    }
  }

  /* hide DRD name + id editor */
  .dmn-drd-container .dmn-definitions {
    display: none;
  }

}

@import (less) "dmn-js/dist/assets/dmn-js-drd.css";
@import (less) "dmn-js/dist/assets/dmn-js-shared.css";
@import (less) "dmn-js/dist/assets/dmn-js-decision-table.css";
@import (less) "dmn-js/dist/assets/dmn-js-decision-table-controls.css";
@import (less) "dmn-js/dist/assets/dmn-js-literal-expression.css";

.dmn-editor {
  .warnings-overlay;

  .flex-container(row);

  flex-grow: 1;

  overflow: hidden;

  > .editor-container {
    flex: 1;

    position: relative;
    outline: none;

    > .editor-parent {

      > div {
        .full-size();
      }

      .viewer-container,
      .dmn-decision-table-container {
        overflow: auto;
        height: 100%;
        max-height: 100%;
      }

      .viewer-container .tjs-container,
      .dmn-decision-table-container .tjs-container,
      .dmn-literal-expression-container .viewer-container {
        display: table;
        width: 100%;
        padding: 10px;
      }
    }
  }

  > .properties {
    flex: initial;
    .flex-container(row);

    position: relative;
    outline: none;

    background: #f8f8f8;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

    .toggle {
      position: absolute;
      left: -29px;
      top: 50%;
      background: #f8f8f8;
      padding: 7px 10px;
      transform: rotate(-90deg);
      white-space: nowrap;
      font-size: 13px;
      border: solid 1px #CCC;
      border-bottom: none;
      border-radius: 2px 2px 0 0;
      transform-origin: top left;
      z-index: 10;
    }

    .resize-handle {
      .no-user-select;

      margin-left: -5px;
      cursor: ew-resize;
      z-index: 11;
      position: relative;

      &:before {
        content: '';
        width: 5px;
        display: block;
      }
    }

    .properties-container {
      flex: 1;
      position: relative;

      border-left: solid 1px #CCC;
    }

    .properties-parent {
      .full-size();

      overflow-y: auto;
    }
  }

}


Added grid mixin for each breakpoint

Added grid mixin for each breakpoint

// Grid
// ----------------------------------------------------------------------------/
.@{grid-wrapper-class} {
    display: grid;
    .column-gap(@grid-column-gap);
}

// Grid Generator
.grid(@large-columns; @grid-column-class);

// Small Grid
.small-grid () {
    .@{grid-wrapper-class} {
        grid-template-columns: repeat(@small-columns, 1fr);
    }

    .grid-responsive(@small-columns; @small-prefix);
}

// Medium Grid
.medium-grid () {
    .@{grid-wrapper-class} {
        grid-template-columns: repeat(@medium-columns, 1fr);
    }

    .grid-responsive(@medium-columns; @medium-prefix);
}

// Large Grid
.large-grid () {
    .@{grid-wrapper-class} {
        grid-template-columns: repeat(@large-columns, 1fr);
    }

    .grid-responsive(@large-columns; @large-prefix);
}

// Grid
// ----------------------------------------------------------------------------/
.@{grid-wrapper-class} {
    display: grid;
    .column-gap(@grid-column-gap);
}

// Grid Generator
.grid(@large-columns; @grid-column-class);

// Small Grid
// ----------------------------------------------------------------------------/
@media screen and (max-width: unit((@screen-small-max-width / @root-font-size), em)) {
    .@{grid-wrapper-class} {
        grid-template-columns: repeat(@small-columns, 1fr);
    }

    .grid-responsive(@small-columns; @small-prefix);
}

// Medium Grid
// ----------------------------------------------------------------------------/
@media screen and (min-width: unit((@screen-medium-min-width / @root-font-size), em)) and (max-width: unit(((@screen-medium-max-width ) / @root-font-size), em))  {
    .@{grid-wrapper-class} {
        grid-template-columns: repeat(@medium-columns, 1fr);
    }

    .grid-responsive(@medium-columns; @medium-prefix);
}

// Large Grid
// ----------------------------------------------------------------------------/
@media screen and (min-width: unit((@screen-large-min-width / @root-font-size), em)) {
    .@{grid-wrapper-class} {
        grid-template-columns: repeat(@large-columns, 1fr);
    }

    .grid-responsive(@large-columns; @large-prefix);
}


remove -ms -o prefix (don't exist in original)

.select2-container {
  display: block;
}

.select2-container {

  .select2-choices {
    box-shadow: none;
    .textinput;

    .select2-search-choice {
      margin: 4px 5px 3px 0;
      padding: 3px 18px 3px 5px;
      line-height: 14px;
    }
  }

  &.select2-container-active {
    .select2-choices {
      box-shadow: none;
      .input_focus;
    }
  }
}

.select2-drop {
  border-color: lighten(@colorNotice, 15);

  &.select2-drop-above {
    border-top: 1px solid lighten(@colorNotice, 15);
  }
}

.select2-container-multi .select2-search-choice-close {
  left: auto;
}

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 0;
  margin: 0;
  height: @heightInputText - 2px;
}

.select2-results .select2-result-label {
  .nowrap;
}

.select2-container .select2-choice abbr {
  background: image('select2/select2.png') right top no-repeat;
}

.select2-container .select2-choice .select2-arrow b {
  background: image('select2/select2.png') no-repeat 0 1px;
}

.select2-search input {
  background: transparent image('select2/select2.png') no-repeat 100% -22px;
  background: image('select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  background: image('select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}

.select2-search input.select2-active {
  background: transparent image('select2/select2-spinner.gif') no-repeat 100%;
  background: image('select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  background: image('select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}

.select2-more-results.select2-active {
  background: transparent image('select2/select2-spinner.gif') no-repeat 100%
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: transparent image('select2/select2-spinner.gif') no-repeat 100% !important;
}

.select2-search-choice-close {
  background: image('select2/select2.png') right top no-repeat;
}

/* Retina-ize icons */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
    background-image: image('select2/select2x2.png') !important;
  }
}

.select2-container {
  display: block;
}

.select2-container {

  .select2-choices {
    box-shadow: none;
    .textinput;

    .select2-search-choice {
      margin: 4px 5px 3px 0;
      padding: 3px 18px 3px 5px;
      line-height: 14px;
    }
  }

  &.select2-container-active {
    .select2-choices {
      box-shadow: none;
      .input_focus;
    }
  }
}

.select2-drop {
  border-color: lighten(@colorNotice, 15);

  &.select2-drop-above {
    border-top: 1px solid lighten(@colorNotice, 15);
  }
}

.select2-container-multi .select2-search-choice-close {
  left: auto;
}

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 0;
  margin: 0;
  height: @heightInputText - 2px;
}

.select2-results .select2-result-label {
  .nowrap;
}

.select2-container .select2-choice abbr {
  background: image('select2/select2.png') right top no-repeat;
}

.select2-container .select2-choice .select2-arrow b {
  background: image('select2/select2.png') no-repeat 0 1px;
}

.select2-search input {
  background: transparent image('select2/select2.png') no-repeat 100% -22px;
  background: image('select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  background: image('select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  background: image('select2/select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}

.select2-search input.select2-active {
  background: transparent image('select2/select2-spinner.gif') no-repeat 100%;
  background: image('select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
  background: image('select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
  background: image('select2/select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
  background: image('select2/select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}

.select2-more-results.select2-active {
  background: transparent image('select2/select2-spinner.gif') no-repeat 100%
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
  background: transparent image('select2/select2-spinner.gif') no-repeat 100% !important;
}

.select2-search-choice-close {
  background: image('select2/select2.png') right top no-repeat;
}

/* Retina-ize icons */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
    background-image: image('select2/select2x2.png') !important;
  }
}


Visual layout tweak of the command bar toggle button

@primary: #0066ce;

@system: -apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,
    "Droid Sans","Helvetica Neue",sans-serif;

.ML__mathlive {
    font: normal 1em KaTeX_Main, 'Times New Roman', serif;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: none;
    user-select: none;

    // Protect elements from inheriting text-indent.
    text-indent: 0;

    // Encourage browsers to consider allocating a hardware accelerated
    // layer for this element.
    transform: translateZ(0);
}

.ML__base {
    display: inline-block;
}

.ML__strut {
    display: inline-block;
}

.ML__caret {
    border: none;
    border-radius: 0;
    border-right: 2px solid @primary;
    margin-right: -2px;
    // z-index: 1;

    animation: ML__caret-blink 1.05s step-end forwards infinite;
}

@keyframes  ML__caret-blink {
    from, to    { border-color: @primary; }
    50%         { border-color: transparent; }
}

/* Style for the invisible textarea element which is used
to capture keyboard events. We're just trying really hard
to make sure it doesn't show. */
.ML__textarea--textarea {
    transform: scale(0);
    resize: none;
    /* user-select: text;   Not sure it's needed  */

    /* Need these for Microsoft Edge */
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    /*-ms-transform: scale(0);*/
}

.ML__HiddenAccessibleMath {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    white-space: nowrap;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.ML__fieldcontainer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    // overflow: scroll; /* Doesn't work yet (partial clip), because of incorrect height calculcations */
    min-height: 39px;       /* Need some room for the command bar toggle */
}

/* This is the actual field content (formula) */
.ML__fieldcontainer--field {
    align-self: center;
}

/* The element that displays the keys as the user type them */
.ML__keystrokecaption {
    visibility: hidden;
    /*min-width: 160px;*/
    /*background-color: rgba(97, 97, 200, .95);*/
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    border-radius: 6px;
    padding: 16px;
    position: absolute;
    z-index: 1;

    display: flex;
    flex-direction: row;
    justify-content: center;
}

.ML__commandbar {
    display: inline-block;
    width: 100%
}

/* The element that displays commands available */
.ML__commandbar {
    visibility: hidden;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    // border-radius: 6px;
    // padding: 8px;
    // margin-right: 1em;
    position: absolute;
    z-index: 1;

    pointer-events: none;   // If opacity <1, mouse events get passed below
                            // unless pointer-events is set to none.
    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: left;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

    max-width: 100vw;
    left: 0;
    margin-top: 16px;
}
.ML__commandbartoggle {
    display: flex;
    align-self: center;
    align-items: center;
    color: #aaa;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;

    width: 34px;
    height: 34px;
    margin-right: 4px;
    cursor: pointer;
    box-sizing: border-box;
}

.ML__commandbartoggle:hover {
    border-radius: 50%;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.ML__commandbartoggle svg {
    fill: #aaa;
}

/* The element that display info while in command mode */
.ML__popover {
    visibility: hidden;
    min-width: 160px;
    background-color: rgba(97, 97, 97, .95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    // padding: 8px 8px;
    position: absolute;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* The 'tip' of the popover panel */
.ML__popover::after {
    content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 3px);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    font-size: 1rem;

    border-bottom: 5px solid rgba(97, 97, 97, .9);
}

@primary: #0066ce;

@system: -apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,
    "Droid Sans","Helvetica Neue",sans-serif;

.ML__mathlive {
    font: normal 1em KaTeX_Main, 'Times New Roman', serif;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: none;
    user-select: none;

    // Protect elements from inheriting text-indent.
    text-indent: 0;

    // Encourage browsers to consider allocating a hardware accelerated
    // layer for this element.
    transform: translateZ(0);
}

.ML__base {
    display: inline-block;
}

.ML__strut {
    display: inline-block;
}

.ML__caret {
    border: none;
    border-radius: 0;
    border-right: 2px solid @primary;
    margin-right: -2px;
    // z-index: 1;

    animation: ML__caret-blink 1.05s step-end forwards infinite;
}

@keyframes  ML__caret-blink {
    from, to    { border-color: @primary; }
    50%         { border-color: transparent; }
}

/* Style for the invisible textarea element which is used
to capture keyboard events. We're just trying really hard
to make sure it doesn't show. */
.ML__textarea--textarea {
    transform: scale(0);
    resize: none;
    /* user-select: text;   Not sure it's needed  */

    /* Need these for Microsoft Edge */
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    /*-ms-transform: scale(0);*/
}

.ML__HiddenAccessibleMath {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    white-space: nowrap;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.ML__fieldcontainer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    // overflow: scroll; /* Doesn't work yet (partial clip), because of incorrect height calculcations */
    min-height: 39px;       /* Need some room for the command bar toggle */
}

/* This is the actual field content (formula) */
.ML__fieldcontainer--field {
    align-self: center;
}

/* The element that displays the keys as the user type them */
.ML__keystrokecaption {
    visibility: hidden;
    /*min-width: 160px;*/
    /*background-color: rgba(97, 97, 200, .95);*/
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    border-radius: 6px;
    padding: 16px;
    position: absolute;
    z-index: 1;

    display: flex;
    flex-direction: row;
    justify-content: center;
}

.ML__commandbar {
    display: inline-block;
    width: 100%
}

/* The element that displays commands available */
.ML__commandbar {
    visibility: hidden;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    // border-radius: 6px;
    // padding: 8px;
    // margin-right: 1em;
    position: absolute;
    z-index: 1;

    pointer-events: none;   // If opacity <1, mouse events get passed below
                            // unless pointer-events is set to none.
    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: left;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

    max-width: 100vw;
    left: 0;
    margin-top: 16px;
}

.ML__commandbartoggle {
    align-self: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 34px;
    height: 34px;
    margin-right: 4px;

    border-radius: 50%;
    border: 1px solid #f0f0f0;

    cursor: pointer;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.ML__commandbartoggle svg {
    fill: #aaa;
}

/* The element that display info while in command mode */
.ML__popover {
    visibility: hidden;
    min-width: 160px;
    background-color: rgba(97, 97, 97, .95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    // padding: 8px 8px;
    position: absolute;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* The 'tip' of the popover panel */
.ML__popover::after {
    content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 3px);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    font-size: 1rem;

    border-bottom: 5px solid rgba(97, 97, 97, .9);
}