.rules-wrapper {
  height: 100%;
  border: 1px solid #E6E6E6;
  display: flex;
  flex-direction: column;
  .rules-overview {
    padding: 1rem;
    border-bottom: 1px solid #E6E6E6;
    display: flex;
    flex-direction: column;
    &:not(.rule-summary-hidden) {
      flex-basis: 35%;
      overflow-y: auto;
    }
    &.rule-summary-hidden {
      flex-basis: 15%;
    }
    &.no-visible-rules {
      display: none;
    }
  }
  .rules {
    .viewport {
      height: 100vh;
    }
    display: flex;
    flex-direction: column;
    &:not(.rule-summary-hidden) {
      flex-basis: 50%;
    }
    &.rule-summary-hidden {
      flex-basis: 70%;
    }
    &.no-visible-rules {
      flex-basis: 85%;
    }
    
    overflow-y: auto;
  }
  .rules-footer {
    flex-basis: 15%;
    display: flex;
    align-items: center;
    border-top: 1px solid #E6E6E6;
    background-color: #F9F9F9;
  }
}

.rule-label {
  margin-top: 1rem;
  margin-left: 1.5rem;
}