SectionRules.scss

.SectionRules {
  & > .rules {
    & > .Rule {
      display: grid;
      grid-column-gap: 10px;
      grid-template-columns: repeat(4, max-content) 1fr repeat(3, max-content);
      align-items: center;

      border: 1px solid var(--border-color);
      padding: 8px;
      margin-bottom: 10px;

      & > .show {
        border-radius: 5px; 
      }

      &:last-child {
        margin-bottom: 0;
      }

      & > .NumericInput {
        width: 60px;
      }

      & > .FxControlButton {
        & > .wrapper {
          position: fixed;
          left: 0;
          top: 0;
          width: 100vw;
          height: 100vh; 
          z-index: 9999999999;
          background-color: #00000066;
          display: grid;
          justify-content: center;
          align-content: center;

          & > .FxControl {
            width: 300px;
            padding: 8px;
            max-height: 80vh;
            overflow-y: scroll;
          }
        }
      }
    }
  }

  & > button.create {
    margin-top: 30px;
    display: block;
  }
}