.ms-container {
  width: 100%;
  background: transparent url('@{img-path}styles/switch.png') no-repeat 50% 50%;
  &:extend(.clearfix all);

  .ms-selectable,
  .ms-selection {
    float: left;
    width: 47%;
    background: #fff;
    color: @input-color;
  }

  .ms-selection {
    float: right;
  }

  .ms-list {
    border: 1px solid @input-border;
    border-radius: @border-radius-base;
    position: relative;
    height: 200px;
    padding: 0;
    overflow-y: auto;
  }

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

  .ms-optgroup-container {
    width: 100%;

    .ms-optgroup {
      li {
        &.ms-elem-selectable,
        &.ms-elem-selection {
          padding-left: @padding-small-horizontal * 3;
        }
      }
    }
  }

  .ms-optgroup-label {
    margin: 0;
    padding: @padding-base-vertical @padding-base-horizontal;
    cursor: pointer;
    color: @gray;
    font-weight: bold;
  }

  .ms-selectable li.ms-elem-selectable,
  .ms-selection li.ms-elem-selection {
    border-bottom: 1px solid @gray-lighter;
    padding: @padding-small-vertical @padding-small-horizontal;
    color: @input-color;
  }

  .ms-selectable li.ms-hover,
  .ms-selection li.ms-hover {
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    background-color: @brand-primary;
  }

  .ms-selectable li.disabled,
  .ms-selection li.disabled {
    background-color: @gray-lighter;
    color: @gray-light;
    cursor: text;
  }
}