/***************************
    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;
}

.card-options-control {
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 10px;
}

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

.cardOptions-wit-list-container .node-no-context-menu {
  display: none;
}

.cardOptions-wit-list-container .tree-view ul.tree-children {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.cardOptions-wit-list-container .tree-view ul.tree-children::after {
  clear: both;
  content: '';
  display: table;
}

.cardOptions-wit-list-container .tree-view > ul.tree-children li.node {
  outline: none;
  width: auto;
  display: inline;
  float: left;
  margin-right: 2px;
  clear: none;
  bottom: -1px;
}

.cardOptions-wit-list-container .tree-view > ul.tree-children li > a > div.node-content {
  border-top:  1px solid;
  border-top-color: rgba( 244, 244, 244 ,  1 );
  border-top-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 244, 244, 244 ,  1 );
  border-left-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 244, 244, 244 ,  1 );
  border-right-color: 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 );
  padding-bottom: 11px;
  padding-top: 11px;
  padding-right: 30px;
  height: 40px;
}

.cardOptions-wit-list-container .tree-view > ul.tree-children li.selected > a > div.node-content {
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-bottom:  1px solid;
  border-bottom-color: rgba( 248, 248, 248 ,  1 );
  border-bottom-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 );
}

.cardOptions-wit-list-container .tree-view > ul.tree-children li.hover > a > div.node-content,
.cardOptions-wit-list-container .tree-view > ul.tree-children li.focus > a > div.node-content {
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.cardOptions-wit-list-container .node-content > span {
  font-size: 12px;
  vertical-align: 3px;
}

.cardOptions-wit-list-container .tree-view > ul.tree-children li.selected > a > div.node-content > span {
  font-weight: bold;
}

.cardOptions-wit-list-container .work-item-color {
  width: 6px;
  display: inline-block;
  margin-right: 4px;
  margin-left: 5px;
  height: 16px;
}

.card-options-field-container input {
  margin-left: 0;
  margin-right: 8px;
  vertical-align: -2px;
  padding: 0;
}

.card-options-help-text {
  font-size: 12px;
  line-height: 16px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  padding-top: 12px;
  padding-bottom: 15px;
}

.cardOptions-field-options-content {
  overflow: auto;
  position: absolute;
  bottom: 15px;
  width: calc(100% - 26px);
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
  padding-left: 30px;
  padding-top: 20px;
}

.card-options-control.single-wit .cardOptions-field-options-content {
  background-color: transparent;
}

.card-options-field-container {
  padding-bottom: 20px;
}

.card-options-field-container .radio-label {
  display: inline-block;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.card-options-field-container .field-label {
  font-weight: bold;
  display: inline-block;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.card-options-field-container .field-help-text {
  margin-left: 21px;
  margin-top: 2px;
}

.card-options-field-container .field-label-icon {
  margin-left: 10px;
}

.card-options-field-container .icon-avatar {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

.ui-dialog .card-options-dialog.ui-dialog-content {
  position: relative;
}

.card-options-control .add-field-label {
  margin-left: 8px;
  vertical-align: middle;
}

.card-options-control .add-field {
  display: inline-block;
  position: relative;
  left: 1px;
  padding-right: 4px;
}

.card-options-control .add-field.enabled {
  cursor: pointer;
}

.card-options-control .add-field.enabled:hover {
  outline: 1px solid rgba( 200, 200, 200 ,  1 );
  outline: 1px solid rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.card-options-control .additional-fields-section .combo {
  width: 150px;
  margin-top: 10px;
}

.card-options-control .remove-additional-field {
  position: absolute;
  top: 3px;
  left: 155px;
  cursor: pointer;
}

.card-options-control .additional-field-container {
  position: relative;
}

.card-options-control .additional-field-container .error {
  position: absolute;
  top: -1px;
  left: 175px;
  font-size: 15px;
}

.card-options-control .additional-fields-section {
  padding-bottom: 2px;
}

.card-options-control .additional-fields-section .field-label {
  font-weight: bold;
}

.card-options-control .additional-fields-section .field-help-text {
  margin-bottom: 15px;
  margin-top: 2px;
}

.field-container.assignedTo.onTileEditDiv.non-combo-behavior span.avatar-only {
  opacity: 0;
}

.field-container.assignedTo.onTileEditDiv.non-combo-behavior span.avatar-only.hover {
  opacity: 1;
}

/* card styling configuration dialog css*/
.tag-coloring-dialog-content,
.card-styling-dialog-content,
.card-annotation-dialog-content {
  height: 100%;
  width: 100%;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.common-settings-container .tag-coloring-dialog-content,
.common-settings-container .card-styling-dialog-content,
.common-settings-container .card-annotation-dialog-content {
  padding-left: 0px;
}

.common-settings-container .annotation-list-template-container,
.common-settings-container .rule-list-template-container {
  width: auto;
}

.card-annotation-dialog-content .annotation-settings-message-area-container,
.card-annotation-dialog-content .test-settings-message-area-container,
.card-styling-dialog-content .style-settings-message-area-container {
  width: calc(100% - 50px);
}

.tag-coloring-dialog-content .noselect,
.card-styling-dialog-content .noselect,
.card-annotation-dialog-content .noselect {
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.tag-coloring-dialog-content .tag-coloring-rules-template,
.card-styling-dialog-content .card-styling-rules-template,
.card-annotation-dialog-content .card-annotation-rules-template {
  height: 100%;
}

.tag-coloring-tab-content.tab-content-main,
.card-styles-tab-content.tab-content-main,
.card-annotation-tab-content.tab-content-main {
  height: 100%;
}

.tag-coloring-tab-content .common-settings-container,
.card-styles-tab-content .common-settings-container,
.card-annotation-tab-content .common-settings-container {
  height: 100%;
}

.card-styling-title,
.card-styling-description,
.card-styling-manage-rules-standalone-description,
.rule-form-container .clauses .grouping,
.rule-form-container .clauses .logical {
  display: none;
}

/* START: overrides for EA team's identity control */
.rule-form-container .identity-picker-search-box .identity-picker-resolved:focus {
  background-color: initial;
}

.rule-form-container .identity-picker-search-box .identity-picker-resolved.identity-picker-resolved-single-search .identity-picker-resolved-close {
  display: none;
  /* this is a temporary hack till EA team gives us a better solution to hide the close icon */
}

.rule-form-container .query-filter-value-control.identity-picker {
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

/* END: overrides for EA team's identity control */
.common-settings-container .tag-coloring-dialog-content .tag-coloring-title,
.common-settings-container .tag-coloring-dialog-content .tag-coloring-description,
.common-settings-container .card-styling-dialog-content .card-styling-title,
.common-settings-container .card-styling-dialog-content .card-styling-description,
.common-settings-container .card-annotation-dialog-content .card-annotation-title,
.common-settings-container .card-annotation-dialog-content .card-annotation-description,
.text-area-container .message-container .message-area-control {
  display: block;
}

.tag-coloring-dialog-content .tag-color-template-container-table,
.card-styling-dialog-content .rules-template-container-table,
.card-annotation-dialog-content .annotation-template-container-table {
  height: 100%;
  width: 100%;
}

.tag-coloring-dialog-content .tag-color-template-container-table-wrapper,
.card-styling-dialog-content .rules-template-container-table-wrapper,
.card-annotation-dialog-content .annotation-template-container-table-wrapper {
  height: 100%;
  width: 100%;
}

.card-annotation-dialog-content .annotation-template-container-table .annotations-table-row,
.card-styling-dialog-content .rules-template-container-table .rules-table-row {
  height: 75%;
}

.card-annotation-dialog-content .annotations-table-cell,
.card-styling-dialog-content .rules-table-cell {
  height: 100%;
}

.card-styling-dialog-content .rules-container-wrapper,
.card-annotation-dialog-content .annotations-container-wrapper {
  position: relative;
  height: 100%;
}

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

.card-styling-dialog-content .text-area-container {
  padding-right: 10px;
}

.card-styling-dialog-content input.disabled {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.text-area-container .message-container {
  margin-top: 5px;
  margin-bottom: 5px;
}

.text-area-container .server-error {
  padding: 0;
  white-space: normal;
}

.tag-coloring-dialog-content .tags-container-wrapper {
  position: relative;
  padding-top: 12px;
}

.tag-coloring-dialog-content .tag-field-content-area:hover,
.tag-coloring-dialog-content .tag-field-content-area.inFocus {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.tag-coloring-dialog-content .tag-field-content-area > input[type="checkbox"] {
  margin-right: 30px;
  vertical-align: 7px;
}

.tag-coloring-dialog-content .tag-field {
  margin: 10px 10px 10px 0px;
  width: 60%;
}

.tag-coloring-dialog-content .comboarea {
  width: 100%;
  display: inline-block;
  float: left;
  padding-right: 10px;
}

.tag-coloring-dialog-content .tag-fields-scrollable-section {
  min-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tag-coloring-dialog-content .tags-caption-enable {
  padding-left: 10px;
}

.tag-coloring-dialog-content .tag-enable-checkbox input[type="checkbox"] {
  margin-left: 0px;
  margin-top: 3px;
}

.tag-coloring-dialog-content .control-message-area {
  width: 100%;
}

.tag-coloring-dialog-content .error-message-section {
  width: 30%;
  padding-top: 5px;
}

.tag-coloring-dialog-content .style-section {
  display: inline-block;
  margin-right: 10px;
  float: left;
  position: relative;
}

.tag-coloring-dialog-content .tag-fields-scrollable-section table {
  border-collapse: separate;
  border-spacing: 0px 10px;
  width: 100%;
}

.tag-coloring-dialog-content .tag-delete-section {
  padding: 0px 10px 0px 10px;
  vertical-align: inherit;
}

.tag-coloring-dialog-content .tag-enable-checkbox {
  margin-right: 10px;
  vertical-align: inherit;
}

.tag-coloring-dialog-content th {
  text-align: left;
}

td.error-message-section {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.compact-rule-container .rule-name {
  float: left;
  padding: 9px 5px 11px;
  width: calc(100% - 245px);
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: inline-block;
}

.style-rules-header .rule-name-heading {
  padding-left: 20px;
  float: left;
  padding: 11px 5px 11px;
  width: calc(100% - 245px);
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: inline-block;
}

/* ==============================================================*/
/* Style section for card annotation customization */
/* ==============================================================*/
.annotation-settings-header {
  font-weight: bold;
  height: 50px;
  margin-top: 5px;
}

.annotation-settings-header .annotation-settings-header-container {
  height: 100%;
  width: 100%;
}

.annotation-settings-header .annotation-settings-header-container .annotation-name-heading {
  float: left;
  margin: 11px 5px;
  width: 128px;
}

.annotation-settings-header .annotation-settings-header-container .annotation-state-heading {
  float: left;
  margin: 11px 5px;
  text-align: center;
}

.annotation-settings-header .annotation-settings-header-container .annotation-state-heading .annotation-preview-heading {
  display: inline-block;
  width: 128px;
}

.annotation-settings-header .annotation-settings-header-container .annotation-state-heading .annotation-enabled-heading {
  display: inline-block;
  margin-left: 40px;
}

.annotations-container {
  bottom: 0px;
  left: 0px;
  top: 0px;
  right: 0px;
  padding-left: 5px;
  position: absolute;
}

.annotations-container .compact-annotation-container {
  height: 38px;
  margin-top: 5px;
  position: relative;
  vertical-align: middle;
  width: 384px;
}

.annotations-container .compact-annotation-container:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  color: rgba( 0, 90, 158 ,  1 );
  color: rgba( var(--palette-primary-shade-20,0, 90, 158) ,  1 );
}

.annotations-container .compact-annotation-container .annotation-name {
  display: inline-block;
  float: left;
  margin: 11px 5px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 128px;
}

.annotations-container .compact-annotation-container .annotation-summary {
  float: left;
  margin: 11px 5px;
}

.annotations-container .compact-annotation-container .annotation-summary .annotation-icon {
  display: inline-block;
  text-align: center;
  width: 128px;
}

.annotations-container .compact-annotation-container .annotation-summary .annotation-toggle {
  display: inline-block;
  margin-left: 48px;
}

.agile-board .board-tile .board-tile-content .board-tile-annotations .child-work-items-summary,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations .child-work-items-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  padding: 4px 4px 4px 2px;
  margin: 0px 8px 8px 6px;
  border: 1px solid transparent;
}

.agile-board .board-tile .board-tile-content .board-tile-annotations .child-work-items-summary:hover,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations .child-work-items-summary:hover {
  border:  1px solid;
  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 );
}

.agile-board .board-tile .board-tile-content .board-tile-annotations .child-work-items-summary:active,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations .child-work-items-summary:active {
  border:  1px solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.agile-board .board-tile .board-tile-content .board-tile-annotations .selected.child-work-items-summary,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations .selected.child-work-items-summary {
  border:  1px solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.agile-board .board-tile .board-tile-content .board-tile-annotations .child-work-items-summary .work-item-type-icon,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations .child-work-items-summary .work-item-type-icon, .annotation-icon .work-item-type-icon {
  font-size: 15px;
}

.board-content-details .work-item-list div.separator {
  height: 1px;
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  margin-left: 10px;
  margin-right: 10px;
}

.board-content-details .work-item-list-container {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  padding-bottom: 4px;
}

.agile-board .board-tile .board-tile-content .board-tile-annotations,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.agile-board .board-tile .board-tile-content .board-tile-annotations .badge,
.board-tile.ui-draggable-dragging .board-tile-content .board-tile-annotations .badge {
  display: flex;
}

.annotation-icon .work-item-type-icon {
  margin: 0px;
}

.agile-board .board-tile .board-tile-content .child-work-items-summary .error-message-icon.show,
.board-tile.ui-draggable-dragging .board-tile-content .child-work-items-summary .error-message-icon.show {
  display: inline-block;
}

.agile-board .board-tile .board-tile-content .child-work-items-summary .error-message-icon,
.board-tile.ui-draggable-dragging .board-tile-content .child-work-items-summary .error-message-icon {
  display: none;
}

.board-content-details .work-item-list {
  width: 100%;
  position: relative;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.board-content-details .work-item-list .add-work-item-container {
  cursor: pointer;
  padding: 4px 14px 4px 12px;
  margin: 4px 0px 4px 0px;
  display: inline-block;
}

.board-content-details .add-work-item-container .icon-add-thin {
  margin-bottom: 2px;
  position: relative;
}

.board-content-details .work-item-list .work-item {
  position: relative;
}

.board-content-details .work-item-list .work-item,
.work-item.ui-sortable-helper {
  max-height: 40px;
  overflow: hidden;
  margin-top: 1px;
  padding-top: 2px;
  cursor: pointer;
}

.work-item.ui-sortable-helper {
  margin: 0px;
  /* bottom margin should be 0 otherwise moving a work item to the bottom of page will move page up by margin */
}

.board-content-details .work-item-list .work-item.original-item {
  display: block !important;
  /* JQuery sortable hides the item using inline style. Hence !important */
  opacity: 0;
  height: 15px;
}

.board-content-details .work-item-list .work-item.ui-sortable-placeholder {
  height: 15px;
}

.board-content-details .work-item-list .work-item.ui-sortable-placeholder.hide-placeholder {
  display: none;
}

.board-content-details .work-item-list .work-item .work-item-state {
  margin-left: 0px;
}

.board-content-details .work-item-list .work-item .work-item-title-container,
.work-item.ui-sortable-helper .work-item-title-container {
  vertical-align: top;
  margin: 3px 0 0 0;
  top: -4px;
  display: inline-block;
  max-width: calc(100% - 65px);
  max-width: -moz-calc(100% - 67px);
  max-width: -webkit-calc(100% - 67px);
  width: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
}

.board-content-details .work-item-list .work-item .work-item-title-container.show-error {
  max-width: calc(100% - 81px);
  /* Add width of 14px for the error-message-icon */
  max-width: -moz-calc(100% - 81px);
  max-width: -webkit-calc(100% - 81px);
  width: 100%;
}

/* Gripper for the work item */
.work-item-list-container .work-item .gripper {
  visibility: hidden;
}

.work-item.ui-sortable-helper .work-item-title-container .title.completed {
  text-decoration: line-through;
}

.work-item-list-container .work-item-title-container .title {
  max-height: 2.7em;
}

.work-item-list-container .work-item .work-item-context-menu {
  position: absolute;
  top: 0;
  right: 0;
  visibility: hidden;
}

.work-item-list-container .work-item .work-item-context-menu .bowtie-ellipsis {
  visibility: hidden;
  height: 24px;
  width: 24px;
  margin: 0;
  padding-top: 5px;
}

.work-item-list-container .work-item .work-item-context-menu .bowtie-ellipsis.tabbed-focus {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  visibility: visible;
}

.work-item-list-container .work-item .work-item-context-menu:focus .bowtie-ellipsis {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  visibility: visible;
}

.work-item-list-container .work-item.editMode > .work-item-context-menu {
  visibility: hidden;
  display: none;
}

.work-item-list-container .work-item:hover .bowtie-ellipsis {
  visibility: visible;
  cursor: pointer;
}

.work-item-list-container .work-item:hover .gripper,
.work-item-list-container.ui-sortable .work-item-sortable-placeholder .gripper {
  visibility: visible;
}

.work-item-list-container .work-item .gripper, .work-item.ui-sortable-helper .gripper {
  width: 12px;
  height: 18px;
  float: left;
  overflow: hidden;
  background: url("../../_content/icon-gripper-sprite.png") no-repeat 0 0 !important;
}

.work-item-list-container .work-item:hover .gripper {
  width: 12px;
  height: 18px;
  background: url("../../_content/icon-gripper-sprite.png") no-repeat 0 0 !important;
}

.work-item-list-container .work-item .gripper:hover {
  width: 12px;
  height: 18px;
  background: url("../../_content/icon-gripper-sprite.png") no-repeat -12px 0 !important;
}

/* Multiline ellipse on work item's title */
.work-item-list-container .work-item-title-container .title .clickable-title {
  overflow: hidden;
  line-height: 1.25;
  position: relative;
  padding-right: 1em;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
  -ms-word-break: break-word;
  padding: 0px 2px 2px 2px;
  top: 1px;
  left: 1px;
}

.work-item-list-container .work-item-title-container .title .multi-line-ellipsis {
  position: absolute;
  bottom: 1px;
  right: 1px;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.board-content-details .work-item-list .work-item:hover,
.board-content-details .work-item-list .work-item:hover input[type="checkbox"],
.board-content-details .work-item-list .work-item:hover .clickable-title:after,
.board-content-details .work-item-list-container .work-item:hover .work-item-title-container .title .clickable-title:before,
.board-content-details .work-item-list-container .work-item:hover .work-item-title-container .title .multi-line-ellipsis {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.work-item-list-container .work-item-title-container .title.completed {
  text-decoration: line-through;
}

.work-item-list-container .edit-mode-borders:hover {
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.board-content-details .work-item-list .work-item .title .error-title {
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.work-item.ui-sortable-helper .work-item-color {
  width: 6px;
  height: 16px;
  display: inline-block;
  border: 2px solid transparent;
  vertical-align: top;
  margin-top: 2px;
}

.board-content-details .work-item-list .work-item-type-icon {
  margin: 1px 0 0 0;
  vertical-align: top;
}

.work-item-list-container .edit-mode-borders {
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.work-item-list-container .title .editableTitle {
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
  min-height: 26em;
}

.work-item-list-container .title .editableTitle .editableTitleContent.invalid {
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.work-item-list-container .work-item-title-container .clickable-title:hover {
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  cursor: pointer;
  text-decoration: underline;
}

.mru-identity-picker {
  position: relative;
  width: 100%;
  height: 20px;
  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: var(--background-color,rgba(255, 255, 255, 1));
}

.mru-identity-picker > .wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: block;
}

.mru-identity-picker.drop > .wrap {
  right: 20px;
}

.mru-identity-picker.drop > .drop {
  position: absolute;
  right: 0;
  height: 100%;
  width: 20px;
  cursor: pointer;
  overflow: hidden;
}

.mru-identity-picker > .drop {
  background: url("../../_content/tfs-icons.png") no-repeat -1550px 50% !important;
}

.mru-identity-picker > .wrap > .text-wrapper {
  border: none;
  outline: none;
  position: absolute;
  right: 0;
  left: 0;
}

.mru-identity-picker > .wrap > .text-wrapper > .mru-identity-picker-input {
  border: none;
  outline: none;
  padding-left: 2px;
  width: 100%;
  height: 100%;
}

.mru-identity-picker > .wrap.resolved > .text-wrapper {
  left: 20px;
}

.mru-identity-picker > .wrap > .text-wrapper > .mru-identity-picker-input::-ms-clear {
  display: none;
}

.mru-identity-picker > .wrap > .img-container {
  width: 18px;
  height: 18px;
  text-align: center;
  margin: 0px 2px;
  float: left;
}

.mru-identity-picker > .wrap > .img-container.loading {
  background: url("../../_content/User.svg") no-repeat;
  background-size: 18px 18px;
}

.mru-identity-picker > .wrap > .img-container > img {
  max-width: 18px;
  height: 18px;
  width: auto;
  vertical-align: top;
  font-size: 0;
  /* this is to fix firefox behavior to show alt text while image is loading. This fix hides the alt text */
}

.mru-identity-picker > .wrap > .focus-receiver {
  width: 0;
  height: 0;
}

.mru-identity-picker.readonly input.disabled {
  cursor: default;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.identity-picker-list-view {
  position: fixed;
  left: -50000px;
  top: -50000px;
  background: rgba(255, 255, 255, 1);
  background: var(--background-color,rgba(255, 255, 255, 1));
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  z-index: 2000;
}

.identity-picker-list-view > ul.items {
  overflow: auto;
  max-height: 240px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.identity-picker-list-view > ul.items > li {
  cursor: pointer;
  position: relative;
  height: 40px;
}

.identity-picker-list-view > ul.items > li > .icon.icon-delete-small {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  /* hide the delete initially. only show on item hover */
}

.identity-picker-list-view > ul.items > li.mru-item.hover > .icon.icon-delete-small,
.identity-picker-list-view > ul.items > li.mru-item.selected > .icon.icon-delete-small {
  display: block;
}

.identity-picker-list-view > ul.items > li.non-mru-item > .icon.icon-delete-small,
.identity-picker-list-view > ul.items > li > .item-image-container.hidden {
  display: none;
}

.identity-picker-list-view > ul.items > li.selected,
.identity-picker-list-view > ul.items > li.selected.hover,
.identity-picker-list-view .search.selected,
.identity-picker-list-view .search.selected.hover {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.identity-picker-list-view .search, .identity-picker-list-view .no-result {
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  padding: 8px;
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  border-top:  1px solid;
  border-top-color: rgba( 234, 234, 234 ,  1 );
  border-top-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  height: 40px;
}

.identity-picker-list-view .search-tfs-noresult {
  font-size: 12px;
  padding: 2px;
}

.identity-picker-list-view .no-result {
  cursor: default;
}

.identity-picker-list-view .search.search-error {
  padding: 0;
  font-size: 12px;
}

.identity-picker-list-view .search.search-error > .message-area-control {
  height: 40px;
  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 );
}

.identity-picker-list-view .search.search-error > .message-area-control > .message-icon {
  display: inline;
  float: none;
}

.identity-picker-list-view .search.search-error > .message-area-control > .message-icon .icon {
  vertical-align: middle;
}

.identity-picker-list-view .search.search-error > .message-area-control > .message-header {
  display: inline;
}

.identity-picker-list-view .search-result-status {
  text-align: center;
  padding: 2px;
}

.identity-picker-list-view .search > .bowtie-icon {
  margin-left: 5px;
}

.identity-picker-list-view > ul.items > li.hover,
.identity-picker-list-view .search.hover {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.identity-picker-list-view > ul.items > li > div.item-image-container {
  margin-top: 4px;
  margin-right: 4px;
  margin-left: 4px;
  width: 32px;
  height: 32px;
  text-align: center;
}

.identity-picker-list-view > ul.items > li > div.item-image-container.loading {
  background: url("../../_content/User.svg") no-repeat;
  background-size: 32px 32px;
}

.identity-picker-list-view > ul.items > li > div.item-image-container > img {
  vertical-align: top;
  width: auto;
  height: 32px;
  max-width: 32px;
  font-size: 0;
  /* this is to fix firefox behavior to show alt text while image is loading. This fix hides the alt text */
}

.identity-picker-list-view > ul.items > li > div {
  display: inline-block;
}

.identity-picker-list-view > ul.items > li div.item-text-container {
  position: absolute;
  top: 0px;
  right: 25px;
  bottom: 0px;
  left: 45px;
}

.identity-picker-list-view > ul.items > li div.title {
  font-size: 15px;
  height: auto;
  line-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.identity-picker-list-view > ul.items > li div.subtitle {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.mru-identity-picker.invalid,
.mru-identity-picker.invalid > .wrap > .text-wrapper > .mru-identity-picker-input,
.mru-identity-picker.invalid .wrap {
  background-color: rgba( 251, 242, 236 ,  1 );
  background-color: rgba( var(--palette-accent3-light,251, 242, 236) ,  1 );
}

.multi-mru-identity-picker {
  min-width: 400px;
  position: relative;
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  max-height: 300px;
  border:  1px solid;
  border-color: rgba( 234, 234, 234 ,  1 );
  border-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container > li {
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container > li.selection {
  background-color: lightblue;
  padding: 0px 3px;
  margin: 1px 2px;
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container > li.picker-item {
  width: 200px;
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container > li.picker-item > .mru-identity-picker {
  height: 18px;
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container > li.selection > .icon.icon-delete {
  cursor: pointer;
}

.multi-mru-identity-picker > ul.multi-mru-identity-picker-container > li.selection > .item-text {
  display: inline;
}

.multi-mru-identity-picker .mru-identity-picker {
  border: none;
  outline: none;
}

.multi-mru-identity-picker .mru-identity-picker > .wrap > .text-wrapper > .mru-identity-picker-input {
  border: none;
  width: 200px;
  outline: none;
}

.multi-mru-identity-picker > .multi-mru-list-container {
  position: absolute;
  right: 0;
  left: 0;
}

.multi-mru-identity-picker > .multi-mru-list-container > .identity-picker-list-view {
  top: 0;
}

.bowtie-style .mru-identity-picker.drop > .drop {
  font-family: "Bowtie";
  font-size: 14px;
  speak: none;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  line-height: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent !important;
  top: 25%;
}

.bowtie-style .mru-identity-picker.drop > .drop::before {
  content: "\E9C9";
}

.bowtie-style .mru-identity-picker > .wrap > .img-container {
  width: 32px;
  height: 32px;
  margin: 0;
}

.bowtie-style .mru-identity-picker > .wrap > .img-container > img {
  max-width: 32px;
  height: 32px;
}

.bowtie-style .mru-identity-picker > .wrap > .text-wrapper > .mru-identity-picker-input {
  margin-top: 6px;
  padding: 0 8px 0 8px;
}

.bowtie-style .mru-identity-picker > .wrap.resolved > .text-wrapper > .mru-identity-picker-input {
  margin-left: 15px;
}

/*
 *  Styles specific to the drag/drop iteractions.
 */
.ui-draggable, .tile-zone-team-favorites > .tile {
  /*  
     *  Disable touch actions such as panning (scrolling) and zooming as these gestures will prevent the element from
     *  getting events needed to perform the drag.
     */
  -ms-touch-action: none;
}

.ui-sortable-helper a {
  /*
     * Set the cursor to a default when dragging an element that contains a hyperlink.
     */
  cursor: default;
}

.productbacklog-grid-results > .ui-draggable {
  /*
     * For the backlogs, the draggable objects in the grids should scroll if originally touch-dragged in the vertical direction or
     * be dragged if originally touch-dragged in the horizontal direction.
     */
  touch-action: pan-y pinch-zoom;
}

.taskboard .ui-draggable {
  /*
     * For the taskboard, block touch actions on all draggable elements. This allows jquery draggable libarary to process the event. 
     */
  touch-action: none;
}

.agile-board .ui-draggable {
  /*
     * For agile board, block touch actions on all draggable elements. This allows jquery draggable libarary to process the event.
     */
  touch-action: none;
}

/*************************
    Board Tile Control
**************************/
.agile-board .board-tile.focus {
  outline: none;
}

.ui-draggable-dragging .board-tile-content-container .clickable-title-link {
  text-decoration: none;
}

.agile-board .board-tile,
.board-tile.ui-draggable-dragging {
  margin-top: 10px;
  max-width: 300px;
}

.board-tile.ui-draggable-dragging {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* important when tile content is longer than one line */
  width: 100%;
  min-width: 200px;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, .55);
  box-shadow: 5px 5px 5px -2px var(--text-secondary-color,rgba(0, 0, 0, .55));
  opacity: 0.7;
  cursor: default;
}

.board-tile .board-tile-content-container {
  font-size: 12px;
  /* Prevent nwp styles changing font on drag and drop */
}

.agile-board .board-tile .filter-pending {
  display: none;
}

.agile-board .board-tile .board-tile-content-container {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* important when tile content is longer than one line */
  width: 100%;
  min-width: 200px;
  max-width: 300px;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
  border-left: solid 3px #009ccc;
}

.agile-board .board-tile .board-tile-content.agileDragTargetHoverColor {
  background-color: rgba( 218, 218, 218 ,  1 ) !important;
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 ) !important;
  /* !important needed since the background color for card styling gets added inline. */
}

.agile-board .board-tile .board-content-details {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* important when tile content is longer than one line */
  width: 100%;
  min-width: 200px;
  max-width: 300px;
  border-right:  solid 1px;
  border-right-color: rgba( 200, 200, 200 ,  1 );
  border-right-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-bottom:  solid 1px;
  border-bottom-color: rgba( 200, 200, 200 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-left:  solid 1px;
  border-left-color: rgba( 200, 200, 200 ,  1 );
  border-left-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.board-tile.ui-draggable-dragging .board-tile-content-container {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* important when tile content is longer than one line */
  width: 100%;
  min-width: 200px;
  max-width: 300px;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
  border-left: solid 3px #009ccc;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content,
.board-tile.ui-draggable-dragging .board-tile-content-container .board-tile-content {
  height: 100%;
  /*overflow: hidden;*/
  position: relative;
  padding-bottom: 1px;
  border-right:  solid 1px;
  border-right-color: rgba( 200, 200, 200 ,  1 );
  border-right-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-top:  solid 1px;
  border-top-color: rgba( 200, 200, 200 ,  1 );
  border-top-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .field-container .field-inner-element, .agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .field-container.identity,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .field-container .field-inner-element,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .field-container.identity {
  color: #333333;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .field-container .field-label,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .field-container .field-label {
  color: rgba(0, 0, 0, 0.55);
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .field-container .field-inner-element .virtualizing-list-view > .items > li,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .field-container .field-inner-element .virtualizing-list-view > .items > li {
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .field-container.combo-behavior .field-inner-element,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .field-container.combo-behavior .field-inner-element {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .id-title-container .id,
.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .id-title-container .title .clickable-title-link,
.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .witRemainingWork,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .id-title-container .id,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .id-title-container .title .clickable-title-link,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .witRemainingWork {
  color: black;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .id-title-container .id.combo-behavior,
.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .id-title-container .title .clickable-title-link.combo-behavior,
.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .witRemainingWork.combo-behavior,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .id-title-container .id.combo-behavior,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .id-title-container .title .clickable-title-link.combo-behavior,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .witRemainingWork.combo-behavior {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .work-item-summary-text,
.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .github-links-annotation,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .work-item-summary-text,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .github-links-annotation {
  color: #333333;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .child-work-items-summary,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .child-work-items-summary {
  border-color: #c7e0f4;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .child-work-items-summary:hover,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .child-work-items-summary:hover {
  background-color: #eff6fc;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content.custom-style-applied .child-work-items-summary.selected,
.tbTile:not(.tile-dimmed) .tbTileContent.custom-style-applied .child-work-items-summary.selected {
  background-color: #deecf9;
}

.agile-board .board-tile .board-tile-content-container .board-tile-content-bottom-border {
  border-bottom:  solid 1px;
  border-bottom-color: rgba( 200, 200, 200 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.board-tile .board-tile-content .invalid,
.board-tile .board-tile-content .combo > div.wrap > input.invalid {
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.board-tile .board-tile-content:hover .card-context-menu {
  display: block;
  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 );
}

.board-tile .board-tile-content:hover .card-expand-button-container {
  display: block;
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 199, 224, 244 ,  1 );
  border-left-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 199, 224, 244 ,  1 );
  border-right-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-top:  1px solid;
  border-top-color: rgba( 199, 224, 244 ,  1 );
  border-top-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.board-tile .board-tile-content:hover .card-context-menu: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 );
}

.board-tile .board-tile-content:hover .card-expand-button-container:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 199, 224, 244 ,  1 );
  border-left-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 199, 224, 244 ,  1 );
  border-right-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-top:  1px solid;
  border-top-color: rgba( 199, 224, 244 ,  1 );
  border-top-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.board-tile .board-tile-content:hover .card-context-menu:active {
  border:  1px solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.board-tile .board-tile-content:hover .card-expand-button-container:active {
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 199, 224, 244 ,  1 );
  border-left-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 199, 224, 244 ,  1 );
  border-right-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-top:  1px solid;
  border-top-color: rgba( 199, 224, 244 ,  1 );
  border-top-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.board-tile .board-tile-content:hover .card-context-menu .icon-ellipsis,
.board-tile .board-tile-content:hover .card-context-menu .bowtie-ellipsis {
  display: inline-block;
}

.board-tile.ui-draggable-dragging .board-tile-content:hover .card-context-menu,
.board-tile.ui-draggable-dragging .board-tile-content:hover .card-context-menu .icon-ellipsis,
.board-tile.ui-draggable-dragging .board-tile-content:hover .card-context-menu .bowtie-ellipsis,
.board-tile.ui-draggable-dragging .board-tile-content:hover .card-expand-button-container {
  display: none;
}

.board-tile .board-tile-content .id-title-container.editMode ~ .card-context-menu,
.board-tile .board-tile-content .id-title-container.editMode ~ .card-expand-button-container {
  display: none;
}

.board-tile.tile-editing .board-tile-content .card-expand-button-container {
  display: none;
}

.board-tile .container {
  position: relative;
  height: 28px;
  margin-right: 9px;
  margin-bottom: 9px;
  margin-left: 7px;
  white-space: nowrap;
  cursor: default;
}

.board-tile .container .onTileEditDiv.assignedTo {
  max-width: 200px;
}

.board-tile .field-container.additional-field .field-label {
  width: 35%;
}

.board-tile .field-container.additional-field .field-inner-element {
  width: calc(65% - 7px);
}

.board-tile .saving,
.board-tile .message {
  position: absolute;
  bottom: 0;
  left: -3px;
  right: 0;
  width: auto;
  text-align: center;
}

.board-tile .message {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  z-index: 1000;
}

.board-tile .saving {
  background-color: rgba( 51, 51, 51 ,  1 );
  background-color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.board-tile .error {
  background-color: rgba( 218, 10, 0 ,  1 );
  background-color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
  font-size: inherit;
  /* needed because Validation.css defines this for the .error rule! */
}

.board-tile .error.clickable {
  cursor: pointer;
  margin-top: 2px;
  margin-bottom: 2px;
}

.board-tile.disabled {
  color: rgba( 166, 166, 166 ,  1 );
  color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.board-tile.filterHide {
  display: none;
}

.agileDragTargetHoverColor {
  background-color: rgba( 218, 218, 218 ,  1 );
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.field-container {
  height: 1.75em;
  /*This was changed from 1.7 to 1.75 to prevent a scroll event being fired off and causing an error in IE9. If IE9 is no longer supported please changed this back.*/
}

.additional-field.lastAdditionalField {
  margin-bottom: 7px;
}

.tags.field-container {
  height: auto;
  margin-bottom: 6px;
  margin-top: 7px;
}

.tags.field-container .tfs-tags {
  margin-bottom: 0;
  /*to override the default bottom margin*/
}

.tags.field-container .tags-items-container ul > li {
  margin-bottom: 3px;
}

.card-context-menu .bowtie-ellipsis,
.card-expand-button-container {
  display: none;
}

.card-context-menu:hover .bowtie-ellipsis,
.tabbed-focus .bowtie-ellipsis {
  display: inline-block;
}

.card-context-menu {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 1px solid transparent;
  top: 3px;
  right: 3px;
  padding: 4px 0 0 5px;
  display: block;
  z-index: 1000;
  cursor: pointer;
}

.tabbed-focus {
  display: block;
  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 );
}

.card-context-menu:hover {
  display: block;
  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 );
}

.card-context-menu:active {
  border:  1px solid;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.card-expand-button-container {
  position: absolute;
  height: 10px;
  width: 30px;
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  border-left:  1px solid;
  border-left-color: rgba( 199, 224, 244 ,  1 );
  border-left-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-right:  1px solid;
  border-right-color: rgba( 199, 224, 244 ,  1 );
  border-right-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  border-top:  1px solid;
  border-top-color: rgba( 199, 224, 244 ,  1 );
  border-top-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  cursor: pointer;
  padding-bottom: 14px;
}

.tags.field-container,
.field-container.additional-field {
  padding-top: 0;
  padding-left: 9px;
  padding-right: 9px;
  padding-bottom: 0;
  cursor: default;
}

.field-container.additional-field .field-label,
.field-container.additional-field .field-inner-element {
  vertical-align: middle;
  white-space: nowrap;
  height: 100%;
  border: solid 1px transparent;
  /* To align with the field label and field value text*/
  line-height: 14px;
  -ms-scroll-limit: 0px;
}

.field-container.additional-field .field-label {
  float: left;
  font-weight: normal;
  display: block;
  margin-right: 7px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.field-container.additional-field .field-inner-element {
  display: block;
  /* padding between value and border displayed during hover*/
  padding-left: 2px;
  padding-right: 2px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.field-container.additional-field.combo-behavior .field-inner-element,
.field-container.effort.combo-behavior .field-inner-element {
  /* padding between value and border is handled in the combo control during edit*/
  padding-left: 0px;
  padding-right: 0px;
}

.field-inner-element .combo div.wrap input[type="text"] {
  /* Override the default combo width */
  width: 100%;
}

.title:hover + .editIcon,
.editIcon:hover,
div.id-title-container:hover + .editIcon {
  display: block;
}

.ui-draggable-dragging .id-title-container:hover + .editIcon div.title.editMode:hover + .editIcon, div.id-title-container.editMode:hover + .editIcon, .id-title-container.editMode + .editIcon:hover {
  display: none;
}

.board-tile-content .id-title-container,
.tbTile .id-title-container {
  position: relative;
  margin: 4px 6px 6px 6px;
  overflow: hidden;
  line-height: 16px;
  padding: 2px;
  border: 1px solid transparent;
}

.id-title-container.editMode .title .editableTitle {
  min-height: 32px;
}

.field-inner-element .type-title-container {
  margin-left: -2px;
  /* make up for padding on the field container so it aligns properly. */
}

.editableTitle {
  width: 100%;
  height: 100%;
}

.editableTitle .editableTitleContent {
  height: 100%;
  width: 100%;
  overflow: hidden;
  resize: none;
  border:  0px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  outline: none;
  padding: 0 2px 2px 2px;
  margin: 0px;
  font-size: 12px;
  line-height: 1.25;
}

.id-title-container.editMode {
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.id-title-container .title {
  display: inline;
}

.parent-type-icon-container {
  display: inline;
}

/* We need to increase specifity here to get the color take effect */
span.parent-title,
.legacy-shim .id-title-container .title .clickable-title-link {
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.id-title-container .title .clickable-title,
.work-item-title-container .title .clickable-title {
  white-space: pre-wrap;
}

.id-title-container .title .clickable-title {
  display: inline;
}

.work-item-title-container .title .clickable-title {
  display: block;
}

.id-title-container .id {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: element;
  user-select: text;
  /* Allow select so users can copy the .id */
  display: inline;
  font-weight: bold;
  margin-right: 5px;
}

.id-title-container .clickable-title {
  word-wrap: break-word;
  -ms-word-wrap: break-word;
  -ms-word-break: break-word;
}

.onTileEditTextDiv {
  height: 100%;
}

.field-inner-element.onTileEditTextDiv.unassigned .identity-picker-resolved-name {
  color: rgba( 102, 102, 102 ,  1 );
  color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
}

.onTileEditDiv .combo > div.wrap {
  /*remove any padding on the left for board on tile edit combo boxes
   this will align left edges of combo drop down and input box*/
  padding-left: 0px;
}

.field-container.assignedTo.onTileEditDiv.combo-behavior img {
  vertical-align: middle;
  margin-right: 2px;
  width: 20px;
  height: 20px;
}

.field-container.assignedTo.onTileEditDiv.non-combo-behavior img {
  display: block;
  float: left;
  vertical-align: middle;
  margin-right: 0px;
  margin-left: 3px;
  width: 28px;
  height: 28px;
}

.field-container.assignedTo.onTileEditDiv.non-combo-behavior span {
  padding-left: 2px;
  overflow: hidden;
  display: block;
  margin-top: 8px;
  height: 20px;
}

.field-container.assignedTo.onTileEditDiv.non-combo-behavior img + span {
  padding-left: 6px;
}

.witExtra input,
.witExtra .combo > div.wrap > input,
.field-container.combo-behavior .combo > div.wrap > input {
  width: 100%;
  border:  solid 1px;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  font-size: 12px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  padding-left: 2px;
  padding-right: 2px;
}

.witExtra .field-container .combo {
  height: 20px;
}

.onTileEditTextDiv,
.field-container.assignedTo .onTileEditTextDiv span {
  /* transparent border used so that on hover, can just change color */
  border: 1px solid transparent;
}

.witExtra .hover,
.field-container .field-inner-element.onTileEditTextDiv.hover,
.field-container.assignedTo .onTileEditTextDiv span.hover,
.field-container.assignedTo .onTileEditTextDiv img.hover + span {
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  background: transparent;
  cursor: default;
}

.field-container.assignedTo .onTileEditTextDiv {
  border-width: 0px;
}

.field-container.assignedTo {
  white-space: nowrap;
  height: 28px;
  /* prevent AssignedTo name being completely squeezed by other elements */
  min-width: 10px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.field-container.onTileEditDiv.identity {
  height: auto;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.field-container.onTileEditDiv.identity .field-inner-element {
  margin-left: 1px;
  line-height: normal;
  cursor: pointer;
}

.field-container.identity .onTileEditTextDiv .identityControl {
  border:  solid 1px;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
}

.field-container.identity .onTileEditTextDiv .identityControl .identity-picker-search-box .identity-picker-resolved.identity-picker-resolved-single-search .identity-picker-resolved-close {
  display: none;
  /* this is a temporary hack till EA team gives us a better solution to hide the close icon */
}

.board-tile-content-container .field-container.combo-behavior .onTileEditTextDiv {
  border-width: 0px;
}

.identityControl ul.items > li div.title {
  height: auto;
}

.field-container.identity .onTileEditTextDiv .identity-picker-input {
  border: none;
  width: calc(100% - 21px) !important;
  /* Override wrong width calculation in the identity control */
}

.field-container.assignedTo.onTileEditDiv.combo-behavior {
  padding-top: 8px;
}

.field-container.assignedTo input {
  text-align: left;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
  padding: 1px;
}

.field-container.assignedTo.combo-behavior {
  overflow: hidden;
}

.field-container.assignedTo .combo-drop-popup {
  text-align: left;
}

.field-container.effort,
.field-container.witRemainingWork {
  float: right;
  font-weight: bold;
  margin-left: 5px;
  margin-top: 8px;
  text-align: right;
  line-height: 16px;
}

.field-container.witRemainingWork {
  width: 30px;
}

.field-container.effort .field-inner-element {
  /*padding between value and border displayed during hover*/
  padding-left: 2px;
  padding-right: 2px;
}

.field-container.effort input {
  /* Should match the weight of the text before the input is created */
  font-weight: bold;
  margin-left: 0px;
  padding: 0px;
  text-align: right;
  border-width: 0px;
}

.field-container.onTileEditDiv.witState {
  position: relative;
  overflow: hidden;
}

.field-container.onTileEditDiv.witState input {
  padding: 0px 0px 2px 2px;
}

.field-container.witState .onTileEditTextDiv {
  padding-left: 2px;
}

.field-container .identityCombo .combo-drop-popup {
  min-width: 160px;
}

.field-container.tree .combo-drop-popup {
  min-width: 200px;
  /*to support a depth of 14 tree levels*/
}

.tbTile .field-container.additional-field .field-inner-element {
  width: calc(65% - 8px);
  /* 8px = 7px padding between label and value + 1px for rounding errors*/
}