.utilization-usagesummary-view {
  /* The Office Fabric TextField's input and addon will overlap the bottom border of the text field (based on zoom and rounding). */
}

.utilization-usagesummary-view .timerangepicker-filter {
  min-width: 200px;
  max-width: 380px;
}

.utilization-usagesummary-view .timerangepicker-main-button {
  width: 100%;
  padding: 0 12px 0 12px;
  height: 32px;
}

.utilization-usagesummary-view .timerangepicker-main-button .ms-Button-textContainer {
  flex-grow: 1;
  overflow: hidden;
}

.utilization-usagesummary-view .timerangepicker-main-button .ms-Button-textContainer .ms-Button-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.utilization-usagesummary-view .timerangepicker-main-button:hover {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  background-color: rgba( 0, 0, 0 ,  0.06 );
  background-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  0.06 );
}

.utilization-usagesummary-view .timerangepicker-main-button:focus {
  border-color: rgba(0, 120, 212, 1);
  border-color: var(--communication-background,rgba(0, 120, 212, 1));
}

.utilization-usagesummary-view .vss-FilterBar--item-text input,
.utilization-usagesummary-view .vss-FilterBar--item-text .ms-TextField-fieldGroup {
  background-color: transparent;
}

.utilization-usagesummary-view .ms-TextField-fieldGroup {
  border: 0;
}

.utilization-usagesummary-view .identity-field-readonly {
  display: flex;
  height: 32px;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  padding: 1px 0 0 0;
  width: 240px;
}

.utilization-usagesummary-view .identity-field-readonly .persona-wrapper {
  padding: 2px;
}

.utilization-usagesummary-view .identity-field-readonly .ms-Label {
  padding: 5px 12px 5px 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.utilization-usagesummary-view .identity-picker-container {
  width: 240px;
  height: 32px;
  border:  1px solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  padding: 2px;
}

.utilization-usagesummary-view .identity-picker-container:hover {
  border: 1px solid rgba(0, 0, 0, .55);
  border: 1px solid var(--text-secondary-color,rgba(0, 0, 0, .55));
}

.utilization-usagesummary-view .identity-picker-container:focus {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--communication-background,rgba(0, 120, 212, 1));
}

.utilization-usagesummary-view .identity-picker-container ::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  font-style: initial;
}

.utilization-usagesummary-view .identity-picker-container :-moz-placeholder {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  font-style: initial;
  opacity: 1;
}

.utilization-usagesummary-view .identity-picker-container ::-moz-placeholder {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  font-style: initial;
  opacity: 1;
}

.utilization-usagesummary-view .identity-picker-container :-ms-input-placeholder {
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  font-style: inherit;
  background-color: transparent;
}

.utilization-usagesummary-view .identity-picker-resolved-name {
  padding-top: 1px;
}

.utilization-usagesummary-view .identity-picker-search-box input[type=text].identity-picker-input {
  padding: 0 0 0 5px;
  height: 26px;
}

.utilization-usagesummary-view .number-of-records {
  font-size: 14px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding: 8px;
}

.utilization-usagesummary-view .loading-spinner {
  padding-top: 60px;
}

.utilization-usagesummary-view .no-list-item {
  text-align: center;
  font-size: 16px;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  padding-top: 60px;
}

.utilization-usagesummary-view .user-cell {
  display: flex;
}

.utilization-usagesummary-view .user-cell .persona-wrapper {
  padding: 5px 4px 0 0;
}

.utilization-usagesummary-view .vss-PivotBar--content {
  flex-basis: 1px;
}

.timerangepicker-callout {
  width: 380px;
}

.timerangepicker-callout .title {
  width: 80px;
  float: left;
  margin: 4px;
}

.timerangepicker-callout .custom-timerange-container {
  padding: 4px;
  background-color: rgba( 218, 218, 218 ,  1 );
  background-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
}

.timerangepicker-callout .custom-timerange-container .vss-DateTimeRangePicker {
  margin: 4px;
}

.timerangepicker-callout .timebin-container {
  display: flex;
  flex-direction: row;
  padding: 4px;
}

.timerangepicker-callout .timebin-container .timebin {
  width: 280px;
  float: left;
}

.column-filter-callout {
  min-width: 180px;
  padding: 10px;
}

.column-filter-callout .ms-Checkbox {
  padding-left: 8px;
}

.column-filter-callout .ms-Checkbox[disabled] {
  border: none;
}

.column-filter-callout .ms-Checkbox[disabled]:hover {
  border: none;
}