.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;
}

.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;
  background: url("../../_content/icon-gripperDefault.png") no-repeat 0 0 !important;
}

.tabstrip-collection.ui-sortable .tabstrip .header-gripper:hover {
  width: 12px;
  height: 33px;
  background: url("../../_content/icon-gripperHover.png") no-repeat 0 0 !important;
}

.tabstrip-collection.ui-sortable .tabstrip.active .header-gripper {
  width: 12px;
  height: 33px;
  opacity: 0.5;
  background: url("../../_content/icon-gripperHover.png") no-repeat 0 0 !important;
}

.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;
}

.newfeature-bubble-taskboard-image {
  background: url("../../_content/newfeaturesbubble_taskboard.png") center no-repeat;
  width: 404px;
  height: 301px;
}

.newfeature-bubble-addfield-image {
  background: url("../../_content/newfeaturesbubble_addfield.png") center no-repeat;
  background-size: contain;
  width: 391px;
  height: 390px;
}

/*********************/
/* Kanban QuickStart */
/*********************/
.kanban-add-item-icon {
  color: rgba( 16, 124, 16 ,  1 );
  color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
}

.agile-board-filter-area {
  margin: 0px 0px 0px 10px;
  padding: 0px 20px 0px 10px;
  overflow: auto;
}

.agile-board-filter-area .filter-control .field-filters-container {
  /*
             * max-width for an item if scroll bar is visible
             */
  /*
             * max-width for an item if scroll-bar is not visible
             */
  /*
             * This is needed to show ellipsis for longer display values in Iteration/WorkItems/Tags Field Filters
             */
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter {
  display: inline-block;
  width: 200px;
  margin: 0px 12px 12px 0px;
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo > div.wrap > input[type=text] {
  padding: 0px 0px 2px 2px;
  background: rgba( 244, 244, 244 ,  1 );
  background: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo.has-selected-values {
  background: rgba( 199, 224, 244 ,  1 );
  background: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo.has-selected-values > div.wrap > input[type=text] {
  background: rgba( 199, 224, 244 ,  1 );
  background: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo {
  background: rgba( 244, 244, 244 ,  1 );
  background: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  border-color: rgba( 244, 244, 244 ,  1 );
  border-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  height: 24px;
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo input::-webkit-input-placeholder {
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo input:-moz-placeholder {
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  opacity: 1;
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo input::-moz-placeholder {
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  opacity: 1;
}

.agile-board-filter-area .filter-control .field-filters-container .field-filter .combo input:-ms-input-placeholder {
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value .logical-operator-selection {
  padding: 10px 0px 10px 0px;
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value .logical-operator-selection .logical-operator {
  text-decoration: none;
  padding: 0px 20px 0px 10px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 1);
  border: 1px solid var(--background-color,rgba(255, 255, 255, 1));
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value .logical-operator-selection .logical-operator.selected {
  text-decoration: underline;
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  font-weight: bold;
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value .logical-operator-selection .logical-operator.highlight {
  border: 1px dotted rgba(0, 90, 158, 1);
  border: 1px dotted var(--communication-foreground,rgba(0, 90, 158, 1));
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value .logical-operator-selection .logical-operator:hover {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view > .items > li.selected.no-items-message {
  background: none;
  border: 1px solid rgba(255, 255, 255, 1);
  border: 1px solid var(--background-color,rgba(255, 255, 255, 1));
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value > .items > li input, .agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value > .items > li .item-content {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value.scroll > .items > li .item-content {
  max-width: 145px;
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value > .items > li .item-content {
  width: 100%;
  max-width: 160px;
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view > .items > .field-filter-item .item-content div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.agile-board-filter-area .filter-control .field-filters-container .virtualizing-list-view.multi-value > .items > li .item-content .identity-view-control > span {
  right: inherit;
  left: 24px;
}

.agile-board-filter-area .filter-control .field-filters-container td {
  padding-top: 10px;
}

.agile-board-filter-area .filter-control .field-filters-container .item-content {
  cursor: pointer !important;
}

.agile-board-filter-area .filter-control .field-filters-container .clearall-section {
  vertical-align: top;
  display: inline-block;
  margin: 0px 24px 12px 0px;
  padding: 2px 0px 0px 0px;
}

.backlogs-right-pane-pivot-filter {
  float: left;
}

.backlogs-right-pane-pivot-filter .pivot-filter {
  height: 34px;
  line-height: 34px;
}

.wit-full-screen-menubar .menu-item.hover.icon-only {
  outline: none;
}

.full-screen-mode {
  /*
        Product Backlog
     */
  /*
        Iteration backlog  
     */
}

.full-screen-mode .small-chart-group-container,
.full-screen-mode .hub-pivot .views {
  display: none !important;
}

.full-screen-mode .right-hub-content {
  top: 2px !important;
}

.full-screen-mode .mapping-pane-title,
.full-screen-mode .backlogs-tool-panel-header .capacity-pane-title {
  font-size: 16px;
}

.full-screen-mode .backlogs-tool-panel-content {
  top: 36px;
}

.full-screen-mode .backlogs-tool-panel-header .hub-pivot {
  top: 2px !important;
}

.full-screen-mode .sprint-title-right-container {
  display: none !important;
}

/*
This is the CSS file that holds common styles for the agile area
*/
/* ==============================================================*/
/* General styles used across multiple agile pages*/
/* ==============================================================*/
.hub-title h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-weight: 200;
  font-size: 18px;
  margin-top: 0px;
}

.message-area {
  margin: 10px;
  width: 470px;
  padding: 5px 8px 5px 8px;
  float: left;
}

/*
 * Used to give feedback to the end user that an element is clickable.
 * Used in conjunction with jQuery click() handlers.
 */
.clickable {
  cursor: pointer;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}

.wordwrap {
  overflow: hidden;
  word-wrap: break-word;
}

/* ===========================================================================*/
/* Agile Page (Board, Backlog, Contribution Tab) default splitter panes width */
/* ===========================================================================*/
.backlog-view .hub-splitter.splitter.horizontal > .leftPane,
.board-view .hub-splitter.splitter.horizontal > .leftPane {
  width: 200px;
}

.backlog-view .hub-splitter.splitter.horizontal > .rightPane,
.backlog-view .hub-splitter.splitter.horizontal > .handleBar,
.board-view .hub-splitter.splitter.horizontal > .rightPane,
.board-view .hub-splitter.splitter.horizontal > .handleBar {
  left: 200px;
}

/* ===========================================================================*/
/* Add Item */
/* ===========================================================================*/
.board-add-card {
  float: left;
  height: 30px;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border:  solid 1px;
  border-color: rgba( 255, 255, 255 ,  1 );
  border-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  cursor: pointer;
  align-content: center;
  font-family: "Segoe UI VSS (Regular)","Segoe UI","-apple-system",BlinkMacSystemFont,Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 12px;
  font-weight: normal;
  padding: 6px 0;
  margin-top: 5px;
}

.board-add-card .text {
  margin-left: 4px;
  line-height: 12px;
  vertical-align: top;
}

.add-item-icon.work-item-color {
  width: 6px;
  height: 16px;
  position: relative;
  left: 5px;
}

.add-item-icon-element.icon {
  margin-right: 4px !important;
  margin-left: 3px !important;
}

.dummyParent {
  border-left-color: rgba( 166, 166, 166 ,  1 );
  border-left-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

/* ReorderItemHandler support */
.reorderDragStarted {
  visibility: hidden;
}

.reorderDragStarted.reorderDragOutside {
  visibility: visible;
}

.sortable-helper-hidden {
  display: none !important;
}

/* Project navigation */
#project-nav {
  font-size: large;
  padding-left: 0;
}

#project-nav li {
  display: inline;
  margin-left: 10px;
  color: rgba( 166, 166, 166 ,  1 );
  color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

#project-nav a:visited {
  text-decoration: none;
}

#project-nav a:hover {
  text-decoration: underline;
  color: rgba( 166, 166, 166 ,  1 );
  color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

/* Used to highlight the cell we're moving to. */
.dragHover {
  background-color: rgba( 223, 246, 221 ,  1 );
  background-color: rgba( var(--palette-accent2-light,223, 246, 221) ,  1 );
}

div.editIcon {
  width: 30px;
  height: 30px;
  position: absolute;
  border-style: solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-width: 1px;
  top: 2px;
  right: 3px;
  display: none;
  background-color: rgba( 239, 246, 252 ,  1 ) !important;
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 ) !important;
}

.editIcon {
  width: 30px;
  height: 30px;
  background: url("../../_content/tfs-icons.png") no-repeat -1641px -9px !important;
}

/* ==============================================================*/
/* Backlog */
/* ==============================================================*/
/* Note: .hidden was being overriden by sibling class styles so we created this to scope the !important to our features */
.agile-important-hidden {
  display: none !important;
}

.backlog-info li {
  list-style-type: none;
}

.backlog-loading-overlay {
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.main-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.flex-container {
  display: -webkit-box;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.team-iteration-view {
  overflow: auto;
}

.backlog-pivot-filter .filter,
.backlog-filter .filter {
  display: inline-block;
  margin-right: 4px;
  width: 6px;
  height: 15px;
  vertical-align: bottom;
}

.team-backlog-view {
  padding-top: 8px;
  padding-bottom: 10px;
  overflow: hidden;
}

.team-backlog-view .node-content,
.team-iteration-view .node-content {
  padding-left: 16px !important;
}

.team-iteration-view .folder .tree-children .node-content {
  padding-left: 28px !important;
}

.team-backlog-view .node-content .text,
.team-iteration-view .node-content .text {
  margin-right: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.team-backlog-view .node-content .text {
  margin-left: 4px;
}

.team-backlog-view .node-content .backlogs-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-left: 16px;
}

.team-backlog-view .team-backlog-view-icon {
  position: absolute;
  top: 6px;
  left: 14px;
}

/*
   When hovering over a tree view node ensure the background color of 
   the div contained in it is updated with the drag hover color and 
   the text color of the links contained in the div are updated to the foreground color.
   This is most important for when hovering over the selected item.
*/
.team-iteration-view.tree-view .node.dragHover > a > div.node-content,
.team-backlog-view.tree-view .node.dragHover > a > div.node-content {
  background-color: rgba( 223, 246, 221 ,  1 );
  background-color: rgba( var(--palette-accent2-light,223, 246, 221) ,  1 );
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.team-backlog-view .preview .node-content .text:after {
  content: " * ";
}

.backlog-nav-root {
  text-transform: uppercase;
}

.add-panel {
  padding: 6px 10px;
  margin-right: 10px;
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  min-width: 350px;
  max-width: 600px;
}

.add-panel-row {
  height: 2.2em;
}

.add-panel-buttoncell {
  vertical-align: top;
}

.add-panel-table,
.add-panel-control {
  border-spacing: 0px;
  width: 100%;
  border: none;
}

.add-panel-labelcell {
  width: 40px;
}

.add-panel-label {
  white-space: nowrap;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.add-panel-label label {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.add-panel-controlcell {
  width: 50%;
}

.add-panel-button {
  float: right;
  margin: 0;
  height: 24px;
}

.add-panel-full-width-row-button .add-panel-button:focus {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--communication-background,rgba(0, 120, 212, 1));
}

.add-panel-wit-type-single {
  font-weight: bold;
  margin-left: 4px;
}

.add-panel-close-button {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  float: right;
  right: 6px;
  cursor: pointer;
}

.addpanel-full-width-row {
  width: 100%;
  border-spacing: 0px;
  border: none;
}

.add-panel-full-width-row-button {
  width: 40px;
  padding: 0 0 0 6px;
  white-space: nowrap;
}

.backlog-content-view {
  -webkit-box-flex: 1 1 0%;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  /* Chrome fix - Chrome incorrectly sets a min-height/width it will not go lower than
     * See: https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
     * CodePen with bug: https://codepen.io/philipwalton/pen/MYbrrr
     * CodePen with min-width: https://codepen.io/anon/pen/VrKGWa
     */
  min-height: 0;
  min-width: 0;
}

.backlog-header {
  margin-bottom: 5px;
  -webkit-box-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.backlog-header .hub-pivot-toolbar .toggle-filter-bar {
  position: absolute;
  right: 0px;
}

.backlog-header .panel-region {
  padding: 0 10px 0 10px;
}

.backlogs-common-menubar,
.taskboard-menubar,
.capacity-view-menubar {
  float: left;
  padding: 0px;
}

.backlogs-common-menubar > li,
.taskboard-menubar > li,
.capacity-view-menubar > li {
  margin-top: 6px !important;
}

.backlogs-common-menubar .menu-item.hover.icon-only,
.taskboard-menubar .menu-item.hover.icon-only,
.capacity-view-menubar .menu-item.hover.icon-only {
  outline: none;
}

.forecasting-input-container {
  margin-top: 5px;
  padding: 2px 6px 2px 6px;
  background-color: rgba( 0, 90, 158 ,  1 );
  background-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  /* The below styles are implemented so that the width of the Velocity Input matches the Add Panel. This is because the behaviour of
       IE 8/9 and Firefox/Chrome differes when there is a border involved (note, that Add Panel has a border). IE 8/9 ignore the border 
       when calculating width, Firefox/Chrome do not. */
  min-width: 350px;
  max-width: 600px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: rgba( 0, 90, 158 ,  1 );
  border-left-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.forecasting-input-control-text {
  border:  1px solid;
  border-color: rgba( 0, 90, 158 ,  1 );
  border-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.forecasting-input-control-text-hover {
  cursor: pointer;
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
  border:  1px solid;
  border-color: rgba( 255, 255, 255 ,  1 );
  border-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.forecasting-input-control {
  font-weight: bold;
  min-width: 1.9em;
}

/* Hardcoding the width for the forecasting input control to make room for the input control, see WITX Bug $legacyDarkPurple */
.backlog-header #velocityInput.forecasting-input-control,
.backlog-header #velocityInput.forecasting-input-control input {
  min-width: 100px;
}

.forecasting-input-control input {
  height: 1.9em;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.forecasting-input-control-table {
  height: 2.2em;
}

.forecasting-input-container.disabled tr {
  display: none;
}

.forecasting-input-control-disabled-message-row {
  display: none;
}

.forecasting-input-container.disabled .forecasting-input-control-disabled-message-row {
  display: table-row;
}

.add-panel.disabled .combo > div.wrap > input.disabled {
  background-color: rgba( 218, 218, 218 ,  1 );
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
  color: rgba( 0, 69, 120 ,  1 );
  color: rgba( var(--palette-primary-shade-30,0, 69, 120) ,  1 );
}

.add-panel.disabled .combo {
  background-color: rgba( 218, 218, 218 ,  1 );
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.combo.add-panel-input.invalid > div.wrap > input.disabled[type=text] {
  width: 100%;
}

.forecasting-input-control-table label {
  margin-right: 5px;
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.backlog-excluded-effort {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.backlog-header .grid-status-message,
.tfs-host-notifications.message-area-control.tfs-missing-proposed-state-mapping-for-bugs-notification {
  margin-left: 10px;
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  width: auto;
}

.agile-portfolio-management-notification {
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
}

.backlog .grid-cell {
  /* We start with a 4px padding. Any time we add bordering to the grid-cell or grid-row we reduce
        the padding by the width of the border to ensure the content doesn't shift position. */
  border-style: none;
  padding: 4px;
}

.backlog .grid-cell .bowtie-status-info-outline {
  margin-left: 0;
  vertical-align: bottom;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.backlog .grid-cell .bowtie-status-info-outline.no-text {
  margin-left: 5px;
}

.backlog.grid .grid-gutter-row.saving-row-gutter {
  margin-top: 5px;
}

.backlog.grid .grid-row-normal.grid-row-insertion-highlight-top {
  border-top: 1px solid rgba(0, 0, 0, .55);
  border-top: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
  border-top-color: rgba( 16, 124, 16 ,  1 );
  border-top-color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
  padding-top: 0;
  /* We need this to be !important to override the high-contrast row highlighting */
  border-top-style: solid !important;
  border-bottom: 1px solid transparent;
}

.backlog.grid .grid-row-normal.grid-row-insertion-highlight-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  border-bottom: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
  border-bottom-color: rgba( 16, 124, 16 ,  1 );
  border-bottom-color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
  /* We need this to be !important to override the high-contrast row highlighting */
  border-bottom-style: solid !important;
}

.productbacklog-grid-results {
  height: 100%;
}

.productbacklog-grid-results.has-grid-message-area .grid-header {
  top: 2.4em;
}

.productbacklog-grid-results.backlog.has-grid-message-area .grid-canvas {
  top: 4.6em;
}

.productbacklog-grid-results.backlog.has-grid-message-area .message-area-control.info-message {
  margin-left: 9px;
  margin-right: 9px;
}

.backlog .grid-row-normal > .grid-cell > .icon-add-thin,
.backlog .grid-row-normal > .grid-cell > .backlog-decompose-button {
  display: none;
}

.backlog .grid-row-normal.grid-row-current > .grid-cell > .icon-add-thin,
.backlog .grid-row:hover > .grid-cell > .icon-add-thin,
.backlog .grid-row-normal.grid-row-current > .grid-cell > .backlog-decompose-button,
.backlog .grid-row:hover > .grid-cell > .backlog-decompose-button {
  display: inline;
  vertical-align: text-top;
}

.forecasting-sprint-line-single > .grid-cell {
  border-top:  1px solid;
  border-top-color: rgba( 0, 90, 158 ,  1 );
  border-top-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  padding-top: 3px;
}

.sprint-line-single > .grid-cell {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 0, 90, 158 ,  1 );
  border-bottom-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  padding-bottom: 3px;
}

.sprint-line-double > .grid-cell {
  border-bottom:  2px solid;
  border-bottom-color: rgba( 0, 90, 158 ,  1 );
  border-bottom-color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  padding-bottom: 2px;
}

.drag-drop-insert-before {
  border-color: transparent;
}

.drag-drop-insert-before > .grid-cell {
  border-top: 1px solid rgba(0, 0, 0, .55);
  border-top: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding-top: 3px;
}

/* The combination of the next two styles ensures that a full drop line is displayed with .full,
    but a bottom border is not displayed when dropping as a child of a node (where the first cell,
    and the order cell, which many times are the same but not always, should not have a border) */
.drag-drop-insert-after > .grid-cell, .drag-drop-insert-after.full > .grid-cell:first-child, .drag-drop-insert-after.full > .grid-cell.order-cell {
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  border-bottom: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding-bottom: 3px;
}

.drag-drop-insert-after > .grid-cell:first-child, .drag-drop-insert-after > .grid-cell.order-cell {
  border-bottom-style: none;
  padding-bottom: 4px;
}

.drag-drop-new-sibling > .grid-cell.order-cell {
  border-right: 1px solid rgba(0, 0, 0, .55);
  border-right: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.drag-drop-new-parent > .grid-cell.order-cell {
  background-color: rgba( 199, 224, 244 ,  1 );
  background-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  border-bottom: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding-bottom: 3px;
}

.drag-tile {
  height: 60px;
  width: 88px;
  position: absolute;
  font-size: 7pt;
  cursor: default;
  margin: 6px 6px 6px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  padding: 3px 6px 3px 3px;
  opacity: 0.7;
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.drag-tile-item-count {
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
}

.drag-tile-item-type {
  text-overflow: ellipsis;
  font-size: 12px;
  text-align: center;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.new-workitem-row {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.help-link {
  display: inline;
}

/* Used to color the text in the forecast column. */
.forecast-column-contents {
  font-weight: bold;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

/* ==============================================================*/
/*sprint planning styles*/
/* ==============================================================*/
.sprint-title {
  float: left;
  max-width: 400px;
}

.sprint-title-right-container {
  position: absolute;
  top: 0px;
  /* compensate for padding in hub-title */
  right: 0;
}

.sprint-dates-working-days {
  float: left;
}

.sprint-date {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  padding: 0 20px;
  outline: none;
  cursor: pointer;
  display: block;
  margin-top: 1px;
}

.sprint-date:hover, .sprint-date:active {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

.sprint-date:focus {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  outline: 1px solid rgba( 0, 0, 0 ,  1 );
  outline: 1px solid rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.sprint-working-days {
  padding-left: 20px;
  padding-right: 20px;
  text-transform: none;
  text-align: right;
}

.iteration-main-content.iteration-backlog {
  display: -webkit-box;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.iteration-main-content, .backlogs-contributed-tab-content, .contributed-tab-content-container {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
}

.capacity-scrollable {
  overflow: auto;
  position: absolute;
  bottom: 0px;
  top: 0px;
  left: 16px;
  right: 0px;
  margin-top: 5px;
}

.capacity-display-name {
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-cell {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  vertical-align: bottom;
  white-space: nowrap;
  padding: 0 6px 0 6px;
}

.capacity-clear-row {
  height: 6px;
}

.capacity-days-off-row-header {
  min-width: 80px;
  /* Calculated using size which fits this item. These are assigned a pixel value as it gets distorted in case of Empty message. */
}

.activity-row-header {
  min-width: 120px;
  /* Calculated using size which fits this item. These are assigned a pixel value as it gets distorted in case of Empty message. */
}

.capacity-per-day-row-header {
  min-width: 154px;
  /* Calculated using size which fits this item. These are assigned a pixel value as it gets distorted in case of Empty message. */
}

.capacity-row-header {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  text-align: right;
}

.capacity-input-row td,
.capacity-input-team-row td {
  padding-left: 6px;
}

.capacity-activity-cell {
  width: 120px;
}

.capacity-main-content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.capacity-message-area {
  float: left;
  width: auto;
}

.capacity-pane-container {
  /* We default to display none and then toggle display based on user settings to avoid showing anything visually before
        fully rendering. If we don't we end up seeing a bar across the screen prior to rendering. Additionally when the 
        user settings have the capacity pane switched off we see a bar on the screen permanently */
  display: none;
}

.capacity-pane {
  border-top:  1px solid;
  border-top-color: rgba( 200, 200, 200 ,  1 );
  border-top-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  float: right;
  height: 100%;
  width: 100%;
  overflow: auto;
  padding-top: 4px;
}

.capacity-expand-collapse {
  background-repeat: no-repeat;
  background-position: center;
  width: 19px;
  height: 19px;
  cursor: pointer;
}

.grouped-progress-control {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.capacity-pane-progress-group-heading-table {
  width: 100%;
  margin: 0 5px 0 5px;
}

.capacity-pane-progress-expand-collapse-cell {
  vertical-align: top;
  width: 1%;
  /* allows the heading cell to expand to fit */
}

.capacity-pane-progress-group-heading {
  font-weight: bold;
  cursor: pointer;
}

.capacity-pane-progress-control {
  padding: 5px;
  overflow: hidden;
}

.assigned-to-grouped-progress-control .capacity-pane-progress-control .identity-view-control {
  margin-bottom: 2px;
}

.capacity-pane-progress-group {
  margin-bottom: 10px;
}

.capacity-days-off {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  display: inline-block;
  padding-right: 5px;
  white-space: nowrap;
}

.capacity-days-off:hover, .capacity-days-off:focus, .capacity-days-off:active {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  text-decoration: underline;
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  display: inline-block;
  padding-right: 5px;
  white-space: nowrap;
}

.activity-grouped-progress-control {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 218, 218, 218 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.activity-grouped-progress-control.collapsed {
  border-bottom: none;
}

.team-capacity-control {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 218, 218, 218 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.team-capacity-control.collapsed {
  border-bottom: none;
}

.days-off-dialog-dates-table-container {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 5px;
}

.days-off-dialog-dates-table-container > table {
  width: 100%;
}

.days-off-dialog-icon-header-cell {
  width: 1px;
}

.days-off-dialog-date-header-cell {
  width: 33%;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  white-space: nowrap;
}

.days-off-dialog-days-off-header-cell {
  width: 33%;
  text-align: right;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  white-space: nowrap;
}

.days-off-dialog-link-container {
  padding-top: 10px;
}

.sprint-set-dates-button {
  font-weight: 200;
}

.agile-url-link-button {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  outline: none;
  cursor: pointer;
  display: inline-block;
}

.agile-url-link-button:hover, .agile-url-link-button:active, .agile-url-link-button:focus {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  text-decoration: underline;
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
  outline: none;
  cursor: pointer;
  display: inline-block;
}

.days-off-dialog-button-span {
  margin-left: 3px;
}

.days-off-dialog-link {
  padding-left: 3px;
}

.days-off-dialog-link-container .icon-add {
  margin: 0 4px 0 0;
}

.days-off-dialog-days-off-count {
  text-align: right;
}

.days-off-dialog-total-days-off-container {
  text-align: right;
  float: right;
  font-weight: bold;
}

.days-off-dialog-total-days-off-text {
  display: inline-block;
}

.days-off-dialog-total-days-off-count {
  padding-left: 3px;
  min-width: 30px;
  display: inline-block;
}

button.delete-row {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: initial;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  display: inline-block;
}

/* ==============================================================*/
/*save discard control styles*/
/* ==============================================================*/
.save-discard-save-button {
  margin-right: 10px;
}

.save-discard-control {
  padding-top: 10px;
  padding-bottom: 10px;
  float: left;
}

.hub-view.board-view .hub-title,
.hub-view.backlog-view .hub-title {
  padding-right: 300px;
}

/* ==============================================================*/
/*chart control styles*/
/* ==============================================================*/
/*
a Class for the small chart container 
*/
.small-chart-container {
  height: 40px;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.small-chart-group-container {
  position: absolute;
  top: 5px;
  /* compensate for padding in hub-title */
  right: 0;
}

.sprint-title-right-container .small-chart-container {
  float: right;
}

.small-chart-group-container .small-chart-container {
  float: left;
}

.sprint-dates-container {
  display: flex;
}

.edit-large-chart-button {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/*
a class for large chart container
*/
.large-chart-container {
  overflow: hidden;
  /*prevent scroll bars*/
}

.large-chart-container-menubar {
  position: absolute;
  right: 10px;
}

.large-chart-bubble-target {
  cursor: pointer;
  color: #0078d4;
  float: left;
}

.large-chart-bubble-container {
  font-size: 14px;
}

.large-chart-bubble-header {
  font-weight: bold;
}

.large-chart-bubble-entry {
  font-style: italic;
}

/*
for cumulative flow edit settings container
*/
.cumulative-flow-edit-settings .cfd-datePicker-container {
  padding: 0px;
}

.cumulative-flow-edit-settings .cfd-datePicker-container label {
  display: inline-block;
  margin: 0px 8px 0px 0px;
  vertical-align: bottom;
}

.cumulative-flow-edit-settings .cfd-datePicker-container .combo.date-time {
  display: inline-block;
  width: 125px;
  vertical-align: -6px;
  padding-left: 5px;
  margin-top: 10px;
}

.cumulative-flow-edit-settings .cfd-datePicker-container input.error-input {
  background: rgba( 249, 235, 235 ,  1 ) !important;
  background: rgba( var(--palette-accent1-light,249, 235, 235) ,  1 ) !important;
  /*override date picker invalid input*/
}

.cumulative-flow-edit-settings .cfd-checkbox-list {
  padding-left: 0px;
  overflow: hidden;
}

.cumulative-flow-edit-settings .cfd-checkbox-list li {
  white-space: pre-wrap;
}

.cumulative-flow-edit-settings .cfd-checkbox-list input {
  vertical-align: -2px;
  margin: 0px;
}

.cumulative-flow-edit-settings .cfd-checkbox-list label {
  margin-left: 8px;
  display: inline;
}

.cumulative-flow-edit-settings .cfd-datePicker-container label,
.cumulative-flow-edit-settings .cfd-checkbox-list label {
  word-break: break-word;
  word-wrap: break-word;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

/* Displays an operation in progress indicator on a given container */
.in-progress-container {
  /* TODO (bamodio): Get rid of this style and use the JS StatusIndicator control instead, this will improve maintainability */
  background-image: url("../../_content/big-progress.gif");
  background-position: center;
  background-repeat: no-repeat;
}

.in-progress-container-small {
  background-image: url("../../_content/big-progress.gif");
  background-size: 24px 24px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sprint Dates control */
.sprint-date.dates-set:hover {
  color: rgba(0, 120, 212, 1);
  color: var(--communication-background,rgba(0, 120, 212, 1));
  cursor: pointer;
}

/* Backlogs tool panel */
.backlogs-default-tool-panel-container,
.product-backlog-mapping-panel {
  height: 100%;
}

.backlogs-default-tool-panel-container .grid-row-normal,
.product-backlog-mapping-panel .grid-row-normal {
  border-style: none;
}

.mapping-panel-portfolio-row-drop-active {
  background-color: rgba( 223, 246, 221 ,  1 );
  background-color: rgba( var(--palette-accent2-light,223, 246, 221) ,  1 );
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.backlogs-tool-panel-header .hub-pivot {
  position: absolute;
  top: 45px;
}

.backlogs-tool-panel-content {
  position: absolute;
  top: 79px;
  left: 0;
  right: 0;
  bottom: 0;
}

.mapping-pane-title,
.backlogs-tool-panel-header .capacity-pane-title {
  left: 0;
  right: 0;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: "Segoe UI VSS (Regular)","Segoe UI","-apple-system",BlinkMacSystemFont,Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-weight: lighter;
  font-size: 18px;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.backlogs-tool-panel-content .toolbar {
  margin-bottom: 6px;
}

.product-backlog-mapping-panel-status-indicator {
  height: 100%;
}

.control-busy-overlay .status-indicator.center td,
.tab-control-overlay .status-indicator.center td {
  vertical-align: inherit;
}

.backlog-page-title-area {
  display: inline-block;
  width: 100%;
}

.backlog-page-title-area h1 {
  font-weight: 200;
  font-size: 18px;
  margin-top: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-preview-notification {
  display: inline-block;
}

.board-page-title-area {
  display: inline-block;
}

/* Default the mapping panel's width to 300px */
.backlog-view .splitter.horizontal.right-fix:not(.no-split) > .rightPane {
  width: 300px;
}

.backlog-view .splitter.horizontal.right-fix:not(.no-split) > .handleBar {
  right: 300px;
}

.backlog-view .splitter.horizontal.right-fix:not(.no-split) > .leftPane {
  width: auto;
  right: 300px;
}

/* ==============================================================*/
/* Style section for card style customization*/
/* ==============================================================*/
.rule-list-template-container {
  width: 530px;
}

.rules-container {
  min-height: 100px;
  overflow-y: auto;
  position: absolute;
  bottom: 0px;
  top: 0px;
  right: 0px;
  left: 0px;
  padding-right: 30px;
  padding-bottom: 5px;
}

.compact-rule-container {
  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 );
  font-weight: normal;
  font-size: 12px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  height: 38px;
  margin-top: 5px;
  position: relative;
}

.compact-rule-container: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( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  font-weight: normal;
  font-size: 12px;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.compact-rule-container:focus {
  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( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  font-weight: normal;
  font-size: 12px;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
  outline: none;
}

.compact-rule-container:hover .icon-ellipsis,
.compact-rule-container:focus .icon-ellipsis,
.compact-rule-container .rule-switch:focus ~ .icon-ellipsis,
.compact-rule-container .icon-ellipsis:focus,
.compact-rule-container.active .icon-ellipsis,
.compact-rule-container .icon-ellipsis.focus {
  opacity: 1;
  z-index: 10;
}

.compact-rule-container bowtie-status-error {
  position: absolute;
  bottom: 12px;
  right: 8px;
}

.compact-rule-container.active {
  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 );
  font-size: 12px;
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.compact-rule-container.active .rule-name,
.compact-rule-container.active .rule-state {
  font-weight: bold;
}

.compact-rule-container .rule-summary {
  position: absolute;
  right: 0px;
}

.compact-rule-container {
  cursor: pointer;
}

.compact-rule-container .rule-color {
  display: inline-block;
  height: 20px;
  width: 80px;
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom: 8px;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  text-align: center;
  vertical-align: middle;
}

.compact-rule-container .rule-color.bold {
  font-weight: bold;
}

.compact-rule-container .rule-color.italic {
  font-style: italic;
}

.compact-rule-container .rule-color.underline {
  text-decoration: underline;
}

.compact-rule-container:hover .rule-color {
  border:  1px solid;
  border-color: rgba( 255, 255, 255 ,  1 );
  border-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.compact-rule-container .rule-switch,
.compact-rule-container .rule-state,
.compact-rule-container .icon-ellipsis {
  display: inline-block;
  vertical-align: top;
}

.tab-content .compact-rule-container .rule-switch {
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 10px;
  padding-right: 10px;
}

.compact-rule-container .rule-state {
  padding: 11px 15px 11px 0px;
  margin-right: 42px;
}

.compact-rule-container .icon-ellipsis {
  opacity: 0;
  cursor: pointer;
  margin-right: 10px;
}

.compact-rule-container .menu-options-list {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  font-weight: normal;
  font-size: 12px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  position: absolute;
  right: -1px;
  top: 13px;
  width: 120px;
  cursor: pointer;
  z-index: 20;
}

.compact-rule-container .menu-options-list div {
  display: block;
  padding: 10px 20px 5px 10px;
}

.compact-rule-container .menu-options-list div.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.compact-rule-container .menu-options-list div:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.rule-list-template-container.ui-sortable .compact-rule-container .gripper {
  float: left;
  margin-left: 3px;
  margin-top: 2px;
  visibility: hidden;
}

.rule-list-template-container.ui-sortable .compact-rule-container.active .gripper:hover {
  opacity: 1.0;
}

.rule-list-template-container.ui-sortable .compact-rule-container .gripper {
  width: 12px;
  height: 32px;
  background: url("../../_content/icon-gripperDefault.png") no-repeat 0 0 !important;
}

.rule-list-template-container.ui-sortable .compact-rule-container.active .gripper {
  width: 12px;
  height: 32px;
  opacity: 0.5;
  background: url("../../_content/icon-gripperHover.png") no-repeat 0 0 !important;
}

.rule-list-template-container.ui-sortable .compact-rule-container .gripper:hover {
  width: 12px;
  height: 32px;
  background: url("../../_content/icon-gripperHover.png") no-repeat 0 0 !important;
}

.rule-list-template-container.ui-sortable .compact-rule-container:hover .gripper,
.rule-list-template-container.ui-sortable .compact-rule-container.active .gripper,
.rule-list-template-container.ui-sortable .rule-container.style-rule-sortable-helper .compact-rule-container .gripper {
  visibility: visible;
}

.rule-form-container {
  border:  1px solid;
  border-color: rgba( 222, 236, 249 ,  1 );
  border-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
  padding-top: 5px;
  padding-bottom: 35px;
  padding-left: 20px;
  border-top: none;
}

.rule-form-container .message-container {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 60px;
}

.rule-form-container .message-container .message-area-control {
  white-space: nowrap;
  display: block;
  padding: 3px 0px 0px 3px;
}

.rule-form-container .style-rule-criteria {
  padding-right: 20px;
  padding-top: 10px;
}

.rule-form-container .style-rule-criteria .icon.icon-delete {
  color: rgba( 168, 0, 0 ,  1 );
  color: rgba( var(--palette-accent1-dark,168, 0, 0) ,  1 );
  font-size: 16px;
}

.rule-form-container .style-rule-criteria .icon.icon-add-thin {
  color: rgba( 16, 124, 16 ,  1 );
  color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
  font-size: 16px;
}

.rule-form-container .style-rule-criteria .add-remove {
  position: relative;
  vertical-align: middle;
}

.rule-form-container .name-section .input-container {
  margin-top: 10px;
  padding: 0;
}

.rule-form-container .name-section input[type='text'] {
  outline: none;
}

.rule-form-container .name-section input.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 );
}

.rule-form-container .name-section .input-wrap {
  margin-left: 10px;
  display: inline-block;
}

.rule-form-container .clauses .operator {
  width: 20%;
}

.rule-form-container .clause.clause-row .add-remove a.disabled,
.rule-form-container .add-clause.clause-row .add-remove.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.rule-form-color {
  height: 20px;
  width: 98px;
  display: inline-block;
  vertical-align: middle;
}

.style-section .rule-form-color {
  padding-right: 0px;
}

.style-section .rule-form-color .rule-form-color-drop-container {
  width: 30px;
  height: 100%;
  background-color: white;
  float: right;
}

.style-section .rule-form-color .rule-form-color-drop-container .rule-form-color-drop {
  padding-top: 8px;
  padding-left: 8px;
}

.tag-fields-section .tag-color-picker {
  border-collapse: collapse;
}

.rule-form-container .style-section {
  margin-top: 6px;
  position: relative;
  /*For the color popup body to absolutely positioned witthin this section*/
}

.rule-form-container .title-style.style-section {
  margin-bottom: 10px;
}

.rule-form-container .title-style-btn,
.rule-form-container .rule-form-color-dropdown .font-trigger {
  padding: 2px 2px 5px 2px;
  margin-right: 2px;
  border: 1px transparent solid;
}

.rule-form-container .rule-form-color-dropdown .font-trigger {
  width: auto;
  margin-right: -1px;
  padding-top: 3px;
  padding-bottom: 2px;
  height: 25px;
}

.rule-form-container .title-style-btn:hover,
.rule-form-container .title-style-btn:focus,
.rule-form-container .font-trigger:hover,
.rule-form-container .font-trigger:focus {
  cursor: pointer;
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  border: 1px solid rgba(0, 120, 212, 1);
  border: 1px solid var(--communication-background,rgba(0, 120, 212, 1));
  padding-top: 3px;
}

.rule-form-container .title-style-btn.toggle-on {
  background-color: rgba( 199, 224, 244 ,  1 );
  background-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.rule-form-container .style-sub-label {
  display: inline-block;
  margin-right: 10px;
}

.rule-form-container .style-sub-label.title-style {
  margin-right: 15px;
}

.rule-form-container .style-sub-label.card-color {
  vertical-align: top;
  margin-top: 14px;
}

.rule-form-container .card-background.style-section {
  display: inline-block;
}

.rule-form-container .title-style.style-section-container {
  display: inline-block;
  width: 110px;
  /* avoid chrome bug that causes the last button inside the container to be truncated */
}

.rule-form-container .title-style.style-section {
  display: inline-block;
  top: 1px;
}

.rule-form-container .title-style-btn:focus,
.rule-form-container .font-trigger:focus {
  outline: none;
}

.rule-form-container .name-section {
  font-size: 12px;
}

.style-rule-font-color-bar {
  height: 3px;
  width: 13px;
  margin-left: 2px;
  margin-top: -1px;
}

.icon.bowtie-icon.bowtie-format-font-color {
  vertical-align: top;
  margin-top: 3px;
  height: 13px;
}

.style-rule-font-color {
  height: 12px;
  width: 24px;
  background: url("../../_content/font-color-picker-dropdown.png") no-repeat 0 0 !important;
}

.style-rules-header {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  height: 38px;
  margin-top: 5px;
  padding-right: 30px;
  position: relative;
  font-weight: bold;
}

.style-rules-header-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.style-rules-header .gripper-placeholder {
  width: 15px;
  height: 12px;
  float: left;
  display: inline-block;
}

.style-rules-header .rule-state-heading {
  padding-right: 17px;
  position: absolute;
  right: 0px;
  display: inline-block;
}

.style-rules-header .rule-state-heading.rules-with-contextmenu {
  padding-right: 48px;
}

.style-rules-header .rule-preview-heading {
  display: inline-block;
  height: 20px;
  width: 80px;
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.style-rules-header .rule-enabled-heading {
  padding: 11px 15px 11px 3px;
  display: inline-block;
}

.external-content-host {
  height: 100%;
}