.person-filter {
  text-transform: none;
}

.person-filter .menu .menu-item.identity {
  padding: 3px;
}

.person-filter .menu .menu-item.identity > span.icon {
  width: 20px;
  height: 20px;
}

.person-filter .menu .menu-item.identity img.identity-picture {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

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

.taskboard-row .minimize {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  background: url("../../_content/tfs-icons.png") no-repeat -7984px -16px !important;
}

.taskboard-row .maximize {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  background: url("../../_content/tfs-icons.png") no-repeat -7952px -16px !important;
}

.sprint-view-container .content-host .taskboard {
  left: 20px;
}

.taskboard {
  position: absolute;
  overflow: hidden;
  left: 16px;
  right: 0;
  height: 100%;
  /*  The add new item button on the taskboard needs to be attached to the bottom of the first cell of each row; the taskboard 
    table cells use position: relative but this is not valid according to the standard and might yield undefined behavior. 
    As a workaround we use this wrapper, which fills the table cell completely and allows positioning of child elements
    relative to this. */
  /* Please keep this consistent with kanban boards*/
}

.taskboard .taskboardTableHeaderScrollContainer.nonScrollable {
  top: 0px;
  overflow: hidden;
}

.taskboard .display-flex-span {
  display: flex;
}

.taskboard .display-flex-span .add-ellipsis-span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.taskboard .display-flex-span .learn-more-link {
  flex-shrink: 0;
  padding-left: 6px;
}

.taskboard .display-flex-span .reorder-message.icon {
  flex-shrink: 0;
  margin-right: 5px;
  margin-bottom: 2px;
}

.taskboard .taskboard-message-area.visible ~ .taskboardTableHeaderScrollContainer.nonScrollable,
.taskboard .taskboard-dismissable-message-area.visible ~ .taskboardTableHeaderScrollContainer.nonScrollable {
  /* top: 38px (height of taskboard-message-area) */
  top: 38px;
}

.taskboard .taskboard-message-area.visible + .taskboard-dismissable-message-area.visible ~ .taskboardTableHeaderScrollContainer.nonScrollable {
  /* top: 76px (height of taskboard-message-area + taskboard-dismissable-message-area) */
  top: 76px;
}

.taskboard .taskboard-message-area.visible ~ .taskboardTableBodyScrollContainer.scrollable,
.taskboard .taskboard-dismissable-message-area.visible ~ .taskboardTableBodyScrollContainer.scrollable {
  /* top: 38px (height of taskboard-message-area) + 
        29px (height of taskboardTableHeaderScrollContainer) */
  top: 67px;
}

.taskboard .taskboard-message-area.visible + .taskboard-dismissable-message-area.visible ~ .taskboardTableBodyScrollContainer.scrollable {
  /* top: 76px (height of taskboard-message-area + taskboard-dismissable-message-area) + 
        29px (height of taskboardTableHeaderScrollContainer) */
  top: 105px;
}

.taskboard .taskboardTableBodyScrollContainer {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.taskboard .taskboardTableBodyScrollContainer #taskboard-table-body {
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.taskboard .taskboardTableBodyScrollContainer.scrollable {
  /* top: 29px (height of taskboardTableHeaderScrollContainer) */
  top: 29px;
  overflow: auto;
}

.taskboard .taskboardTableBodyScrollContainer:focus {
  outline: none;
}

.taskboard .taskboardTableHeaderScrollContainer {
  position: absolute;
  left: 0px;
  right: 0px;
}

.taskboard .reorderDragStarted.reorderDragOutside {
  visibility: hidden;
}

.taskboard .add-new-item-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.taskboard .board-add-card .bowtie-math-plus-box-light,
.taskboard .board-add-card .bowtie-math-plus-box-light.enabled {
  color: rgba( 16, 124, 16 ,  1 );
  color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
  font-size: 2.16em;
  line-height: 12px;
}

.taskboard-cell {
  /* 1 tile minimum */
  min-width: 209px;
  vertical-align: top;
  padding: 5px;
  border-left:  solid 4px;
  border-left-color: rgba( 255, 255, 255 ,  1 );
  border-left-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border-bottom:  solid 3px;
  border-bottom-color: rgba( 255, 255, 255 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  /* In IE, the background color overtakes even the border, causing the border to disappear 
        Using background-clip property so that background color is applied INSIDE the border */
  background-clip: padding-box;
}

.taskboard-cell .flexContainer {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10*/
  flex-wrap: wrap;
  -ms-flex-align: start;
  /* IE10*/
  align-items: flex-start;
}

.taskboard-cell.ui-droppable {
  position: relative;
}

.taskboard-cell .board-add-card {
  height: 26px;
  max-width: 26px;
  margin: 5px;
  position: absolute;
  bottom: 5px;
  left: 5px;
  transition: max-width 300ms;
  overflow: hidden;
}

.taskboard-cell .board-add-card.wide {
  min-width: 90px;
  max-width: 130px;
  padding-right: 5px;
}

.taskboard-parent {
  min-width: 196px;
  width: 196px;
  margin-left: 0;
  border-left-style: none;
  padding-left: 0;
}

.taskboard-parent .icon-add {
  float: right;
  margin-top: 10px;
}

.taskboard-parent .tbPivotItem span.witTitle > img {
  vertical-align: middle;
  margin-right: 2px;
  width: 20px;
  height: 20px;
}

.taskboard-parent .parentTbTile .id-title-container {
  max-height: none;
}

.taskboard-parent .parentTbTile .tbTileContent {
  border-top-right-radius: inherit;
  height: auto;
}

/* Child Work Item tile and contents */
.tbTile {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 185px;
  height: auto;
  margin: 5px 5px 10px 5px;
  border-left: 3px solid #f2cb1d;
  position: relative;
  font-size: 9pt;
  cursor: default;
  /* For AssignedTo, we want the height to be 28px instead of 20px*/
}

.tbTile .dummyParentTbTile .clickable-title {
  /*Unparented tile is not clickable and should not show the pointer cursor.*/
  cursor: default;
}

.tbTile.parentTbTile {
  margin-left: 0;
  width: 185px;
  height: auto;
}

.tbTile.focus {
  outline: none;
}

.tbTile .tbTileContent.dummyParentTbTile .id-title-container .title .clickable-title:hover {
  cursor: default;
  text-decoration: none;
}

.tbTile .onTileEditDiv.assignedTo {
  max-width: 163px;
}

.tbTile.dummyParent .editIcon {
  display: none !important;
}

.tbTile .witSaving {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  background-color: rgba( 51, 51, 51 ,  1 );
  background-color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.tbTile .witError {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  background-color: rgba( 218, 10, 0 ,  1 );
  background-color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.tbTile .tbTileContent {
  width: 100%;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border:  solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-width: 1px 1px 1px 0;
}

.tbTile .tbTileContent .id-title-container .title .clickable-title:hover {
  cursor: pointer;
  text-decoration: underline;
}

.tbTile .tbTileContent .id-title-container.editMode ~ .card-context-menu {
  display: none;
}

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

.tbTile.ui-draggable-dragging {
  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;
}

.tbTile.ui-draggable-dragging .tbTileContent {
  border:  solid;
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  border-width: 1px 1px 1px 0;
}

.tbTile.parentTbTile.ui-draggable-dragging .icon-add {
  display: none;
}

.tbTile .title {
  position: relative;
  height: 54px;
  line-height: 16px;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  overflow: hidden;
}

.tbTile .id-title-container {
  max-height: 52px;
  min-height: 22px;
}

.tbTile .container {
  margin-left: 7px;
  margin-right: 9px;
  margin-bottom: 9px;
  width: auto;
  height: 28px;
}

.tbTile .field-container.assignedTo {
  height: 28px;
}

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

.tbTile .tbStatusArea {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: auto;
  text-align: center;
}

.tbTile.tile-dimmed {
  border-left-color: rgba( 200, 200, 200 ,  1 );
  border-left-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.tbTile.tile-dimmed .tbTileContent {
  background-color: rgba( 244, 244, 244 ,  1 ) !important;
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 ) !important;
}

.tbTile: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 );
}

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

.taskboard-row-summary {
  cursor: pointer;
}

.taskboard-row-summary .tbPivotItem .collapsed-tile-gutter {
  vertical-align: middle;
  margin-right: 5px;
}

.taskboard-row-summary .taskboard-cell {
  padding-bottom: 0;
}

.taskboard-row-summary .taskboard-expander {
  padding-top: 10px;
}

.taskboard-row-summary .pivot-warning {
  margin-left: 2px;
  margin-right: 3px;
}

.taskboard-row-summary .tbPivotItem,
.taskboard-row-summary .tbPivotItem .title {
  width: auto;
  line-height: 22px;
}

.taskboard-row-summary .work-item-type-icon-wrapper {
  margin-left: 5px;
}

.taskboard-expander {
  width: 18px;
  max-width: 18px;
  min-width: 18px;
  vertical-align: top;
  padding: 0;
  cursor: pointer;
  border-bottom:  3px solid;
  border-bottom-color: rgba( 255, 255, 255 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  font-family: "Bowtie";
}

.taskboard-expander 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;
  border: 1px solid transparent;
}

.taskboard-expander 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;
  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 );
}

.taskboard-content-row {
  /* Used when moving between rows to highlight the parent cell */
}

.taskboard-content-row .taskboard-expander {
  padding-top: 8px;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.taskboard-content-row .dragReparentHover {
  background-color: rgba( 199, 224, 244 ,  1 );
  background-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.taskboard-content-row .tbPivotItem {
  line-height: 22px;
}

.taskboard-content-row .taskboard-parent {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.tbPivotItem .clickable-title {
  /* a style for clickable tile in taskboard */
  cursor: pointer;
  font-size: 12px;
}

.taskboard-row-summary .witTitle,
.taskboard-content-row .witTitle {
  vertical-align: middle;
  display: inline-block;
}

.taskboard-row-summary .witTitle {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 176px;
}

.taskboard-row-summary span.peopleClassification {
  min-width: 186px;
}

#taskboard-data {
  display: none;
}

/* Taskboard Structure and Gridlines */
#taskboard-table-body,
#taskboard-table-header {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.taskboard-message-area,
.taskboard-dismissable-message-area {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 15px;
}

.taskboard-message-area .reorder-message.icon,
.taskboard-dismissable-message-area .reorder-message.icon {
  margin-right: 5px;
  margin-bottom: 2px;
}

th.taskboard-cell {
  text-align: left;
  padding: 4px 10px 4px 10px;
  border-top-style: none;
}

.taskboard-parent-width {
  width: auto;
}

.taskboard-cell .subColumn {
  float: left;
}

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

.taskboard-row .tbPivotItem .dummyParentTbTile {
  border-left-color: rgba( 166, 166, 166 ,  1 );
  border-left-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.tableHeaderInnerContainer .taskboard-row .taskboard-expander.header-row {
  width: 214px;
  max-width: 214px;
  min-width: 214px;
  padding-top: 5px;
}

.tableHeaderInnerContainer .taskboard-row .taskboard-expander.header-row .expand-collapse-button {
  display: flex;
  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";
  padding: 1px 3px 1px 2px;
}

.tableHeaderInnerContainer .taskboard-row .taskboard-expander.header-row .expand-collapse-button .bowtie-icon {
  padding-top: 2px;
}

.tableHeaderInnerContainer .taskboard-row .taskboard-expander.header-row .expand-collapse-button .expand-collapse-text {
  padding-left: 3px;
  font-weight: normal;
  font-size: 14px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  width: fit-content;
}

/* Task Board Pivot Item tile and contents */
.tbPivotItem {
  width: 143px;
  margin: 0 6px 6px 0;
}

.tbPivotItem .witTitle > *:not(div) {
  /* font-family: Segoe UI, Arial, Tahoma, Verdana - Defined in Site.css */
  font-size: 14px;
  vertical-align: middle;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  display: inline-block;
}

.parentTbTile .witRemainingWork.non-combo-behavior {
  padding-left: 5px;
  /* Constraints on sizing so that we go no narrower than it takes to show "10"
       and not so wide that we would push Assigned To onto the next line (extreme edge case) */
  width: auto;
  min-width: 16px;
  max-width: 90px;
}

.parentTbTile .witState {
  white-space: nowrap;
  min-width: 10px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.parentTbTile .tbTileContent .icon-add {
  right: 5px;
}

.parentTbTile .tbTileContent .title {
  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;
  line-height: 16px;
  height: auto;
}

.parentTbTile .tbTileContent .witRemainingWork {
  text-overflow: ellipsis;
  overflow: hidden;
  top: inherit;
  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: bold;
  font-size: 12px;
  border: 1px solid transparent;
}

th .witState {
  font-weight: normal;
  font-size: 14px;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
  white-space: nowrap;
}

.witStateSummary {
  margin-left: 10px;
  display: inline;
  font-size: 12px;
  vertical-align: middle;
  color: rgba( 51, 51, 51 ,  1 );
  color: rgba( var(--palette-neutral-80,51, 51, 51) ,  1 );
}

.witStateSummary .work-item-count {
  margin-left: 14px;
}

.witRemainingWork {
  /* font-family: Segoe UI, Arial, Tahoma, Verdana - Defined in Site.css */
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  color: rgba( 0, 0, 0 ,  1 );
  color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

/* Header Row */
th .witRemainingWork {
  margin-left: 6px;
}

.dummyParentTbTile .id-title-container {
  cursor: default;
}

.dummyParentTbTile .container {
  height: 20px;
}