/* team-field-control styles are least effort to get it displaying ok in the work hub. Rewrite is recommended */
.team-field-control .guidance-text {
  width: 100%;
}

.team-field-control .guidance-text .field-name {
  font-weight: 500;
}

.team-field-control .field-value.control-cell {
  width: 350px;
}

.team-field-control .default-value.control-cell .hidden {
  display: none !important;
}

.team-field-control .controls-layout {
  margin-bottom: 30px;
}

.hub-title ~ .customize-process-message {
  position: absolute;
  left: 100px;
  top: 8px;
}

.hub-title ~ .customize-process-message .message-area-control {
  white-space: inherit;
  display: flex;
  border-color: transparent;
}

.project-admin-work {
  padding-left: 20px;
  height: 100%;
  overflow: auto;
}

.project-admin-work .description-text {
  padding-top: 10px;
  padding-bottom: 10px;
}

.project-admin-work .description-text .team-settings-link-description {
  padding-top: 15px;
}

.project-admin-work .iterations-control,
.project-admin-work .areas-control {
  height: 100%;
  width: 100%;
  padding: 0 10px 10px 0;
}

.project-admin-work .iterations-control .toolbar,
.project-admin-work .areas-control .toolbar {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 0;
}

.team-admin-work {
  padding-left: 20px;
  height: 100%;
  overflow: auto;
}

.team-admin-work .classification-message-area-container .message-area-control {
  margin-bottom: 5px;
}

.team-admin-work .templates-control {
  height: 100%;
}

.team-admin-work .team-areas-control,
.team-admin-work .team-iterations-control {
  height: 100%;
  width: 100%;
  padding: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
}

.team-admin-work .team-areas-control .classification-message-area-container,
.team-admin-work .team-iterations-control .classification-message-area-container {
  flex-shrink: 0;
}

.team-admin-work .team-areas-control .main-header,
.team-admin-work .team-iterations-control .main-header {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 16px;
  padding-top: 15px;
}

.team-admin-work .team-areas-control .intro-container,
.team-admin-work .team-iterations-control .intro-container {
  flex-shrink: 0;
}

.team-admin-work .team-areas-control .grid,
.team-admin-work .team-iterations-control .grid {
  min-height: 80px;
}

.team-admin-work .team-areas-control .learn-more-link,
.team-admin-work .team-iterations-control .learn-more-link {
  margin-left: 5px;
}

.team-admin-work .team-areas-control .toolbar-info,
.team-admin-work .team-iterations-control .toolbar-info {
  flex-shrink: 0;
  padding-top: 15px;
}

.team-admin-work .team-areas-control .toolbar,
.team-admin-work .team-iterations-control .toolbar {
  flex-shrink: 0;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 0;
}

.team-admin-work .team-areas-control .message-area-warning,
.team-admin-work .team-iterations-control .message-area-warning {
  flex-shrink: 0;
}

.team-admin-work .team-areas-control .classification-picker,
.team-admin-work .team-iterations-control .classification-picker {
  flex-shrink: 0;
  padding-top: 20px;
  width: 100%;
  /* Leverage the full width of the parent to avoid the cancel button text getting wrapped to the next line. */
  overflow: hidden;
}

.team-admin-work .team-areas-control .classification-picker .section-header,
.team-admin-work .team-iterations-control .classification-picker .section-header {
  font-weight: 600;
  display: inline-block;
}

.team-admin-work .team-areas-control .classification-picker .section-header-tooltip-icon,
.team-admin-work .team-iterations-control .classification-picker .section-header-tooltip-icon {
  display: inline-block;
  padding-left: 5px;
  cursor: pointer;
}

.team-admin-work .team-areas-control .classification-picker .classification-switchable-region,
.team-admin-work .team-iterations-control .classification-picker .classification-switchable-region {
  display: inline-block;
  max-height: 2.6em;
  width: 250px;
  overflow: hidden;
  float: left;
  /* Float left to ensure that the change container always remains to the right*/
}

.team-admin-work .team-areas-control .classification-picker .classification-switchable-region .classification-picker-text,
.team-admin-work .team-iterations-control .classification-picker .classification-switchable-region .classification-picker-text {
  display: inline-block;
  line-height: 32px;
  width: 250px;
  word-wrap: break-word;
  white-space: nowrap;
}

.team-admin-work .team-areas-control .classification-picker .classification-switchable-region .classification-picker-combo,
.team-admin-work .team-iterations-control .classification-picker .classification-switchable-region .classification-picker-combo {
  width: 250px;
  display: inline-block;
}

.team-admin-work .team-areas-control .classification-picker .classification-picker-change-container,
.team-admin-work .team-iterations-control .classification-picker .classification-picker-change-container {
  padding: 5px 0 0 5px;
  /* Bump the hyperlink down to center align vertically with switchable region and keep a padding of 5 to the left to separate from the switchable region */
  float: none;
  display: block;
  overflow: hidden;
}

.team-admin-work .team-areas-control .classification-picker .classification-picker-change-container a.cancel,
.team-admin-work .team-iterations-control .classification-picker .classification-picker-change-container a.cancel {
  padding: 5px;
  /* Add padding of 5 for the cancel button, to separate the change/set and cancel buttons. Adding it for both set and cancel doesn't play well when the text of hyperlink wraps to the next line, so the left padding for change/set button is achieved via the padding on the container. */
}

.team-admin-work .team-areas-control .classification-picker .classification-picker-change-container a.disabled,
.team-admin-work .team-iterations-control .classification-picker .classification-picker-change-container a.disabled {
  pointer-events: none;
  cursor: default;
  color: black;
}

.team-admin-work .team-areas-control .default-area-text {
  padding-top: 25px;
  padding-bottom: 20px;
  font-weight: 500;
  font-size: 16px;
}

.team-admin-work .team-areas-control .admin-hub-default-area {
  display: inline;
}

.team-admin-work .team-areas-control .default-area-change-link {
  display: inline;
  padding-left: 250px;
}

.team-admin-work .team-areas-control .form-section {
  display: inline;
}

.team-admin-work .team-areas-control .form-section .combo {
  width: 300px;
}

.team-admin-work .grid .grid-row.grid-row-current {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.team-admin-work .toolbar .menu-item .bowtie-math-plus,
.team-admin-work .toolbar .menu-item .bowtie-math-plus-heavy {
  color: rgba( 16, 124, 16 ,  1 );
  color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
}

/* Working around bowtie grid bug with initial row selection */
.project-admin-work .grid .grid-row.grid-row-current {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.modal-dialog .admin-hub-inlcude-sub-areas {
  overflow: hidden;
}

.modal-dialog .admin-hub-inlcude-sub-areas label {
  display: inline;
}

.classification-confirmation-dialog-content .classification-warning-message-area {
  padding-left: 10px;
}

.classification-confirmation-dialog-content .classification-warning-message-area .classification-warning-message-header {
  font-weight: 600;
  font-size: 16px;
}

.classification-confirmation-dialog-content .bowtie-icon.bowtie-status-warning {
  height: 35px;
  width: 35px;
  font-size: 25px;
  padding-top: 6px;
}

.classification-picker-dialog.ui-dialog .modal-dialog {
  overflow: visible;
}

.classification-picker-dialog .ui-dialog-titlebar {
  white-space: pre-wrap !important;
  /** This is to override .ui-dialog-titlebar in _Dialogs.scss */
}

.classification-picker-dialog a {
  padding-left: 6px;
}

.classification-picker-dialog .form-section .checkbox-list-no-padding {
  padding-left: 0px;
  margin-left: 3px;
  margin-top: -15px;
}

.classification-picker-dialog .form-section.admin-area-iteration {
  margin-bottom: 10px;
  margin-top: 0px;
  /** Override .bowtie-style .form-section in Core.css */
}

.classification-picker-dialog .form-section.admin-area-iteration button.add-control-container {
  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;
  box-sizing: border-box;
  display: inline-block;
  height: 28px;
  width: auto;
  white-space: nowrap;
  margin: 8px 0;
  padding: 0px 12px 0 6px;
  border: solid 1px transparent;
  cursor: pointer;
}

.classification-picker-dialog .form-section.admin-area-iteration button.add-control-container div {
  display: inline-block;
}

.classification-picker-dialog .form-section.admin-area-iteration button.add-control-container .bowtie-math-plus {
  margin: 0 2px 0 0;
}

.classification-picker-dialog .form-section.admin-area-iteration .add-control-container:hover,
.classification-picker-dialog .form-section.admin-area-iteration .add-control-container:focus {
  border:  solid 1px;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-message-area {
  display: inline-block;
  padding-left: 6px;
  padding-top: 14px;
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-message-area icon {
  display: inline-block;
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-message-area span {
  display: inline-block;
  padding-left: 3px;
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-picker {
  line-height: 0;
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-picker .admin-area-iteration-picker-combo {
  padding: 5px 0px;
  display: inline-block;
  width: calc(100% - 35px);
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-picker .delete-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;
  display: inline-block;
  margin: 10px 5px 0px 7px;
  min-width: 0px;
  border: solid 1px transparent;
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-picker .delete-button:hover,
.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-picker .delete-button:focus {
  border:  solid 1px;
  border-color: rgba( 199, 224, 244 ,  1 );
  border-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.classification-picker-dialog .form-section.admin-area-iteration .admin-area-iteration-picker:hover {
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
}

.classification-picker-dialog .form-section.admin-area-iteration .input-error-tip {
  line-height: normal;
}

.admin-area-iteration-learn-more {
  margin-left: 5px;
}

.grid-row .admin-area-iterations-link {
  visibility: hidden;
}

.grid-row:hover .admin-area-iterations-link {
  visibility: visible;
}

.grid-row .area-owner .separator {
  display: inline;
}

.delete-iterations-field-label {
  margin-top: 20px;
  margin-bottom: 4px;
}

.work-item-type-tree-view {
  height: 100%;
  overflow-y: auto;
}

.work-item-type-tree-view .node .node-content .work-item-type-color-bar.icon {
  width: 6px;
  height: 20px;
  margin-bottom: 4px;
}

.work-item-type-tree-view > .tree-view > ul.tree-children > .node {
  font-weight: normal;
  border-bottom:  1px solid;
  border-bottom-color: rgba( 234, 234, 234 ,  1 );
  border-bottom-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.work-item-type-tree-view > .tree-view > ul.tree-children > .node > .node-link > .node-content {
  display: flex;
  font-size: 13px;
  font-weight: normal;
  height: 40px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  padding-top: 9px;
  padding-left: 16px !important;
}

.work-item-template-view-container .templates-view-title {
  font-size: 18px;
  font-weight: 400;
  height: 44px;
  padding: 20px 0 0 20px;
  margin: 0;
}

.work-item-template-view-container .templates-view-content {
  position: absolute;
  top: 44px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.work-item-template-view-container .templates-view-content .templates-view-content-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.work-item-template-view-container .templates-view-content .templates-view-content-container .templates-view-description {
  height: 60px;
  font-size: 14px;
  padding: 20px 0 0 20px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  overflow-x: hidden;
  overflow-y: auto;
}

.work-item-template-view-container .templates-view-content .templates-view-content-container .templates-view-toolbar {
  margin: 5px 16px 0 10px;
}

.work-item-template-view-container .templates-view-content .templates-view-content-container .templates-view-grid-container {
  position: absolute;
  top: 110px;
  bottom: 0px;
  left: 10px;
  right: 0px;
}

.work-item-template-view-container .templates-view-content .templates-view-content-container .templates-view-grid {
  position: relative;
  height: 100%;
  line-height: 20px;
}

.work-item-template-view-container .templates-view-content .templates-view-content-container .templates-view-grid .grid-cell-contents-container div {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==============================================================*/
/* Styles specific to Create/Edit/Delete/Security Area/Iteration dialogs
/* ==============================================================*/
.edit-classification-host .dialog-header {
  text-transform: none;
  /** Override dialog-header from Site.css*/
}

.areas-iterations-edit-control td:first-child {
  white-space: nowrap;
  width: auto;
  padding-top: 0px;
}

.areas-iterations-edit-control td {
  width: 400px;
  padding: 5px 10px 5px 0px;
}

.row-drag-tile {
  height: 48px;
  width: 76px;
  padding: 3px;
  position: absolute;
  font-size: 7pt;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  background-color: rgba( 199, 224, 244 ,  1 );
  background-color: rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 );
}

.grid-row.admin-area-iteration-grid-row-drop-active {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}