Fix mention error style

Fix mention error style

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "../../input/style/mixin";
@import "../../button/style/mixin";
@import "../../grid/style/mixin";
@import "./mixin";

@form-prefix-cls: ~"@{ant-prefix}-form";
@form-component-height: @input-height-lg;
@form-feedback-icon-size: 14px;

.reset-form();

label {
  position: relative;

  > .@{iconfont-css-prefix} {
    vertical-align: top;
    font-size: @font-size-base;
  }
}

.@{form-prefix-cls}-item-required:before {
  display: inline-block;
  margin-right: 4px;
  content: "*";
  font-family: SimSun;
  line-height: 1;
  font-size: @font-size-base;
  color: @label-required-color;
  .@{form-prefix-cls}-hide-required-mark & {
    display: none;
  }
}

// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used directly on <label>s
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-radio-vertical,
.@{ant-prefix}-checkbox-inline,
.@{ant-prefix}-checkbox-vertical {
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used on elements with <label> descendants
.@{ant-prefix}-radio,
.@{ant-prefix}-checkbox {
  &.disabled {
    label {
      cursor: not-allowed;
    }
  }
}

// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
  font-size: @font-size-base;
  margin-bottom: @form-item-margin-bottom;
  color: @text-color;
  vertical-align: top;

  // nested FormItem
  & > &,
  & :not(.@{form-prefix-cls}) > & {
    margin-bottom: -@form-item-margin-bottom;
  }

  &-control {
    line-height: @form-component-height;
    position: relative;
    .clearfix;
  }

  &-with-help {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
  }

  &-label {
    text-align: right;
    vertical-align: middle;
    line-height: @form-component-height;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    label {
      color: @label-color;

      &:after {
        & when (@form-item-trailing-colon=true) {
          content: ":";
        }
        & when not (@form-item-trailing-colon=true) {
          content: " ";
        }
        margin: 0 8px 0 2px;
        position: relative;
        top: -0.5px;
      }
    }
  }

  .@{ant-prefix}-switch {
    margin: 4px 0;
  }

  &-no-colon &-label label:after {
    content: " ";
  }
}

.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
  color: @text-color-secondary;
  line-height: 1.5;
}

.@{form-prefix-cls}-extra {
  padding-top: 4px;
}

.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
}

.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
}

// 表单下的输入框尺寸唯一: 大尺寸
form {
  .has-feedback {
    .@{ant-prefix}-input {
      padding-right: 24px;
    }

    // Fix overlapping between feedback icon and <Select>'s arrow.
    // https://github.com/ant-design/ant-design/issues/4431
    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear {
      right: 28px;
    }
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value {
      padding-right: 42px;
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: 21px;
      }
      &-clear {
        right: 28px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-calendar-picker,
    .@{ant-prefix}-time-picker {
      &-icon,
      &-clear {
        right: 28px;
      }
    }
  }

  textarea.@{ant-prefix}-input {
    height: auto;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{ant-prefix}-radio-inline,
  .@{ant-prefix}-checkbox-inline {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
    margin-left: 8px;

    &:first-child {
      margin-left: 0;
    }
  }

  .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical {
    display: block;
  }

  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
    margin-left: 0;
  }

  .@{ant-prefix}-input-number {
    margin-top: -1px;
    margin-right: 8px;
  }

  .@{ant-prefix}-select,
  .@{ant-prefix}-cascader-picker {
    width: 100%;
    // Fix https://github.com/ant-design/ant-design/issues/6097
    &:only-child {
      display: block;
    }
  }

  // Don't impact select inside input group
  .@{ant-prefix}-input-group .@{ant-prefix}-select,
  .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
    width: auto;
  }

  // Don't impact select inside input group addon
  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select,
  .@{ant-prefix}-input-group-addon .@{ant-prefix}-cascader-picker {
    &:only-child {
      display: inline-block;
    }
  }
}

// Input combined with select
.@{ant-prefix}-input-group-wrap {
  .@{ant-prefix}-select-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover {
      border-color: @border-color-base;
    }
  }

  .@{ant-prefix}-select-selection--single {
    margin-left: -1px;
    height: @input-height-lg;
    background-color: #eee;
    .@{ant-prefix}-select-selection__rendered {
      padding-left: 8px;
      padding-right: 25px;
      line-height: 30px;
    }
  }

  .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
    border-color: @border-color-base;
    box-shadow: none;
  }
}

// Form layout
//== Vertical Form
.make-vertical-layout() {
  padding: 0 0 8px;
  display: block;
  text-align: left;
  line-height: @line-height-base;

  label:after {
    display: none;
  }
}
.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
// when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
  .make-vertical-layout();
}

@media (max-width: @screen-xs-max) {
  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

//== Inline Form
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: 24px;
    }

    > div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .@{form-prefix-cls}-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }

  // Fix https://github.com/ant-design/ant-design/issues/1040
  .@{form-prefix-cls}-explain {
    position: absolute;
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback:after {
    position: absolute;
    top: 0;
    right: 0;
    visibility: visible;
    pointer-events: none;
    .square(@input-height-lg);
    line-height: @input-height-lg;
    text-align: center;
    font-size: @form-feedback-icon-size;
    animation: zoomIn .3s @ease-out-back;
    .iconfont-font("");
    z-index: 1;
  }
}

.has-success {
  &.has-feedback:after {
    animation-name: diffZoomIn1 !important;
  }
}

.has-error {
  &.has-feedback:after {
    animation-name: diffZoomIn2 !important;
  }
}

.has-warning {
  &.has-feedback:after {
    animation-name: diffZoomIn3 !important;
  }
}

.has-success {
  &.has-feedback:after {
    content: '\e630';
    color: @success-color;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color;);

  &.has-feedback:after {
    content: '\e62c';
    color: @warning-color;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @warning-color;
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@warning-color);
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon:after,
  .@{ant-prefix}-time-picker-icon:after,
  .@{ant-prefix}-picker-icon:after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @warning-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @warning-color;
    &-focused,
    &:focus {
      .active(@warning-color);
    }
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color;);

  &.has-feedback:after {
    content: '\e62e';
    color: @error-color;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @error-color;
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
    &-selection {
      border-color: transparent;
      box-shadow: none;
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon:after,
  .@{ant-prefix}-time-picker-icon:after,
  .@{ant-prefix}-picker-icon:after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @error-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @error-color;
    &-focused,
    &:focus {
      .active(@error-color);
    }
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
  .@{ant-prefix}-mention-wrapper {
    .@{ant-prefix}-mention-editor {
      &,
      &:not([disabled]):hover {
        border-color: @error-color;
      }
    }
    &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
    .@{ant-prefix}-mention-editor:not([disabled]):focus {
      .active(@error-color);
    }
  }
}

.is-validating {
  &.has-feedback:after {
    display: inline-block;
    animation: loadingCircle 1s infinite linear;
    content: "\e64d";
    color: @primary-color;
  }
}

.@{ant-prefix}-advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: 16px;
  }
  .@{ant-prefix}-input,
  .@{ant-prefix}-input-group .@{ant-prefix}-input,
  .@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
    height: @input-height-base;
  }
}

// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "../../input/style/mixin";
@import "../../button/style/mixin";
@import "../../grid/style/mixin";
@import "./mixin";

@form-prefix-cls: ~"@{ant-prefix}-form";
@form-component-height: @input-height-lg;
@form-feedback-icon-size: 14px;

.reset-form();

label {
  position: relative;

  > .@{iconfont-css-prefix} {
    vertical-align: top;
    font-size: @font-size-base;
  }
}

.@{form-prefix-cls}-item-required:before {
  display: inline-block;
  margin-right: 4px;
  content: "*";
  font-family: SimSun;
  line-height: 1;
  font-size: @font-size-base;
  color: @label-required-color;
  .@{form-prefix-cls}-hide-required-mark & {
    display: none;
  }
}

// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used directly on <label>s
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-radio-vertical,
.@{ant-prefix}-checkbox-inline,
.@{ant-prefix}-checkbox-vertical {
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used on elements with <label> descendants
.@{ant-prefix}-radio,
.@{ant-prefix}-checkbox {
  &.disabled {
    label {
      cursor: not-allowed;
    }
  }
}

// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
  font-size: @font-size-base;
  margin-bottom: @form-item-margin-bottom;
  color: @text-color;
  vertical-align: top;

  // nested FormItem
  & > &,
  & :not(.@{form-prefix-cls}) > & {
    margin-bottom: -@form-item-margin-bottom;
  }

  &-control {
    line-height: @form-component-height;
    position: relative;
    .clearfix;
  }

  &-with-help {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
  }

  &-label {
    text-align: right;
    vertical-align: middle;
    line-height: @form-component-height;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    label {
      color: @label-color;

      &:after {
        & when (@form-item-trailing-colon=true) {
          content: ":";
        }
        & when not (@form-item-trailing-colon=true) {
          content: " ";
        }
        margin: 0 8px 0 2px;
        position: relative;
        top: -0.5px;
      }
    }
  }

  .@{ant-prefix}-switch {
    margin: 4px 0;
  }

  &-no-colon &-label label:after {
    content: " ";
  }
}

.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
  color: @text-color-secondary;
  line-height: 1.5;
}

.@{form-prefix-cls}-extra {
  padding-top: 4px;
}

.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
}

.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
}

// 表单下的输入框尺寸唯一: 大尺寸
form {
  .has-feedback {
    .@{ant-prefix}-input {
      padding-right: 24px;
    }

    // Fix overlapping between feedback icon and <Select>'s arrow.
    // https://github.com/ant-design/ant-design/issues/4431
    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear {
      right: 28px;
    }
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value {
      padding-right: 42px;
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: 21px;
      }
      &-clear {
        right: 28px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-calendar-picker,
    .@{ant-prefix}-time-picker {
      &-icon,
      &-clear {
        right: 28px;
      }
    }
  }

  textarea.@{ant-prefix}-input {
    height: auto;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{ant-prefix}-radio-inline,
  .@{ant-prefix}-checkbox-inline {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
    margin-left: 8px;

    &:first-child {
      margin-left: 0;
    }
  }

  .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical {
    display: block;
  }

  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
    margin-left: 0;
  }

  .@{ant-prefix}-input-number {
    margin-top: -1px;
    margin-right: 8px;
  }

  .@{ant-prefix}-select,
  .@{ant-prefix}-cascader-picker {
    width: 100%;
    // Fix https://github.com/ant-design/ant-design/issues/6097
    &:only-child {
      display: block;
    }
  }

  // Don't impact select inside input group
  .@{ant-prefix}-input-group .@{ant-prefix}-select,
  .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
    width: auto;
  }

  // Don't impact select inside input group addon
  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select,
  .@{ant-prefix}-input-group-addon .@{ant-prefix}-cascader-picker {
    &:only-child {
      display: inline-block;
    }
  }
}

// Input combined with select
.@{ant-prefix}-input-group-wrap {
  .@{ant-prefix}-select-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover {
      border-color: @border-color-base;
    }
  }

  .@{ant-prefix}-select-selection--single {
    margin-left: -1px;
    height: @input-height-lg;
    background-color: #eee;
    .@{ant-prefix}-select-selection__rendered {
      padding-left: 8px;
      padding-right: 25px;
      line-height: 30px;
    }
  }

  .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
    border-color: @border-color-base;
    box-shadow: none;
  }
}

// Form layout
//== Vertical Form
.make-vertical-layout() {
  padding: 0 0 8px;
  display: block;
  text-align: left;
  line-height: @line-height-base;

  label:after {
    display: none;
  }
}
.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
// when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
  .make-vertical-layout();
}

@media (max-width: @screen-xs-max) {
  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

//== Inline Form
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: 24px;
    }

    > div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .@{form-prefix-cls}-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }

  // Fix https://github.com/ant-design/ant-design/issues/1040
  .@{form-prefix-cls}-explain {
    position: absolute;
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback:after {
    position: absolute;
    top: 0;
    right: 0;
    visibility: visible;
    pointer-events: none;
    .square(@input-height-lg);
    line-height: @input-height-lg;
    text-align: center;
    font-size: @form-feedback-icon-size;
    animation: zoomIn .3s @ease-out-back;
    .iconfont-font("");
    z-index: 1;
  }
}

.has-success {
  &.has-feedback:after {
    animation-name: diffZoomIn1 !important;
  }
}

.has-error {
  &.has-feedback:after {
    animation-name: diffZoomIn2 !important;
  }
}

.has-warning {
  &.has-feedback:after {
    animation-name: diffZoomIn3 !important;
  }
}

.has-success {
  &.has-feedback:after {
    content: '\e630';
    color: @success-color;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color;);

  &.has-feedback:after {
    content: '\e62c';
    color: @warning-color;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @warning-color;
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@warning-color);
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon:after,
  .@{ant-prefix}-time-picker-icon:after,
  .@{ant-prefix}-picker-icon:after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @warning-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @warning-color;
    &-focused,
    &:focus {
      .active(@warning-color);
    }
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color;);

  &.has-feedback:after {
    content: '\e62e';
    color: @error-color;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @error-color;
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
    &-selection {
      border-color: transparent;
      box-shadow: none;
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon:after,
  .@{ant-prefix}-time-picker-icon:after,
  .@{ant-prefix}-picker-icon:after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @error-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @error-color;
    &-focused,
    &:focus {
      .active(@error-color);
    }
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
  .@{ant-prefix}-mention-wrapper {
    .@{ant-prefix}-mention-editor {
      &,
      &:not([disabled]):hover {
        border-color: @error-color;
      }
    }
    &.@{ant-prefix}-mention-active .@{ant-prefix}-mention-editor,
    .@{ant-prefix}-mention-editor:not([disabled]):focus {
      .active(@error-color);
    }
  }
}

.is-validating {
  &.has-feedback:after {
    display: inline-block;
    animation: loadingCircle 1s infinite linear;
    content: "\e64d";
    color: @primary-color;
  }
}

.@{ant-prefix}-advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: 16px;
  }
  .@{ant-prefix}-input,
  .@{ant-prefix}-input-group .@{ant-prefix}-input,
  .@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
    height: @input-height-base;
  }
}

// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


fix inline submenu open style

fix inline submenu open style

@import "../../style/themes/default";
@import "../../style/mixins/index";

@menu-prefix-cls: ~"@{ant-prefix}-menu";

// default theme
.@{menu-prefix-cls} {
  outline: none;
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  z-index: @zindex-dropdown;
  box-shadow: @box-shadow-base;
  color: @text-color;
  background: @component-background;
  line-height: 46px;

  &-hidden {
    display: none;
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
  }

  &-item-group-title {
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 1.5;
    padding: 8px 16px;
  }

  &-item,
  &-submenu,
  &-submenu-title {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  &-item:active,
  &-submenu-title:active {
    background: @primary-1;
  }

  &-submenu &-sub {
    cursor: initial;
  }

  &-item > a {
    display: block;
    color: @text-color;
    &:hover {
      color: @primary-color;
    }
    &:before {
      position: absolute;
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    background-color: @border-color-split;
    line-height: 0;
  }

  &-item:hover,
  &-item-active,
  &:not(&-inline) &-submenu-open,
  &-submenu-active,
  &-submenu-title:hover {
    color: @primary-color;
  }

  &-horizontal &-item,
  &-horizontal &-submenu {
    margin-top: -1px;
  }

  &-horizontal > &-item:hover,
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
  }

  &-item-selected {
    color: @primary-color;
    // fix chrome render bug
    transform: translateZ(0);
    > a,
    > a:hover {
      color: @primary-color;
    }
  }

  &:not(&-horizontal) &-item-selected {
    background-color: @primary-1;
  }

  &-horizontal,
  &-inline,
  &-vertical {
    z-index: auto;
  }

  &-inline,
  &-vertical {
    border-right: @border-width-base @border-style-base @border-color-split;
    .@{menu-prefix-cls}-item {
      border-right: 3px @border-style-base transparent;
      margin-left: -1px;
      left: 1px;
      position: relative;
      z-index: 1;
    }
  }

  &-vertical&-sub {
    border-right: 0;
    .@{menu-prefix-cls}-item {
      border-right: 0;
      margin-left: 0;
      left: 0;
    }
    > .@{menu-prefix-cls}-item:first-child {
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .@{menu-prefix-cls}-item:last-child,
    > .@{menu-prefix-cls}-item-group:last-child > .@{menu-prefix-cls}-item-group-list:last-child > .@{menu-prefix-cls}-item:last-child {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-inline {
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      border-right-color: @primary-color;
      transform: translateZ(0);
    }
  }

  &-submenu-horizontal > & {
    top: 100%;
    left: 0;
    position: absolute;
    min-width: 100%;
    margin-top: 7px;
    z-index: @zindex-dropdown;
  }

  &-submenu-vertical {
    z-index: 1;
  }

  &-submenu-vertical > & {
    top: 0;
    left: 100%;
    position: absolute;
    min-width: 160px;
    margin-left: 4px;
    z-index: @zindex-dropdown;
  }

  &-item,
  &-submenu-title {
    margin: 0;
    padding: 0 20px;
    position: relative;
    display: block;
    white-space: nowrap;

    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 8px;
      transition: all .3s;
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: #e5e5e5;
  }

  &-submenu {
    position: relative;

    > .@{menu-prefix-cls} {
      background-color: @component-background;
      border-radius: 4px;
    }

    &-vertical > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s ease;
      content: "\e61d";
      right: 16px;
      .ie-rotate(3);
      transform: rotate(270deg) scale(0.75);
    }

    &-inline > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s ease;
      content: "\e61d";
      right: 16px;
      top: 0;
      .iconfont-size-under-12px(8px);
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
        .ie-rotate(1);
        transform: rotate(180deg) scale(0.75);
      }
    }
  }

  &-vertical &-submenu-selected {
    color: @primary-color;
    > a {
      color: @primary-color;
    }
  }

  &-horizontal {
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;
    z-index: 0;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      float: left;
      border-bottom: 2px solid transparent;

      &:hover,
      &-active,
      &-open,
      &-selected {
        border-bottom: 2px solid @primary-color;
        color: @primary-color;
      }

      > a {
        display: block;
        color: @text-color;
        &:hover {
          color: @primary-color;
        }
      }
    }

    &:after {
      content: "\20";
      display: block;
      height: 0;
      clear: both;
    }
  }

  &-vertical,
  &-inline {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px;
      font-size: @font-size-base;
      line-height: 42px;
      height: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-item-group-list {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
    }
  }

  &-vertical&-sub {
    padding: 0;
    transform-origin: 0 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-root&-vertical,
  &-root&-inline {
    box-shadow: none;
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      line-height: 42px;
      height: 42px;
      list-style-type: disc;
      list-style-position: inside;
    }

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects
  &-item-disabled,
  &-submenu-disabled {
    color: @disabled-color !important;
    cursor: not-allowed;
    background: none;
    border-color: transparent !important;
    > a {
      color: @disabled-color !important;
      pointer-events: none;
    }
  }
}

// dark theme
.@{menu-prefix-cls} {
  &-dark,
  &-dark &-sub {
    color: @text-color-secondary-dark;
    background: @menu-dark-bg;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
  }

  &-dark&-horizontal {
    border-bottom-color: @menu-dark-bg;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    border-color: @menu-dark-bg;
    border-bottom: 0;
    top: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a {
    color: @text-color-secondary-dark;
  }

  &-dark&-inline,
  &-dark&-vertical {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark:not(&-inline) &-submenu-open,
  &-dark &-submenu-selected,
  &-dark &-submenu:hover,
  &-dark &-submenu-title:hover {
    background-color: transparent;
    color: #fff;
    > a {
      color: #fff;
    }
  }

  &-dark &-item-selected {
    border-right: 0;
    color: #fff;
    > a,
    > a:hover {
      color: #fff;
    }
  }

  &&-dark &-item-selected {
    background-color: transparent;
  }

  &-dark&-inline &-item-selected {
    background-color: @primary-color;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a {
      opacity: 0.8;
      color: @disabled-color-dark !important;
    }
  }
}

@import "../../style/themes/default";
@import "../../style/mixins/index";

@menu-prefix-cls: ~"@{ant-prefix}-menu";

// default theme
.@{menu-prefix-cls} {
  outline: none;
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  z-index: @zindex-dropdown;
  box-shadow: @box-shadow-base;
  color: @text-color;
  background: @component-background;
  line-height: 46px;

  &-hidden {
    display: none;
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
  }

  &-item-group-title {
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 1.5;
    padding: 8px 16px;
  }

  &-item,
  &-submenu,
  &-submenu-title {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  &-item:active,
  &-submenu-title:active {
    background: @primary-1;
  }

  &-submenu &-sub {
    cursor: initial;
  }

  &-item > a {
    display: block;
    color: @text-color;
    &:hover {
      color: @primary-color;
    }
    &:before {
      position: absolute;
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    background-color: @border-color-split;
    line-height: 0;
  }

  &-item:hover,
  &-item-active,
  &-submenu-open,
  &-submenu-active,
  &-submenu-title:hover {
    color: @primary-color;
  }

  &-horizontal &-item,
  &-horizontal &-submenu {
    margin-top: -1px;
  }

  &-horizontal > &-item:hover,
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
  }

  &-item-selected {
    color: @primary-color;
    // fix chrome render bug
    transform: translateZ(0);
    > a,
    > a:hover {
      color: @primary-color;
    }
  }

  &:not(&-horizontal) &-item-selected {
    background-color: @primary-1;
  }

  &-horizontal,
  &-inline,
  &-vertical {
    z-index: auto;
  }

  &-inline,
  &-vertical {
    border-right: @border-width-base @border-style-base @border-color-split;
    .@{menu-prefix-cls}-item {
      border-right: 3px @border-style-base transparent;
      margin-left: -1px;
      left: 1px;
      position: relative;
      z-index: 1;
    }
  }

  &-vertical&-sub {
    border-right: 0;
    .@{menu-prefix-cls}-item {
      border-right: 0;
      margin-left: 0;
      left: 0;
    }
    > .@{menu-prefix-cls}-item:first-child {
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .@{menu-prefix-cls}-item:last-child,
    > .@{menu-prefix-cls}-item-group:last-child > .@{menu-prefix-cls}-item-group-list:last-child > .@{menu-prefix-cls}-item:last-child {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-inline {
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      border-right-color: @primary-color;
      transform: translateZ(0);
    }
  }

  &-submenu-horizontal > & {
    top: 100%;
    left: 0;
    position: absolute;
    min-width: 100%;
    margin-top: 7px;
    z-index: @zindex-dropdown;
  }

  &-submenu-vertical {
    z-index: 1;
  }

  &-submenu-vertical > & {
    top: 0;
    left: 100%;
    position: absolute;
    min-width: 160px;
    margin-left: 4px;
    z-index: @zindex-dropdown;
  }

  &-item,
  &-submenu-title {
    margin: 0;
    padding: 0 20px;
    position: relative;
    display: block;
    white-space: nowrap;

    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 8px;
      transition: all .3s;
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: #e5e5e5;
  }

  &-submenu {
    position: relative;

    > .@{menu-prefix-cls} {
      background-color: @component-background;
      border-radius: 4px;
    }

    &-vertical > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s ease;
      content: "\e61d";
      right: 16px;
      .ie-rotate(3);
      transform: rotate(270deg) scale(0.75);
    }

    &-inline > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s ease;
      content: "\e61d";
      right: 16px;
      top: 0;
      .iconfont-size-under-12px(8px);
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
        .ie-rotate(1);
        transform: rotate(180deg) scale(0.75);
      }
    }
  }

  &-vertical &-submenu-selected {
    color: @primary-color;
    > a {
      color: @primary-color;
    }
  }

  &-horizontal {
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;
    z-index: 0;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      float: left;
      border-bottom: 2px solid transparent;

      &:hover,
      &-active,
      &-open,
      &-selected {
        border-bottom: 2px solid @primary-color;
        color: @primary-color;
      }

      > a {
        display: block;
        color: @text-color;
        &:hover {
          color: @primary-color;
        }
      }
    }

    &:after {
      content: "\20";
      display: block;
      height: 0;
      clear: both;
    }
  }

  &-vertical,
  &-inline {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px;
      font-size: @font-size-base;
      line-height: 42px;
      height: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-item-group-list {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
    }
  }

  &-vertical&-sub {
    padding: 0;
    transform-origin: 0 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-root&-vertical,
  &-root&-inline {
    box-shadow: none;
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      line-height: 42px;
      height: 42px;
      list-style-type: disc;
      list-style-position: inside;
    }

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects
  &-item-disabled,
  &-submenu-disabled {
    color: @disabled-color !important;
    cursor: not-allowed;
    background: none;
    border-color: transparent !important;
    > a {
      color: @disabled-color !important;
      pointer-events: none;
    }
  }
}

// dark theme
.@{menu-prefix-cls} {
  &-dark,
  &-dark &-sub {
    color: @text-color-secondary-dark;
    background: @menu-dark-bg;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
  }

  &-dark&-horizontal {
    border-bottom-color: @menu-dark-bg;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    border-color: @menu-dark-bg;
    border-bottom: 0;
    top: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a {
    color: @text-color-secondary-dark;
  }

  &-dark&-inline,
  &-dark&-vertical {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark &-submenu-open,
  &-dark &-submenu-selected,
  &-dark &-submenu:hover,
  &-dark &-submenu-title:hover {
    background-color: transparent;
    color: #fff;
    > a {
      color: #fff;
    }
  }

  &-dark &-item-selected {
    border-right: 0;
    color: #fff;
    > a,
    > a:hover {
      color: #fff;
    }
  }

  &&-dark &-item-selected {
    background-color: transparent;
  }

  &-dark&-inline &-item-selected {
    background-color: @primary-color;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a {
      opacity: 0.8;
      color: @disabled-color-dark !important;
    }
  }
}


Changed background color for gallery item

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/ulrichson/lehner-photography.git/'


Less breakage in ie

Less breakage in ie

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed 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 osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.beatmap-list-item {
  display: flex;
  align-items: center;

  min-width: 0;
  text-align: left;

  font-size: 12px;

  &--large {
    font-size: 15px;
  }

  &__col {
    flex: none;

    &--main {
      min-width: 0;
      flex: 1 1 auto;
      padding: 0 10px;
      white-space: nowrap;
    }
  }

  &__small {
    font-size: 11px;
    font-weight: 500;
  }
}

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed 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 osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.beatmap-list-item {
  display: flex;
  align-items: center;

  min-width: 0;
  text-align: left;

  font-size: 12px;

  &--large {
    font-size: 15px;
  }

  &__col {
    flex: none;

    &--main {
      min-width: 0;
      flex: 1;
      padding: 0 10px;
      white-space: nowrap;
    }
  }

  &__small {
    font-size: 11px;
    font-weight: 500;
  }
}


Make clickable promoter links

Make clickable promoter links

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/manti-by/Boogi.git/'


rename class for upload wrapper

rename class for upload wrapper

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/notadd/administration.git/'


BAP-5593: Broken UI of reminders in calendar event

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/trustify/oroplatform.git/'


[fix bug 918447] Main-nav border radius

[fix bug 918447] Main-nav border radius

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/akarki15/mozillians.git/'


CRM-4296: Call customers from OroCRM via Google Voice/Hangouts

 - fixed check boxes alignment


merging from ui update branch

merging from ui update branch

/*
min z-index: 1;
max z-index: 5;
*/

@import "variables.less";
@import "mixins.less";
@import "grid.less";

@import "components/explorer.less";
@import "components/icons.less";
@import "components/tabs.less";
@import "components/dropdowns.less";
@import "components/modals.less";
@import "components/forms.less";
@import "components/listing.less";
@import "components/messages.less";
@import "components/formatters.less";

html{
    background-color:@color-header-bg;
}

body{
    -webkit-font-smoothing: antialiased; /* Do not remove! */
    font-family:Open Sans,Arial,sans-serif;
    font-size:80%;
    line-height:1.5em;
    color:@color-text-base;
    overflow-x: hidden;
    position: relative;

    &.reordering{
        overflow:visible;
    }
}

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
    -webkit-font-smoothing: auto;
}

h1{
    line-height:1.3em;
    font-size:1.5em;
    text-transform:uppercase;
    color:@color-grey-1;
    font-weight:700;

    span{
        text-transform:none;
        font-weight:300;
    }

    .homepage &{
        text-transform:none;
    }
}
h2{
    text-transform:uppercase;
    font-size:1.3em;
    font-family:Open Sans;
    font-weight:600;
    color:@color-grey-2;

    .page-explorer &{
        text-transform:none;
    }
}
a{
    color:@color-link;
    text-decoration:none;

    &:hover{
        color:@color-link-hover;
    }
}

code{
    .box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
    background-color:@color-fieldset-hover;
    padding:2px 5px;
}

kbd{
    .border-radius(3px);
    font-family:Open Sans, Arial, sans-serif;
    border:1px solid @color-grey-2;
    border-color:rgba(0,0,0,0.2);
    padding:0.3em 0.5em;
}

img{
    max-width:100%;
    height:auto;
}

.browsermessage{
    background-color:@color-red;
    color:white;
    padding:1em 2em;
    margin:0;
    position:relative;
    left:0;
    top:0;
    right:0;

    a{
        color:white;
        text-decoration:underline;
    }
}

.wrapper{
    .clearfix();
}

.nav-wrapper{
    .box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5));
    position:relative;
    background: @color-grey-1;
    margin-left: -100%;
    width: 80%;
    float: left;
    height:100%;
    min-height:800px;
}
    .logo{
        display:block;
        margin:2em auto;
        text-align:center;
        text-decoration:none;
        color:white;
        opacity:0.4;

        em{
            font-family: verdant;
            font-style: normal;
            font-size:7.7em;
            line-height:1em;
        }
        span{
            display:none;
        }
        &:hover{
            opacity:1;
        }
    }

    #nav-toggle{
        .push(0.65);
        .box-shadow(0px 0px 10px 5px rgba(255, 255, 255, 0.5));
        cursor:pointer;
        position:fixed;
        background: @color-grey-1;
        width:40px;
        opacity:0.8;

        &:before{
            font-size:30px;
            color:white;
            line-height:40px;
        }
    }

    .nav-main{
        position:absolute;
        top: 150px;
        bottom: 0px;
        overflow: auto;
        width:100%;

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

        ul{
            border-top:1px solid @color-grey-1-1;
        }

        li{
            border-bottom:1px solid @color-grey-1-1;
            position:relative;

            &.selected{
                background-color:@color-grey-1;
            }

            .menu-snippets &.menu-snippets,
            .menu-users &.menu-users,
            .menu-snippets &.menu-snippets,
            .menu-documents &.menu-documents,
            .menu-images &.menu-images,
            .menu-search &.menu-search,
            .menu-explorer &.menu-explorer{
                background:#222;

                &:after{
                    content: " ";
                    width: 0px;
                    height: 0px;
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 0.9em;
                    border: 0.7em solid #fff;
                    border-color: transparent #fff transparent transparent;
                }
            }
        }

        a {
            -webkit-font-smoothing: auto;
            text-decoration:none;
            text-transform:uppercase;
            display: block;
            color: #AAA;
            padding: 0.9em 1.2em;
            position:relative;
            font-size:0.9em;
            font-weight:400;
            white-space:nowrap;

            &:before{
                margin-right:0.3em;
            }
            &:hover{
                color:white;
            }
        }

        .more > a{
            &:before{
                margin-right:0.4em;
            }
            font-size:0.8em;
            padding:0.2em 1.2em;
            background-color:@color-grey-1-1;
        }
        .more{
            border:0;
        }

        .avatar{
            display:none;
        }

        /* search form */
        #menu-search{
            position:relative;

            .fields{
                .transition(background-color 0.2s ease);
                border:0;
                li{
                    border:0;
                }
            }
            .field{
                padding:0;
                color: #AAA;

                &:before{
                    position:absolute;
                    left:0.75em;
                    top:0.45em;
                }
            }
            .submit{
                .visuallyhidden();
            }
            label{
                font-weight:normal;
                -webkit-font-smoothing: auto;
                line-height:inherit;
                text-transform:uppercase;
                padding: 0.9em 1.2em 0.9em 3.7em;
                color: #AAA;
                font-size:0.95em;
            }
            input{
                float:left;
                margin-top:-1000px;
                text-transform:uppercase;
                font-size:1em;
                padding: 0.9em 1.2em 0.9em 3.5em;
                border:0;
                border-radius:0;
                background-color:transparent;
                line-height:inherit;
            }

            &:hover{
                .field, input{
                    color:white;
                }
            }

            &.focussed{
                label{
                    display:none;
                }
                .fields{
                    background-color:@color-grey-4;
                }
                .field{
                    color: @color-grey-1;
                }
                input{
                    margin-top:0px;
                    color:@color-grey-1;
                }
            }
        }
    }

    .js .nav-main .more ul{
        display:none;
    }

    .explorer{
        position:absolute;
        margin-top:150px; /* same as .nav-main */
    }

.content-wrapper{
    width:100%;
    float: right;
    position: relative;
    background-color:white;
    border-bottom:1px solid @color-grey-4;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
    .content{
        .row();
        border-top:40px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
        padding-bottom:4em;
    }

body.nav-open .nav-wrapper{
    margin-left:0;
}

body.nav-open .content-wrapper{
    transform: translate3d(80%,0,0);
    -webkit-transform: translate3d(80%,0,0);

    position:fixed;
}

body.nav-open #nav-toggle{
    left:80%;
    &:before{
        content:"z";
    }
}

body.explorer-open .explorer{
    display:block;
    border-top:1px solid rgba(200,200,200,0.1);

    &:before{
        position:absolute;
        top:-3em;
        content:"Close explorer";
        padding:0.9em;
    }
}

body.explorer-open .nav-main{
    display:none;
}

header{
    padding-top:1.5em;
    padding-bottom:1em;
    background-color: @color-grey-5;
    border-bottom:1px solid @color-grey-4;
    margin-bottom:2em;

    h1, h2{
        margin:0;
    }

    .left{
        float:left;
    }
    .right{
        float:right;
        text-align:right;
    }

    /* For case where content below header should merge with it */
    &.merged{
        margin-bottom:0;
    }
    &.tab-merged, &.no-border{
        border:0;
    }
    &.merged.no-border{
        padding-bottom:0;
    }
}

.page-explorer header{
    margin-bottom:0;
    padding-bottom:1em;
}

footer{
    .row();
    background: @color-grey-1;
    background: rgba(0,0,0,0.7);
    position:fixed;
    bottom:0;
    height:3.4em;
    padding:0.3em;
    width:90%;
    margin:0 5%;
    color:white;

    ul{
        .unlist();
    }
    li{
        float:left;
    }

    .actions{
        width:250px;
        margin-right:@grid-gutter-width/2;

        .button{
            padding-top:1em;
            padding-bottom:1em;
        }
    }

    .meta{
        float:right;
        text-align:right;
        padding-right:@grid-gutter-width/2;
        line-height:3.5em;
        font-size:0.85em;

        span{
            margin-right:@grid-gutter-width;
        }

    }
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: @color-grey-1;
}
::-webkit-scrollbar-thumb {
    background: @color-grey-2;
    -webkit-border-radius: 1ex;
}
::-webkit-scrollbar-corner {
    background: @color-grey-1;
}

/* Z-indexes */
#nav-toggle{
    z-index:5;
}
.nav-wrapper{
    z-index:2;
}
.content-wrapper{
    z-index:3;
}
footer, .logo{
    z-index:1;
}

.breadcrumb{
    .unlist();
    .clearfix();

    font-size:0.85em;
    margin-top:1em !important;

    li {
        display: block;
        float: left;
        background: @color-grey-3;
        padding: 0.5em 1em 0.5em 2em;
        position: relative;
        margin: 0 4px 4px 0;
        text-decoration: none;
        color: #fff;
        line-height:1em;
        white-space: nowrap;
        max-width:30em;
        line-height:1.5em;

        a{
            color:@color-grey-2;
            display:block;
            max-width:25em;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            line-height:1.6em;
        }

        &:after, &:before{
            content: "";
            border-top: 1.3em solid transparent;
            border-bottom: 1.3em solid transparent;
        }
        &:after {
            border-left: 1em solid @color-grey-3;
            position: absolute; right: -0.9em; top: 0;
            z-index: 1;
        }
        &:before {
            border-left: 1em solid @color-header-bg;
            position: absolute; left: 0; top: 0;
        }

        &:hover {
            background: @color-teal;

            a{
                color:white;
            }
        }
        &:hover:after {
            border-left-color: @color-teal;
        }

        &:first-child {
            padding:0.5em;
            .border-radius(3px 0px 0px 3px);

            &:before{
                display:none;
                width:1em;
            }
            a {
                width:2em;
                font-size:1em;
                &:before{
                    line-height:1em;
                    font-size:1.7em;
                }
            }
        }
    }
}

.row{
    .clearfix();
}

.nice-padding{
    padding-left:20px;
    padding-right:20px;
}

@media screen and (min-width: @breakpoint-mobile){
    .col1{
        .column(1);
    }
    .col2{
        .column(2);
    }
    .col3{
        .column(3);
    }
    .col4{
        .column(4);
    }
    .col5{
        .column(5);
    }
    .col6{
        .column(6);
    }
    .col7{
        .column(7);
    }
    .col8{
        .column(8);
    }
    .col9{
        .column(9);
    }
    .col10{
        .column(10);
    }
    .col11{
        .column(11);
    }
    .col12{
        .column(12);
    }

    .row{
        .row();
    }
    .row-flush{
        .row-flush();
    }

    .nice-padding{
        padding-left:50px;
        padding-right:50px;
    }

    body{
        margin-left:@menu-width;
    }

    .browsermessage{
        margin:0 0 0 -150px;
    }
    .content-wrapper{
        z-index:0;
        -webkit-transform:none;
        transform:none;
    }

    .nav-wrapper{
        /* heigt and position necessary to force it to 100% height of screen (with some JS help) */
        position:absolute;
        left:0;
        height:100%;
        width:@menu-width;
        margin-left: -@menu-width;
    }

    .content{
        border-top:0;
        background-color:none;
        padding-top:0;
    }

    .inner{ /* inner only serves a purpose to position content */
        height:100%;
        position:fixed;
        width:@menu-width;
    }

    #nav-toggle{
        display:none;
    }

    .nav-main{
        margin-bottom: 116px; /* WARNING: magic number - the height of the .footer */

        li{
            z-index:1;
        }
        .footer{
            padding-top:1em;
            background-color:@color-grey-1;
            position:fixed;
            width:@menu-width - 7;
            bottom:0;
            text-align:center;
            z-index:2;
        }
        .avatar{
            display:block;
            margin:auto;
            text-align:center;
            margin-bottom:1em;

            a{
                padding:0 0 1em 0;
                border-bottom:1px solid rgba(200,200,200,0.1);
            }
            &:before{
                color:@color-grey-2;
                border: 2px solid @color-grey-2;
            }
            &:hover{
                .box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
            }
        }
    }

    .explorer {
        width: 400px;
        position: absolute;
        z-index:@explorer-z-index;
        top:0;
        left:99%;
    }
    .dl-menu {
        position: absolute;
    }

    /* UN-set the transformations used on mobile */
    body.nav-open .content-wrapper{
        position:relative;
        transform: none;
        -webkit-transform: none;
    }
    body.nav-open .nav-wrapper{
        margin-left: -@menu-width;
    }
    body.nav-open .nav-wrapper,
    body.nav-open .nav-main{
        width:@menu-width;
    }

    body.explorer-open .explorer:before{
        display:none;
    }
    body.explorer-open .nav-main{
        display:block;
    }

    header{
        padding-top:1.5em;
        padding-bottom:1.5em;
    }
    footer{
        width:80%;
        margin-left:40px;
    }
}

/* Transitions */
.content-wrapper,
.nav-main,
#nav-toggle,
footer,
.logo{
    .transition(all 0.2s ease); /* TODO: ensure that nav-wrapper can't be seen to be gradually expanding to fill height of screen, by removing unnecessary transitions */
}
.nav-wrapper{
    .transition-transform(0.2s ease);
}
.nav-main a, a{
    .transition(~"color 0.2s ease, background-color 0.2s ease");
}

/*
min z-index: 1;
max z-index: 5;
*/

@import "variables.less";
@import "mixins.less";
@import "grid.less";

@import "components/explorer.less";
@import "components/icons.less";
@import "components/tabs.less";
@import "components/dropdowns.less";
@import "components/modals.less";
@import "components/forms.less";
@import "components/listing.less";
@import "components/messages.less";
@import "components/formatters.less";

html{
    background-color:@color-header-bg;
}

body{
    -webkit-font-smoothing: antialiased; /* Do not remove! */
    font-family:Open Sans,Arial,sans-serif;
    font-size:80%;
    line-height:1.5em;
    color:@color-text-base;
    overflow-x: hidden;
    position: relative;

    &.reordering{
        overflow:visible;
    }
}

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
    -webkit-font-smoothing: auto;
}

h1{
    line-height:1.3em;
    font-size:1.5em;
    text-transform:uppercase;
    color:@color-grey-1;
    font-weight:700;

    span{
        text-transform:none;
        font-weight:300;
    }

    .homepage &{
        text-transform:none;
    }
}
h2{
    text-transform:uppercase;
    font-size:1.3em;
    font-family:Open Sans;
    font-weight:600;
    color:@color-grey-2;

    .page-explorer &{
        text-transform:none;
    }
}
a{
    color:@color-link;
    text-decoration:none;

    &:hover{
        color:@color-link-hover;
    }
}

code{
    .box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
    background-color:@color-fieldset-hover;
    padding:2px 5px;
}

kbd{
    .border-radius(3px);
    font-family:Open Sans, Arial, sans-serif;
    border:1px solid @color-grey-2;
    border-color:rgba(0,0,0,0.2);
    padding:0.3em 0.5em;
}

img{
    max-width:100%;
    height:auto;
}

.browsermessage{
    background-color:@color-red;
    color:white;
    padding:1em 2em;
    margin:0;
    position:relative;
    left:0;
    top:0;
    right:0;

    a{
        color:white;
        text-decoration:underline;
    }
}

.wrapper{
    .clearfix();
}

.nav-wrapper{
    .box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5));
    position:relative;
    background: @color-grey-1;
    margin-left: -100%;
    width: 80%;
    float: left;
    height:100%;
    min-height:800px;
}
    .logo{
        display:block;
        margin:2em auto;
        text-align:center;
        text-decoration:none;
        color:white;
        opacity:0.4;

        em{
            font-family: verdant;
            font-style: normal;
            font-size:7.7em;
            line-height:1em;
        }
        span{
            display:none;
        }
        &:hover{
            opacity:1;
        }
    }

    #nav-toggle{
        .push(0.65);
        .box-shadow(0px 0px 10px 5px rgba(255, 255, 255, 0.5));
        cursor:pointer;
        position:fixed;
        background: @color-grey-1;
        width:40px;
        opacity:0.8;

        &:before{
            font-size:30px;
            color:white;
            line-height:40px;
        }
    }

    .nav-main{
        position:absolute;
        top: 150px;
        bottom: 0px;
        overflow: auto;
        width:100%;

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

        ul{
            border-top:1px solid @color-grey-1-1;
        }

        li{
            border-bottom:1px solid @color-grey-1-1;
            position:relative;

            &.selected{
                background-color:@color-grey-1;
            }

            .menu-snippets &.menu-snippets,
            .menu-users &.menu-users,
            .menu-snippets &.menu-snippets,
            .menu-documents &.menu-documents,
            .menu-images &.menu-images,
            .menu-search &.menu-search,
            .menu-explorer &.menu-explorer{
                background:#222;

                &:after{
                    content: " ";
                    width: 0px;
                    height: 0px;
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 0.9em;
                    border: 0.7em solid #fff;
                    border-color: transparent #fff transparent transparent;
                }
            }
        }

        a {
            -webkit-font-smoothing: auto;
            text-decoration:none;
            text-transform:uppercase;
            display: block;
            color: #AAA;
            padding: 0.9em 1.2em;
            position:relative;
            font-size:0.9em;
            font-weight:400;
            white-space:nowrap;

            &:before{
                margin-right:0.3em;
            }
            &:hover{
                color:white;
            }
        }

        .more > a{
            &:before{
                margin-right:0.4em;
            }
            font-size:0.8em;
            padding:0.2em 1.2em;
            background-color:@color-grey-1-1;
        }
        .more{
            border:0;
        }

        .avatar{
            display:none;
        }

        /* search form */
        #menu-search{
            position:relative;

            .fields{
                .transition(background-color 0.2s ease);
                border:0;
                li{
                    border:0;
                }
            }
            .field{
                padding:0;
                color: #AAA;

                &:before{
                    position:absolute;
                    left:0.75em;
                    top:0.45em;
                }
            }
            .submit{
                .visuallyhidden();
            }
            label{
                -webkit-font-smoothing: auto;
                line-height:inherit;
                text-transform:uppercase;
                padding: 0.9em 1.2em 0.9em 3.5em;
            }
            input{
                float:left;
                margin-top:-1000px;
                text-transform:uppercase;
                font-size:1em;
                padding: 0.9em 1.2em 0.9em 3.5em;
                border:0;
                border-radius:0;
                background-color:transparent;
                line-height:inherit;
            }

            &:hover{
                .field, input{
                    color:white;
                }
            }

            &.focussed{
                label{
                    display:none;
                }
                .fields{
                    background-color:@color-grey-4;
                }
                .field{
                    color: @color-grey-1;
                }
                input{
                    margin-top:0px;
                    color:@color-grey-1;
                }
            }
        }
    }

    .js .nav-main .more ul{
        display:none;
    }

    .explorer{
        position:absolute;
        margin-top:150px; /* same as .nav-main */
    }

.content-wrapper{
    width:100%;
    float: right;
    position: relative;
    background-color:white;
    border-bottom:1px solid @color-grey-4;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
    .content{
        .row();
        border-top:40px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
        padding-bottom:4em;
    }

body.nav-open .nav-wrapper{
    margin-left:0;
}

body.nav-open .content-wrapper{
    transform: translate3d(80%,0,0);
    -webkit-transform: translate3d(80%,0,0);

    position:fixed;
}

body.nav-open #nav-toggle{
    left:80%;
    &:before{
        content:"z";
    }
}

body.explorer-open .explorer{
    display:block;
    border-top:1px solid rgba(200,200,200,0.1);

    &:before{
        position:absolute;
        top:-3em;
        content:"Close explorer";
        padding:0.9em;
    }
}

body.explorer-open .nav-main{
    display:none;
}

header{
    padding-top:1.5em;
    padding-bottom:1em;
    background-color: @color-grey-5;
    border-bottom:1px solid @color-grey-4;
    margin-bottom:2em;

    h1, h2{
        margin:0;
    }

    .left{
        float:left;
    }
    .right{
        float:right;
        text-align:right;
    }

    /* For case where content below header should merge with it */
    &.merged{
        margin-bottom:0;
    }
    &.tab-merged, &.no-border{
        border:0;
    }
    &.merged.no-border{
        padding-bottom:0;
    }
}

.page-explorer header{
    margin-bottom:0;
    padding-bottom:1em;
}

footer{
    .row();
    background: @color-grey-1;
    background: rgba(0,0,0,0.7);
    position:fixed;
    bottom:0;
    height:3.4em;
    padding:0.3em;
    width:90%;
    margin:0 5%;
    color:white;

    ul{
        .unlist();
    }
    li{
        float:left;
    }

    .actions{
        width:250px;
        margin-right:@grid-gutter-width/2;

        .button{
            padding-top:1em;
            padding-bottom:1em;
        }
    }

    .meta{
        float:right;
        text-align:right;
        padding-right:@grid-gutter-width/2;
        line-height:3.5em;
        font-size:0.85em;

        span{
            margin-right:@grid-gutter-width;
        }

    }
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: @color-grey-1;
}
::-webkit-scrollbar-thumb {
    background: @color-grey-2;
    -webkit-border-radius: 1ex;
}
::-webkit-scrollbar-corner {
    background: @color-grey-1;
}

/* Z-indexes */
#nav-toggle{
    z-index:5;
}
.nav-wrapper{
    z-index:2;
}
.content-wrapper{
    z-index:3;
}
footer, .logo{
    z-index:1;
}

.breadcrumb{
    .unlist();
    .clearfix();

    font-size:0.85em;
    margin-top:1em !important;

    li {
        display: block;
        float: left;
        background: @color-grey-3;
        padding: 0.5em 1em 0.5em 2em;
        position: relative;
        margin: 0 4px 4px 0;
        text-decoration: none;
        color: #fff;
        line-height:1em;
        white-space: nowrap;
        max-width:30em;
        line-height:1.5em;

        a{
            color:@color-grey-2;
            display:block;
            max-width:25em;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            line-height:1.6em;
        }

        &:after, &:before{
            content: "";
            border-top: 1.3em solid transparent;
            border-bottom: 1.3em solid transparent;
        }
        &:after {
            border-left: 1em solid @color-grey-3;
            position: absolute; right: -0.9em; top: 0;
            z-index: 1;
        }
        &:before {
            border-left: 1em solid @color-header-bg;
            position: absolute; left: 0; top: 0;
        }

        &:hover {
            background: @color-teal;

            a{
                color:white;
            }
        }
        &:hover:after {
            border-left-color: @color-teal;
        }

        &:first-child {
            padding:0.5em;
            .border-radius(3px 0px 0px 3px);

            &:before{
                display:none;
                width:1em;
            }
            a {
                width:2em;
                font-size:1em;
                &:before{
                    line-height:1em;
                    font-size:1.7em;
                }
            }
        }
    }
}

.row{
    .clearfix();
}

.nice-padding{
    padding-left:20px;
    padding-right:20px;
}

@media screen and (min-width: @breakpoint-mobile){
    .col1{
        .column(1);
    }
    .col2{
        .column(2);
    }
    .col3{
        .column(3);
    }
    .col4{
        .column(4);
    }
    .col5{
        .column(5);
    }
    .col6{
        .column(6);
    }
    .col7{
        .column(7);
    }
    .col8{
        .column(8);
    }
    .col9{
        .column(9);
    }
    .col10{
        .column(10);
    }
    .col11{
        .column(11);
    }
    .col12{
        .column(12);
    }

    .row{
        .row();
    }
    .row-flush{
        .row-flush();
    }

    .nice-padding{
        padding-left:50px;
        padding-right:50px;
    }

    body{
        margin-left:@menu-width;
    }

    .browsermessage{
        margin:0 0 0 -150px;
    }
    .content-wrapper{
        z-index:0;
        -webkit-transform:none;
        transform:none;
    }

    .nav-wrapper{
        /* heigt and position necessary to force it to 100% height of screen (with some JS help) */
        position:absolute;
        left:0;
        height:100%;
        width:@menu-width;
        margin-left: -@menu-width;
    }

    .content{
        border-top:0;
        background-color:none;
        padding-top:0;
    }

    .inner{ /* inner only serves a purpose to position content */
        height:100%;
        position:fixed;
        width:@menu-width;
    }

    #nav-toggle{
        display:none;
    }

    .nav-main{
        margin-bottom: 116px; /* WARNING: magic number - the height of the .footer */

        li{
            z-index:1;
        }
        .footer{
            padding-top:1em;
            background-color:@color-grey-1;
            position:fixed;
            width:@menu-width - 7;
            bottom:0;
            text-align:center;
            z-index:2;
        }
        .avatar{
            display:block;
            margin:auto;
            text-align:center;
            margin-bottom:1em;

            a{
                padding:0 0 1em 0;
                border-bottom:1px solid rgba(200,200,200,0.1);
            }
            &:before{
                color:@color-grey-2;
                border: 2px solid @color-grey-2;
            }
            &:hover{
                .box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
            }
        }
    }

    .explorer {
        width: 400px;
        position: absolute;
        z-index:@explorer-z-index;
        top:0;
        left:99%;
    }
    .dl-menu {
        position: absolute;
    }

    /* UN-set the transformations used on mobile */
    body.nav-open .content-wrapper{
        position:relative;
        transform: none;
        -webkit-transform: none;
    }
    body.nav-open .nav-wrapper{
        margin-left: -@menu-width;
    }
    body.nav-open .nav-wrapper,
    body.nav-open .nav-main{
        width:@menu-width;
    }

    body.explorer-open .explorer:before{
        display:none;
    }
    body.explorer-open .nav-main{
        display:block;
    }

    header{
        padding-top:1.5em;
        padding-bottom:1.5em;
    }
    footer{
        width:80%;
        margin-left:40px;
    }
}

/* Transitions */
.content-wrapper,
.nav-main,
#nav-toggle,
footer,
.logo{
    .transition(all 0.2s ease); /* TODO: ensure that nav-wrapper can't be seen to be gradually expanding to fill height of screen, by removing unnecessary transitions */
}
.nav-wrapper{
    .transition-transform(0.2s ease);
}
.nav-main a, a{
    .transition(~"color 0.2s ease, background-color 0.2s ease");
}


INBOX-408 Interaction zone on tags' remove button is larger.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


font-family

font-family

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/intaktus/liveshop-customization.git/'


改字体色值

改字体色值

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/XUEJS/xue-project.git/'


MRSPLAY-6: Deleted two empty lines and moved margin

* {
  margin: 0;
  padding: 0;
}

body
{
  background-color: #2e2e2e;
}

#wrapper
{
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3em;
  border: 2px solid #000000;
  background-color: #fff;
  text-align: center;
}

* {
  margin: 0;
  padding: 0;
}

body
{
  background-color: #2e2e2e;
}

#wrapper
{
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  border: 2px solid #000000;
  background-color: #fff;
  margin-top: 3em;
  text-align: center;
}


Pre blocks should respect newlines.

Pre blocks should respect newlines.

So that backtraces display better.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aha-app/bigquery-log-viewer.git/'