@import "client/common.scss";
@import "client/screen_common.scss";

.invisible {
  visibility: hidden;
}

.react-component {
  width: 100%;
  em {
    font-style: italic;
  }

  .checkbox-scroller, .editable-scroller {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    min-height: 5em;
    max-height: 20em;
    @include border_box_sizing;
    text-align:left;
    margin-bottom:0.5em;
    margin-top:0.5em;
    padding: 0.25em;
  }

  .editable-scroller {
    border: 2px solid #c5c5c5;
    color: #c5c5c5;
    height: 10em;
    padding:10px;
    .list-item {
      clear: both;
    }
  }

  .checkbox-scroller {
    background-color: #c5c5c5;
    height: 15em;
    .checkItem {
      clear: both;
      label {
        color: black;
        display: inline;
        float: left;
        font-size: 1em;
      }
      .icheckbox_minimal {
        color: black;
        display: inline;
        float: left;
        font-size: 1em;
        margin-right:5px;
      }
      input {
        width: auto;
        text-align: left;
        float: left;
        display: inline;
      }
    }
  }
}