.rules-list
  overflow:hidden
  overflow-y:scroll
  max-height: 400px
.rules-lists-item
  display: block
  position: relative
  overflow: auto
  p
  	display: inline-block
  	float: left
  	margin: revert

.rules-btns-group
  position: absolute
  right: 0
  top: 50%
  transform: translateY(-50%)
  button
  	margin: auto
.rules-add
  display: block
  overflow: auto
  margin-top: 15px
  margin-bottom: 5px
  input
  	display: inline-block
  	float: right
  	margin: auto
  	margin-right: 10px
  button
  	display: inline-block
  	float: right
  	margin: auto
.flex
  display: -webkit-box
  display: -moz-box
  display: -webkit-flex
  display: -moz-flex
  display: -ms-flexbox
  display: flex

.triggers-content
  color: #727479
  background: #dedede
  .triggers-body
    display flex
    padding-top 15px
    height 100%

    .triggers-side-menu
      background-color: #f7f7f7;
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      box-shadow: inset -1px -1px 3px rgba(0,0,0,.05);

      ul

        li
          margin: 0.1rem 0.2rem;
          width:50px
          height:50px
          text-align:center
          font-size: 25px
          position: relative
          
          i
            position: absolute;
            top: 50%;
            left: 50%;
            box-shadow: none
            transform: translate(-50%,-50%);


          &.active
            background #fff
            box-shadow 0 1px 2px rgba(0,0,0,0.15);

          &:hover
            background #fff
            box-shadow 0 1px 2px rgba(0,0,0,0.15);
          a
            @extends .flex
            padding: 1rem 0 1rem 1rem
            width: 100% - 5rem


            span
              font-size: 13px
    .triggers-main-body
      padding: 0.1em 1em
      width:100%
      .trigger-item
        overflow:auto
        padding:10px
        height:30px
        border-radius: 3px
        position: relative
        background-color: white
        .trigger-content
            position:absolute
            top:50%
            transform: translateY(-50%)
            left:10px
            .trigger-text
              font-size: 16px
              display:inline-block
            .trigger-dropdown
              display:inline-block
              select
                width:100px
                height:30px
                margin:0px
        .trigger-button
          position:absolute
          top:50%
          transform: translateY(-50%)
          width:30px
          height:30px
          border: 1px solid #eee;
          border-radius: 4px;
          box-shadow: inset -1px -1px 3px rgba(0,0,0,.05);
          text-align:center
          font-size: 20px
          right:10px
          i
            position: absolute;
            top: 50%;
            left: 50%;
            box-shadow: none
            transform: translate(-50%,-50%);