/**
    Padding
*/
/**
    Margin Section
*/
/**
    Font Section
*/
/*
    Canvas Element Colors
*/
.fabric-style-overrides {
  /*To avoid hinderence of opacity by the ms-fadeIn400 for flatviewdropdown we need to override the animation*/
  /*  
        The standard dropdown does not support required value
        indicator. The following style is applied to show 
        the required indicator when a dropdrown that is required
        has no options
    */
  /* 
        The required indicator text that is rendered for other components
        appear at a margin that is slightly more than what is shown for text box.
        The below override is to position it similar to how the required indicator
        is positioned for the textbox.
    */
  /* 
        Office fabric has a label of its own for drop down which does not meet the style requirements that we have.
        The below setting is required to modify the padding for the label under drop down so that the spacing is handled properly.
    */
}

.fabric-style-overrides .ms-List-cell {
  min-height: 0 !important;
}

.fabric-style-overrides.show-options-horizontally .ms-ChoiceField {
  display: inline-block;
}

.fabric-style-overrides .ms-ChoiceField {
  min-height: 0;
  padding-left: 5px !important;
  padding: 6px 6px 5px 5px;
  margin-top: 0px;
  margin-right: 15px;
}

.fabric-style-overrides .ms-ChoiceField--image {
  padding: 0;
  padding-left: 0 !important;
  margin-right: 5px;
}

.fabric-style-overrides .ms-ChoiceField--icon {
  padding: 0;
  padding-left: 0 !important;
  margin-right: 5px;
}

.fabric-style-overrides .ms-ChoiceFieldGroup {
  margin-bottom: 0;
}

.fabric-style-overrides.filter-dropdown .ms-Dropdown,
.fabric-style-overrides.github-branch-list .ms-Dropdown {
  margin-top: 2px;
  width: 100%;
}

.fabric-style-overrides.filter-dropdown .ms-Dropdown .ms-Dropdown-items {
  overflow-y: hidden;
}

.fabric-style-overrides.delete-button.bowtie-trash.filter-row-button {
  font-family: bowtie;
  font-size: 16px;
  margin-left: 5px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: rgba( 166, 166, 166 ,  1 );
  color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.fabric-style-overrides.delete-button.bowtie-trash.filter-row-button:hover, .fabric-style-overrides.delete-button.bowtie-trash.filter-row-button:focus {
  color: rgba(0, 120, 212, 1);
  color: var(--communication-background,rgba(0, 120, 212, 1));
}

.fabric-style-overrides.delete-button.bowtie-trash.filter-row-button.gate-header-right-delete-button {
  margin-left: 0px;
  padding-top: 2px;
  max-height: 25px;
}

.fabric-style-overrides.delete-environment-button.ms-Button:hover {
  background: rgba( 234, 234, 234 ,  1 );
  background: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.fabric-style-overrides.remove-linkSettings-button {
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
  font-size: 14px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  top: -10px;
}

.fabric-style-overrides.remove-linkSettings-button::before {
  font-family: "bowtie";
  padding-right: 5px;
}

.fabric-style-overrides.remove-linkSettings-button:hover .ms-Button-label, .fabric-style-overrides.remove-linkSettings-button:focus .ms-Button-label {
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
}

.fabric-style-overrides.remove-linkSettings-button.is-disabled {
  color: rgba( 200, 200, 200 ,  1 );
  color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.fabric-style-overrides.icon-button-override.ms-Button.ms-Button--icon {
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  height: 32px;
}

.fabric-style-overrides.icon-button-override.ms-Button.ms-Button--icon:hover {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.fabric-style-overrides.command-button-override.ms-Button.ms-Button--command {
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
  height: 32px;
}

.fabric-style-overrides.command-button-override.ms-Button.ms-Button--command:hover {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.fabric-style-overrides.queue-dialog-action-button-override.ms-Button .ms-Button-label {
  line-height: 28px;
}

.fabric-style-overrides.commandBar-hover-override.ms-CommandBarItem:hover {
  background-color: transparent;
}

.fabric-style-overrides.add-new-item-button.ms-Button {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.fabric-style-overrides.add-new-item-button.ms-Button .ms-Button-label {
  color: rgba( 16, 110, 190 ,  1 );
  color: rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 );
}

.fabric-style-overrides.add-new-item-button.ms-Button:hover {
  background: rgba( 234, 234, 234 ,  1 );
  background: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.fabric-style-overrides.add-artifact-button.ms-Button:hover {
  background: rgba( 234, 234, 234 ,  1 );
  background: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.fabric-style-overrides.daysOfWeek-datetime-component .ms-Checkbox .ms-Label, .fabric-style-overrides.tiled-checkbox-list .ms-Checkbox .ms-Label {
  padding: 0px 0px 0px 20px !important;
}

.fabric-style-overrides.daysOfWeek-datetime-component .ms-Checkbox .ms-Checkbox-checkbox > i, .fabric-style-overrides.tiled-checkbox-list .ms-Checkbox .ms-Checkbox-checkbox > i {
  padding-left: 5px;
}

.fabric-style-overrides.daysOfWeek-datetime-component .ms-Checkbox-label, .fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label {
  min-height: 30px;
  /*Using both classes now to ensure M122-M121 compat. Remove post M123. Tracked as #1051508*/
}

.fabric-style-overrides.daysOfWeek-datetime-component .ms-Checkbox-label span.text,
.fabric-style-overrides.daysOfWeek-datetime-component .ms-Checkbox-label span.ms-Checkbox-text, .fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label span.text,
.fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label span.ms-Checkbox-text {
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 50%;
}

.fabric-style-overrides.daysOfWeek-datetime-component .is-checked .ms-Checkbox-label .ms-Checkbox-checkbox, .fabric-style-overrides.tiled-checkbox-list .is-checked .ms-Checkbox-label .ms-Checkbox-checkbox {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.fabric-style-overrides.daysOfWeek-datetime-component .is-checked .ms-Checkbox-label .ms-Checkbox-checkbox > i, .fabric-style-overrides.tiled-checkbox-list .is-checked .ms-Checkbox-label .ms-Checkbox-checkbox > i {
  color: rgba(0, 120, 212, 1);
  color: var(--communication-background,rgba(0, 120, 212, 1));
}

.fabric-style-overrides.daysOfWeek-datetime-component .ms-Checkbox-label .ms-Checkbox-checkbox {
  border: none;
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
}

.fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label {
  width: 150px;
  /*Using both classes now to ensure M122-M121 compat. Remove post M123. Tracked as #1051508*/
  /*Using both classes now to ensure M122-M121 compat. Remove post M123. Tracked as #1051508*/
}

.fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label .ms-Checkbox-box {
  padding-left: 5px;
  display: block;
}

.fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label .ms-Checkbox-checkbox {
  border: none;
  display: block;
  margin-top: 3px;
}

.fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label span.text,
.fabric-style-overrides.tiled-checkbox-list .ms-Checkbox-label span.ms-Checkbox-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 115px;
  line-height: 30px;
}

.fabric-style-overrides.history-details-list {
  /*undoing bowtie styling effect*/
}

.fabric-style-overrides.history-details-list .ms-DetailsRow-cellCheck .ms-DetailsRow-check {
  height: 32px;
}

.fabric-style-overrides.history-back-button.ms-Button.ms-Button--command .ms-Button-label {
  color: rgba(0, 120, 212, 1);
  color: var(--communication-background,rgba(0, 120, 212, 1));
}

.fabric-style-overrides.history-back-button.ms-Button.ms-Button--command:hover {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.fabric-style-overrides .flat-view-row .ms-DetailsRow {
  animation: inherit;
}

.fabric-style-overrides .required-value-missing .ms-Dropdown .ms-Dropdown-title {
  border-color: rgba( 168, 0, 0 ,  1 );
  border-color: rgba( var(--palette-accent1-dark,168, 0, 0) ,  1 );
}

.fabric-style-overrides .required-value-missing .ms-TextField-errorMessage {
  margin-top: -10px;
}

.fabric-style-overrides .required-value-missing .ms-TextField-errorMessage .required-indicator-error-icon {
  margin-right: 5px;
  font-size: 14px;
}

.fabric-style-overrides .task-input-dropdown .ms-Label {
  padding: 0;
}

.fabric-style-overrides .input-field-component .ms-TextField-field {
  max-width: 1000px;
}

.fabric-style-overrides.tag-picker input {
  height: 26px;
}

.fabric-style-overrides.tag-picker input:disabled {
  background-color: rgba( 248, 248, 248 ,  1 );
  background-color: rgba( var(--palette-neutral-2,248, 248, 248) ,  1 );
}

.fabric-style-overrides.tag-picker .ms-TagItem {
  line-height: 24px;
}

/* Office Dialog override to have Title with Subtext without any padding between them */
.dialog-fabric-style-overrides .dialog-fabric-container-titletext-overrides .ms-Dialog-header .ms-Dialog-title {
  padding-bottom: 0px;
}

.dialog-fabric-style-overrides .dialog-fabric-container-titletext-overrides .dialog-fabric-content-subtext-overrides .ms-Dialog-subText {
  padding-top: 0px;
}

.dialog-fabric-style-overrides .dialog-fabric-container-title-overflow-overrides.overflow-ellipsis-title .ms-Dialog-header .ms-Dialog-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

/* Office DetailsList override to remove a line beneath the header with columns */
.details-list-header-fabric-style-overrides .ms-DetailsHeader {
  border-bottom: none;
}

/* Office BreadCrumb override to avoid ellipsis in CD for root link text */
.breadcrumb-fabric-style-overrides.dtc-bread-crumb-root .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
  max-width: 300px;
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot {
  position: absolute;
  top: 5px;
  right: 0px;
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link {
  margin: 0px 1px 0px 1px;
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.vss-focus-visible .process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link:focus {
  outline: 1px solid rgba( 0, 0, 0 ,  1 );
  outline: 1px solid rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link.is-selected {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link.is-selected::before {
  border-bottom: 1px solid transparent;
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link.is-selected .dtc-grid-list-view-pivot-icon {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link:hover .dtc-grid-list-view-pivot-icon {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

.process-variables-v2-details-container .fabric-style-overrides .ms-Pivot .ms-Pivot-link:hover .dtc-grid-list-view-pivot-name {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.process-variables-v2-details-container .fabric-style-overrides .ms-DetailsRow.is-selected .flat-view-button {
  display: block;
}

.counter-variables-details-container .fabric-style-overrides .ms-DetailsRow:hover {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
}

.counter-variables-details-container .fabric-style-overrides .ms-DetailsRow.is-selected {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.counter-variables-details-container .fabric-style-overrides .ms-DetailsRow.is-selected:hover {
  background-color: rgba( 222, 236, 249 ,  1 );
  background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

.create-release-pivot .ms-Pivot-link .release-dialog-pivot-icon.Warning {
  color: rgba( 214, 127, 60 ,  1 );
  color: rgba( var(--palette-accent3,214, 127, 60) ,  1 );
  padding-right: 3px;
}

.create-release-pivot .ms-Pivot-link .release-dialog-pivot-icon.Error {
  color: rgba( 218, 10, 0 ,  1 );
  color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
  padding-right: 3px;
}

.source-selection-tab-panel .ms-ChoiceField {
  width: auto !important;
}

.pipeline-dsw-container .ms-DetailsRow-fields,
.pipeline-dsw-container .ms-DetailsRow {
  min-height: 32px;
}

.pipeline-dsw-container .ms-DetailsRow {
  border-bottom: none !important;
}

.pipeline-dsw-container .ms-List-cell {
  min-height: 35px !important;
}

.dsw-configuration-panel .ms-ChoiceField.is-inFocus {
  border: solid rgba(0, 120, 212, 1) 1px;
  border: solid var(--communication-background,rgba(0, 120, 212, 1)) 1px;
}

.scope-picker-dropdown.vss-PickList .vss-PickList--multiSelectableElement .vss-PickList--multiSelectTextContainer {
  flex-grow: 0;
}