fix(uiGridColumnMenu): Position relatively

Positioning absolutely worked in all browsers but IE9. It was positioning
the column menu at the top of the page...

Changing to relative seems to have fixed this in IE9 and kept all other
browsers the same.

Fixes #2319

.ui-grid-top-panel-background {
  .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop);
}

@topPanelRadius: @gridBorderRadius - @gridBorderWidth;

.ui-grid-header {
  border-bottom: 1px solid @borderColor;
  box-sizing: border-box;
}

.ui-grid-top-panel {
    position: relative;
    // border-bottom: 1px solid @borderColor; // #D4D4D4

    overflow: hidden;  // Disable so menus show up
    font-weight: bold;

    // .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop);
    .ui-grid-top-panel-background;

    .border-radius(@topPanelRadius, 0, 0, @topPanelRadius);
}

.ui-grid-header-viewport {
  overflow: hidden; // Disable so menus show up
}

.ui-grid-header-canvas {

  // Clearfix for floating header cells
  &:before, &:after {
    content: "";
    display: table;
    line-height: 0;
  }

  &:after {
    clear:both;
  }

  // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
}

.ui-grid-header-cell-wrapper {
  position: relative;
  display: table;
  box-sizing: border-box;
  height: 100%;
}

.ui-grid-header-cell-row {
  display: table-row;
}

.ui-grid-header-cell {
  position: relative;
  box-sizing: border-box;
  background-color: inherit;
  border-right: @gridBorderWidth solid;
  border-color: @headerVerticalBarColor;
  display: table-cell;

  &:last-child {
    border-right: 0;
  }

  .user-select(none);

  // Default to width 0 so header height can calculate right. Otherwise
  //  the header cells will flow onto the next line of the header container
  //  and cause the header height to be calculated as twice the height
  //  it should be. The column widths are calculated dynamically
  width: 0;

  .sortable {
    cursor: pointer;
  }
}

// Make vertical bar in header row fill the height of the cell completely
.ui-grid-header .ui-grid-vertical-bar {
  top: 0;
  bottom: 0;
}

.ui-grid-column-menu-button {
  position: absolute;
  right: @gridBorderWidth; // So it doesn't overlay the vertical bar
  top: 0;
  // bottom: 0;
  // .ui-grid-top-panel-background;

  .ui-grid-icon-angle-down {
    vertical-align: sub;
  }
}

.ui-grid-column-menu-button-last-col {
  margin-right: 25px;
}

.ui-grid-column-menu {
  position: relative;
}

/* Slide up/down animations */
.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid {
  &.ng-hide-add, &.ng-hide-remove {
    .transition(all, 0.05s, linear);
    display: block !important;
  }

  &.ng-hide-add.ng-hide-add-active,
  &.ng-hide-remove {
    .transform(translateY(-100%));
  }

  &.ng-hide-add,
  &.ng-hide-remove.ng-hide-remove-active {
    .transform(translateY(0));
  }
}

/* Slide up/down animations */
.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
  &.ng-hide-add, &.ng-hide-remove {
    .transition(all, 0.05s, linear);
    display: block !important;
  }

  &.ng-hide-add.ng-hide-add-active,
  &.ng-hide-remove {
    .transform(translateY(-100%));
  }

  &.ng-hide-add,
  &.ng-hide-remove.ng-hide-remove-active {
    .transform(translateY(0));
  }
}

.ui-grid-filter-container {
  padding: 4px 10px;
  position: relative;

  .ui-grid-filter-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    [class^="ui-grid-icon"] {
      position: absolute;
      top: 50%;
      line-height: 32px;
      margin-top: -16px;
      right: 10px;
      opacity: 0.66;

      &:hover {
        opacity: 1;
      }
    }
  }

  .ui-grid-filter-button-select {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    [class^="ui-grid-icon"] {
      position: absolute;
      top: 50%;
      line-height: 32px;
      margin-top: -16px;
      right: 0px;
      opacity: 0.66;

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

input[type="text"].ui-grid-filter-input {
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;

  border: @gridBorderWidth solid  @borderColor;
  .border-radius(@gridBorderRadius);

  &:hover {
    border: @gridBorderWidth solid  @borderColor;
  }
}

select.ui-grid-filter-select {
  padding: 0;
  margin: 0;
  border: 0;
  width: 90%;

  border: @gridBorderWidth solid  @borderColor;
  .border-radius(@gridBorderRadius);

  &:hover {
    border: @gridBorderWidth solid  @borderColor;
  }

  .ui-grid-filter-cancel-button-hidden & {
    width: 100%;
  }
}

.ui-grid-top-panel-background {
  .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop);
}

@topPanelRadius: @gridBorderRadius - @gridBorderWidth;

.ui-grid-header {
  border-bottom: 1px solid @borderColor;
  box-sizing: border-box;
}

.ui-grid-top-panel {
    position: relative;
    // border-bottom: 1px solid @borderColor; // #D4D4D4

    overflow: hidden;  // Disable so menus show up
    font-weight: bold;

    // .gradient(@headerBackgroundColor, @headerGradientStart, @headerGradientStop);
    .ui-grid-top-panel-background;

    .border-radius(@topPanelRadius, 0, 0, @topPanelRadius);
}

.ui-grid-header-viewport {
  overflow: hidden; // Disable so menus show up
}

.ui-grid-header-canvas {

  // Clearfix for floating header cells
  &:before, &:after {
    content: "";
    display: table;
    line-height: 0;
  }

  &:after {
    clear:both;
  }

  // .border-radius(@gridBorderRadius, 0, 0, @gridBorderRadius);
}

.ui-grid-header-cell-wrapper {
  position: relative;
  display: table;
  box-sizing: border-box;
  height: 100%;
}

.ui-grid-header-cell-row {
  display: table-row;
}

.ui-grid-header-cell {
  position: relative;
  box-sizing: border-box;
  background-color: inherit;
  border-right: @gridBorderWidth solid;
  border-color: @headerVerticalBarColor;
  display: table-cell;

  &:last-child {
    border-right: 0;
  }

  .user-select(none);

  // Default to width 0 so header height can calculate right. Otherwise
  //  the header cells will flow onto the next line of the header container
  //  and cause the header height to be calculated as twice the height
  //  it should be. The column widths are calculated dynamically
  width: 0;

  .sortable {
    cursor: pointer;
  }
}

// Make vertical bar in header row fill the height of the cell completely
.ui-grid-header .ui-grid-vertical-bar {
  top: 0;
  bottom: 0;
}

.ui-grid-column-menu-button {
  position: absolute;
  right: @gridBorderWidth; // So it doesn't overlay the vertical bar
  top: 0;
  // bottom: 0;
  // .ui-grid-top-panel-background;

  .ui-grid-icon-angle-down {
    vertical-align: sub;
  }
}

.ui-grid-column-menu-button-last-col {
  margin-right: 25px;
}

.ui-grid-column-menu {
  position: absolute;
}

/* Slide up/down animations */
.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid {
  &.ng-hide-add, &.ng-hide-remove {
    .transition(all, 0.05s, linear);
    display: block !important;
  }

  &.ng-hide-add.ng-hide-add-active,
  &.ng-hide-remove {
    .transform(translateY(-100%));
  }

  &.ng-hide-add,
  &.ng-hide-remove.ng-hide-remove-active {
    .transform(translateY(0));
  }
}

/* Slide up/down animations */
.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
  &.ng-hide-add, &.ng-hide-remove {
    .transition(all, 0.05s, linear);
    display: block !important;
  }

  &.ng-hide-add.ng-hide-add-active,
  &.ng-hide-remove {
    .transform(translateY(-100%));
  }

  &.ng-hide-add,
  &.ng-hide-remove.ng-hide-remove-active {
    .transform(translateY(0));
  }
}

.ui-grid-filter-container {
  padding: 4px 10px;
  position: relative;

  .ui-grid-filter-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    [class^="ui-grid-icon"] {
      position: absolute;
      top: 50%;
      line-height: 32px;
      margin-top: -16px;
      right: 10px;
      opacity: 0.66;

      &:hover {
        opacity: 1;
      }
    }
  }

  .ui-grid-filter-button-select {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    [class^="ui-grid-icon"] {
      position: absolute;
      top: 50%;
      line-height: 32px;
      margin-top: -16px;
      right: 0px;
      opacity: 0.66;

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

input[type="text"].ui-grid-filter-input {
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;

  border: @gridBorderWidth solid  @borderColor;
  .border-radius(@gridBorderRadius);

  &:hover {
    border: @gridBorderWidth solid  @borderColor;
  }
}

select.ui-grid-filter-select {
  padding: 0;
  margin: 0;
  border: 0;
  width: 90%;

  border: @gridBorderWidth solid  @borderColor;
  .border-radius(@gridBorderRadius);

  &:hover {
    border: @gridBorderWidth solid  @borderColor;
  }

  .ui-grid-filter-cancel-button-hidden & {
    width: 100%;
  }
}


Color pagination

Color pagination

/* === Swiper === */
.preserve3d() {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    /* Fix of Webkit flickering */
    z-index:1;
}

.swiper-container-vertical > .swiper-wrapper{
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.swiper-wrapper {
    position:relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    .preserve3d();

    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
    -o-transition-property:-o-transform;
    -ms-transition-property:-ms-transform;
    transition-property:transform;

    -webkit-transform:translate3d(0px,0,0);
    -moz-transform:translate3d(0px,0,0);
    -o-transform:translate(0px,0px);
    -ms-transform:translate3d(0px,0,0);
    transform:translate3d(0px,0,0);

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-container-multirow > .swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-fles-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}
.swiper-slide {
    .preserve3d();
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    &.swiper-button-disabled {
        opacity: 0.35;
        cursor: auto;
    }
}
.swiper-button-prev {
    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#007aff'/></svg>");
    left: 10px;
}
.swiper-button-next {
    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#007aff'/></svg>");
    right: 10px;
}
/* Pagination Styles */
.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10;
    &.swiper-pagination-hidden {
        opacity: 0;
    }
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    .swiper-pagination-clickable & {
        cursor: pointer;
    }
    .swiper-pagination-white & {
        background: #fff;
    }
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
    .swiper-pagination-white & {
        background: #fff;
    }
    .swiper-pagination-black & {
        background: #000;
    }
}
.swiper-container-vertical {
    > .swiper-pagination {
        right: 10px;
        top: 50%;
        -webkit-transform:translate3d(0px,-50%,0);
        -moz-transform:translate3d(0px,-50%,0);
        -o-transform:translate(0px,-50%);
        -ms-transform:translate3d(0px,-50%,0);
        transform:translate3d(0px,-50%,0);
        .swiper-pagination-bullet {
            margin: 5px 0;
            display: block;
        }
    }
}
.swiper-container-horizontal {
    > .swiper-pagination {
        bottom: 10px;
        left: 0;
        width: 100%;
        .swiper-pagination-bullet {
            margin: 0 5px;
        }
    }
}
/* 3D Container */
.swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    .swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow {
        .preserve3d();
    }
    .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        pointer-events:none;
        z-index: 10;
    }
    .swiper-slide-shadow-left {
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-slide-shadow-right {
        background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-slide-shadow-top {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-slide-shadow-bottom {
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
}
/* Coverflow */
.swiper-container-coverflow {
    .swiper-wrapper {
        /* Windows 8 IE 10 fix */
        -ms-perspective:1200px;
    }

}
/* Fade */
.swiper-container-fade {
    &.swiper-container-free-mode {
        .swiper-slide {
            -webkit-transition-timing-function: ease-out;
            -moz-transition-timing-function: ease-out;
            -ms-transition-timing-function: ease-out;
            -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
    }
    .swiper-slide {
        pointer-events: none;
    }
    .swiper-slide-active {
        pointer-events: auto;
    }
}
/* Cube */
.swiper-container-cube {
    overflow: visible;
    .swiper-slide {
        pointer-events: none;
        visibility: hidden;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
    .swiper-slide-active, .swiper-slide-next, .swiper-slide-prev, .swiper-slide-next + .swiper-slide {
        pointer-events: auto;
        visibility: visible;
    }
    .swiper-cube-shadow {
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.6;
        -webkit-filter: blur(50px);
        filter: blur(50px);
    }
    &.swiper-container-vertical .swiper-cube-shadow {
        z-index: 0;
    }
}
/* Scrollbar */
.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0,0,0,0.1);
    .swiper-container-horizontal > & {
        position: absolute;
        left: 1%;
        bottom: 3px;
        z-index: 50;
        height: 5px;
        width: 98%;
    }
    .swiper-container-vertical > & {
        position: absolute;
        right: 3px;
        top: 1%;
        z-index: 50;
        width: 5px;
        height: 98%;
    }
}
.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    left: 0;
    top: 0;
}
.swiper-scrollbar-cursor-drag {
    cursor: move;
}

/* === Swiper === */
.preserve3d() {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    /* Fix of Webkit flickering */
    z-index:1;
}

.swiper-container-vertical > .swiper-wrapper{
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.swiper-wrapper {
    position:relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    .preserve3d();

    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
    -o-transition-property:-o-transform;
    -ms-transition-property:-ms-transform;
    transition-property:transform;

    -webkit-transform:translate3d(0px,0,0);
    -moz-transform:translate3d(0px,0,0);
    -o-transform:translate(0px,0px);
    -ms-transform:translate3d(0px,0,0);
    transform:translate3d(0px,0,0);

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-container-multirow > .swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-fles-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}
.swiper-slide {
    .preserve3d();
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    &.swiper-button-disabled {
        opacity: 0.35;
        cursor: auto;
    }
}
.swiper-button-prev {
    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#007aff'/></svg>");
    left: 10px;
}
.swiper-button-next {
    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#007aff'/></svg>");
    right: 10px;
}
/* Pagination Styles */
.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10;
    &.swiper-pagination-hidden {
        opacity: 0;
    }
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    .swiper-pagination-clickable & {
        cursor: pointer;
    }
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
}
.swiper-container-vertical {
    > .swiper-pagination {
        right: 10px;
        top: 50%;
        -webkit-transform:translate3d(0px,-50%,0);
        -moz-transform:translate3d(0px,-50%,0);
        -o-transform:translate(0px,-50%);
        -ms-transform:translate3d(0px,-50%,0);
        transform:translate3d(0px,-50%,0);
        .swiper-pagination-bullet {
            margin: 5px 0;
            display: block;
        }
    }
}
.swiper-container-horizontal {
    > .swiper-pagination {
        bottom: 10px;
        left: 0;
        width: 100%;
        .swiper-pagination-bullet {
            margin: 0 5px;
        }
    }
}
/* 3D Container */
.swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    .swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow {
        .preserve3d();
    }
    .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        pointer-events:none;
        z-index: 10;
    }
    .swiper-slide-shadow-left {
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-slide-shadow-right {
        background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-slide-shadow-top {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
    .swiper-slide-shadow-bottom {
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */
        background-image:    -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */
        background-image:      -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */
        background-image:         linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */
    }
}
/* Coverflow */
.swiper-container-coverflow {
    .swiper-wrapper {
        /* Windows 8 IE 10 fix */
        -ms-perspective:1200px;
    }

}
/* Fade */
.swiper-container-fade {
    &.swiper-container-free-mode {
        .swiper-slide {
            -webkit-transition-timing-function: ease-out;
            -moz-transition-timing-function: ease-out;
            -ms-transition-timing-function: ease-out;
            -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
    }
    .swiper-slide {
        pointer-events: none;
    }
    .swiper-slide-active {
        pointer-events: auto;
    }
}
/* Cube */
.swiper-container-cube {
    overflow: visible;
    .swiper-slide {
        pointer-events: none;
        visibility: hidden;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
    .swiper-slide-active, .swiper-slide-next, .swiper-slide-prev, .swiper-slide-next + .swiper-slide {
        pointer-events: auto;
        visibility: visible;
    }
    .swiper-cube-shadow {
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.6;
        -webkit-filter: blur(50px);
        filter: blur(50px);
    }
    &.swiper-container-vertical .swiper-cube-shadow {
        z-index: 0;
    }
}
/* Scrollbar */
.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0,0,0,0.1);
    .swiper-container-horizontal > & {
        position: absolute;
        left: 1%;
        bottom: 3px;
        z-index: 50;
        height: 5px;
        width: 98%;
    }
    .swiper-container-vertical > & {
        position: absolute;
        right: 3px;
        top: 1%;
        z-index: 50;
        width: 5px;
        height: 98%;
    }
}
.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    left: 0;
    top: 0;
}
.swiper-scrollbar-cursor-drag {
    cursor: move;
}


Delete mixins.less

Delete mixins.less

// Mixins
// --------------------------

.fa-icon() {
  display: inline-block;
  font: normal normal normal @fa-font-size-base/1 FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0); // ensures no half-pixel rendering in firefox

}

.fa-icon-rotate(@degrees, @rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
          transform: rotate(@degrees);
}

.fa-icon-flip(@horiz, @vert, @rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1);
  -webkit-transform: scale(@horiz, @vert);
      -ms-transform: scale(@horiz, @vert);
          transform: scale(@horiz, @vert);
}


change color

change color

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

.weex-run.qrcode-panel.loading {
  width: 400px;
  height: 650px;
  background-color: @base-background-color;
  margin: auto;
  text-align: center;

}

atom-panel.modal.overlay.from-top.weex-run.qrcode-panel {
  justify-content: center;
  background-color: transparent;
  border: none;
}

.qrImageWithGuide{
  background-color:@base-background-color;
}

#weexrun-qrDiv{
  margin-left: 60px;
  width: 170px;
  height: 170px;
  background-color: white;
  padding: 10px;
}

.weexRunTitle {
  font-size: 200%;
  font-family: 'PT Sans Narrow', sans-serif;
  //margin-top: 30px;
  margin-bottom: 25px;
  padding-top: 25px;
}

.weexDescribe {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  font-size: 130%;
  font-family: 'PT Sans Narrow', sans-serif;
  margin-top: 25px;
  margin-left: 50px;
  margin-right: 50px;

}

.weexRunImg {
  margin: 25px;
  width: 250px;
  height: 249px;
}

#thera_device_panel_table {
  text-align: left;
  font-size: 14px;
  display: block;
}

#thera_device_panel_table thead {
  display:table-header-group;
  table-layout:fixed;
  width:100%;
}

#thera_device_panel_table tbody {
  display: block;
  height: 400px;
  overflow: scroll;
  width:100%;
}

#thera_device_table_tbody , #thera_device_table_tbody:before, #thera_device_table_tbody:after{
  box-sizing: content-box;
}

#thera_device_panel_table tbody td {
  padding: 5px;
}

#thera_device_panel_ex_table {
  text-align: center;
  margin: 10px;
  width: 900px;
}

#thera_device_panel_qr_view {
  margin: 20px;
}

#thera_device_panel_table tbody tr:nth-child(odd) {
  background-color: @base-background-color;
}

#thera_device_panel_table tbody tr:nth-child(even) {
  background-color: @background-color-selected;
}

.weex_run_stop_icon {
  padding: 5px;
  width: 30px;
  height: 30px;
  color: red;
}

.weex_run_start_icon {
  padding: 5px;
  width: 30px;
  height: 30px;
  color: #00A000;
}

.weex_run_button_cursor{
  cursor: pointer;
}

.weex_run_running_icon {
  color:  #FFFF00;
}

#thera_device_panel_table_prompt {
  text-align:left;
  padding: 5px;
  font-size:12px;
  color:@text-color-ignored
}

#thera_device_panel_table_title {
  padding: 10px;
  font-size:16px;
  width:500px;
  color:@text-color;
  text-align: left;
}

.thera-device-modal-panel{
  margin: 0px !important;
  margin-top: 20px !important;
  padding: 10px !important;
  left:300px !important;
  background: @base-background-color !important;
  box-shadow: 1px 1px 1px 1px black;
  width: 900px !important;
}

.thera-device-modal-panel.from-top{
 top: 0px !important;
}

.deviceActionIconToolTip{
  background: #4E8EAA !important;
  color: #fff !important;
  font-size: 10px !important;
  border: hidden !important;
}

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

.weex-run.qrcode-panel.loading {
  width: 400px;
  height: 650px;
  background-color: @base-background-color;
  margin: auto;
  text-align: center;

}

atom-panel.modal.overlay.from-top.weex-run.qrcode-panel {
  justify-content: center;
  background-color: transparent;
  border: none;
}

.qrImageWithGuide{
  background-color:@base-background-color;
}

#weexrun-qrDiv{
  margin-left: 60px;
  width: 170px;
  height: 170px;
  background-color: white;
  padding: 10px;
}

.weexRunTitle {
  font-size: 200%;
  font-family: 'PT Sans Narrow', sans-serif;
  //margin-top: 30px;
  margin-bottom: 25px;
  padding-top: 25px;
}

.weexDescribe {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  font-size: 130%;
  font-family: 'PT Sans Narrow', sans-serif;
  margin-top: 25px;
  margin-left: 50px;
  margin-right: 50px;

}

.weexRunImg {
  margin: 25px;
  width: 250px;
  height: 249px;
}

#thera_device_panel_table {
  text-align: left;
  font-size: 14px;
  display: block;
}

#thera_device_panel_table thead {
  display:table-header-group;
  table-layout:fixed;
  width:100%;
}

#thera_device_panel_table tbody {
  display: block;
  height: 400px;
  overflow: scroll;
  width:100%;
}

#thera_device_table_tbody , #thera_device_table_tbody:before, #thera_device_table_tbody:after{
  box-sizing: content-box;
}

#thera_device_panel_table tbody td {
  padding: 5px;
}

#thera_device_panel_ex_table {
  text-align: center;
  margin: 10px;
  width: 900px;
}

#thera_device_panel_qr_view {
  margin: 20px;
}

#thera_device_panel_table tbody tr:nth-child(odd) {
  background-color: @base-background-color;
}

#thera_device_panel_table tbody tr:nth-child(even) {
  background-color: @background-color-selected;
}

.weex_run_stop_icon {
  padding: 5px;
  width: 30px;
  height: 30px;
  color: red;
}

.weex_run_start_icon {
  padding: 5px;
  width: 30px;
  height: 30px;
  color: #00A000;
}

.weex_run_button_cursor{
  cursor: pointer;
}

.weex_run_running_icon {
  color:  #FFFF00;
}

#thera_device_panel_table_prompt {
  text-align:left;
  padding: 5px;
  font-size:12px;
  color:@text-color
}

#thera_device_panel_table_title {
  padding: 10px;
  font-size:16px;
  width:500px;
  color:@text-color-highlight;
  text-align: left;
}

.thera-device-modal-panel{
  margin: 0px !important;
  margin-top: 20px !important;
  padding: 10px !important;
  left:300px !important;
  background: @base-background-color !important;
  box-shadow: 1px 1px 1px 1px black;
  width: 900px !important;
}

.thera-device-modal-panel.from-top{
 top: 0px !important;
}

.deviceActionIconToolTip{
  background: #4E8EAA !important;
  color: #fff !important;
  font-size: 10px !important;
  border: hidden !important;
}


oups, forget to remove the line-height test in basic-icons's file

Former-commit-id: e0f332cd14bcc572eafa5a2a17d608d3bd3ef248
Former-commit-id: 88f81f333bcf03f251f2af0a4fb2d25caac8807a

/*
 * # Semantic - basic.Icon (Basic)
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
             basic.Icon
*******************************/

@font-face {
  font-family: 'Basic Icons';
  src: url(../fonts/basic.icons.eot);
  src:
    url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'),
    url(../fonts/basic.icons.woff) format('woff'),
    url(../fonts/basic.icons.ttf) format('truetype'),
    url(../fonts/basic.icons.svg#basic.icons) format('svg')
  ;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.basic.icon {
  display: inline-block;
  opacity: 0.75;

  margin: 0em 0.25em 0em 0em;

  width: 1.23em;
  height: 1em;

  font-family: 'Basic Icons';
  font-style: normal;
  line-height: 1;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;

  speak: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/* basic.icons available */
i.basic.icon.circle.attention:before { content: '\2757'; } /* '❗' */
i.basic.icon.circle.help:before { content: '\e704'; } /* '' */
i.basic.icon.circle.info:before { content: '\e705'; } /* '' */
i.basic.icon.add:before { content: '\2795'; } /* '➕' */

i.basic.icon.chart:before { content: '📈'; } /* '\1f4c8' */
i.basic.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */
i.basic.icon.chart.pie:before { content: '\e7a2'; } /* '' */

i.basic.icon.resize.full:before { content: '\e744'; } /* '' */
i.basic.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */
i.basic.icon.resize.small:before { content: '\e746'; } /* '' */
i.basic.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */

i.basic.icon.down:before { content: '\2193'; } /* '↓' */
i.basic.icon.down.triangle:before { content: '\25be'; } /* '▾' */
i.basic.icon.down.arrow:before { content: '\e75c'; } /* '' */

i.basic.icon.left:before { content: '\2190'; } /* '←' */
i.basic.icon.left.triangle:before { content: '\25c2'; } /* '◂' */
i.basic.icon.left.arrow:before { content: '\e75d'; } /* '' */

i.basic.icon.right:before { content: '\2192'; } /* '→' */
i.basic.icon.right.triangle:before { content: '\25b8'; } /* '▸' */
i.basic.icon.right.arrow:before { content: '\e75e'; } /* '' */

i.basic.icon.up:before { content: '\2191'; } /* '↑' */
i.basic.icon.up.triangle:before { content: '\25b4'; } /* '▴' */
i.basic.icon.up.arrow:before { content: '\e75f'; } /* '' */

i.basic.icon.folder:before { content: '\e810'; } /* '' */
i.basic.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */

i.basic.icon.globe:before { content: '𝌍'; } /* '\1d30d' */
i.basic.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */

i.basic.icon.star:before { content: '\e801'; } /* '' */
i.basic.icon.star.empty:before { content: '\e800'; } /* '' */
i.basic.icon.star.half:before { content: '\e701'; } /* '' */

i.basic.icon.lock:before { content: '🔒'; } /* '\1f512' */
i.basic.icon.unlock:before { content: '🔓'; } /* '\1f513' */

i.basic.icon.layout.grid:before { content: '\e80c'; } /* '' */
i.basic.icon.layout.block:before { content: '\e708'; } /* '' */
i.basic.icon.layout.list:before { content: '\e80b'; } /* '' */

i.basic.icon.heart.empty:before { content: '\2661'; } /* '♡' */
i.basic.icon.heart:before { content: '\2665'; } /* '♥' */

i.basic.icon.asterisk:before { content: '\2731'; } /* '✱' */
i.basic.icon.attachment:before { content: '📎'; } /* '\1f4ce' */
i.basic.icon.attention:before { content: '\26a0'; } /* '⚠' */
i.basic.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */
i.basic.icon.barcode:before { content: '\e792'; } /* '' */
i.basic.icon.cart:before { content: '\e813'; } /* '' */
i.basic.icon.block:before { content: '🚫'; } /* '\1f6ab' */
i.basic.icon.book:before { content: '📖'; }
i.basic.icon.bookmark:before { content: '🔖'; } /* '\1f516' */
i.basic.icon.calendar:before { content: '📅'; } /* '\1f4c5' */
i.basic.icon.cancel:before { content: '\2716'; } /* '✖' */
i.basic.icon.close:before { content: '\e80d'; } /* '' */
i.basic.icon.color:before { content: '\e794'; } /* '' */
i.basic.icon.chat:before { content: '\e720'; } /* '' */
i.basic.icon.check:before { content: '\2611'; } /* '☑' */
i.basic.icon.time:before { content: '🕔'; } /* '\1f554' */
i.basic.icon.cloud:before { content: '\2601'; } /* '☁' */
i.basic.icon.code:before { content: '\e714'; } /* '' */
i.basic.icon.email:before { content: '\40'; } /* '@' */
i.basic.icon.settings:before { content: '\26ef'; } /* '⛯' */
i.basic.icon.setting:before { content: '\2699'; } /* '⚙' */
i.basic.icon.comment:before { content: '\e802'; } /* '' */
i.basic.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */
i.basic.icon.clockwise:before { content: '\27f3'; } /* '⟳' */
i.basic.icon.cube:before { content: '\e807'; } /* '' */
i.basic.icon.direction:before { content: '\27a2'; } /* '➢' */
i.basic.icon.doc:before { content: '📄'; } /* '\1f4c4' */
i.basic.icon.docs:before { content: '\e736'; } /* '' */
i.basic.icon.dollar:before { content: '💵'; } /* '\1f4b5' */
i.basic.icon.paint:before { content: '\e7b5'; } /* '' */
i.basic.icon.edit:before { content: '\270d'; } /* '✍' */
i.basic.icon.eject:before { content: '\2ecf'; } /* '⻏' */
i.basic.icon.export:before { content: '\e715'; } /* '' */
i.basic.icon.hide:before { content: '\e80f'; } /* '' */
i.basic.icon.unhide:before { content: '\e70b'; } /* '' */
i.basic.icon.facebook:before { content: '\f301'; } /* '' */
i.basic.icon.fast-forward:before { content: '\e804'; } /* '' */
i.basic.icon.fire:before { content: '🔥'; } /* '\1f525' */
i.basic.icon.flag:before { content: '\2691'; } /* '⚑' */
i.basic.icon.lightning:before { content: '\26a1'; } /* '⚡' */
i.basic.icon.lab:before { content: '\68'; } /* 'h' */
i.basic.icon.flight:before { content: '\2708'; } /* '✈' */
i.basic.icon.forward:before { content: '\27a6'; } /* '➦' */
i.basic.icon.gift:before { content: '🎁'; } /* '\1f381' */
i.basic.icon.github:before { content: '\f308'; } /* '' */
i.basic.icon.globe:before { content: '\e817'; } /* '' */
i.basic.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */
i.basic.icon.question:before { content: '\2753'; } /* '❓' */
i.basic.icon.home:before { content: '\2302'; } /* '⌂' */
i.basic.icon.i:before { content: '\2139'; } /* 'ℹ' */
i.basic.icon.idea:before { content: '💡'; } /* '\1f4a1' */
i.basic.icon.open:before { content: '🔗'; } /* '\1f517' */
i.basic.icon.content:before { content: '\e782'; } /* '' */
i.basic.icon.location:before { content: '\e724'; } /* '' */
i.basic.icon.mail:before { content: '\2709'; } /* '✉' */
i.basic.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
i.basic.icon.minus:before { content: '\2d'; } /* '-' */
i.basic.icon.money:before { content: '💰'; } /* '\1f4b0' */
i.basic.icon.off:before { content: '\e78e'; } /* '' */
i.basic.icon.pause:before { content: '\e808'; } /* '' */
i.basic.icon.photos:before { content: '\e812'; } /* '' */
i.basic.icon.photo:before { content: '🌄'; } /* '\1f304' */
i.basic.icon.pin:before { content: '📌'; } /* '\1f4cc' */
i.basic.icon.play:before { content: '\e809'; } /* '' */
i.basic.icon.plus:before { content: '\2b'; } /* '+' */
i.basic.icon.print:before { content: '\e716'; } /* '' */
i.basic.icon.rss:before { content: '\e73a'; } /* '' */
i.basic.icon.search:before { content: '🔍'; } /* '\1f50d' */
i.basic.icon.shuffle:before { content: '\e803'; } /* '' */
i.basic.icon.tag:before { content: '\e80a'; } /* '' */
i.basic.icon.tags:before { content: '\e70d'; } /* '' */
i.basic.icon.terminal:before { content: '\e7ac'; } /* '' */
i.basic.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */
i.basic.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */
i.basic.icon.to-end:before { content: '\e806'; } /* '' */
i.basic.icon.to-start:before { content: '\e805'; } /* '' */
i.basic.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */
i.basic.icon.trash:before { content: '\e729'; } /* '' */
i.basic.icon.twitter:before { content: '\f303'; } /* '' */
i.basic.icon.upload:before { content: '\e711'; } /* '' */
i.basic.icon.user.add:before { content: '\e700'; } /* '' */
i.basic.icon.user:before { content: '👤'; } /* '\1f464' */
i.basic.icon.community:before { content: '\e814'; } /* '' */
i.basic.icon.users:before { content: '👥'; } /* '\1f465' */
i.basic.icon.id:before { content: '\e722'; } /* '' */
i.basic.icon.url:before { content: '🔗'; } /* '\1f517' */
i.basic.icon.zoom.in:before { content: '\e750'; } /* '' */
i.basic.icon.zoom.out:before { content: '\e751'; } /* '' */

/*--------------
   Spacing Fix
---------------*/

/* dropdown arrows are to the right */
i.dropdown.basic.icon {
  margin: 0em 0em 0em 0.5em;
}

/* stars are usually consecutive */
i.basic.icon.star {
  width: auto;
  margin: 0em;
}

/* left side basic.icons */
i.basic.icon.left,
i.basic.icon.left,
i.basic.icon.left {
  width: auto;
  margin: 0em 0.5em 0em 0em;
}

/* right side basic.icons */
i.basic.icon.search,
i.basic.icon.up,
i.basic.icon.down,
i.basic.icon.right {
  width: auto;
  margin: 0em 0em 0em 0.5em;
}

/*--------------
     Aliases
---------------*/

/* aliases for convenience */
i.basic.icon.delete:before { content: '\e80d'; } /* '' */
i.basic.icon.dropdown:before { content: '\25be'; } /* '▾' */

i.basic.icon.help:before { content: '\e704'; } /* '' */
i.basic.icon.info:before { content: '\e705'; } /* '' */
i.basic.icon.error:before { content: '\e80d'; } /* '' */

i.basic.icon.dislike:before { content: '\2661'; } /* '♡' */
i.basic.icon.like:before { content: '\2665'; } /* '♥' */

i.basic.icon.eye:before { content: '\e80f'; } /* '' */
i.basic.icon.eye.hidden:before { content: '\e70b'; } /* '' */
i.basic.icon.date:before { content: '📅'; } /* '\1f4c5' */

/*******************************
             States
*******************************/

i.basic.icon.hover {
  opacity: 1;
}

i.basic.icon.active {
  opacity: 1;
}

i.emphasized.basic.icon {
  opacity: 1;
}

i.basic.icon.disabled {
  opacity: 0.3;
}

/*******************************
           Variations
*******************************/

/*-------------------
         Link
--------------------*/

i.link.basic.icon {
  cursor: pointer;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.link.basic.icon:hover {
  opacity: 1 !important;
}

/*-------------------
      Circular
--------------------*/

i.circular.basic.icon {
  -webkit-border-radius: 500px !important;
  -moz-border-radius: 500px !important;
  border-radius: 500px !important;

  padding: 0.5em 0em !important;

  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

  line-height: 1 !important;
  width: 2em !important;
  height: 2em !important;
}
i.circular.inverted.basic.icon {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Flipped
--------------------*/

i.vertically.flipped.basic.icon {
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
i.horizontally.flipped.basic.icon {
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

/*-------------------
        Rotated
--------------------*/

i.left.rotated.basic.icon {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
i.right.rotated.basic.icon {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/*-------------------
        Square
--------------------*/

i.square.basic.icon {
  width: 2em;
  height: 2em;
  padding: 0.5em 0.35em !important;

  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

  vertical-align: baseline;
}
i.square.basic.icon:before {
  vertical-align: middle;
}
i.square.inverted.basic.icon {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Inverted
--------------------*/

i.inverted.basic.icon {
  background-color: #222222;
  color: #FFFFFF;
}

/*-------------------
       Colors
--------------------*/

i.blue.basic.icon {
  color: #6ECFF5 !important;
}
i.black.basic.icon {
  color: #5C6166 !important;
}
i.green.basic.icon {
  color: #A1CF64 !important;
}
i.red.basic.icon {
  color: #D95C5C !important;
}
i.purple.basic.icon {
  color: #564F8A !important;
}
i.teal.basic.icon {
  color: #00B5AD !important;
}

/*-------------------
   Inverted Colors
--------------------*/

i.inverted.black.basic.icon {
  background-color: #5C6166 !important;
  color: #FFFFFF !important;
}
i.inverted.blue.basic.icon {
  background-color: #6ECFF5 !important;
  color: #FFFFFF !important;
}
i.inverted.green.basic.icon {
  background-color: #A1CF64 !important;
  color: #FFFFFF !important;
}
i.inverted.red.basic.icon {
  background-color: #D95C5C !important;
  color: #FFFFFF !important;
}
i.inverted.purple.basic.icon {
  background-color: #564F8A !important;
  color: #FFFFFF !important;
}
i.inverted.teal.basic.icon {
  background-color: #00B5AD !important;
  color: #FFFFFF !important;
}

/*-------------------
        Sizes
--------------------*/

i.small.basic.icon {
  font-size: 0.875em;
}
i.basic.icon {
  font-size: 1em;
}
i.large.basic.icon {
  font-size: 1.5em;
  margin-right: 0.3em;
  vertical-align: middle;
}

i.big.basic.icon {
  font-size: 2em;
  margin-right: 0.5em;
  vertical-align: middle;
}

i.huge.basic.icon {
  font-size: 4em;
  margin-right: 0.75em;
  vertical-align: middle;
}
i.massive.basic.icon {
  font-size: 8em;
  margin-right: 1em;
  vertical-align: middle;
}

/*
 * # Semantic - basic.Icon (Basic)
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
             basic.Icon
*******************************/

@font-face {
  font-family: 'Basic Icons';
  src: url(../fonts/basic.icons.eot);
  src:
    url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'),
    url(../fonts/basic.icons.woff) format('woff'),
    url(../fonts/basic.icons.ttf) format('truetype'),
    url(../fonts/basic.icons.svg#basic.icons) format('svg')
  ;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.basic.icon {
  display: inline-block;
  opacity: 0.75;

  margin: 0em 0.25em 0em 0em;

  width: 1.23em;
  height: 1em;

  font-family: 'Basic Icons';
  font-style: normal;
  line-height: 1;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;

  speak: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/* basic.icons available */
i.basic.icon.circle.attention:before { content: '\2757'; } /* '❗' */
i.basic.icon.circle.help:before { content: '\e704'; } /* '' */
i.basic.icon.circle.info:before { content: '\e705'; } /* '' */
i.basic.icon.add:before { content: '\2795'; } /* '➕' */

i.basic.icon.chart:before { content: '📈'; } /* '\1f4c8' */
i.basic.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */
i.basic.icon.chart.pie:before { content: '\e7a2'; } /* '' */

i.basic.icon.resize.full:before { content: '\e744'; } /* '' */
i.basic.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */
i.basic.icon.resize.small:before { content: '\e746'; } /* '' */
i.basic.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */

i.basic.icon.down:before { content: '\2193'; } /* '↓' */
i.basic.icon.down.triangle:before { content: '\25be'; } /* '▾' */
i.basic.icon.down.arrow:before { content: '\e75c'; } /* '' */

i.basic.icon.left:before { content: '\2190'; } /* '←' */
i.basic.icon.left.triangle:before { content: '\25c2'; } /* '◂' */
i.basic.icon.left.arrow:before { content: '\e75d'; } /* '' */

i.basic.icon.right:before { content: '\2192'; } /* '→' */
i.basic.icon.right.triangle:before { content: '\25b8'; } /* '▸' */
i.basic.icon.right.arrow:before { content: '\e75e'; } /* '' */

i.basic.icon.up:before { content: '\2191'; } /* '↑' */
i.basic.icon.up.triangle:before { content: '\25b4'; } /* '▴' */
i.basic.icon.up.arrow:before { content: '\e75f'; } /* '' */

i.basic.icon.folder:before { content: '\e810'; } /* '' */
i.basic.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */

i.basic.icon.globe:before { content: '𝌍'; } /* '\1d30d' */
i.basic.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */

i.basic.icon.star:before { content: '\e801'; } /* '' */
i.basic.icon.star.empty:before { content: '\e800'; } /* '' */
i.basic.icon.star.half:before { content: '\e701'; } /* '' */

i.basic.icon.lock:before { content: '🔒'; } /* '\1f512' */
i.basic.icon.unlock:before { content: '🔓'; } /* '\1f513' */

i.basic.icon.layout.grid:before { content: '\e80c'; } /* '' */
i.basic.icon.layout.block:before { content: '\e708'; } /* '' */
i.basic.icon.layout.list:before { content: '\e80b'; } /* '' */

i.basic.icon.heart.empty:before { content: '\2661'; } /* '♡' */
i.basic.icon.heart:before { content: '\2665'; } /* '♥' */

i.basic.icon.asterisk:before { content: '\2731'; } /* '✱' */
i.basic.icon.attachment:before { content: '📎'; } /* '\1f4ce' */
i.basic.icon.attention:before { content: '\26a0'; } /* '⚠' */
i.basic.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */
i.basic.icon.barcode:before { content: '\e792'; } /* '' */
i.basic.icon.cart:before { content: '\e813'; } /* '' */
i.basic.icon.block:before { content: '🚫'; } /* '\1f6ab' */
i.basic.icon.book:before { content: '📖'; }
i.basic.icon.bookmark:before { content: '🔖'; } /* '\1f516' */
i.basic.icon.calendar:before { content: '📅'; } /* '\1f4c5' */
i.basic.icon.cancel:before { content: '\2716'; } /* '✖' */
i.basic.icon.close:before { content: '\e80d'; } /* '' */
i.basic.icon.color:before { content: '\e794'; } /* '' */
i.basic.icon.chat:before { content: '\e720'; } /* '' */
i.basic.icon.check:before { content: '\2611'; } /* '☑' */
i.basic.icon.time:before { content: '🕔'; } /* '\1f554' */
i.basic.icon.cloud:before { content: '\2601'; } /* '☁' */
i.basic.icon.code:before { content: '\e714'; } /* '' */
i.basic.icon.email:before { content: '\40'; } /* '@' */
i.basic.icon.settings:before { content: '\26ef'; } /* '⛯' */
i.basic.icon.setting:before { content: '\2699'; } /* '⚙' */
i.basic.icon.comment:before { content: '\e802'; } /* '' */
i.basic.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */
i.basic.icon.clockwise:before { content: '\27f3'; } /* '⟳' */
i.basic.icon.cube:before { content: '\e807'; } /* '' */
i.basic.icon.direction:before { content: '\27a2'; } /* '➢' */
i.basic.icon.doc:before { content: '📄'; } /* '\1f4c4' */
i.basic.icon.docs:before { content: '\e736'; } /* '' */
i.basic.icon.dollar:before { content: '💵'; } /* '\1f4b5' */
i.basic.icon.paint:before { content: '\e7b5'; } /* '' */
i.basic.icon.edit:before { content: '\270d'; } /* '✍' */
i.basic.icon.eject:before { content: '\2ecf'; } /* '⻏' */
i.basic.icon.export:before { content: '\e715'; } /* '' */
i.basic.icon.hide:before { content: '\e80f'; } /* '' */
i.basic.icon.unhide:before { content: '\e70b'; } /* '' */
i.basic.icon.facebook:before { content: '\f301'; } /* '' */
i.basic.icon.fast-forward:before { content: '\e804'; } /* '' */
i.basic.icon.fire:before { content: '🔥'; } /* '\1f525' */
i.basic.icon.flag:before { content: '\2691'; } /* '⚑' */
i.basic.icon.lightning:before { content: '\26a1'; } /* '⚡' */
i.basic.icon.lab:before { content: '\68'; } /* 'h' */
i.basic.icon.flight:before { content: '\2708'; } /* '✈' */
i.basic.icon.forward:before { content: '\27a6'; } /* '➦' */
i.basic.icon.gift:before { content: '🎁'; } /* '\1f381' */
i.basic.icon.github:before { content: '\f308'; } /* '' */
i.basic.icon.globe:before { content: '\e817'; } /* '' */
i.basic.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */
i.basic.icon.question:before { content: '\2753'; } /* '❓' */
i.basic.icon.home:before { content: '\2302'; } /* '⌂' */
i.basic.icon.i:before { content: '\2139'; } /* 'ℹ' */
i.basic.icon.idea:before { content: '💡'; } /* '\1f4a1' */
i.basic.icon.open:before { content: '🔗'; } /* '\1f517' */
i.basic.icon.content:before { content: '\e782'; } /* '' */
i.basic.icon.location:before { content: '\e724'; } /* '' */
i.basic.icon.mail:before { content: '\2709'; } /* '✉' */
i.basic.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
i.basic.icon.minus:before { content: '\2d'; } /* '-' */
i.basic.icon.money:before { content: '💰'; } /* '\1f4b0' */
i.basic.icon.off:before { content: '\e78e'; } /* '' */
i.basic.icon.pause:before { content: '\e808'; } /* '' */
i.basic.icon.photos:before { content: '\e812'; } /* '' */
i.basic.icon.photo:before { content: '🌄'; } /* '\1f304' */
i.basic.icon.pin:before { content: '📌'; } /* '\1f4cc' */
i.basic.icon.play:before { content: '\e809'; } /* '' */
i.basic.icon.plus:before { content: '\2b'; } /* '+' */
i.basic.icon.print:before { content: '\e716'; } /* '' */
i.basic.icon.rss:before { content: '\e73a'; } /* '' */
i.basic.icon.search:before { content: '🔍'; } /* '\1f50d' */
i.basic.icon.shuffle:before { content: '\e803'; } /* '' */
i.basic.icon.tag:before { content: '\e80a'; } /* '' */
i.basic.icon.tags:before { content: '\e70d'; } /* '' */
i.basic.icon.terminal:before { content: '\e7ac'; } /* '' */
i.basic.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */
i.basic.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */
i.basic.icon.to-end:before { content: '\e806'; } /* '' */
i.basic.icon.to-start:before { content: '\e805'; } /* '' */
i.basic.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */
i.basic.icon.trash:before { content: '\e729'; } /* '' */
i.basic.icon.twitter:before { content: '\f303'; } /* '' */
i.basic.icon.upload:before { content: '\e711'; } /* '' */
i.basic.icon.user.add:before { content: '\e700'; } /* '' */
i.basic.icon.user:before { content: '👤'; } /* '\1f464' */
i.basic.icon.community:before { content: '\e814'; } /* '' */
i.basic.icon.users:before { content: '👥'; } /* '\1f465' */
i.basic.icon.id:before { content: '\e722'; } /* '' */
i.basic.icon.url:before { content: '🔗'; } /* '\1f517' */
i.basic.icon.zoom.in:before { content: '\e750'; } /* '' */
i.basic.icon.zoom.out:before { content: '\e751'; } /* '' */

/*--------------
   Spacing Fix
---------------*/

/* dropdown arrows are to the right */
i.dropdown.basic.icon {
  margin: 0em 0em 0em 0.5em;
}

/* stars are usually consecutive */
i.basic.icon.star {
  width: auto;
  margin: 0em;
}

/* left side basic.icons */
i.basic.icon.left,
i.basic.icon.left,
i.basic.icon.left {
  width: auto;
  margin: 0em 0.5em 0em 0em;
}

/* right side basic.icons */
i.basic.icon.search,
i.basic.icon.up,
i.basic.icon.down,
i.basic.icon.right {
  width: auto;
  margin: 0em 0em 0em 0.5em;
}

/*--------------
     Aliases
---------------*/

/* aliases for convenience */
i.basic.icon.delete:before { content: '\e80d'; } /* '' */
i.basic.icon.dropdown:before { content: '\25be'; } /* '▾' */

i.basic.icon.help:before { content: '\e704'; } /* '' */
i.basic.icon.info:before { content: '\e705'; } /* '' */
i.basic.icon.error:before { content: '\e80d'; } /* '' */

i.basic.icon.dislike:before { content: '\2661'; } /* '♡' */
i.basic.icon.like:before { content: '\2665'; } /* '♥' */

i.basic.icon.eye:before { content: '\e80f'; } /* '' */
i.basic.icon.eye.hidden:before { content: '\e70b'; } /* '' */
i.basic.icon.date:before { content: '📅'; } /* '\1f4c5' */

/*******************************
             States
*******************************/

i.basic.icon.hover {
  opacity: 1;
}

i.basic.icon.active {
  opacity: 1;
}

i.emphasized.basic.icon {
  opacity: 1;
}

i.basic.icon.disabled {
  opacity: 0.3;
}

/*******************************
           Variations
*******************************/

/*-------------------
         Link
--------------------*/

i.link.basic.icon {
  cursor: pointer;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.link.basic.icon:hover {
  opacity: 1 !important;
}

/*-------------------
      Circular
--------------------*/

i.circular.basic.icon {
  -webkit-border-radius: 500px !important;
  -moz-border-radius: 500px !important;
  border-radius: 500px !important;

  padding: 0.5em 0em !important;

  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

  line-height: 1 !important;
  width: 2em !important;
  height: 2em !important;
}
i.circular.inverted.basic.icon {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Flipped
--------------------*/

i.vertically.flipped.basic.icon {
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
i.horizontally.flipped.basic.icon {
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

/*-------------------
        Rotated
--------------------*/

i.left.rotated.basic.icon {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
i.right.rotated.basic.icon {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/*-------------------
        Square
--------------------*/

i.square.basic.icon {
  width: 2em;
  height: 2em;
  padding: 0.5em 0.35em !important;

  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

  vertical-align: baseline;
}
i.square.basic.icon:before {
  vertical-align: middle;
}
i.square.inverted.basic.icon {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Inverted
--------------------*/

i.inverted.basic.icon {
  background-color: #222222;
  color: #FFFFFF;
}

/*-------------------
       Colors
--------------------*/

i.blue.basic.icon {
  color: #6ECFF5 !important;
}
i.black.basic.icon {
  color: #5C6166 !important;
}
i.green.basic.icon {
  color: #A1CF64 !important;
}
i.red.basic.icon {
  color: #D95C5C !important;
}
i.purple.basic.icon {
  color: #564F8A !important;
}
i.teal.basic.icon {
  color: #00B5AD !important;
}

/*-------------------
   Inverted Colors
--------------------*/

i.inverted.black.basic.icon {
  background-color: #5C6166 !important;
  color: #FFFFFF !important;
}
i.inverted.blue.basic.icon {
  background-color: #6ECFF5 !important;
  color: #FFFFFF !important;
}
i.inverted.green.basic.icon {
  background-color: #A1CF64 !important;
  color: #FFFFFF !important;
}
i.inverted.red.basic.icon {
  background-color: #D95C5C !important;
  color: #FFFFFF !important;
}
i.inverted.purple.basic.icon {
  background-color: #564F8A !important;
  color: #FFFFFF !important;
}
i.inverted.teal.basic.icon {
  background-color: #00B5AD !important;
  color: #FFFFFF !important;
}

/*-------------------
        Sizes
--------------------*/

i.small.basic.icon {
  font-size: 0.875em;
}
i.basic.icon {
  font-size: 1em;
}
i.large.basic.icon {
  font-size: 1.5em;
  margin-right: 0.3em;
  vertical-align: middle;
  line-height: 0.75;
}

i.big.basic.icon {
  font-size: 2em;
  margin-right: 0.5em;
  vertical-align: middle;
  line-height: 0.5;
}

i.huge.basic.icon {
  font-size: 4em;
  margin-right: 0.75em;
  vertical-align: middle;
  line-height: 0.25;
}
i.massive.basic.icon {
  font-size: 8em;
  margin-right: 1em;
  vertical-align: middle;
  line-height: 0.125;
}


Update navigationBar design per spec. Resolves GH-930

#navigationBar, .navigationBar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;

    width: 100%;
    height: @header-height;

    display: flex;
    align-items: center;

    & > div {
        flex: 1;
    }
    & > div:nth-child(3) {
        text-align: right;
    }

    // Flex property not needed in h1
    h1 {
        color: @white;
        text-align: center;
        font-size: 1.1em;
        font-weight: 400;
    }

    a {
        cursor: pointer;
    }

    .save-btn {
        @_btnSize: 30px;
        @_vSpace: (@header-height - @_btnSize)/2 - 1;
        position: absolute;
        right: @_vSpace;
        top: @_vSpace;
        height: @_btnSize;
        line-height: @_btnSize;
        padding: 0 10px 0 8px;
        background: @turquoise;
        color: @white;
        font-size: 13px;
        border: none;
        transition: background-color 0.3s ease-in-out;
        .fa {
            margin-right: 3px;
        }
        &.disabled {
            color: #CCC;
            background: @white;
        }
    }

    .nav-btn {
        // position: absolute;
        // top: 0;
        // min-width: 40px;

        background: none;
        color: @white;
        border: none;
        outline: none;
        padding: 20px;
        line-height: (@header-height - 10s);
        text-decoration: none;
        font-size: 13px;
        &.nav-btn-icon {
            font-size: inherit;
            padding-top: 0;
        }
        &:first-child {
            left: 0;
        }
        &:last-child {
            right: 0;
        }
        &.back {
            line-height: @header-height;
            font-size: 1.4em;
        }
    }

    &.nav-default {
        background-color: @highlight;

        h1:extend(.navigationBar h1) {
            color: @white;
        }

        .nav-btn:extend(.navigationBar .nav-btn) {
            color: @white;
        }
    }

    &.nav-alt {
        h1:extend(.navigationBar h1) {
            color: @highlight;
        }
        .nav-btn:extend(.navigationBar .nav-btn) {
            color: @highlight;
        }
    }
}

#navigationBar,
.navigationBar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;

    width: 100%;
    height: @header-height;

    display: flex;
    align-items: center;

    & > div {
        flex: 1;
    }
    & > div:nth-child(3) {
        text-align: right;
    }

    // Flex property not needed in h1
    h1 {
        color: @highlight;
        text-align: center;
        font-size: 1.1em;
        font-weight: 400;
    }

    a {
        cursor: pointer;
    }

    .save-btn {
        @_btnSize: 30px;
        @_vSpace: (@header-height - @_btnSize)/2 - 1;
        position: absolute;
        right: @_vSpace;
        top: @_vSpace;
        height: @_btnSize;
        line-height: @_btnSize;
        padding: 0 10px 0 8px;
        background: @turquoise;
        color: @white;
        font-size: 13px;
        border: none;
        transition: background-color 0.3s ease-in-out;
        .fa {
            margin-right: 3px;
        }
        &.disabled {
            color: #CCC;
            background: @white;
        }
    }

    .nav-btn {
        // position: absolute;
        // top: 0;
        // min-width: 40px;

        background: none;
        color: @highlight;
        border: none;
        outline: none;
        padding: 20px;
        line-height: (@header-height - 10s);
        text-decoration: none;
        font-size: 13px;
        &.nav-btn-icon {
            font-size: inherit;
            padding-top: 0;
        }
        &:first-child {
            left: 0;
        }
        &:last-child {
            right: 0;
        }
        &.back {
            line-height: @header-height;
            font-size: 1.4em;
        }
    }

    &.nav-default {
        border-bottom: 1px solid @lightGrey;
        background-color: @white;

        h1:extend(.navigationBar h1) {
            color: @highlight;
        }

        .nav-btn:extend(.navigationBar .nav-btn) {
            color: @highlight;
        }
    }

    &.nav-alt {
        h1:extend(.navigationBar h1) {
            color: @white;
        }
        .nav-btn:extend(.navigationBar .nav-btn) {
            color: @white;
        }
    }
}