/* Blueprint Edit layout */
.cmpsr-grid__wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "header header"
    "inputsTitle editTitle"
    "inputs edit";
  overflow: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
/* Blueprint Edit page header */
.cmpsr-grid__wrapper .cmpsr-header {
  grid-area: header;
  margin: 0 20px;
}
/* Blueprint Edit panels */
.cmpsr-panel__title {
  border: 1px solid #d1d1d1;
  background: #f2f2f2;
  padding: 10px 20px;
  font-size: 14px;
  color: inherit;
  font-weight: bold;
  margin: 0;
}
.cmpsr-panel__title--sidebar {
  grid-area: inputsTitle;
  margin-right: -1px;
  margin-left: 20px;
}
.cmpsr-panel__title--main {
  grid-area: editTitle;
  margin-right: 20px;
}
.cmpsr-panel__body {
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: #d1d1d1;
}
.cmpsr-panel__body--sidebar {
  grid-area: inputs;
  margin-right: -1px;
  margin-left: 20px;
}
.cmpsr-panel__body--main {
  grid-area: edit;
  background: var(--pf-global--BackgroundColor--100);
  margin-right: 20px;
}
/* Blueprint Edit panel contents */
.cmpsr-grid__wrapper .cmpsr-panel__body {
  overflow: auto;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
  position: relative;
}
.cmpsr-panel__body .toolbar-pf {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
}
.cmpsr-panel__body .toolbar-pf .btn-link {
  border: none;
}
.cmpsr-panel__body > * {
  margin: 0 20px;
}
.cmpsr-panel__body .toolbar-pf {
  margin: 0;
}
.cmpsr-panel__body .toolbar-pf > * {
  padding: 0 20px;
}
.cmpsr-panel__body  .toolbar-pf .toolbar-pf-actions {
  padding-top: 10px;
}
.cmpsr-panel__body--sidebar .toolbar-pf .toolbar-pf-actions {
  margin-bottom: 0;
}
.cmpsr-panel__body--sidebar .toolbar-pf .toolbar-pf-actions > *:last-child {
  margin-bottom: 10px;
}
.toolbar-pf-results {
  margin-top: 0;
}
.cmpsr-panel__body--view {
  margin-left: -20px;
  margin-right: -20px;
}
.cmpsr-panel__body .list-pf {
  border-bottom: none;
}
 /* Blueprint view */
 .cmpsr-pg__blueprint-view {
   padding: 0 20px;
 }

 /* page header */
.cmpsr-header {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
          align-items: baseline;
  flex-wrap: wrap;
}
.cmpsr-header--modal {
  justify-content: flex-end;
}
.cmpsr-header > * {
  margin: 8px 0 0 0;
  padding: 0
}
.cmpsr-header--modal > * {
  margin: 0 0 8px 0;
}
.cmpsr-header__actions .list-inline {
  margin: 0;
}
.cmpsr-header__actions .list-inline > li {
  vertical-align: middle;
}
.cmpsr-header__actions .list-inline > li:last-child {
  padding-right: 0;
}
.cmpsr-header__actions .list-inline > li:first-child {
  padding-left: 0;
}
.list-inline .list__subgroup-item--first {
  border-left: 1px solid #e5e5e5;
  padding-left: 10px;
  margin-left: 5px;
}
.cmpsr-title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
          align-items: baseline;
  flex-basis: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
.cmpsr-title__item {
  margin: 0 10px 0 0;
}
h1.cmpsr-title__item {
  font-size: var(--pf-global--FontSize--2xl);
}

/* List view */
.cmpsr-list-pf .list-pf-expansion .list-pf-container {
  display: block;
} /* TODO: remove and switch to flexbox for expanded contents */
.cmpsr-list-pf .list-pf-main-content {
  flex-basis: 100%;
}
.list-view-pf-main-info > .list-pf-icon {
  margin-right: 20px;
}
.cmpsr-list-pf .list-pf-additional-content {
  flex-basis: 100%;
  flex-shrink: 0;
  -webkit-box-pack: start;
          justify-content: flex-start;
  flex-wrap: nowrap;
}
.cmpsr-list-pf .list-view-pf-additional-info-item {
  flex-basis: auto;
  -webkit-box-align: baseline;
          align-items: baseline;
  flex-shrink: 0;
  -webkit-box-flex: 0;
          flex-grow: 0;
}
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  white-space: nowrap;
}
.cmpsr-list-pf .list-view-pf-additional-info-item-stacked strong {
  margin-left: 5px;
  margin-right: 0;
  font-size: inherit;
}
.cmpsr-list-pf .list-pf-actions {
  flex-shrink: 0;
  justify-content: flex-end;
}
@media (min-width: 992px) {
  .cmpsr-list-pf .list-pf-main-content {
    flex-basis: 50%;
  }
  .cmpsr-list-pf .list-pf-additional-content {
    flex-basis: 50%;
    justify-content: space-around;
  }
  .cmpsr-list-pf .list-view-pf-additional-info-item {
    flex-basis: 50%;
    -webkit-box-align: center;
            align-items: center;
  }
  .cmpsr-list-pf .list-view-pf-additional-info-item.i18n > span {
    display: flex;
  }
  .cmpsr-list-pf .list-view-pf-additional-info-item-stacked,
  .cmpsr-list-pf .list-view-pf-additional-info-item-stacked.i18n > span {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
  }
  .cmpsr-list-pf .list-view-pf-additional-info-item-stacked strong {
    margin-left: 0;
  }
}
.list-pf-item:hover .cmpsr-list-item__text--muted,
.list-pf-item.active .cmpsr-list-item__text--muted {
  color: initial;
}
.cmpsr-list-sources .list-pf-content-wrapper {
  flex-direction: column;
  align-items: stretch;
}
.cmpsr-list-sources .list-pf-main-content {
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.cmpsr-list-sources .list-pf-title, .cmpsr-list-sources .list-pf-description {
  flex: 0 1 auto;
  margin-right: 20px
}
.cmpsr-list-sources .list-pf-additional-content {
  justify-content: flex-start;
  margin-left: 0;
}
.cmpsr-list-sources .list-pf-actions {
  flex-basis: 150px;
  margin-left: 0;
}
@media (min-width: 640px) {
  .cmpsr-list-sources .list-pf-main-content {
    flex-direction: row;
  }
}
@media (min-width: 992px) {
  .cmpsr-list-sources .list-pf-title, .cmpsr-list-sources .list-pf-description {
    flex-basis: calc(50% - 20px);
  }
}

/* sidebar */
.cmpsr-panel__body--sidebar .toolbar-pf-actions .toolbar-pf-filter {
  width: auto;
}
.cmpsr-panel__body--sidebar {
  background-color: #fafafa;
}
.cmpsr-panel__body--sidebar .pf-c-data-list {
  margin: -1px 0;
}
.cmpsr-panel__body--sidebar .alert {
  margin: 10px 20px;
}
.label-info {
  background-color: var(--pf-global--link--Color);
}

/*Component details*/
.pf-icon-small {
    font-size: 1.7rem;
    height: 2.2rem;
    line-height: 2.2rem;
    width: 2.2rem;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
}
.cmpsr-component-details--view {
  margin-top: 20px;
}
.cmpsr-component-details__form {
  background-color: #ededed;
  border: 1px solid #24a4e1;
  border-radius: 1px;
  margin-bottom: 20px;
  padding: 5px 10px;
}
.cmpsr-component-details__form .form-horizontal {
  margin: 15px 0;
}

/* Blueprint details page */
.list-pf .list-group-item__separator,
.list-pf .list-group-item__separator:hover {
  background-color: #f7f7f7;
}
.list-pf .list-group-item__separator .list-pf-container {
  padding-top: 0;
  padding-bottom: 0;
}
.cmpsr-blueprint__changes .list-group {
  margin-bottom: 0;
  border-top: 0;
}
.cmpsr-blueprint__changes .list-group-item:last-child {
  border-bottom: 0;
}

/* Images list view */

.cmpsr-images .list-pf-actions {
  flex-basis: 20%;
  -webkit-box-pack: end;
          justify-content: flex-end;
  margin-left: 0;
}
.cmpsr-images.cmpsr-list-pf .list-view-pf-additional-info-item.cmpsr-images__status {
  flex-basis: 15%;
  margin-left: 10%;
  -webkit-box-align: center;
  align-items: center;
  white-space: nowrap;
}
.cmpsr-images .list-pf-content-wrapper {
  flex-basis: 55%;
}

.cc-c-data-list__item-status .pficon-in-progress {
  -webkit-animation: 1s infinite linear rotate;
          animation: 1s infinite linear rotate;
}

@-webkit-keyframes rotate {
  from {
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-359deg);
            transform: rotate(-359deg);
  }
}

@keyframes rotate {
  from {
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-359deg);
            transform: rotate(-359deg);
  }
}

@media (min-width: 992px) {
  .cmpsr-images .list-view-pf-additional-info-item {
    flex-basis: 30%;
  }
}

.list-pf-icon-bordered-dotted {
  border-style: dotted;
}
.list-pf-icon-bordered-gray {
  border-color: #949494;
}

/* tab contents */
.tab-container {
    padding: 20px 0;
}

/* toolbar */
.toolbar-pf-actions .toolbar-pf-filter.form-group {
  padding-left: 20px;
}
.toolbar-pf-actions .form-group:first-child {
  padding-left: 0;
}

/* loading */
.cmpsr-loading {
  text-align: center;
  padding-top: 40px;
}

/* inline edit */
.form-control-pf-editable .sr-only + .pficon-edit {
  margin-left: 0;
}

.form-control-pf-editable > .form-control-pf-value {
  text-align: left;
}
.form-control-pf-editable > .form-control-pf-value > span {
  word-break: break-all;
}

/* tables */
.cmpsr-table-actions {
  width: 1%;
  white-space: nowrap;
}
.cmpsr-table-actions .btn-link {
  padding-top: 0;
  padding-bottom: 0;
}
table .form-control {
  margin-left: -7px;
  box-sizing: content-box;
  height: auto;
}

.cmpsr-table-row--editable .cmpsr-table-actions {
  height: 0;
}

.cmpsr-inline-edit-btn-wrapper {
  height: 100%;
  width: 100%;
}

.cmpsr-table-row--editable .cmpsr-inline-edit-buttons {
  position: absolute;
  background-color: #def3ff;
  border: 1px solid #d1d1d1;
  border-top-color: #def3ff;
  padding: 3px;
  display: block;
  transform: translate(calc(-100% + 10px), 3px);
}

.cmpsr-table-row--editable:hover .cmpsr-inline-edit-buttons {
  background-color: #c4eaff;
  border-color: #7DC3F0;
  border-top-color: #c4eaff;
}

.table .cmpsr-width-60 {
  width: 60%;
}
.table .cmpsr-width-20 {
  width: 20%;
}

/* ------------------------------- */
/* modifications to patternfly css */

/* body displays in an iframe without nav */
/* resetting body so that grid layout can fill page */
body, html {
  height: 100%;
}
body {
  position: relative;
}

/* empty state */
.cmpsr-alert-blank-slate {
  margin-top: 30px;
}

.cmpsr-alert-blank-slate {
  margin-bottom: 5px;
}

/* notifications */
.toast-notifications-list-pf {
  top: 8px;
}

/*toolbar*/
.toolbar-pf .form-group {
  border-right: 1px solid #d1d1d1;
  float: left;
  margin-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
}
.toolbar-pf-action-right {
  float: right;
}

/* list-pf */
.list-pf-title .text-muted {
  font-weight: normal;
}

/* nav-tabs-pf */
#blueprint-tabs .nav-tabs {
  margin-top: var(--pf-global--spacer--sm);
}
.nav-tabs .badge {
  display: inline;
}

/* disabled state */
/* disable pointer events for both <a> and <button> */
.btn.disabled, fieldset[disabled] .btn {
  pointer-events: none;
}
/* enable pointer events for disabled button that has a tooltip */
.disabled.cmpsr-has-tooltip {
  pointer-events: initial;
}

[data-toggle] {
  cursor: pointer;
}

/* text-muted inside strong element - for translatable strings */
strong > .text-muted {
  font-weight: normal;
  color: initial;
}

/* This is added for the export dialog so that the contents have higher contrast */
textarea.form-control[readonly] {
  background-color: inherit;
  color: inherit;
}

/* PF4 styles for PF3 classes */
body {
  background: var(--pf-global--BackgroundColor--100);
}
.container-fluid {
  padding: 0 20px;
}

.fields-status-pf {
  color: var(--pf-global--Color--200);
}
.text-muted {
  color: var(--pf-global--Color--200);
}

/* PF4 DataList customizations */

.pf-c-data-list.cc-m-compact {
  --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-data-list__item-content--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
  --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--sm);
}

.pf-c-data-list__expandable-content pre {
  border-top: none;
}

.cc-u-not-visible {
  visibility: hidden !important;
} /* used to visually hide elements, but still retain the spacing that they take up */
  /* use this with aria-hidden to also hide from assistive technologies */

/* expand buttons are included for all nodes, but only visible for nodes with children */
.pf-c-data-list__item-control[aria-hidden="true"] .pf-c-button {
  visibility: hidden;
} 

.cc-c-data-list__item-icon {
  flex: 0 0 1rem;
  margin-right: var(--pf-c-data-list__item-control--MarginRight);
  padding-top: var(--pf-c-data-list__cell--PaddingTop);
} /* sets size and spacing for custom icon column */

.cc-c-status {
  display: grid;
  grid-row-gap: var(--pf-global--spacer--md);
  grid-column-gap: var(--pf-global--spacer--sm);
  grid-template-columns: minmax(var(--pf-global--icon--FontSize--md) , min-content) auto;
}
.cc-c-status .cc-m-full-width {
  grid-column-start: 1;
  grid-column-end: 3;
}
.cc-c-status__icon {
  justify-self: center;
}

.pf-c-data-list__item-action.cc-m-nowrap {
    flex-wrap: nowrap;
} /* prevents actions from wrapping */

@media screen and (max-width: 62rem) {
  .cc-m-nowrap-on-lg .pf-c-data-list__item-content {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    padding-bottom: 0;
  }
  .cc-m-nowrap-on-lg .pf-c-data-list__cell {
    padding-bottom: var(--pf-global--spacer--xs);
  }
  .cc-m-nowrap-on-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
    margin-left: 0;
    padding-top: 0;
  }
  .cc-m-nowrap-on-lg .pf-c-data-list__cell:last-child {
    padding-bottom: var(--pf-global--spacer--md);
  }
} /* changes with media query for when contents start to wrap */

@media screen and (max-width: 75rem) {
  .cc-m-nowrap-on-xl .pf-c-data-list__item-content {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    padding-bottom: 0;
  }
  .cc-m-nowrap-on-xl .pf-c-data-list__cell {
    padding-bottom: var(--pf-global--spacer--xs);
  }
  .cc-m-nowrap-on-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
    margin-left: 0;
    padding-top: 0;
  }
  .cc-m-nowrap-on-xl .pf-c-data-list__cell:last-child {
    padding-bottom: var(--pf-global--spacer--md);
  }
} /* changes with media query for when contents start to wrap */

/* customizations for Components list view */
/* Defines different grid areas when list item contents have display:grid (up to lg breakpoint) */
/* Defines different flex properties when list item contents have display:flex */
.cc-component .pf-c-data-list__item-content {
  grid-template-areas:
    "name name" 
    "version release";
  grid-template-columns: minmax(auto,50%) 1fr;
  flex-wrap: nowrap;
}
.cc-component .pf-c-data-list__cell:not(:last-child) {
  margin-right: var(--pf-global--spacer--md);
}
.cc-component__name.pf-c-data-list__cell {
  grid-area: name;
  flex: 0 0 calc(55% - var(--pf-c-data-list__cell-cell--MarginRight));
}
.cc-component__version.pf-c-data-list__cell {
  grid-area: version;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 calc(15% - var(--pf-c-data-list__cell-cell--MarginRight));
}
.cc-component__release.pf-c-data-list__cell {
  grid-area: release;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 30%;

} /* sets spacing for icon column */

/* modifies default datalist styles to always have contents in this element stacked */
.pf-c-data-list__item-content.cc-m-stacked {
  display: grid;
  width: 100%;
  padding-top: var(--pf-c-data-list__cell--PaddingTop);
  padding-bottom: var(--pf-global--spacer--md);
  grid-gap: var(--pf-global--spacer--md);
}
.pf-c-data-list__item-content.cc-m-stacked .pf-c-data-list__cell {
  padding-top: 0 !important;
  padding-bottom: 0;
  grid-column: unset;
  grid-column-start: 1;
}
@media screen and (min-width: 54rem) {
  .pf-c-data-list__item-content.cc-m-split-on-lg {
    grid-template-columns: 50% 50%;
    grid-gap: var(--pf-global--spacer--xs);
  }
  .pf-c-data-list__item-content.cc-m-split-on-lg .pf-c-data-list__cell:last-child {
    grid-column-start: 2;
  }
}

/* form group checkbox alignment fix */
.pf-c-form__horizontal-group .pf-c-check,
.pf-c-form__horizontal-group .pf-c-radio,
.pf-c-form__group-control .pf-c-check,
.cc-c-form__static-text {
  padding-top: var(--pf-global--spacer--form-element);
  padding-bottom: var(--pf-global--spacer--form-element);
}

.pf-c-form__horizontal-group .pf-c-check input[type=checkbox],
.cc-c-form__static-text input[type=checkbox] {
  margin-top: 0px;
}

.pf-c-form__horizontal-group .pf-c-check__label {
  line-height: var(--pf-global--LineHeight--md);
}

/* spacing below warning alert in wizard */
.pf-c-wizard__main-body .pf-c-alert,
.cc-c-alert__warning  {
  margin-bottom: var(--pf-global--gutter);
}

/* horizontal group with popover justification fix*/
.cc-c-popover__horizontal-group {
  display: flex;
  justify-content: space-between;
}

.cc-c-form__required-text {
  margin-bottom: var(--pf-global--gutter);
}

.cc-c-text__align-icon {
  vertical-align: -0.125em;
}

/* Setting a fixed width similar to the values used in horizontal forms */
/* var(--pf-c-form--m-horizontal--md__group--GridTemplateColumns)  */
/* NOTE that 576px is defined as a sass variable in PF source code as min-width: $pf-global--breakpoint--sm */
@media screen and (min-width: 576px) {
  .pf-c-content dl.cc-m-column__fixed-width {
    grid-template-columns: 200px 1fr;
  }
}

.pf-c-form.pf-m-horizontal.cc-m-wide-label .pf-c-form__group {
  grid-template-columns: 200px 1fr;
}

.pf-icon svg {
  vertical-align: -0.125em;
}