:root {
  --pf-global--FontFamily--sans-serif: "Roboto", "RedHatText", sans-serif;
  --pf-global--FontFamily--heading--sans-serif: "Roboto", "RedHatDisplay", sans-serif;
  --pf-global--active-color--100: #28c255;
  --pf-global--active-color--200: #c6ffd7;
  --pf-global--active-color--300: #31f56c;
  --pf-global--active-color--400: #85ffaa;
  --pf-global--primary-color--100: #28c255;
  --pf-global--primary-color--200: #21a148;
  --pf-global--primary-color--light-100: #85ffaa;
  --pf-global--primary-color--dark-100: #28c255;

  --pf-global--BorderColor--300: #eaedf3;
  --pf-global--BorderColor--200: #eaedf3;
}

body {
  --pf-global--BackgroundColor--dark-100: var(--pf-global--primary-color--100);
}

.pf-c-page {
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
}

.page__main-section__page-heading {
  margin-bottom: var(--pf-global--spacer--xl);
}

.top-header__toolbar .pf-c-toolbar__content[hidden] {
  display: none;
}

.pf-l-stack {
  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--spacer--xl);
}

.pf-l-stack__item--card {
  background-color: var(--pf-global--BackgroundColor--100);
  padding: var(--pf-global--spacer--md);
}

.pf-c-data-list {
  --pf-c-data-list--sm--BorderTopWidth: 0;
}

.pf-c-nav {
  --pf-c-nav--m-light__link--m-current--Color: var(--pf-global--primary-color--100);
  --pf-c-nav--m-light__link--m-current--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--pf-global--primary-color--100);
}

.pf-c-form-control {
  border-radius: var(--pf-c-form-control--Height);
  --pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-form-control--focus--PaddingBottom: var(--pf-c-form-control--PaddingBottom);
  --pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-form-control--invalid--PaddingBottom: var(--pf-c-form-control--PaddingBottom);
  --pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
}

.pf-c-form-control:hover {
  --pf-c-form-control--BorderTopColor: var(--pf-c-form-control--hover--BorderBottomColor);
  --pf-c-form-control--BorderRightColor: var(--pf-c-form-control--hover--BorderBottomColor);
  --pf-c-form-control--BorderLeftColor: var(--pf-c-form-control--hover--BorderBottomColor);
}

.pf-c-form-control:focus {
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
  --pf-c-form-control--BorderTopColor: var(--pf-c-form-control--hover--BorderBottomColor);
  --pf-c-form-control--BorderRightColor: var(--pf-c-form-control--hover--BorderBottomColor);
  --pf-c-form-control--BorderLeftColor: var(--pf-c-form-control--hover--BorderBottomColor);
  outline: none;
  box-shadow: inset 0 1px 1px rgb(40 194 85 / 30%), 0 0 8px rgb(40 194 85 / 60%);
}

.pf-c-form-control[aria-invalid="true"] {
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
  --pf-c-form-control--BorderTopColor: var(--pf-c-form-control--invalid--BorderBottomColor);
  --pf-c-form-control--BorderRightColor: var(--pf-c-form-control--invalid--BorderBottomColor);
  --pf-c-form-control--BorderLeftColor: var(--pf-c-form-control--invalid--BorderBottomColor);
}

.pf-c-date-picker {
  width: 100%;
}

.dropzone {
  flex: 1;
  display: flex;
  flex-direction: unset;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-width: 2px;
  border-radius: 2px;
  border-color: #eeeeee;
  border-style: dashed;
  background-color: #fafafa;
  color: #bdbdbd;
  outline: none;
  transition: border .24s ease-in-out;
  width: 100%;
}

.dropzone:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.dropzone:focus {
  border-color: #2196f3;
}

.dropzone.disabled {
  opacity: 0.6;
}