[BUGFIX] Ensure that em is used instead of rem in bs3 card layouts

//
// Base styles
//
@card-spacer-y:                     .75em;
@card-spacer-x:                     1.5em;
@card-border-width:                 1px;
@card-border-radius:                @border-radius-base;
@card-border-color:                 rgba(0, 0, 0, .125);
@card-inner-border-radius:          max(0, @card-border-radius - @card-border-width);
@card-cap-bg:                       rgba(0, 0, 0, .03);
@card-bg:                           #ffffff;
@card-img-overlay-padding:          1.25em;
@card-group-margin:                 (@grid-gutter-width / 2);
@card-deck-margin:                  @card-group-margin;
@card-columns-count:                3;
@card-columns-gap:                  1.25em;
@card-columns-margin:               @card-spacer-y;

// Component
.card {
    color: inherit;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: @card-bg;
    background-clip: border-box;
    border: @card-border-width solid @card-border-color;
    border-radius: @card-border-radius;
    > hr {
        margin-right: 0;
        margin-left: 0;
    }
    > .list-group:first-child {
        .list-group-item:first-child {
            .border-top-radius(@card-border-radius);
        }
    }
    > .list-group:last-child {
        .list-group-item:last-child {
            .border-bottom-radius(@card-border-radius);
        }
    }
}
.card-body {
    // Enable `flex-grow: 1` for decks and groups so that card blocks take up
    // as much space as possible, ensuring footers are aligned to the bottom.
    flex: 1 1 auto;
    padding: @card-spacer-x;
}
.card-title {
    margin-bottom: @card-spacer-y;
}
.card-subtitle {
    margin-top: -(@card-spacer-y / 2);
    margin-bottom: 0;
}
.card-text:last-child {
    margin-bottom: 0;
}
.card-link {
    &:hover {
      text-decoration: none;
    }
    + .card-link {
      margin-left: @card-spacer-x;
    }
}

//
// Optional textual caps
//
.card-header {
    padding: @card-spacer-y @card-spacer-x;
    margin-bottom: 0; // Removes the default margin-bottom of <hN>
    background-color: @card-cap-bg;
    border-bottom: @card-border-width solid @card-border-color;
    &:first-child {
        border-radius: @card-inner-border-radius @card-inner-border-radius 0 0;
    }
    + .list-group {
        .list-group-item:first-child {
            border-top: 0;
        }
    }
}
.card-footer {
    padding: @card-spacer-y @card-spacer-x;
    background-color: @card-cap-bg;
    border-top: @card-border-width solid @card-border-color;
    &:last-child {
        border-radius: 0 0 @card-inner-border-radius @card-inner-border-radius;
    }
}

//
// Header navs
//
.card-header-tabs {
    margin-right: -(@card-spacer-x / 2);
    margin-bottom: -@card-spacer-y;
    margin-left: -(@card-spacer-x / 2);
    border-bottom: 0;
}
.card-header-pills {
    margin-right: -(@card-spacer-x / 2);
    margin-left: -(@card-spacer-x / 2);
}

// Card image
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: @card-img-overlay-padding;
}
.card-img {
    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    border-radius: @card-inner-border-radius;
}
// Card image caps
.card-img-top {
    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    .border-top-radius(@card-inner-border-radius);
}
.card-img-bottom {
    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    .border-bottom-radius(@card-inner-border-radius);
}

// Card deck
.card-deck {
    display: flex;
    flex-direction: column;
    .card {
        margin-bottom: @card-deck-margin;
    }
    @media (min-width: @screen-sm) {
        flex-flow: row wrap;
        margin-right: -@card-deck-margin;
        margin-left: -@card-deck-margin;
        .card {
            display: flex;
            // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
            flex: 1 0 0%;
            flex-direction: column;
            margin-right: @card-deck-margin;
            margin-bottom: 0; // Override the default
            margin-left: @card-deck-margin;
        }
    }
}

//
// Card groups
//
.card-group {
    display: flex;
    flex-direction: column;
    // The child selector allows nested `.card` within `.card-group`
    // to display properly.
    > .card {
        margin-bottom: @card-group-margin;
    }

    @media (min-width: @screen-sm) {
        flex-flow: row wrap;
        // The child selector allows nested `.card` within `.card-group`
        // to display properly.
        > .card {
            // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
            flex: 1 0 0%;
            margin-bottom: 0;
            + .card {
            margin-left: 0;
            border-left: 0;
            }
        }
    }
}

//
// Columns
//
.card-columns {
    .card {
        margin-bottom: @card-columns-margin;
    }
    @media (min-width: @screen-sm) {
        column-count: @card-columns-count;
        column-gap: @card-columns-gap;
        .card {
            display: inline-block; // Don't let them vertically span multiple columns
            width: 100%; // Don't let their width change
        }
    }
}

//
// Card Deck Menu
//
.card-deck-menu {
    .card {
        margin-bottom: @card-deck-margin * 2;
        @media (min-width: @screen-sm) {
            flex-grow: 0;
            min-width: calc(~"50% - @{card-deck-margin} * 2");
        }
        @media (min-width: @screen-md) {
            min-width: calc(~"33.33% - @{card-deck-margin} * 2");
        }
    }
    .card-img {
        height: auto;
    }
    .card-subtitle {
        margin-bottom: @card-spacer-y;
    }
    .card-link {
        color: @link-color;
    }
}

//
// Card Panel
//
.card-panel {
    .card-header {
        font-size: 1.125em !important;
    }
    .card-body {
        > *:last-child {
            margin-bottom: 0;
        }
    }
}

//
// Variants
//
.card-panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
    border-color: @border;
    & > .card-header {
        color: @heading-text-color;
        background-color: @heading-bg-color;
        border-color: @heading-border;
    }
}
.card-panel-default {
    .card-panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.card-panel-primary {
    .card-panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.card-panel-success {
    .card-panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.card-panel-info {
    .card-panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
.card-panel-warning {
    .card-panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.card-panel-danger {
    .card-panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}

//
// Base styles
//
@card-spacer-y:                     .75rem;
@card-spacer-x:                     1.5rem;
@card-border-width:                 1px;
@card-border-radius:                @border-radius-base;
@card-border-color:                 rgba(0, 0, 0, .125);
@card-inner-border-radius:          max(0, @card-border-radius - @card-border-width);
@card-cap-bg:                       rgba(0, 0, 0, .03);
@card-bg:                           #ffffff;
@card-img-overlay-padding:          1.25rem;
@card-group-margin:                 (@grid-gutter-width / 2);
@card-deck-margin:                  @card-group-margin;
@card-columns-count:                3;
@card-columns-gap:                  1.25rem;
@card-columns-margin:               @card-spacer-y;

// Component
.card {
    color: inherit;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: @card-bg;
    background-clip: border-box;
    border: @card-border-width solid @card-border-color;
    border-radius: @card-border-radius;
    > hr {
        margin-right: 0;
        margin-left: 0;
    }
    > .list-group:first-child {
        .list-group-item:first-child {
            .border-top-radius(@card-border-radius);
        }
    }
    > .list-group:last-child {
        .list-group-item:last-child {
            .border-bottom-radius(@card-border-radius);
        }
    }
}
.card-body {
    // Enable `flex-grow: 1` for decks and groups so that card blocks take up
    // as much space as possible, ensuring footers are aligned to the bottom.
    flex: 1 1 auto;
    padding: @card-spacer-x;
}
.card-title {
    margin-bottom: @card-spacer-y;
}
.card-subtitle {
    margin-top: -(@card-spacer-y / 2);
    margin-bottom: 0;
}
.card-text:last-child {
    margin-bottom: 0;
}
.card-link {
    &:hover {
      text-decoration: none;
    }
    + .card-link {
      margin-left: @card-spacer-x;
    }
}

//
// Optional textual caps
//
.card-header {
    padding: @card-spacer-y @card-spacer-x;
    margin-bottom: 0; // Removes the default margin-bottom of <hN>
    background-color: @card-cap-bg;
    border-bottom: @card-border-width solid @card-border-color;
    &:first-child {
        border-radius: @card-inner-border-radius @card-inner-border-radius 0 0;
    }
    + .list-group {
        .list-group-item:first-child {
            border-top: 0;
        }
    }
}
.card-footer {
    padding: @card-spacer-y @card-spacer-x;
    background-color: @card-cap-bg;
    border-top: @card-border-width solid @card-border-color;
    &:last-child {
        border-radius: 0 0 @card-inner-border-radius @card-inner-border-radius;
    }
}

//
// Header navs
//
.card-header-tabs {
    margin-right: -(@card-spacer-x / 2);
    margin-bottom: -@card-spacer-y;
    margin-left: -(@card-spacer-x / 2);
    border-bottom: 0;
}
.card-header-pills {
    margin-right: -(@card-spacer-x / 2);
    margin-left: -(@card-spacer-x / 2);
}

// Card image
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: @card-img-overlay-padding;
}
.card-img {
    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    border-radius: @card-inner-border-radius;
}
// Card image caps
.card-img-top {
    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    .border-top-radius(@card-inner-border-radius);
}
.card-img-bottom {
    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    .border-bottom-radius(@card-inner-border-radius);
}

// Card deck
.card-deck {
    display: flex;
    flex-direction: column;
    .card {
        margin-bottom: @card-deck-margin;
    }
    @media (min-width: @screen-sm) {
        flex-flow: row wrap;
        margin-right: -@card-deck-margin;
        margin-left: -@card-deck-margin;
        .card {
            display: flex;
            // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
            flex: 1 0 0%;
            flex-direction: column;
            margin-right: @card-deck-margin;
            margin-bottom: 0; // Override the default
            margin-left: @card-deck-margin;
        }
    }
}

//
// Card groups
//
.card-group {
    display: flex;
    flex-direction: column;
    // The child selector allows nested `.card` within `.card-group`
    // to display properly.
    > .card {
        margin-bottom: @card-group-margin;
    }

    @media (min-width: @screen-sm) {
        flex-flow: row wrap;
        // The child selector allows nested `.card` within `.card-group`
        // to display properly.
        > .card {
            // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
            flex: 1 0 0%;
            margin-bottom: 0;
            + .card {
            margin-left: 0;
            border-left: 0;
            }
        }
    }
}

//
// Columns
//
.card-columns {
    .card {
        margin-bottom: @card-columns-margin;
    }
    @media (min-width: @screen-sm) {
        column-count: @card-columns-count;
        column-gap: @card-columns-gap;
        .card {
            display: inline-block; // Don't let them vertically span multiple columns
            width: 100%; // Don't let their width change
        }
    }
}

//
// Card Deck Menu
//
.card-deck-menu {
    .card {
        margin-bottom: @card-deck-margin * 2;
        @media (min-width: @screen-sm) {
            flex-grow: 0;
            min-width: calc(~"50% - @{card-deck-margin} * 2");
        }
        @media (min-width: @screen-md) {
            min-width: calc(~"33.33% - @{card-deck-margin} * 2");
        }
    }
    .card-img {
        height: auto;
    }
    .card-subtitle {
        margin-bottom: @card-spacer-y;
    }
    .card-link {
        color: @link-color;
    }
}

//
// Card Panel
//
.card-panel {
    .card-header {
        font-size: 1.125rem !important;
    }
    .card-body {
        > *:last-child {
            margin-bottom: 0;
        }
    }
}

//
// Variants
//
.card-panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
    border-color: @border;
    & > .card-header {
        color: @heading-text-color;
        background-color: @heading-bg-color;
        border-color: @heading-border;
    }
}
.card-panel-default {
    .card-panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.card-panel-primary {
    .card-panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.card-panel-success {
    .card-panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.card-panel-info {
    .card-panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
.card-panel-warning {
    .card-panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.card-panel-danger {
    .card-panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}


Removing glyphs

Removing glyphs

fatal: unable to access 'https://github.com/Puzzlepart/ASPC-2016.git/': The requested URL returned error: 403


Adding shortcode and [FIGURE]

Adding shortcode and [FIGURE]

/** --------------------------------------------------------------
 * Figure
 */
figure {
  margin-bottom: @magicNumber;

  /*a {
    .clearfix();
  }*/

  img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }

  figcaption {
    font-style: italic;
    padding-top: 1em;
  }

  figcaption p {
    margin-bottom: 0;
  }
}

/** --------------------------------------------------------------
 * New style to manage sizes
 */
figure.figure {
  display: table;
  padding: 0;
  //font-size: 0.875em;

  a { }

  img { }

  figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0;
  }
}

/** --------------------------------------------------------------
 * Position figure on the article
 */
figure.left {
  float: left;
  margin-right: 1em;
  font-size: 0.875em;
}

figure.right {
  float: right;
  margin-left: 1em;
  font-size: 0.875em;
}

figure.center {
  clear: both;

  img {
    margin: 0 auto;
  }

  figcaption {
    text-align: center;
  }
}

error: pathspec 'themes/base/style/figure.less' did not match any file(s) known to git


Update static/vendors/font-awesome/less/core.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

fatal: unable to access 'https://github.com/apipanda/openssl.git/': The requested URL returned error: 403


reduced navigation bar height of one pixel

fatal: unable to access 'https://github.com/dedalozzo/pit-bootstrap.git/': The requested URL returned error: 403


Remove stray character in less file

Remove stray character in less file

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/ade25/generator-diazotheme.git/'


Hides input text or select tag before the init of select2

//
// Forms Select2
// --------------------------------------------------

// Font awesome
// -------------------------

.select2-container .select2-choice abbr,
.select2-container .select2-arrow b,
.select2-search-choice-close {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Container
// -------------------------

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;

    .select2-choice {
        display: block;
        height: @select2-height-base;
        padding: 0 0 0 8px;
        overflow: hidden;
        position: relative;

        border: 1px solid @input-border;
        white-space: nowrap;
        line-height: @select2-height-base;
        color: @input-color;
        text-decoration: none;
        background-color: @input-bg;
        background-clip: padding-box;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;

        &.select2-drop-above .select2-choice {
            .border-top-radius(0);
            .border-bottom-radius(@input-border-radius);
        }

        > .select2-chosen {
            margin-right: @select2-height-base + 2;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        abbr {
            display: none;
            width: 12px;
            height: 12px;
            position: absolute;
            right: @select2-height-base + 5;
            top: 0px;

            color: @select2-choice-close-color;
            text-decoration: none;
            line-height: @select2-height-base + 2;

            border: 0;
            cursor: pointer;
            outline: 0;

            &:before {
                content: @select2-choice-close-icon;
            }

            &:hover {
                color: @select2-choice-close-hover-color;
                cursor: pointer;
            }
        }

        .select2-arrow {
            display: inline-block;
            width: @select2-height-base + 2;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-clip: padding-box;
            background: @select2-arrow-bg;
            border-left: 1px solid @select2-arrow-border-color;
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);

            b {
                display: block;
                width: 100%;
                height: 100%;
                line-height: @select2-height-base + 2;
                text-align: center;
                color: @select2-arrow-color;

                &:before {
                    content: @select2-arrow-icon;
                }
            }
        }
    }

    &.select2-allowclear .select2-choice {
        abbr {
            display: inline-block;
        }

        .select2-chosen {
            margin-right: 42px;
        }
    }
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 9998;
    /* styles required for IE to work */
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: 9999;
    top: 100%;

    background: @input-bg;
    color: @input-color;
    border: 1px solid @input-border;
    border-top: 0;

    .border-top-radius(0);
    .border-bottom-radius(@input-border-radius);

    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);

    &.select2-drop-above {
        margin-top: 1px;
        border-top: 1px solid @input-bg;
        border-bottom: 0;

        .border-top-radius(@input-border-radius);
        .border-bottom-radius(0);

        -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);
                box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);

        &.select2-drop-active {
            border-top: 1px solid @input-border-focus;
        }

        .select2-search input {
            margin-top: 4px;
        }
    }
}

.select2-drop-active {
    border: 1px solid @input-border-focus;
    border-top: none;
}

.select2-drop-auto-width {
    border-top: 1px solid @input-bg;
    width: auto;

    .select2-search {
        padding-top: 4px;
    }
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding: 4px;

    position: relative;
    z-index: 10000;

    white-space: nowrap;

    &:after {
        content: @select2-search-icon;
        position: absolute;
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: @select2-height-base + 2;
        margin-left: round((-@select2-height-base - 2) / 2) - 2;
        color: @select2-search-color;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    input {
        width: 100%;
        height: auto !important;
        min-height: @select2-height-base + 2;
        padding: 4px 20px 4px 5px;
        margin: 0;

        outline: 0;
        font-size: 1em;

        border: 1px solid @input-border;
        .border-top-radius(0);
        .border-bottom-radius(0);

        -webkit-box-shadow: none;
                box-shadow: none;

        &.select2-active {
            color: @select2-active-color;
            background-color: @select2-active-bg;
        }
    }
}

.select2-container-active {
    .select2-choice,
    .select2-choices {
        border: 1px solid @input-border-focus;
        outline: none;
    }
}

.select2-dropdown-open {
    .select2-choice {
        border-bottom-color: transparent;
        -webkit-box-shadow: 0 1px 0 @select2-arrow-bg inset;
                box-shadow: 0 1px 0 @select2-arrow-bg inset;

        .border-bottom-radius(0);

        background-color: @select2-open-bg;

        abbr {
            color: @select2-open-choice-close-color;
        }

        .select2-arrow {
            background: transparent;
            border-left: none;
            filter: none;

            b {
                color: @select2-open-arrow-color;

                &:before {
                    content: @select2-open-arrow-icon;
                }
            }
        }
    }

    &.select2-drop-above {
        .select2-choice,
        .select2-choices {
            border-top-color: transparent;
        }
    }
}

.select2-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Results
// -------------------------

.select2-results {
    max-height: 200px;
    padding: 4px;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    ul.select2-result-sub {
        margin: 0;
        padding-left: 0;

        > li .select2-result-label {
            padding-left: 20px;
        }

        ul.select2-result-sub {
            > li .select2-result-label {
                padding-left: 40px;
            }

            ul.select2-result-sub {
                > li .select2-result-label {
                    padding-left: 60px;
                }

                ul.select2-result-sub {
                    > li .select2-result-label {
                        padding-left: 80px;
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 100px;
                        }
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 110px;
                        }

                        ul.select2-result-sub {
                            > li .select2-result-label {
                                padding-left: 120px;
                            }
                        }
                    }
                }
            }
        }
    }

    li {
        list-style: none;
        display: list-item;
        background-image: none;

        &.select2-result-with-children > .select2-result-label {
            font-weight: bold;
        }

        em {
            background: @select2-results-em;
            font-style: normal;
        }
    }

    .select2-result-label {
        padding: 3px 7px 4px;
        margin: 0;
        cursor: pointer;

        min-height: 1em;

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
    }

    .select2-highlighted {
        background: @select2-highlighted-bg;
        color: @select2-highlighted-color;

        em {
            background: transparent;
        }

        ul {
            background: @input-bg;
            color: @input-color;
        }
    }

    .select2-no-results,
    .select2-searching,
    .select2-selection-limit {
        background: @select2-results-info;
        display: list-item;
        padding-left: 5px;
    }

    // disabled look for disabled choices in the results dropdown
    .select2-disabled {
        background: @input-bg-disabled;
        display: list-item;
        cursor: default;

        .select2-highlighted {
            color: @input-color;
            background: @input-bg-disabled;
            display: list-item;
            cursor: default;
        }
    }

    .select2-selected {
        display: none;
    }
}

.select2-more-results {
    background: @select2-more-results-bg;
    display: list-item;

    .select2-active {
        color: @select2-active-color;
        background-color: @select2-active-bg;
    }
}

// Disabled styles
// -------------------------

.select2-container.select2-container-disabled {
    .select2-choice {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-arrow {
            background-color: @input-bg-disabled;
            background-image: none;
            border-left: 0;
        }

        abbr {
            display: none;
        }
    }
}

// Multiselect
// -------------------------

.select2-container-multi {
    .select2-choices {
        height: auto !important;
        height: 1%;
        min-height: @select2-height-base + 2;
        margin: 0;
        padding: 0;
        position: relative;

        border: 1px solid @input-bg;
        cursor: text;
        overflow: hidden;

        background-color: @input-bg;

        li {
            float: left;
            list-style: none;
        }

        .select2-search-field {
            margin: 0;
            padding: 0;
            white-space: nowrap;

            input {
                padding: 5px;
                margin: 1px 0;

                color: @input-color;
                outline: 0;
                border: 0;
                -webkit-box-shadow: none;
                        box-shadow: none;
                background: transparent !important;

                &.select2-active {
                    color: @select2-active-color;
                    background-color: @select2-active-bg;
                }
            }
        }

        .select2-search-choice {
            padding: 3px 5px 3px 18px;
            margin: 3px 0 3px 5px;
            position: relative;

            line-height: round((@select2-height-base + 2) / 2) + 2;
            color: @input-color;
            cursor: default;
            border: 1px solid @input-border;

            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);

            -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
                    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

            background-clip: padding-box;

            -webkit-touch-callout: none;
              -webkit-user-select: none;
                 -moz-user-select: none;
                  -ms-user-select: none;
                      user-select: none;

            background-color: @input-bg;

            .select2-search-choice-close {
                color: @select2-choice-close-color;

                &:before {
                    content: @select2-choice-close-icon;
                }

                &:hover {
                    color: @select2-choice-close-hover-color;
                }
            }
        }

        .select2-search-choice-focus {
            border-color: @input-border-focus;

            .select2-search-choice-close {
                color: @select2-choice-close-hover-color;
            }
        }
    }

    &.select2-container-active {
        .select2-choices {
            border: 1px solid @input-border-focus;
            outline: none;
        }
    }

    .select2-search-choice-close {
        left: 3px;
    }

    // disabled styles
    &.select2-container-disabled .select2-choices {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-search-choice {
            padding: 3px 5px 3px 5px;
            background-image: none;
            background-color: @input-bg-disabled;

            .select2-search-choice-close {
                display: none;
                background: none;
            }
        }
    }
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-search-choice-close {
    display: block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    position: absolute;
    right: 3px;
    top: 6px;

    outline: none;
}

.select2-default {
    color: @input-color !important;
}

html[dir="rtl"] {
    .select2-container-multi {
        .select2-choices {
            li {
                float: right;
            }

            .select2-search-choice {
                margin-left: 0;
                margin-right: 5px;

                .select2-chosen {
                    cursor: default;
                }
            }
        }
    }

    .select2-search-choice-close {
        right: auto;
        left: 3px;
    }
}

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

.select2-offscreen, .select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}

.select2-display-none {
    display: none;
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

.select2-wrapper {
    > input[type=text],
    > div > input[type=text],
    > select,
    > div > select {
        opacity: 0;
    }

    > select[multiple],
    > div > select[multiple] {
        height: @select2-height-base + 2;
    }
}

// Bootstrap
// -------------------------

.form-control {
    &.select2-container {
        height: auto !important;
        padding: 0px;

        &.select2-container-active {
            border-color: @input-border-focus;
        }

        &.select2-dropdown-open {
            border-color: @input-border-focus;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(0);

            .select2-choices {
                .border-top-radius(@input-border-radius);
                .border-bottom-radius(0);
            }
        }

        .select2-choices {
            border: 0 !important;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);
        }
    }

    .select2-choice {
        border: 0;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        .select2-arrow {
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);
        }
    }
}

.control-group.success {
    .select2-container.select2-container-active {
        border-color: @brand-success;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-success, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-success, 10%) !important;
        background: @state-success-bg !important;
    }
}

.control-group.info {
    .select2-container.select2-container-active {
        border-color: @brand-info;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-info, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-info, 10%) !important;
        background: @state-info-bg !important;
    }
}

.control-group.warning {
    .select2-container.select2-container-active {
        border-color: @brand-warning;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-warning, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-warning, 10%) !important;
        background: @state-warning-bg !important;
    }
}

.control-group.error {
    .select2-container.select2-container-active {
        border-color: @brand-danger;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-danger, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-danger, 10%) !important;
        background: @state-danger-bg !important;
    }
}

//
// Forms Select2
// --------------------------------------------------

// Font awesome
// -------------------------

.select2-container .select2-choice abbr,
.select2-container .select2-arrow b,
.select2-search-choice-close {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Container
// -------------------------

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;

    .select2-choice {
        display: block;
        height: @select2-height-base;
        padding: 0 0 0 8px;
        overflow: hidden;
        position: relative;

        border: 1px solid @input-border;
        white-space: nowrap;
        line-height: @select2-height-base;
        color: @input-color;
        text-decoration: none;
        background-color: @input-bg;
        background-clip: padding-box;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;

        &.select2-drop-above .select2-choice {
            .border-top-radius(0);
            .border-bottom-radius(@input-border-radius);
        }

        > .select2-chosen {
            margin-right: @select2-height-base + 2;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        abbr {
            display: none;
            width: 12px;
            height: 12px;
            position: absolute;
            right: @select2-height-base + 5;
            top: 0px;

            color: @select2-choice-close-color;
            text-decoration: none;
            line-height: @select2-height-base + 2;

            border: 0;
            cursor: pointer;
            outline: 0;

            &:before {
                content: @select2-choice-close-icon;
            }

            &:hover {
                color: @select2-choice-close-hover-color;
                cursor: pointer;
            }
        }

        .select2-arrow {
            display: inline-block;
            width: @select2-height-base + 2;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-clip: padding-box;
            background: @select2-arrow-bg;
            border-left: 1px solid @select2-arrow-border-color;
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);

            b {
                display: block;
                width: 100%;
                height: 100%;
                line-height: @select2-height-base + 2;
                text-align: center;
                color: @select2-arrow-color;

                &:before {
                    content: @select2-arrow-icon;
                }
            }
        }
    }

    &.select2-allowclear .select2-choice {
        abbr {
            display: inline-block;
        }

        .select2-chosen {
            margin-right: 42px;
        }
    }
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 9998;
    /* styles required for IE to work */
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: 9999;
    top: 100%;

    background: @input-bg;
    color: @input-color;
    border: 1px solid @input-border;
    border-top: 0;

    .border-top-radius(0);
    .border-bottom-radius(@input-border-radius);

    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);
            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.14);

    &.select2-drop-above {
        margin-top: 1px;
        border-top: 1px solid @input-bg;
        border-bottom: 0;

        .border-top-radius(@input-border-radius);
        .border-bottom-radius(0);

        -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);
                box-shadow: 0 -1px 3px rgba(0, 0, 0, .14);

        &.select2-drop-active {
            border-top: 1px solid @input-border-focus;
        }

        .select2-search input {
            margin-top: 4px;
        }
    }
}

.select2-drop-active {
    border: 1px solid @input-border-focus;
    border-top: none;
}

.select2-drop-auto-width {
    border-top: 1px solid @input-bg;
    width: auto;

    .select2-search {
        padding-top: 4px;
    }
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding: 4px;

    position: relative;
    z-index: 10000;

    white-space: nowrap;

    &:after {
        content: @select2-search-icon;
        position: absolute;
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: @select2-height-base + 2;
        margin-left: round((-@select2-height-base - 2) / 2) - 2;
        color: @select2-search-color;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    input {
        width: 100%;
        height: auto !important;
        min-height: @select2-height-base + 2;
        padding: 4px 20px 4px 5px;
        margin: 0;

        outline: 0;
        font-size: 1em;

        border: 1px solid @input-border;
        .border-top-radius(0);
        .border-bottom-radius(0);

        -webkit-box-shadow: none;
                box-shadow: none;

        &.select2-active {
            color: @select2-active-color;
            background-color: @select2-active-bg;
        }
    }
}

.select2-container-active {
    .select2-choice,
    .select2-choices {
        border: 1px solid @input-border-focus;
        outline: none;
    }
}

.select2-dropdown-open {
    .select2-choice {
        border-bottom-color: transparent;
        -webkit-box-shadow: 0 1px 0 @select2-arrow-bg inset;
                box-shadow: 0 1px 0 @select2-arrow-bg inset;

        .border-bottom-radius(0);

        background-color: @select2-open-bg;

        abbr {
            color: @select2-open-choice-close-color;
        }

        .select2-arrow {
            background: transparent;
            border-left: none;
            filter: none;

            b {
                color: @select2-open-arrow-color;

                &:before {
                    content: @select2-open-arrow-icon;
                }
            }
        }
    }

    &.select2-drop-above {
        .select2-choice,
        .select2-choices {
            border-top-color: transparent;
        }
    }
}

.select2-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Results
// -------------------------

.select2-results {
    max-height: 200px;
    padding: 4px;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    ul.select2-result-sub {
        margin: 0;
        padding-left: 0;

        > li .select2-result-label {
            padding-left: 20px;
        }

        ul.select2-result-sub {
            > li .select2-result-label {
                padding-left: 40px;
            }

            ul.select2-result-sub {
                > li .select2-result-label {
                    padding-left: 60px;
                }

                ul.select2-result-sub {
                    > li .select2-result-label {
                        padding-left: 80px;
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 100px;
                        }
                    }

                    ul.select2-result-sub {
                        > li .select2-result-label {
                            padding-left: 110px;
                        }

                        ul.select2-result-sub {
                            > li .select2-result-label {
                                padding-left: 120px;
                            }
                        }
                    }
                }
            }
        }
    }

    li {
        list-style: none;
        display: list-item;
        background-image: none;

        &.select2-result-with-children > .select2-result-label {
            font-weight: bold;
        }

        em {
            background: @select2-results-em;
            font-style: normal;
        }
    }

    .select2-result-label {
        padding: 3px 7px 4px;
        margin: 0;
        cursor: pointer;

        min-height: 1em;

        -webkit-touch-callout: none;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
    }

    .select2-highlighted {
        background: @select2-highlighted-bg;
        color: @select2-highlighted-color;

        em {
            background: transparent;
        }

        ul {
            background: @input-bg;
            color: @input-color;
        }
    }

    .select2-no-results,
    .select2-searching,
    .select2-selection-limit {
        background: @select2-results-info;
        display: list-item;
        padding-left: 5px;
    }

    // disabled look for disabled choices in the results dropdown
    .select2-disabled {
        background: @input-bg-disabled;
        display: list-item;
        cursor: default;

        .select2-highlighted {
            color: @input-color;
            background: @input-bg-disabled;
            display: list-item;
            cursor: default;
        }
    }

    .select2-selected {
        display: none;
    }
}

.select2-more-results {
    background: @select2-more-results-bg;
    display: list-item;

    .select2-active {
        color: @select2-active-color;
        background-color: @select2-active-bg;
    }
}

// Disabled styles
// -------------------------

.select2-container.select2-container-disabled {
    .select2-choice {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-arrow {
            background-color: @input-bg-disabled;
            background-image: none;
            border-left: 0;
        }

        abbr {
            display: none;
        }
    }
}

// Multiselect
// -------------------------

.select2-container-multi {
    .select2-choices {
        height: auto !important;
        height: 1%;
        min-height: @select2-height-base + 2;
        margin: 0;
        padding: 0;
        position: relative;

        border: 1px solid @input-bg;
        cursor: text;
        overflow: hidden;

        background-color: @input-bg;

        li {
            float: left;
            list-style: none;
        }

        .select2-search-field {
            margin: 0;
            padding: 0;
            white-space: nowrap;

            input {
                padding: 5px;
                margin: 1px 0;

                color: @input-color;
                outline: 0;
                border: 0;
                -webkit-box-shadow: none;
                        box-shadow: none;
                background: transparent !important;

                &.select2-active {
                    color: @select2-active-color;
                    background-color: @select2-active-bg;
                }
            }
        }

        .select2-search-choice {
            padding: 3px 5px 3px 18px;
            margin: 3px 0 3px 5px;
            position: relative;

            line-height: round((@select2-height-base + 2) / 2) + 2;
            color: @input-color;
            cursor: default;
            border: 1px solid @input-border;

            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);

            -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
                    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

            background-clip: padding-box;

            -webkit-touch-callout: none;
              -webkit-user-select: none;
                 -moz-user-select: none;
                  -ms-user-select: none;
                      user-select: none;

            background-color: @input-bg;

            .select2-search-choice-close {
                color: @select2-choice-close-color;

                &:before {
                    content: @select2-choice-close-icon;
                }

                &:hover {
                    color: @select2-choice-close-hover-color;
                }
            }
        }

        .select2-search-choice-focus {
            border-color: @input-border-focus;

            .select2-search-choice-close {
                color: @select2-choice-close-hover-color;
            }
        }
    }

    &.select2-container-active {
        .select2-choices {
            border: 1px solid @input-border-focus;
            outline: none;
        }
    }

    .select2-search-choice-close {
        left: 3px;
    }

    // disabled styles
    &.select2-container-disabled .select2-choices {
        background-color: @input-bg-disabled;
        background-image: none;
        cursor: default;

        .select2-search-choice {
            padding: 3px 5px 3px 5px;
            background-image: none;
            background-color: @input-bg-disabled;

            .select2-search-choice-close {
                display: none;
                background: none;
            }
        }
    }
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-search-choice-close {
    display: block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    position: absolute;
    right: 3px;
    top: 6px;

    outline: none;
}

.select2-default {
    color: @input-color !important;
}

html[dir="rtl"] {
    .select2-container-multi {
        .select2-choices {
            li {
                float: right;
            }

            .select2-search-choice {
                margin-left: 0;
                margin-right: 5px;

                .select2-chosen {
                    cursor: default;
                }
            }
        }
    }

    .select2-search-choice-close {
        right: auto;
        left: 3px;
    }
}

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

.select2-offscreen, .select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}

.select2-display-none {
    display: none;
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

// Bootstrap
// -------------------------

.form-control {
    &.select2-container {
        height: auto !important;
        padding: 0px;

        &.select2-container-active {
            border-color: @input-border-focus;
        }

        &.select2-dropdown-open {
            border-color: @input-border-focus;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(0);

            .select2-choices {
                .border-top-radius(@input-border-radius);
                .border-bottom-radius(0);
            }
        }

        .select2-choices {
            border: 0 !important;
            .border-top-radius(@input-border-radius);
            .border-bottom-radius(@input-border-radius);
        }
    }

    .select2-choice {
        border: 0;
        .border-top-radius(@input-border-radius);
        .border-bottom-radius(@input-border-radius);

        .select2-arrow {
            .border-left-radius(0);
            .border-right-radius(@input-border-radius);
        }
    }
}

.control-group.success {
    .select2-container.select2-container-active {
        border-color: @brand-success;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-success, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-success, 10%) !important;
        background: @state-success-bg !important;
    }
}

.control-group.info {
    .select2-container.select2-container-active {
        border-color: @brand-info;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-info, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-info, 10%) !important;
        background: @state-info-bg !important;
    }
}

.control-group.warning {
    .select2-container.select2-container-active {
        border-color: @brand-warning;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-warning, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-warning, 10%) !important;
        background: @state-warning-bg !important;
    }
}

.control-group.error {
    .select2-container.select2-container-active {
        border-color: @brand-danger;
    }

    .select2-container .select2-choice,
    .select2-container .select2-choices,
    .select2-container-active .select2-choice,
    .select2-container-active .select2-choices,
    .select2-dropdown-open.select2-drop-above .select2-choice,
    .select2-dropdown-open.select2-drop-above .select2-choices,
    .select2-container-multi.select2-container-active .select2-choices {
        border: 1px solid darken(@brand-danger, 10%) !important;
    }

    .select2-container .select2-choice div {
        border-left: 1px solid darken(@brand-danger, 10%) !important;
        background: @state-danger-bg !important;
    }
}


Added selected/hover style to search results.

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.loading-shimmer-frames () {
  from {
    background-position-x: -100000px;
  }
  to {
    background-position-x: 100000px;
  }
}

@-webkit-keyframes loading_shimmer {.loading-shimmer-frames;}
@-moz-keyframes loading_shimmer {.loading-shimmer-frames;}
@-o-keyframes loading_shimmer {.loading-shimmer-frames;}
@keyframes loading_shimmer {.loading-shimmer-frames;}

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border-width: 0 0 1px 0;
  -moz-box-shadow: @site-box-shadow;
  -webkit-box-shadow: @site-box-shadow;
  box-shadow: @site-box-shadow;
  margin-left: -1000px;
  margin-right: -1000px;
  margin-top: -20px;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: @single-col-width) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: @single-col-width) {
    min-height: 100px;
    max-height: 400px;
    margin-bottom: 20px;

    #previews {
      max-height: 150px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5.5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;
          min-height: 34px;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }

          .faded-edge {
            @box-shadow: inset 8px 0 8px 0px @section-header-bg;
            -webkit-box-shadow: @box-shadow;
            -moz-box-shadow: @box-shadow;
            box-shadow: @box-shadow;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          input[type=text] {
            border: none;
            background: none;
            padding: 0;
            padding-right: 10px;
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            outline: none;
            font-family: inherit;
            font-weight: inherit;
            text-indent: 10px;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px @color-grey-border;
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);
              opacity: 0.1;
              z-index: 0;
            }

            &.failed {
              .foreground {
                .status {
                  color: darken(@red, 10%);
                }
              }

              .background {
                width: 100% !important;
                background-color: @red;
              }
            }

            &.added {
              .foreground {
                .status {
                  color: @green;
                }
              }

              .background {
                width: 100% !important;
                background-color: @green;
              }
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
              font-family: @font-family;

              .name {
                font-size: 13px;
                font-weight: 200;
              }

              .status, .error {
                font-size: 9px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.4px;
              }

              .status {
                height: 13px;

                .size {
                  padding-right: 3px;
                }

                .glyphicon {
                  position: absolute;
                  top: 0;
                  right: 0;
                  font-size: 11px;
                }

                .glyphicon-ok-sign {
                  color: @green;
                }

                .glyphicon-exclamation-sign {
                  color: darken(@red, 5%);
                }
              }

              .error {
                color: darken(@red, 10%);
                padding-top: 4px;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding * 2;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            height: 0;

            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        #search-results-list {
          background-color: @color-grey-background;
          margin: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }

        #search-results-list .section-results-placeholder {
          color: darken(@color-grey-background, 40%);
          margin: 5px;
          font-size: 13px;
        }

        #search-results-list .section-header {
          position: relative;
          min-height: 24px;
          background-color: darken(@color-grey-background, 3%);
          border: solid 1px lighten(@color-grey-border, 10%);
          border-bottom: solid 1px lighten(@color-grey-border, 9%);

          .loading-gradient, .content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
          }

          .loading-gradient {
            z-index: 99;

            @background: darken(@color-grey-background, 3%);
            @background-emphasis: lighten(@background, 10%);
            @background-emphasis-percent: 80%;

            @gradient-percent1: 50% - (@background-emphasis-percent / 2%);
            @gradient-percent2: 50%;
            @gradient-percent3: 50% + (@background-emphasis-percent / 2%);
            @gradient: left, @background @gradient-percent1, @background-emphasis @gradient-percent2, @background @gradient-percent3;
            background: -moz-linear-gradient(@gradient);
            background: -webkit-linear-gradient(@gradient);
            background: -o-linear-gradient(@gradient);
            background: -ms-linear-gradient(@gradient);
            background: linear-gradient(@gradient);
            background-size: 170%;

            @animation-def: loading_shimmer 500s linear 0s infinite;
            -webkit-animation: @animation-def;
            -moz-animation: @animation-def;
            -o-animation: @animation-def;
            animation: @animation-def;

            opacity: 0;
            -webkit-transition: opacity 1s;
            transition: opacity 1s;

            text-align: right;
            font-size: 11px;
            padding: 3px 10px;
            color: darken(@color-grey-background, 30%);
            letter-spacing: 0.4px;
            font-weight: 300;
          }

          .content {
            font-size: 12px;
            font-weight: 400;
            padding: 3px 5px;
            z-index: 100;
          }
        }

        #search-results-list.loading .section-header {
          .loading-gradient {
            opacity: 1;
          }
        }

        #queue-list li, #search-results-list li.song {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          &:hover {
            .fg .controls {
              opacity: 1;
            }
          }

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;
            white-space: nowrap;

            .faded-edge {
              @box-shadow: inset -30px 0 24px -15px @color-grey-background;
              -webkit-box-shadow: @box-shadow;
              -moz-box-shadow: @box-shadow;
              box-shadow: @box-shadow;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
            }

            .controls {
              @transition: opacity .06s ease-in-out;
              transition: @transition;
              -moz-transition: @transition;
              -webkit-transition: @transition;
              z-index: 10;
              opacity: 0;
              position: absolute;
              top: 0;
              right: 0;
              padding-top: 1px;
              padding-right: 3px;

              a {
                text-decoration: none;
                color: darken(@color-grey-background, 50%);

                &:hover:not(.disabled) {
                  color: darken(@color-grey-background, 70%);
                }

                &.disabled {
                  color: darken(@color-grey-background, 30%);
                }
              }
            }

            .title, .artist, .album {
              white-space: nowrap;
            }

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing, &.highlighted {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }

              .faded-edge {
                @box-shadow: inset -30px 0 24px -15px @color-purple;
                -webkit-box-shadow: @box-shadow;
                -moz-box-shadow: @box-shadow;
                box-shadow: @box-shadow;
              }
            }
          }
        }

        #search-results-list li.song {
          &:hover, &.selected {
            @background: darken(@color-grey-background, 3%);
            background-color: @background;
            cursor: pointer;

            .faded-edge {
              @box-shadow: inset -30px 0 24px -15px @background;
              -webkit-box-shadow: @box-shadow;
              -moz-box-shadow: @box-shadow;
              box-shadow: @box-shadow;
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: @single-col-width - 1px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  cursor: default;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;
    position: relative;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      display: inline-block;
      color: lighten(@font-color, 20%);
    }

    .controls {
      text-align: right;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding-right: 5px;
      padding-top: 5px;

      &:empty {
        display: none;
      }

      a {
        text-decoration: none;
        font-size: 22px;
        color: darken(@color-grey-background, 50%);

        &:hover:not(.disabled) {
          color: darken(@color-grey-background, 70%);
        }

        &.disabled {
          color: darken(@color-grey-background, 30%);
        }
      }

      .btn-skip {
        font-size: 17px;
        position: relative;
        bottom: 3px;
      }
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}

#songupload {
  visibility: hidden;
  height: 0;
  width: 0;
}

/* Firefox-only rules */
@-moz-document url-prefix() {
  .fixed-column .column-table .column-table-row .column-section {
    &, &:before, &:after {
      @box-sizing: padding-box;
      -webkit-box-sizing: @box-sizing;
      -moz-box-sizing: @box-sizing;
      box-sizing: @box-sizing;
    }
  }
}

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.loading-shimmer-frames () {
  from {
    background-position-x: -100000px;
  }
  to {
    background-position-x: 100000px;
  }
}

@-webkit-keyframes loading_shimmer {.loading-shimmer-frames;}
@-moz-keyframes loading_shimmer {.loading-shimmer-frames;}
@-o-keyframes loading_shimmer {.loading-shimmer-frames;}
@keyframes loading_shimmer {.loading-shimmer-frames;}

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border-width: 0 0 1px 0;
  -moz-box-shadow: @site-box-shadow;
  -webkit-box-shadow: @site-box-shadow;
  box-shadow: @site-box-shadow;
  margin-left: -1000px;
  margin-right: -1000px;
  margin-top: -20px;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: @single-col-width) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: @single-col-width) {
    min-height: 100px;
    max-height: 400px;
    margin-bottom: 20px;

    #previews {
      max-height: 150px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5.5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;
          min-height: 34px;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }

          .faded-edge {
            @box-shadow: inset 8px 0 8px 0px @section-header-bg;
            -webkit-box-shadow: @box-shadow;
            -moz-box-shadow: @box-shadow;
            box-shadow: @box-shadow;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          input[type=text] {
            border: none;
            background: none;
            padding: 0;
            padding-right: 10px;
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            outline: none;
            font-family: inherit;
            font-weight: inherit;
            text-indent: 10px;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px @color-grey-border;
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);
              opacity: 0.1;
              z-index: 0;
            }

            &.failed {
              .foreground {
                .status {
                  color: darken(@red, 10%);
                }
              }

              .background {
                width: 100% !important;
                background-color: @red;
              }
            }

            &.added {
              .foreground {
                .status {
                  color: @green;
                }
              }

              .background {
                width: 100% !important;
                background-color: @green;
              }
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
              font-family: @font-family;

              .name {
                font-size: 13px;
                font-weight: 200;
              }

              .status, .error {
                font-size: 9px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.4px;
              }

              .status {
                height: 13px;

                .size {
                  padding-right: 3px;
                }

                .glyphicon {
                  position: absolute;
                  top: 0;
                  right: 0;
                  font-size: 11px;
                }

                .glyphicon-ok-sign {
                  color: @green;
                }

                .glyphicon-exclamation-sign {
                  color: darken(@red, 5%);
                }
              }

              .error {
                color: darken(@red, 10%);
                padding-top: 4px;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding * 2;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            height: 0;

            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        #search-results-list {
          background-color: @color-grey-background;
          margin: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }

        #search-results-list .section-results-placeholder {
          color: darken(@color-grey-background, 40%);
          margin: 5px;
          font-size: 13px;
        }

        #search-results-list .section-header {
          position: relative;
          min-height: 24px;
          border-bottom: none;
          background-color: darken(@color-grey-background, 3%);
          border: solid 1px lighten(@color-grey-border, 10%);

          .loading-gradient, .content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
          }

          .loading-gradient {
            z-index: 99;

            @background: darken(@color-grey-background, 3%);
            @background-emphasis: lighten(@background, 10%);
            @background-emphasis-percent: 80%;

            @gradient-percent1: 50% - (@background-emphasis-percent / 2%);
            @gradient-percent2: 50%;
            @gradient-percent3: 50% + (@background-emphasis-percent / 2%);
            @gradient: left, @background @gradient-percent1, @background-emphasis @gradient-percent2, @background @gradient-percent3;
            background: -moz-linear-gradient(@gradient);
            background: -webkit-linear-gradient(@gradient);
            background: -o-linear-gradient(@gradient);
            background: -ms-linear-gradient(@gradient);
            background: linear-gradient(@gradient);
            background-size: 170%;

            @animation-def: loading_shimmer 500s linear 0s infinite;
            -webkit-animation: @animation-def;
            -moz-animation: @animation-def;
            -o-animation: @animation-def;
            animation: @animation-def;

            opacity: 0;
            -webkit-transition: opacity 1s;
            transition: opacity 1s;

            text-align: right;
            font-size: 11px;
            padding: 3px 10px;
            color: darken(@color-grey-background, 30%);
            letter-spacing: 0.4px;
            font-weight: 300;
          }

          .content {
            font-size: 12px;
            font-weight: 400;
            padding: 3px 5px;
            z-index: 100;
          }
        }

        #search-results-list.loading .section-header {
          .loading-gradient {
            opacity: 1;
          }
        }

        #queue-list li, #search-results-list li.song {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          &:hover {
            .fg .controls {
              opacity: 1;
            }
          }

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;
            white-space: nowrap;

            .faded-edge {
              @box-shadow: inset -30px 0 24px -15px @color-grey-background;
              -webkit-box-shadow: @box-shadow;
              -moz-box-shadow: @box-shadow;
              box-shadow: @box-shadow;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
            }

            .controls {
              @transition: opacity .06s ease-in-out;
              transition: @transition;
              -moz-transition: @transition;
              -webkit-transition: @transition;
              z-index: 10;
              opacity: 0;
              position: absolute;
              top: 0;
              right: 0;
              padding-top: 1px;
              padding-right: 3px;

              a {
                text-decoration: none;
                color: darken(@color-grey-background, 50%);

                &:hover:not(.disabled) {
                  color: darken(@color-grey-background, 70%);
                }

                &.disabled {
                  color: darken(@color-grey-background, 30%);
                }
              }
            }

            .title, .artist, .album {
              white-space: nowrap;
            }

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing, &.highlighted {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }

              .faded-edge {
                @box-shadow: inset -30px 0 24px -15px @color-purple;
                -webkit-box-shadow: @box-shadow;
                -moz-box-shadow: @box-shadow;
                box-shadow: @box-shadow;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: @single-col-width - 1px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  cursor: default;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;
    position: relative;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      display: inline-block;
      color: lighten(@font-color, 20%);
    }

    .controls {
      text-align: right;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding-right: 5px;
      padding-top: 5px;

      &:empty {
        display: none;
      }

      a {
        text-decoration: none;
        font-size: 22px;
        color: darken(@color-grey-background, 50%);

        &:hover:not(.disabled) {
          color: darken(@color-grey-background, 70%);
        }

        &.disabled {
          color: darken(@color-grey-background, 30%);
        }
      }

      .btn-skip {
        font-size: 17px;
        position: relative;
        bottom: 3px;
      }
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}

#songupload {
  visibility: hidden;
  height: 0;
  width: 0;
}

/* Firefox-only rules */
@-moz-document url-prefix() {
  .fixed-column .column-table .column-table-row .column-section {
    &, &:before, &:after {
      @box-sizing: padding-box;
      -webkit-box-sizing: @box-sizing;
      -moz-box-sizing: @box-sizing;
      box-sizing: @box-sizing;
    }
  }
}


less cross browser style function with array loop

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/Eomerx/blank-less.git/'


overwrote less file with the one from ux-branch

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/leonidas/qa-dashboard.git/'


Fixes paragraph margins

Fixes paragraph margins

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/studiomotio/www1.git/'