/* pf4 base styles */
@import url('~@patternfly/react-core/dist/styles/base.css');
@import url('~@fortawesome/fontawesome-free/css/all.css');

:root {
  --pf-global--FontSize--md: var(--pf-global--FontSize--sm);
  --pf-global--link--Color: #0088ce;
  --pf-c-nav__list-link--m-current--after--BackgroundColor: #0088ce;
  --pf-global--link--Color--hover: #00659c;
  --pf-c-backdrop--Color: rgba(3, 3, 3, 0.62);
  --pf-c-popover__content--PaddingRight: 3rem;
  --pf-global--gutter--md: 1.5rem;
}

.pf-c-page__main {
  background-color: var(--pf-c-page__main-section--BackgroundColor);
}

.pf-c-page__main-breadcrumb {
  --pf-c-page__main-breadcrumb--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-global--spacer--sm);
}

@media screen and (min-width: 768px) {
  .pf-c-page__main-breadcrumb {
    --pf-c-page__main-breadcrumb--PaddingBottom: 0;
    --pf-c-page__main-breadcrumb--PaddingTop: var(--pf-global--spacer--md);
  }
}

.pf-c-page__header-brand-link .pf-c-brand {
  --pf-c-page__header-brand-link--c-brand--MaxHeight: 40px;
  height: 40px;
}

.pf-c-dropdown__toggle {
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--sm);
}

.pf-c-dropdown__toggle.syn-help-dropdown {
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
}

.pf-c-page {
  width: 100%;
  height: 100vh;
}

.pf-c-dropdown__menu-item {
  --pf-c-dropdown__menu-item--FontSize: var(--pf-global--FontSize--xs);
}

body {
  line-height: var(--pf-global--LineHeight--sm);
  color: var(--pf-global--Color--100);
}

#root {
  flex: 1;
  display: flex;
  height: 100%;
}

.navbar-pf .navbar-utility > li > button {
  padding: 9px 10px;
}

.blank-slate-pf .blank-slate-pf-secondary-action a {
  padding: 2px 6px;
  margin-bottom: 0;
}

.modal-body > div {
  width: 100%;
}

.list-view-pf-body .list-group-item-heading {
  font-size: var(--pf-global--FontSize--sm);
}

.label {
  font-size: var(--pf-global--FontSize--sm);
}

.syn-scrollable {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.syn-scrollable--body {
  flex: 1 1 auto;
  overflow: auto;
}

.pf-c-backdrop {
  background-color: var(--pf-c-backdrop--Color);
}

.pf-c-about-modal-box__content dd {
  word-break: break-word;
}

.pf-c-content {
  --pf-c-content--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-content--dt--FontWeight: bold; /* override for OpenSans not supporting weight 500 */
}

.list-view-pf-view {
  margin-top: 0;
}

.syn-truncate__ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-c-about-modal-box__hero {
  background-position: right;
}

.pf-c-clipboard-copy {
  display: inline-block;
  width: 455px;
  max-width: 100%;
  background: #fff;
}

@media (max-width: 768px) {
  .pf-c-clipboard-copy {
    display: inline-block;
  }

  .pf-c-clipboard-copy__group-copy {
    --pf-c-clipboard-copy__group-copy--PaddingLeft: 16px;
    --pf-c-clipboard-copy__group-copy--PaddingRight: 16px;
  }
}

.customization-details__heading {
  background-color: #f5f5f5;
  font-weight: bold;
  margin-bottom: 8px;
  margin-top: 8px;
  padding: 4px 8px;
}

/* Wizard overrides */
.wizard-pf-steps-indicator,
.wizard-pf-steps {
  background: #fff;
}

.wizard-pf-step-alt .wizard-pf-step-alt-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (min-width: 768px) {
  .wizard-pf-steps-indicator {
    height: auto;
    padding-bottom: calc(1em + 25px);
  }
}

@media (min-width: 768px) {
  .wizard-pf-steps-indicator .wizard-pf-step .wizard-pf-step-number {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0.5em);
  }
}

.wizard-pf-steps-indicator .wizard-pf-step:before {
  top: calc(100% + 0.5em + calc(25px / 2));
  transform: translateY(-100%);
}

.wizard-pf-step-title {
  line-height: 24px;
}

.list-view-pf .list-group-item-heading {
  white-space: normal;
  word-break: break-word;
}

.syn-card__title.pf-c-title.pf-m-md {
  font-size: 16px;
}

.syn-card__header--border.pf-c-card__header {
  --pf-c-card__header--not-last-child--PaddingBottom: var(
    --pf-c-card--first-child--PaddingTop
  );
  border-bottom: 1px solid #d1d1d1;
  margin-bottom: var(--pf-c-card__header--not-last-child--PaddingBottom);
}

.syn-card__footer.pf-c-card__footer {
  padding-top: var(--pf-global--spacer--lg);
  padding-bottom: var(--pf-global--spacer--md);
  background-color: #fafafa;
  border-top: 1px solid #d1d1d1;
}
