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

}