@import "variables.scss";

#coto-selection {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;

  div.column-header {
    z-index: 3;   // workaround for iOS bug where the header disappears when the input has focus
    text-align: center;
    margin-bottom: 5px;
    padding-top: 10px;

    #pin-as-group-button {
      button {
        background-color: #fff;
      }

      i {
        margin-right: 6px;
        font-size: 1.5rem;
        vertical-align: -2px;
      }

      img {
        margin-left: 6px;
        width: 24px;
        vertical-align: middle;
      }
    }
  }

  div.column-body {
    flex: 1;

    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    padding-bottom: 50px;

    div.coto {
      margin-bottom: 10px;
      border: 1px dashed #ddd;

      div.coto-inner {
        position: relative;

        a.deselect-coto {
          position: absolute;
          top: 3px;
          left: 3px;
          z-index: 10;
        }

        div.coto-header {
          min-height: 35px;
        }
      }
    }
  }
}
