do not give select2s explicit widths, they should be % to remain responsive

// FORM ACTIONS from TWBS 2
// ------------

[ng\:cloak],[ng-cloak],.ng-cloak{
  display:none !important
}

.form-actions {
  padding: (@line-height-base * @font-size-base - 1px) 0px @line-height-base * @font-size-base;
  margin-top: @line-height-base * 1em;
  margin-bottom: 0;
  background-color: @navbar-default-bg;
  border-top: 1px solid @legend-border-color;
  .border-bottom-radius(@border-radius-base);
  .clearfix(); // Adding clearfix to allow for .pull-right button containers
  .controls {
     padding-left: 8px;
  }
  .btn-default {
    background-color: lighten(@cc-bg, 3%);
  }
  .btn {
    margin-left: 5px;
    &:first-child {
      margin-left: 0;
    }
  }
}

legend .subtext {
  font-size: .8em;
  color: lighten(@cc-text, 40%);
  padding-bottom: 5px;
}

.daterangepickerwidget {
  width: auto;
  display: inline-block;
}

.daterangepicker {
  .ranges li {
    background-color: @cc-bg !important;
    color: @cc-light-cool-accent-low !important;
    border: none !important;
    line-height: 30px;
    &:hover {
      background-color: @cc-light-cool-accent-mid !important;
      color: #ffffff !important;
    }
  }

  .ranges li.active {
    background-color: @cc-light-cool-accent-low !important;
    color: #ffffff !important;
  }

  .range_inputs {
    button {
      line-height: 25px;
      font-size: 12px;
    }
  }
  .applyBtn {
    background-color: @cc-neutral-low;
    color: #ffffff;
    position: relative;
    margin-bottom: 5px;
    &:hover {
      background-color: @cc-att-pos-mid;
    }
  }
  .cancelBtn {
    background-color: @cc-bg;
  }
}

.ui-widget-header select{
  color: @cc-text;
}

.controls-multiple {
  .select2, .select2-container {
    margin-left: 10px;
    margin-bottom: 3px;
  }

  .form-group {
    margin-bottom: 0;
  }

  .form-inline .form-group {
    margin: 0 10px 5px 0;
  }
}

// Static width for select2 widgets, which otherwise grow too large on form view's case management tab
.case-config-select2s(@width) {
    .select2-container {
        width: @width;

        // Fix firefox bug in select 2 v3.5.2
        // https://github.com/select2/select2/issues/2078
        display: inline-block !important;
    }

    // This needs a static width so that text-overflow: ellipsis will work in Firefox.
    // Unusually specific selector to override select2's width: auto rule.
    > .select2-choice > .select2-chosen {
        width: @width - 35px;
    }
}

#case-config-ko, #usercase-config-ko {
    .case-config-select2s(100%);
}

// hack to fix issues with placeholder not showing up fully
// !important is necessary because this is overriding an inline style set by select2 javascript
.select2-container {
    .select2-search-field {
        width: 100% !important;
    }

    .select2-input {
        width: 100% !important;
    }
}

.checkbox-table-cell {
  margin: 0;
  font-size: 20px;
  cursor: pointer;
  input {
    cursor: pointer;
  }
}

.form-horizontal .form-group label.checkbox {
  margin-left: 20px;
  font-weight: normal;
  line-height: 18px;
  input {
    vertical-align: top;
    margin-top: 3px;
  }
}

.form-horizontal .controls label.radio {
  margin-left: 20px;
  line-height: 22px;
  font-weight: normal;
}

.form-control-text {
  margin-top: 8px;
  line-height: @line-height-computed;
}

.form-horizontal .form-group .checkbox > div > label {
  padding-left: 30px;
  line-height: @line-height-computed;
  > input {
    vertical-align: top;
    margin-top: 1px;
  }
}

.form-horizontal .form-group > div .row {
  select {
    margin-left: 20px;
  }
  .ui-multiselect {
    margin-left: 20px;
  }
}
.form-horizontal .form-group > .controls-multiple > .row {
  margin-left: -5px;
}
.form-horizontal .form-group > .controls-multiple .form-group {
  margin: 0;
  padding: 0;
}

.form-horizontal .date-range-picker {
  margin-left: 0px;
}

.langcode-container {
    position: relative;
}

.langcode-input {
    position: absolute;
    top: 6px;
    right: 15px;
}

textarea.vertical-resize {
    resize: vertical;
}

.ko-inline-edit {
    &.inline {
        display: inline-block;
    }

    .hq-help {
        margin: 3px 5px 0 5px;
    }

    .read-only {
        padding: 8px;
        .clearfix();

        &:hover {
            cursor: pointer;
            background-color: @cc-bg;
            border-radius: 4px;
        }

        i {
            color: @cc-neutral-hi;
            display: inline-block;
            margin-left: 5px;
            margin-top: 2px;
        }
    }

    .read-write {
        .form-group {
            margin-left: 0;
            margin-right: 0;
        }
        .langcode-container.has-lang {
            input, textarea {
                padding-right: 45px;
            }
        }
    }
}

table .ko-inline-edit .read-only:hover {
    background-color: @cc-neutral-hi;
}

// FORM ACTIONS from TWBS 2
// ------------

[ng\:cloak],[ng-cloak],.ng-cloak{
  display:none !important
}

.form-actions {
  padding: (@line-height-base * @font-size-base - 1px) 0px @line-height-base * @font-size-base;
  margin-top: @line-height-base * 1em;
  margin-bottom: 0;
  background-color: @navbar-default-bg;
  border-top: 1px solid @legend-border-color;
  .border-bottom-radius(@border-radius-base);
  .clearfix(); // Adding clearfix to allow for .pull-right button containers
  .controls {
     padding-left: 8px;
  }
  .btn-default {
    background-color: lighten(@cc-bg, 3%);
  }
  .btn {
    margin-left: 5px;
    &:first-child {
      margin-left: 0;
    }
  }
}

legend .subtext {
  font-size: .8em;
  color: lighten(@cc-text, 40%);
  padding-bottom: 5px;
}

.daterangepickerwidget {
  width: auto;
  display: inline-block;
}

.daterangepicker {
  .ranges li {
    background-color: @cc-bg !important;
    color: @cc-light-cool-accent-low !important;
    border: none !important;
    line-height: 30px;
    &:hover {
      background-color: @cc-light-cool-accent-mid !important;
      color: #ffffff !important;
    }
  }

  .ranges li.active {
    background-color: @cc-light-cool-accent-low !important;
    color: #ffffff !important;
  }

  .range_inputs {
    button {
      line-height: 25px;
      font-size: 12px;
    }
  }
  .applyBtn {
    background-color: @cc-neutral-low;
    color: #ffffff;
    position: relative;
    margin-bottom: 5px;
    &:hover {
      background-color: @cc-att-pos-mid;
    }
  }
  .cancelBtn {
    background-color: @cc-bg;
  }
}

.ui-widget-header select{
  color: @cc-text;
}

.controls-multiple {
  .select2, .select2-container {
    margin-left: 10px;
    margin-bottom: 3px;
  }

  .form-group {
    margin-bottom: 0;
  }

  .form-inline .form-group {
    margin: 0 10px 5px 0;
  }
}

// Static width for select2 widgets, which otherwise grow too large on form view's case management tab
.case-config-select2s(@width) {
    .select2-container {
        width: @width;

        // Fix firefox bug in select 2 v3.5.2
        // https://github.com/select2/select2/issues/2078
        display: inline-block !important;
    }

    // This needs a static width so that text-overflow: ellipsis will work in Firefox.
    // Unusually specific selector to override select2's width: auto rule.
    > .select2-choice > .select2-chosen {
        width: @width - 35px;
    }
}

#case-config-ko, #usercase-config-ko {
    @select2Width: 210px;

    .case-config-select2s(@select2Width);

    .wide-select2s {
        .case-config-select2s(@select2Width * 1.5);
    }
}

// hack to fix issues with placeholder not showing up fully
// !important is necessary because this is overriding an inline style set by select2 javascript
.select2-container {
    .select2-search-field {
        width: 100% !important;
    }

    .select2-input {
        width: 100% !important;
    }
}

.checkbox-table-cell {
  margin: 0;
  font-size: 20px;
  cursor: pointer;
  input {
    cursor: pointer;
  }
}

.form-horizontal .form-group label.checkbox {
  margin-left: 20px;
  font-weight: normal;
  line-height: 18px;
  input {
    vertical-align: top;
    margin-top: 3px;
  }
}

.form-horizontal .controls label.radio {
  margin-left: 20px;
  line-height: 22px;
  font-weight: normal;
}

.form-control-text {
  margin-top: 8px;
  line-height: @line-height-computed;
}

.form-horizontal .form-group .checkbox > div > label {
  padding-left: 30px;
  line-height: @line-height-computed;
  > input {
    vertical-align: top;
    margin-top: 1px;
  }
}

.form-horizontal .form-group > div .row {
  select {
    margin-left: 20px;
  }
  .ui-multiselect {
    margin-left: 20px;
  }
}
.form-horizontal .form-group > .controls-multiple > .row {
  margin-left: -5px;
}
.form-horizontal .form-group > .controls-multiple .form-group {
  margin: 0;
  padding: 0;
}

.form-horizontal .date-range-picker {
  margin-left: 0px;
}

.langcode-container {
    position: relative;
}

.langcode-input {
    position: absolute;
    top: 6px;
    right: 15px;
}

textarea.vertical-resize {
    resize: vertical;
}

.ko-inline-edit {
    &.inline {
        display: inline-block;
    }

    .hq-help {
        margin: 3px 5px 0 5px;
    }

    .read-only {
        padding: 8px;
        .clearfix();

        &:hover {
            cursor: pointer;
            background-color: @cc-bg;
            border-radius: 4px;
        }

        i {
            color: @cc-neutral-hi;
            display: inline-block;
            margin-left: 5px;
            margin-top: 2px;
        }
    }

    .read-write {
        .form-group {
            margin-left: 0;
            margin-right: 0;
        }
        .langcode-container.has-lang {
            input, textarea {
                padding-right: 45px;
            }
        }
    }
}

table .ko-inline-edit .read-only:hover {
    background-color: @cc-neutral-hi;
}


more styling changes

more styling changes

/**
 * Overwrite the default styling class
 * @author Minh Duc Nguyen <minh.nguyen@ands.org.au>
 */

.navbar-brand {
	font-size:25px;
	padding: 33px 15px 0px;
	height:auto;
	span {
		color: #eb7700;
		font-weight:normal;
		text-decoration:none;
	}
}

.panel { word-wrap:break-word; }
.post { margin-bottom:auto; }

h1 { font-size:30px; }

.flexslider .slides img {
	/*height:90px;*/
	max-height:170px;
	width:auto!important;
	display:block;
	margin: 0 37px 16px 0px;
	padding:0 0 15px 15px;
	float:right;
}
.flex-direction-nav a { color:@primaryColor !important; }

.swatch-white {
	.panel-footer a, .panel-header a {
		color:white;
	}
	.active {
		color: #eb7700 !important;
		a {
			color: #eb7700 !important;
		}
	}
}

.swatch-gray a, .panel a {
	color: @primaryColor;
	&:hover{
		color:@secondaryColor;
	}
}

.swatch-black {
	input:focus {

	}
	input {
		&:focus {
			-webkit-box-shadow: 0 3px 0 @secondaryColor;
			-moz-box-shadow: 0 3px 0 @secondaryColor;
			box-shadow: 0 3px 0 @secondaryColor;
		}
		&::selection,  {
			color: white;
			background: @primaryColor;
		}
		&::-moz-selection {
			color: white;
			background: @primaryColor;
		}
	}
}

::selection {
	color: white;
	background: @primaryColor;
}

::-moz-selection {
	color: white;
	background: @primaryColor;
}

.mce-panel {
	button {
		background-color:inherit !important;
	}
	i {
		color: black !important;
		font-size:inherit !important;
		display:inline-block;
		position:relative;
		left:0;top:0;
	}
}

.ta-editor {
    min-height: 300px;
    height: auto;
    overflow: auto;
    font-family: inherit;
    font-size: 100%;
    background: #e9e9e9;
    &:focus {
    	-webkit-box-shadow: 0px 3px 0px #84a07b;
	 	-moz-box-shadow: 0px 3px 0px #84a07b;
		box-shadow: 0px 3px 0px #84a07b;
    }
 }

.btn-primary {
	background-color:@primaryColor;
	&:hover {
		color:white !important;
		background-color:@secondaryColor !important;
	}
}

.btn-default {
	i {
		color:white !important;
	}
	color:white !important;
}

.btn-danger {
	color:white !important;
	i {
		color:white !important;
	}
}

.btn-info {
	color:white !important;
	i {
		color:white !important;
	}
}

.swatch-white {
	background:white;
	.panel, .panel-primary, .panel-content {
		background:white !important;
	}
	a {
		color: @primaryColor;
		&:hover {
			color: @secondaryColor;
		}
	}
}

.btn-group {
	.dropdown-menu {
		li {
			a {
				color: #4c4c4c;
				&:hover {
					color: white;
					background: @secondaryColor;
				}
			}
		}
	}
}

.open>.btn-primary.dropdown-toggle {
	background-color: @secondaryColor;
}

/**
 * Overwrite the default styling class
 * @author Minh Duc Nguyen <minh.nguyen@ands.org.au>
 */

.navbar-brand {
	font-size:25px;
	padding: 33px 15px 0px;
	height:auto;
	span {
		color: #eb7700;
		font-weight:normal;
		text-decoration:none;
	}
}

.panel { word-wrap:break-word; }
.post { margin-bottom:auto; }

h1 { font-size:30px; }

.flexslider .slides img {
	/*height:90px;*/
	max-height:170px;
	width:auto!important;
	display:block;
	margin: 0 37px 16px 0px;
	padding:0 0 15px 15px;
	float:right;
}
.flex-direction-nav a { color:@primaryColor !important; }

.swatch-white {
	.panel-footer a, .panel-header a {
		color:white;
	}
	.active {
		color: #eb7700 !important;
		a {
			color: #eb7700 !important;
		}
	}
}

.swatch-gray a, .panel a {
	color: @primaryColor;
	&:hover{
		color:@secondaryColor;
	}
}

.mce-panel {
	button {
		background-color:inherit !important;
	}
	i {
		color: black !important;
		font-size:inherit !important;
		display:inline-block;
		position:relative;
		left:0;top:0;
	}
}

.ta-editor {
    min-height: 300px;
    height: auto;
    overflow: auto;
    font-family: inherit;
    font-size: 100%;
    background: #e9e9e9;
    &:focus {
    	-webkit-box-shadow: 0px 3px 0px #84a07b;
	 	-moz-box-shadow: 0px 3px 0px #84a07b;
		box-shadow: 0px 3px 0px #84a07b;
    }
 }

.btn-primary {
	background-color:@primaryColor;
	&:hover {
		color:white !important;
		background-color:@secondaryColor !important;
	}
}

.btn-default {
	i {
		color:white !important;
	}
	color:white !important;
}

.btn-danger {
	color:white !important;
	i {
		color:white !important;
	}
}

.btn-info {
	color:white !important;
	i {
		color:white !important;
	}
}

.swatch-white {
	background:white;
	.panel, .panel-primary, .panel-content {
		background:white !important;
	}
	a {
		color: @primaryColor;
		&:hover {
			color: @secondaryColor;
		}
	}
}

.btn-group {
	.dropdown-menu {
		li {
			a {
				color: #4c4c4c;
				&:hover {
					color: white;
					background: @secondaryColor;
				}
			}
		}
	}
}

.open>.btn-primary.dropdown-toggle {
	background-color: @secondaryColor;
}


:bug: fix Firefox placeholder opacity

:bug: fix Firefox placeholder opacity

https://bugzilla.mozilla.org/show_bug.cgi?id=556145

// Compatibility for browsers.

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }

  &::placeholder {
    color: @color;
  }

  &:placeholder-shown {
    text-overflow: ellipsis;
  }
}

// Compatibility for browsers.

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::placeholder {
    color: @color;
  }

  &:placeholder-shown {
    text-overflow: ellipsis;
  }
}


Fix bug in admin bar on sites that specify a root font size

.apos-admin-bar
{
  position: fixed;
  height: 80px;
  top: @apos-padding-4;
  left: @apos-padding-4;
  z-index: @apos-z-index-5;
  background-color: @apos-base;
  color: @apos-white;
  .apos-button-border(@apos-white);
  .apos-rounded();
  .apos-drop-shadow();
  overflow: hidden;
  .apos-transition;
  .apos-no-select;

  * { .apos-transition; }
}

.apos-admin-bar-logo
{
  position: relative;
  padding: @apos-padding-2;
  .apos-inline-block();
  background-color: @apos-base;
  cursor: pointer;
  z-index: 1; // todo bobo
  svg { max-height: 36px; }
}

.apos-admin-bar-items
{
  display: inline-block;
  white-space: nowrap;
  .apos-transition;
  transform: translateX(-130%);

  .apos-admin-bar-item{ opacity: 0; }

}

.apos-admin-bar-item
{
  cursor: pointer;
  height: 75px;
  // height: 100%;
  .apos-inline-block(middle);
}

.apos-admin-bar-item:before
{
  content: '';
  .apos-inline-block(middle);
  height: 100%;
}

.apos-admin-bar-item .apos-active
{
  background-color: darken(@apos-base, 10%);
}

.apos-admin-bar-items > div:last-child
{
  padding-right: @apos-padding-3;
}

.apos-admin-bar-inner
{
  max-width: 80px;
}

.apos-admin-bar-item-inner
{
  .apos-inline-block(middle);
  padding: 0 @apos-padding-2;
  .apos-transition();
  height: 100%;
  line-height: 4.9em;
}

.apos-admin-bar.apos-active

{
  .apos-admin-bar-items { transform: translateX(0%); .apos-admin-bar-item{ opacity: 1; } }
  .apos-admin-bar-inner { max-width: 1400px; }
}

.apos-admin-bar .apos-admin-bar-item .apos-dropdown
{
  .apos-drop-shadow(0, 0, 0, 0);
}

.apos-admin-bar .apos-admin-bar-item .apos-dropdown-items
{
  top: 102%;
}

.apos-admin-bar
{
  position: fixed;
  height: 80px;
  top: @apos-padding-4;
  left: @apos-padding-4;
  z-index: @apos-z-index-5;
  background-color: @apos-base;
  color: @apos-white;
  .apos-button-border(@apos-white);
  .apos-rounded();
  .apos-drop-shadow();
  overflow: hidden;
  .apos-transition;
  .apos-no-select;

  * { .apos-transition; }
}

.apos-admin-bar-logo
{
  position: relative;
  padding: @apos-padding-2;
  .apos-inline-block();
  background-color: @apos-base;
  cursor: pointer;
  z-index: 1; // todo bobo
  svg { max-height: 36px; }
}

.apos-admin-bar-items
{
  display: inline-block;
  white-space: nowrap;
  .apos-transition;
  transform: translateX(-130%);

  .apos-admin-bar-item{ opacity: 0; }

}

.apos-admin-bar-item
{
  cursor: pointer;
  height: 75px;
  // height: 100%;
  .apos-inline-block(middle);
}

.apos-admin-bar-item:before
{
  content: '';
  .apos-inline-block(middle);
  height: 100%;
}

.apos-admin-bar-item .apos-active
{
  background-color: darken(@apos-base, 10%);
}

.apos-admin-bar-items > div:last-child
{
  padding-right: @apos-padding-3;
}

.apos-admin-bar-inner
{
  max-width: 80px;
}

.apos-admin-bar-item-inner
{
  .apos-inline-block(middle);
  padding: 0 @apos-padding-2;
  .apos-transition();
  height: 100%;
  line-height: 4.9rem;
}

.apos-admin-bar.apos-active

{
  .apos-admin-bar-items { transform: translateX(0%); .apos-admin-bar-item{ opacity: 1; } }
  .apos-admin-bar-inner { max-width: 1400px; }
}

.apos-admin-bar .apos-admin-bar-item .apos-dropdown
{
  .apos-drop-shadow(0, 0, 0, 0);
}

.apos-admin-bar .apos-admin-bar-item .apos-dropdown-items
{
  top: 102%;
}