.pf4-picker-root {
  width: 100%;
  margin-bottom: 8px;
}
.pf4-picker-root>button {
  width: 100%;
  pointer-events: none;
}
.pf4-picker-root:hover > button {
  background-color: var(--pf-c-button--m-primary--hover--BackgroundColor);
}
.pf4-builder-form-container {
  flex-grow: 1;
  width: 30%;
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;
}
.pf4-component-wrapper {
  flex-grow: 1;
  position: relative;
  padding: 8px;
}

.pf4-field-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.pf4-danger-color:hover{
  background-color: var(--pf-global--danger-color--100);
}
button:hover>svg.pf4-danger-color {
  fill: var(--pf-global--danger-color--100);
}
.pf4-options-propery-editor-cell:not(:last-child) {
  padding-right: 8px;
}
.pf4-properties-editor-title {
  display: flex;
}
.pf4-properties-editor-title .editor-header-button:first-child {
  margin-left: auto
}
.pf4-validators-validator-title {
  font-weight: 600;
  display: block;
  justify-content: space-between;
  align-items: center;
}
.pf4-validators-validator-title:first-letter {
  text-transform: uppercase;
}
.pf4-tabs-container {
  padding: 0 !important;
}
.pf4-field-layout.selected {
  border-bottom: 3px solid var(--pf-global--primary-color--100);
  transition: border-color .3s linear;
}
.pf4-validators-property-group:not(:last-child) {
  border-bottom: 2px solid #ebebeb;
}
.pf4-field-layout {
  cursor: pointer;
  background-color: #fff;
  flex-grow: 1;
  box-shadow: var(--pf-global--BoxShadow--sm);
  display: flex;
}
.pf4-field-layout.drag-disabled {
  border-right: 1px solid lightgray;
}
.pf4-drag-handle {
  position: relative;
  padding: 4px;
  padding-top: 8px;
  border-left: none;
  background-color: var(--pf-global--disabled-color--300);
  display: flex;
  flex-direction: column;
  min-width: 25px;
}
.pf4-drag-handle .pf4-drag-handle-icon {
  fill: #B9B9B9;
  transition: fill .3s linear;
}
.pf4-field-layout.selected .pf4-drag-handle .pf4-drag-handle-icon, .pf4-field-layout:hover .pf4-drag-handle .pf4-drag-handle-icon {
  fill: var(--pf-global--primary-color--100);
}
.pf4-properties-editor-container {
  width: 33%;
  min-width: 400px;
  box-shadow: var(--pf-global--BoxShadow--md);
  min-height: 100%;
  background-color: #fff;
}
.pf4-properties-editor-container .pf-c-card {
  box-shadow: none;
}
.pf4-options-property-editor-table tr:not(:last-child) td {
  padding-bottom: 8px;
}
button:hover>svg.pf4-success-color{
  fill: var(--pf-global--link--Color);
}
@keyframes overlay-transition {
  from {
    background-color: rgba(200,200,200,.0);
  }
  to {
    background-color: rgba(200,200,200,.6);
  }
}

.pf4-hidefield-overlay::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: background-color linear .3s;
  background-color: transparent;
  pointer-events: none;
}
.pf4-component-wrapper.hidden .pf4-hidefield-overlay::before {
  background-color: rgba(200,200,200,.6);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: fill;
}
.pf4-component-wrapper svg.hide-indicator{
  position: absolute;
  left: calc(100% / 2);
  top: calc(100% / 2 - 1.5em);
  opacity: 0;
  pointer-events: none;
  transition: opacity linear .3s;
}

.pf4-component-wrapper.hidden svg.hide-indicator{
  opacity: 1;
}

.pf4-property-error-icon {
  fill: var(--pf-global--danger-color--100)
}

.icon-spacer-bottom {
  margin-bottom: 8px;
}

.pf4-form-builder-layout-template {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pf4-form-builder-components {
  display: flex;
  flex-grow: 1;
}