.hub-pivot .filters .board-settings {
  float: left;
  padding: 0px;
}

.hub-pivot .filters .board-settings.menu-bar > .menu-item {
  margin-top: 6px;
  margin-right: 5px;
}

.hub-pivot .filters .board-settings.menu-bar .menu-item {
  cursor: pointer;
}

.hub-pivot .filters .board-settings.menu-bar .menu-item.hover {
  outline: none;
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.hub-pivot .filters .board-settings.menu-bar .menu-item:focus {
  outline: 1px dashed rgba( 0, 0, 0 ,  1 ) !important;
  outline: 1px dashed rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
}

.hub-pivot .filters .board-settings.menu-bar .menu-item .text {
  padding: 0;
  text-decoration: none;
  outline: none;
}

.common-settings-container .bowtie-ellipsis {
  margin-right: 10px;
  vertical-align: top;
}

/* Tab Strip Control - Tab Content Container */
.tabstrip-content-container .header {
  font-weight: bold;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  margin-bottom: 5px;
  padding-top: 12px;
}

.tabstrip-content-container .message-container {
  margin-bottom: 10px;
}

.tabstrip-content-container .subheader {
  margin-bottom: 10px;
}

.tabstrip-content-container .input-container {
  margin-top: 10px;
  padding: 0;
}

.tabstrip-content-container input[type='text'] {
  background: rgba( 255, 255, 255 ,  1 );
  background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  outline: none;
}

.tabstrip-content-container .error-input .combo,
.tabstrip-content-container .error-input .combo > div.wrap > input {
  background: rgba( 249, 235, 235 ,  1 );
  background: rgba( var(--palette-accent1-light,249, 235, 235) ,  1 );
}

.tabstrip-content-container input[type='checkbox'] {
  vertical-align: -2px;
  margin: 0;
}

.tabstrip-content-container .input-wrap {
  margin-left: 10px;
  display: inline-block;
}

.tabstrip-content-container .disabled-input-wrap {
  display: inline-block;
}

.tabstrip-content-container textarea {
  white-space: pre-line;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  height: 115px;
  width: 100%;
  resize: none;
  overflow: auto;
}

.tabstrip-control-container .additional-fields-section .bowtie-status-error {
  font-size: 10px;
  margin-bottom: 4px;
}

.cardfields-settings-tabstrip .tabstrip-collection-container .tabstrip .bowtie-status-error {
  margin-top: 12px;
}

.tabstrip-collection-container .tabstrip .bowtie-status-error {
  font-size: 12px;
}

/* Board Settings Control */
.column-settings-container .sections-area-container {
  overflow-y: visible !important;
  /* Override .common-settings-container .sections-area-container */
}

.swimlane-settings-container .sections-area-container {
  overflow-y: visible !important;
  /* Override .common-settings-container .sections-area-container */
}

.swimlane-settings-control-overlay, .column-settings-control-overlay {
  opacity: 0.8;
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.column-message-container {
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.column-state-label {
  vertical-align: top;
  padding-top: 7px;
}

.column-state-value {
  display: inline-block;
  width: 150px;
}

.tab-collection .bowtie-status-error {
  float: left;
  font-size: 10px;
  margin-right: 5px;
}

.tab-collection .compact-rule-container .rule-summary .bowtie-status-error {
  margin-top: 9px;
}

.tab-collection .bowtie-status-warning {
  float: left;
}

.column-settings-container .tabstrip-content-container .input-wrap .wip-limit-input {
  width: 42px;
}

.column-settings-container .tabstrip-content-container .section-checkbox .split-column-label {
  display: inline-block;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  /* Override modal dialog label styling */
  margin-top: 0;
  /* Override modal dialog label styling */
}

.field-settings-container .sections-area-container {
  margin-top: 10px;
}

.cardfields-settings-tabstrip .header-gripper {
  display: none !important;
}

.cardfields-settings-tabstrip .work-item-icon {
  float: left;
  margin-left: 10px;
  margin-top: 12px;
}

.cardfields-settings-tabstrip .work-item-icon .work-item-type-icon {
  margin-right: 0px;
}

.cardfields-settings-tabstrip .tabstrip-collection .tabstrip .header {
  overflow: visible;
  text-overflow: clip;
  width: auto !important;
  /* overwrite the common horizontal tab width 88px */
  margin-right: 20px;
}

/*  add field control  */
.add-control {
  box-sizing: border-box;
  display: inline-block;
  height: 28px;
  width: auto;
  white-space: nowrap;
  margin: 8px 0;
  padding: 4px 12px 0 6px;
  border: solid 1px transparent;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  cursor: pointer;
}

.add-control-icon {
  display: inline-block;
  white-space: no-wrap;
}

.add-control:hover {
  border:  solid 1px;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.add-control.disable:hover {
  border-color: transparent;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  cursor: default;
}

.add-control .control-text {
  display: inline-block;
  font-size: 14px;
  line-height: 18px;
  font-color: rgba(0, 0, 0, .9);
  font-color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin: 0 0 0 2px;
}

.column-settings-container .add-control .control-text {
  padding-left: 2px;
}

.swimlane-settings-container .add-control .control-text {
  padding-left: 2px;
}

i.bowtie-math-plus {
  font-size: 16px;
  color: rgba( 16, 124, 16 ,  1 );
  color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
  vertical-align: bottom;
  overflow: visible;
}

i.bowtie-math-multiply {
  font-size: 16px;
  color: rgba( 168, 0, 0 ,  1 );
  color: rgba( var(--palette-accent1-dark,168, 0, 0) ,  1 );
  margin-bottom: 26px;
  cursor: pointer;
}

.tag-delete-section i.bowtie-math-multiply {
  margin-bottom: 2px;
}

i.bowtie-math-plus-gray {
  color: rgba( 200, 200, 200 ,  1 );
  color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.column-settings-container .tabstrip-content-container,
.cardfields-settings-tabstrip .tabstrip-content-container {
  min-height: 100px;
}

/* BEGIN TODO: Should be removed or corrected once the fields tab UI is corrected */
.cardfields-settings-tabstrip .gripper {
  width: 12px;
  height: 32px;
  overflow: hidden;
}

.cardfields-settings-tabstrip .gripper:before {
  position: relative;
  content: url("../../_content/icon-gripperDefault.png");
  left: 0;
  top: 0;
}

.cardfields-settings-tabstrip .additionalfield-content-area:hover .gripper {
  width: 12px;
  height: 32px;
  overflow: hidden;
}

.cardfields-settings-tabstrip .additionalfield-content-area:hover .gripper:before {
  position: relative;
  content: url("../../_content/icon-gripperDefault.png");
  left: 0;
  top: 0;
}

.cardfields-settings-tabstrip .additionalfield-content-area .gripper:hover {
  width: 12px;
  height: 32px;
  overflow: hidden;
}

.cardfields-settings-tabstrip .additionalfield-content-area .gripper:hover:before {
  position: relative;
  content: url("../../_content/icon-gripperHover.png");
  left: 0;
  top: 0;
}

.tabstrip-control-container.horizontal .tabstrip-collection .tabstrip:focus, .tabstrip-control-container.horizontal .tabstrip-collection .tabstrip.active:focus, .tabstrip-control-container.vertical .tabstrip-collection .tabstrip:focus, .tabstrip-control-container.vertical .tabstrip-collection .tabstrip.active:focus {
  /* Set the focus in IE */
  border:  1px solid;
  border-color: rgba( 0, 0, 0 ,  1 );
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  outline: 1px dashed rgba( 0, 0, 0 ,  1 ) !important;
  outline: 1px dashed rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
}

.cardfields-settings-tabstrip {
  /* vertical alignment of core fields checkboxes */
}

.cardfields-settings-tabstrip .tabstrip-control-container.horizontal .tabstrip-collection-container .tabstrip {
  width: auto;
}

.cardfields-settings-tabstrip .comboarea {
  width: calc(100% - 45px);
  display: inline-block;
}

.cardfields-settings-tabstrip .control-message-area {
  display: inline-block;
  vertical-align: 4px;
}

.cardfields-settings-tabstrip .field-format-selector {
  margin-left: 21px;
  vertical-align: 1px;
}

.cardfields-settings-tabstrip .core-fields-checkbox input[type='checkbox'] {
  vertical-align: -3px;
  margin: 0;
}

.cardfields-settings-tabstrip .core-fields-checkbox label,
.cardfields-settings-tabstrip .show-additional-fields label {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  margin-left: 22px;
  margin-top: -17px;
  padding-top: 0;
}

.cardfields-settings-tabstrip .core-fields-checkbox span {
  margin-left: 5px;
}

.cardfields-settings-tabstrip .tabstrip-content-container .show-additional-fields .section-checkbox {
  padding-top: 5px;
  margin-bottom: 0;
}

.cardfields-settings-tabstrip .tabstrip-content-container .section-header-description.core-field-section-description {
  margin-bottom: 15px;
}

.cardfields-settings-tabstrip .tabstrip-content-container .core-fields-checkbox {
  margin-top: 8px;
  height: 20px;
}

.cardfields-settings-tabstrip .error-message {
  display: inline-block;
}

.cardfields-settings-tabstrip .gripper {
  display: inline-block;
  cursor: pointer;
  vertical-align: -1px;
  margin-top: 1px;
}

.cardfields-settings-tabstrip .additional-field {
  max-width: 385px;
  /* 18px (gripper) + 340px (combo) + 16px (delete icon) + 11px (buffer width) */
}

.cardfields-settings-tabstrip .additional-field .additionalfield-content-area {
  display: inline-block;
  height: 40px;
  width: 100%;
  white-space: nowrap;
}

.cardfields-settings-tabstrip .additionalfield-content-area .gripper {
  visibility: hidden;
  margin-right: 6px;
}

.cardfields-settings-tabstrip .additionalfield-content-area .comboarea {
  margin-top: 4px;
}

.cardfields-settings-tabstrip .additionalfield-content-area .bowtie-edit-remove {
  opacity: 0;
}

.cardfields-settings-tabstrip .additionalfield-content-area:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.cardfields-settings-tabstrip .additionalfield-content-area:hover .gripper {
  visibility: visible;
  margin-right: 6px;
  margin-bottom: 2px;
}

.cardfields-settings-tabstrip .field-format-selector .comboarea {
  width: 95%;
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  margin-top: 5px;
}

.cardfields-settings-tabstrip .additionalfield-content-area:hover .bowtie-edit-remove,
.cardfields-settings-tabstrip .additionalfield-content-area .bowtie-edit-remove.inFocus {
  opacity: 1;
  margin-bottom: 25px;
}

/*END TODO*/
.configuration-dialog .ui-dialog-titlebar {
  margin: 0px;
}

.ui-dialog.configuration-dialog .ui-dialog-content {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.configuration-dialog .ui-dialog-buttonpane {
  margin: 0px;
}

.configuration-dialog .cardfields-settings-tabstrip .core-fields-checkbox input[type='checkbox'] {
  height: auto;
}

.tab-collection {
  height: 100%;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.tab-collection .bowtie-status-error {
  float: left;
  font-size: 10px;
  margin-right: 2px;
}

.tab-collection .bowtie-status-warning {
  float: left;
}

.tab-collection .tab-collection-container {
  height: 100%;
  position: relative;
  clear: both;
}

.tab-collection .message-area {
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  width: 100%;
}

.tab-collection .control-message-area {
  padding: 3px 0px 0px 0px;
}

.tab-collection .error-message {
  font: normal 12px Segoe UI;
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.tab-collection .warning-message {
  font: normal 12px Segoe UI;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  padding-left: 18px;
}

.tab-collection .info-message {
  font: normal 12px Segoe UI;
}

.tab-collection .tabs-titles-container {
  border-right:  1px solid;
  border-right-color: rgba( 234, 234, 234 ,  1 );
  border-right-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  float: left;
  height: 100%;
  overflow: hidden;
  padding: 0px 0px 20px 0px;
}

.tab-collection .tabs-titles {
  list-style-type: none;
  padding: 0px;
  margin-top: 10px;
  width: 160px;
  margin: 0px;
}

.tab-collection .tabs-titles li {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  list-style-type: none;
  padding-left: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tab-collection .tabs-titles li.tab-title {
  cursor: pointer;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  box-shadow: inset -3px 0 0 0 rgba( 234, 234, 234 ,  1 );
  box-shadow: inset -3px 0 0 0 rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  height: 31px;
  line-height: 200%;
}

.tab-collection .tabs-titles li.tab-title:hover {
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
}

.tab-collection .tabs-titles li.tab-title:focus {
  border: 1px solid;
  outline: 1px dashed rgba( 0, 0, 0 ,  1 ) !important;
  outline: 1px dashed rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
}

.tab-collection .tabs-titles li.current {
  font-weight: bolder;
  box-shadow: inset -3px 0 0 0 rgba( 16, 110, 190 ,  1 );
  box-shadow: inset -3px 0 0 0 rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
}

.tab-collection .tabs-titles li.group-title {
  padding-top: 20px;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  font-size: 16px;
  padding-bottom: 6px;
  white-space: nowrap;
}

.tab-collection .tabs-titles li.invalid {
  /*border-left: 2px solid red;*/
}

.tab-collection .tabs-titles li.isDirty .tab-title-text {
  font-weight: bolder;
}

.tab-collection .tabs-titles li.isDirty .tab-title-text::after {
  content: " *";
}

.tab-collection .tabs-titles li.isSaving {
  /*border-left: 2px solid gray;*/
}

.tab-collection .tabs-titles li.tab-title .tab-title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 15px;
}

.tab-collection .tabs-contents-container {
  height: 100%;
  padding: 0px;
  margin: 0px;
  padding: 0px 24px 20px 0px;
}

.tab-collection .tab-content-container {
  padding: 0px;
  margin: 0px;
  display: none;
  height: 100%;
  overflow: hidden;
}

.tab-collection .tab-content {
  padding: 0px;
  margin: 0px;
  height: 100%;
  position: relative;
}

.tab-collection .tab-content-main {
  padding: 0px;
}

.tab-collection .tab-content-apply-panel {
  background-color: accent3-light;
  padding: 2px 20px 2px 20px;
  border-bottom:  1px solid;
  border-bottom-color: rgba( 200, 200, 200 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  height: 28px;
  display: none;
}

.tab-collection .tab-content-apply-btn {
  background-color: accent3-light;
  border-radius: 5px;
  width: 150px;
  padding: 2px 20px 2px 20px;
  text-align: center;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  float: right;
  cursor: pointer;
}

.tab-collection .tab-control-overlay {
  opacity: 0.8;
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.tab-collection .tabs-titles li.tab-title .bowtie-status-error {
  float: right;
  font-size: 10px;
  margin-right: 5px;
  margin-top: 4px;
}

.tab-collection .settings-message-area {
  min-height: 22px;
  padding: 5px 0 5px 18px;
}

.tab-collection .settings-message-area .error-message {
  font: normal 12px Segoe UI;
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
  margin-right: 10px;
  margin-left: 20px;
}

/* Tab Strip Control */
.tabstrip-control {
  width: 100%;
}

/* Tab Strip Control - Tab Collection Container */
.tabstrip-control-container {
  height: 100%;
  position: relative;
}

.tabstrip-control-container.vertical .tabstrip-collection-container {
  display: inline;
  float: left;
  overflow: hidden;
  width: 155px;
}

.tabstrip-control-container.vertical .tabstrip-collection .tabstrip.active {
  border-right-color: rgba( 255, 255, 255 ,  1 );
  border-right-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.tabstrip-collection {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

/* Tab Strip Control - horizontal align */
.horizontal .tabstrip-content-container {
  overflow-y: auto;
}

.tabstrip-control-container.horizontal .tabstrip-collection-container {
  display: block;
  float: none;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 100%;
}

.tabstrip-control-container.horizontal .tabstrip-collection-container .tabstrip {
  float: none;
  width: 127px;
  display: inline-block;
  margin: 0px;
  vertical-align: top;
  /* Need this to address weird spacing issue with inline-block: http://stackoverflow.com/questions/20845649/weird-space-after-inline-block-not-between */
}

.tabstrip-control-container.horizontal .tabstrip-collection .tabstrip {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.tabstrip-control-container.horizontal .tabstrip-collection .tabstrip.active {
  border-bottom-color: rgba( 255, 255, 255 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.tabstrip-control-container.horizontal .tabstrip-content-container {
  width: 100%;
  margin: 0px;
  margin-top: -1px;
}

/* Common Config Arrow Scrollbar */
.tabstrip-control-container.vertical .tabstrip-collection-container .arrow-scroll-button.vertical {
  height: 15px;
  width: 155px;
}

/* Tab Strip Control - Tab Collection Container Menu item */
.menu-item .tabstrip-menu-item {
  padding: 4px !important;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  border:  1px solid;
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.tabstrip-collection .tabstrip {
  cursor: default;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  display: block;
  margin-bottom: 5px;
  list-style-type: none;
  min-height: 40px;
  width: 100%;
  /* use 100% so the tabs width will change when parent has a scrollbar */
}

.tabstrip-collection .tabstrip:last-of-type {
  margin-bottom: 0px;
}

.tabstrip-collection .tabstrip.active {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-right:  2px solid;
  border-right-color: rgba( 248, 248, 248 ,  1 );
  border-right-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.tabstrip-collection .icon-ellipsis {
  visibility: hidden;
}

.tabstrip-collection .tabstrip .header {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  padding-top: 12px;
  padding-left: 5px;
  padding-bottom: 12px;
  margin: 0px;
  float: left;
  white-space: nowrap;
  font-weight: normal;
  /* Begin disable user selection */
  -webkit-touch-callout: none;
  /* Disable Android and iOS callouts*/
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -ms-user-select: none;
  /* IE 10+ */
  -khtml-user-select: none;
  /* KHTML browsers (e.g. Konqueror) */
  -moz-user-select: none;
  /* Firefox all */
  -o-user-select: none;
  user-select: none;
  /* Likely future */
  /* End disable user selection*/
}

.tabstrip-collection .tabstrip.active .header {
  font-weight: bold;
}

.tabstrip-control-container.horizontal .tabstrip-collection .tabstrip .header {
  width: 87px;
}

.tabstrip-control-container.vertical .tabstrip-collection .tabstrip .header {
  width: 110px;
}

/* Tab Strip Control - sortable */
.tabstrip-collection.ui-sortable .tabstrip {
  cursor: pointer;
}

.tabstrip-collection.ui-sortable.disabled .tabstrip {
  cursor: default;
}

.tabstrip-sortable-helper {
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  border:  1px solid;
  border-color: rgba( 0, 90, 158 ,  1 ) !important;
  border-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 ) !important;
}

.tabstrip-collection.ui-sortable:not(.disabled) .tabstrip:hover {
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.tabstrip-collection.ui-sortable .tabstrip .icon-ellipsis {
  float: right;
  visibility: hidden;
  display: inline;
  height: 13px;
  width: 21px;
}

.tabstrip-collection.ui-sortable .tabstrip.active .icon-ellipsis {
  visibility: visible;
  color: rgba( 222, 236, 249 ,  1 );
  color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.tabstrip-collection.ui-sortable.disabled .tabstrip:not(.active) .icon-ellipsis {
  visibility: hidden;
}

.tabstrip-collection.ui-sortable:not(.disabled) .tabstrip:hover .icon-ellipsis {
  visibility: visible;
}

.tabstrip-collection.ui-sortable .tabstrip .header-gripper {
  float: left;
  margin-left: 3px;
  margin-top: 3px;
  visibility: hidden;
}

.tabstrip-collection.ui-sortable .tabstrip.active .header-gripper:hover {
  opacity: 1.0;
}

.tabstrip-collection.ui-sortable .tabstrip .header-gripper {
  width: 12px;
  height: 33px;
  overflow: hidden;
}

.tabstrip-collection.ui-sortable .tabstrip .header-gripper:before {
  position: relative;
  content: url("../../_content/icon-gripperDefault.png");
  left: 0;
  top: 0;
}

.tabstrip-collection.ui-sortable .tabstrip .header-gripper:hover {
  width: 12px;
  height: 33px;
  overflow: hidden;
}

.tabstrip-collection.ui-sortable .tabstrip .header-gripper:hover:before {
  position: relative;
  content: url("../../_content/icon-gripperHover.png");
  left: 0;
  top: 0;
}

.tabstrip-collection.ui-sortable .tabstrip.active .header-gripper {
  width: 12px;
  height: 33px;
  opacity: 0.5;
  overflow: hidden;
}

.tabstrip-collection.ui-sortable .tabstrip.active .header-gripper:before {
  position: relative;
  content: url("../../_content/icon-gripperHover.png");
  left: 0;
  top: 0;
}

.tabstrip-collection.ui-sortable:not(.disabled) .tabstrip:hover .header-gripper {
  visibility: visible;
}

.tabstrip-collection.ui-sortable .tabstrip.active .header-gripper {
  visibility: visible;
}

.tabstrip-collection.ui-sortable.disable .tabstrip.active .header-gripper {
  visibility: hidden;
}

.tabstrip-content-container {
  width: calc(100% - 154px);
  height: 250px;
  margin-left: 154px;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  padding: 0 20px 30px 20px;
}

.tabstrip-error-icon {
  float: right !important;
  margin-bottom: 9px !important;
  margin-right: 6px !important;
}

/* Arrow Scrollbar */
.arrow-scroll-button {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  user-select: none;
  position: absolute;
  cursor: pointer;
}

.arrow-scroll-button:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.arrow-scroll-button.pressed {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
  border:  1px solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.arrow-scroll-button.vertical {
  height: 15px;
  line-height: 15px;
  /* set to height to keep characters from expanding the height - only happens in Firefox */
  width: 160px;
}

.arrow-scroll-button.prev.vertical {
  top: 0px;
  /* position arrow on the top */
}

.arrow-scroll-button.next.vertical {
  bottom: 0px;
  /* position arrow on the bottom */
}

/* Place the arrow icon on top of the scroll button area */
.arrow-scroll-button.prev.vertical::before {
  content: "\25b2";
  /* arrow up */
  padding-left: 75px;
  position: absolute;
  top: -2px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.arrow-scroll-button.next.vertical::before {
  content: "\25bc";
  /* arrow down */
  padding-left: 75px;
  position: absolute;
  top: -2px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.arrow-scroll-button.horizontal {
  height: 42px;
  width: 18px;
}

.arrow-scroll-button.prev.horizontal {
  top: 0px;
  /* position arrow on the top left */
  left: 0px;
}

.arrow-scroll-button.next.horizontal {
  top: 0px;
  /* position arrow on the top right */
  right: 0px;
  padding-left: 0px;
}

.arrow-scroll-button.prev.horizontal::before {
  content: "\25c0";
  /* arrow left */
  padding-left: 0px;
  position: absolute;
  top: 28%;
  left: 2px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.arrow-scroll-button.next.horizontal::before {
  content: "\25b6";
  /* arrow right */
  padding-left: 0px;
  position: absolute;
  top: 28%;
  left: 0px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

/** Automatically converted from ColorPicker.css **/
.color-picker-palette {
  display: inline-block;
  /*Give the palette the size of its content*/
  background-color: white;
  box-shadow: rgba( 218, 218, 218 ,  1 ) 0 0 5px;
  box-shadow: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 ) 0 0 5px;
  border-radius: 2px;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  padding: 2px;
  list-style: none;
  /*Remove default bullet to all list item of this list*/
  cursor: pointer;
  margin: 0;
  /*Require to be close to the combo when openned*/
  position: fixed;
  /*This is required to be able to use the offset of the document to position the color picker palette*/
  z-index: 100;
  outline: none;
  /*By specs*/
}

/*
    We are floating, thus not having any body. We need to specify after the floating container a way
    to get back it's whole horizontal and vertical space. This is a way to do it.
*/
.color-picker-palette:after {
  content: "";
  display: table;
  clear: both;
}

.color-picker-palette-single-color {
  float: left;
  height: 20px;
  width: 20px;
  /*This need to be synchronized with ColorPaletteView constants*/
  margin: 1px;
  /*This need to be synchronized with ColorPaletteView constants*/
}

.color-picker-palette-single-color:hover {
  transform: scale(1.2);
}

/*
    Stop the floating to go on next line
*/
.color-picker-palette-single-color-last {
  clear: left;
}

/*
    Border between selected that is available only when not hover
*/
.color-picker-palette-single-color-selected {
  border: 1px solid rgba(0, 120, 212, 1);
  border: 1px solid var(--communication-background,rgba(0, 120, 212, 1));
}

/**
    Hide the border when hovering. Since we are using scaling up, the border wasn't pretty.
*/
.color-picker-palette-single-color-selected-inner:hover,
.color-picker-palette-single-color.color-picker-palette-single-color-selected:hover {
  border: none;
}

.color-picker-palette-single-color-selected-inner {
  height: 18px;
  /*2 pixel less than .color-picker-palette-single-color */
  width: 18px;
  /*2 pixel less than .color-picker-palette-single-color */
  border: 1px solid white;
}

.color-picker-palette-single-color-border {
  border:  1px solid;
  border-color: rgba( 218, 218, 218 ,  1 );
  border-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

/**
    We do not set the width and height in the CSS because we want it to be
    customizable in the TypeScript control
*/
.color-picker-combo {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  cursor: pointer;
}

.disabled .color-picker-combo {
  cursor: default;
}

/*The arrow down to open the combo*/
.color-picker-combo .bowtie-chevron-down-light {
  height: 100%;
  width: 30px;
  margin-top: 0;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
  float: right;
}

.disabled .color-picker-combo .bowtie-triangle-down {
  background: rgba( 244, 244, 244 ,  1 );
  background: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.disabled .color-picker-combo .bowtie-triangle-down::before {
  opacity: 0.5;
}

.tabs-contents-container .tab-content-container .tab-content-main {
  height: 100%;
}

.tabs-contents-container .tab-content-container .tab-content-main .common-message-area {
  height: 37px;
  overflow: auto;
  padding: 5px 0px 0px 20px;
}

.tabs-contents-container .tab-content-container .tab-content-main .common-settings-container {
  height: 100%;
  width: auto;
  overflow: auto;
  padding-left: 15px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.tabs-contents-container .tab-content-container .tab-content-main .common-message-area.visible + .common-settings-container {
  height: calc(100% - 37px);
}

/* Common Settings Container */
.common-settings-container .common-message-area {
  padding-top: 5px;
}

.common-settings-container .common-message-area error-message {
  margin-top: 0px !important;
}

.common-settings-container .main-header {
  font-size: 16px;
  font-weight: 300;
}

.common-settings-container h1.main-header {
  margin: 0;
}

.common-settings-container .main-description {
  padding-top: 12px;
}

.common-settings-container .section-header {
  font-weight: 600;
  padding-top: 12px;
  font-size: 13px;
}

.common-settings-container .section-header.master-detail-content-topmost {
  padding-top: 14px;
}

.common-settings-container .section-description {
  padding-top: 0px;
}

.common-settings-container .sections-area-container {
  overflow-y: auto;
}

.common-settings-container .section-checkbox {
  font-weight: 600;
  margin-bottom: 5px;
  padding-top: 12px;
  font-size: 13px;
}

.common-settings-container .section-checkbox-description {
  padding-top: 0px;
  margin-left: 21px;
}

.common-settings-container .label {
  font-size: 12px;
  font-weight: 400;
  display: inline-block;
}

.common-settings-container select {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.common-settings-container .error-input {
  border:  1px solid;
  border-color: rgba( 218, 10, 0 ,  1 );
  border-color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
  background: rgba( 249, 235, 235 ,  1 );
  background: rgba( var(--palette-accent1-light,249, 235, 235) ,  1 );
}

.common-settings-container .team-settings .teamsettings-radiolist input,
.common-settings-container .team-settings .teamsettings-checkbox input,
.common-settings-container .card-reordering .card-reordering-radiolist input {
  vertical-align: -2px;
}

.common-settings-container .team-settings .teamsettings-radiolist input[type=radio] {
  float: none;
}

.common-settings-container .team-settings .teamsettings-radiolist .bugs-behavior-info {
  margin-left: 4px;
}

.common-settings-container .board-badge-preview .badge-copy-container {
  font-size: 13px;
  align-self: flex-end;
  cursor: pointer;
  padding: 8px 7px 7px 7px;
}

.common-settings-container .board-badge-preview .badge-copy-container:hover {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.common-settings-container .board-badge-preview .badge-copy-container:active {
  background-color: rgba( 218, 218, 218 ,  1 );
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.common-settings-container .board-badge-preview .badge-text-wrapper {
  display: flex;
}

.common-settings-container .board-badge-preview .badge-text-wrapper .badge-text-field-container {
  flex: 1 100%;
}

.common-settings-container .board-badge-preview label {
  margin-top: 15px;
}

.common-settings-container .board-badge-preview .badge-settings-note {
  margin-top: 15px;
}

.common-settings-container .team-settings .teamsettings-radiolist label,
.common-settings-container .team-settings .teamsettings-checkbox label,
.common-settings-container .card-reordering .card-reordering-radiolist label,
.common-settings-container .badge-enabled-setting label,
.common-settings-container .board-badge-mode-radio-list label {
  padding-left: 2px;
  font-weight: 400;
  display: inline;
  color: rgba( 51, 51, 51 ,  1 ) !important;
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 ) !important;
}

.common-settings-container .card-reordering-radiolist .card-reordering-image {
  padding-left: 26px;
  padding-top: 5px;
  padding-bottom: 10px;
  cursor: pointer;
}

.common-settings-container .message-area-control.warning-message {
  border: none;
  background: none;
  padding: 3px 0px 10px 0px;
  font-size: 14px;
}

.common-settings-container .message-area-control .message-header {
  padding-left: 20px;
}

.common-settings-container .teamsettings-radiolist,
.common-settings-container .card-reordering-radiolist,
.common-settings-container .badge-enabled-setting,
.common-settings-container .board-badge-mode-radio-list {
  padding-left: 9px;
}

.common-settings-container .comboarea {
  max-width: 340px;
}

.team-settings .teamsettings-checkbox,
.team-settings .teamsettings-radiolist,
.common-settings-container .card-reordering-radiolist,
.common-settings-container .badge-enabled-setting,
.common-settings-container .board-badge-mode-radio-list {
  padding-top: 12px;
}

.team-settings .teamsettings-checkbox.teamsettings-backlogs-checkbox li {
  margin-bottom: 4px;
}

.team-settings .teamsettings-checkbox.teamsettings-backlogs-checkbox li label {
  display: inline-block;
}

.team-settings .teamsettings-checkbox.teamsettings-backlogs-checkbox li label div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.team-settings .teamsettings-checkbox.teamsettings-backlogs-checkbox li .bowtie-backlog.backlog-level {
  margin-right: 5px;
}

.team-settings .teamsettings-backlogs-checkbox input {
  height: 13px;
}

.team-setting-inline-div {
  display: inline;
}

.team-settings.test-settings .test-settings-option {
  position: relative;
  margin-bottom: 6px;
}

.team-settings.test-settings .test-plan-selection {
  padding-top: 5px;
}

.team-settings.test-settings .test-plan-selection input {
  width: 60%;
  margin-left: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
  border:  1px;
  border-color: rgba( 234, 234, 234 ,  1 ) solid;
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ) solid;
}

.team-settings.test-settings .test-plan-selection input:disabled {
  color: rgba( 234, 234, 234 ,  1 );
  color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.team-settings.test-settings .test-plan-selection .browse-test-plans {
  width: 20px;
  min-width: 20px;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-radius: 2px;
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  height: 20px;
  padding: 0;
}

.team-settings.test-settings .test-plan-selection .browse-test-plans:hover, .team-settings.test-settings .test-plan-selection .browse-test-plans:focus {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
}

.team-settings.test-settings .test-plan-selection .browse-test-plans:disabled {
  color: rgba( 166, 166, 166 ,  1 );
  color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.team-settings.test-settings .outcome-settings-container {
  margin: 10px 0 10px 10px;
}

.team-settings.test-settings .outcome-settings-container input {
  margin-right: 14px;
}

.team-settings.test-settings .outcome-settings-container label {
  display: inline-block;
}

.team-settings.test-settings .info-icon {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

/***************************
    Common Mixin
****************************/
/***************************
    Common Style
****************************/
.gutter-banner {
  text-align: center;
  padding: 0;
  margin-top: 144px;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.gutter-banner-container {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  background: rgba( 255, 255, 255 ,  1 );
  background: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  margin: 0 auto;
  text-align: center;
  margin: 0px 50px;
  padding: 40px;
  /* Prevent children from overlapping the container */
  min-width: 400px;
}

.gutter-banner-container > div {
  display: inline-block;
  text-align: center;
  padding: 0px 20px;
  vertical-align: middle;
}

div.gutter-banner-text {
  text-align: left;
}

.gutter-banner-text h2 {
  font-weight: lighter;
  font-size: 2em;
}

.image.image-vso-cloud {
  background: url("../../_content/vso-cloud.png") no-repeat;
  background-size: 100%;
  width: 300px;
  height: 110px;
}

.gutter-banner .image.image-vso-cloud {
  margin-top: 20px;
}