systelab-two-list {

  .slab-twolist {
    display: flex;
    overflow: auto;

    .slab-twolistdiv {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap !important;

      $single-list-width: calc(50% - 30px);
      flex: 1 0 $single-list-width;
      min-width: $single-list-width;
      padding: 8px;

      @media (max-width: 1024px) {
        input {
          display: none;
        }
      }

      label {
        margin-bottom: 2px;
      }

      systelab-button {
        width: 100%;

        button {
          width: 100%;
        }
      }

      .slab-twolistbox {
        flex: 1;
        margin-top: 7px;

        border-radius: 5px;
        border: 1px solid $medium-gray;
        display: flex;
        overflow: auto;

        .slab-twolistboxdiv {
          flex: 1 0 auto;

          .slab-twolistboxrow {
            line-height: $slab-twolist-row-height;
            cursor: pointer;
            text-indent: 10px;
            @include user-selection(none);
          }

          .slab-twolistboxrowselected {
            background-color: $slab-selected-background-color;
          }

          .slab-twolistboxrowdrag {
            cursor: move;
          }
        }
      }
    }

    .slab-twolistbuttondiv {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      margin-left: 10px;
      margin-right: 10px;

      button {
        height: 35px;
        width: 35px;
        margin: 2px;
        color: white;
        padding: 0;
        border: 1px solid white;

        &:hover {
          color: white;
          background-color: $primary;
        }
        &:disabled {
          opacity: 0.4 !important;
        }
      }
    }

    .btn {
      font-weight: bold;
      font-size: 24px;
    }
  }
}