.obsHeaderCell {
  font-size: 18px;
  font-weight: 600;    
}
.obsCell { /* Applied to each cell in Observation table. */
}
.obsItem { /* Applied directly to each input/action element within each cell. */
  height: 60px !important; /* This overrides all cell-specific heights below */
  width: 100% !important;
  /*padding: 10px 10px;*/ /* Removing this fixes obs cell sizing issues. */
  font-size: 28px;
  font-weight: 600;
}

.obsDeleteCell {
  width: 10%;
}
.obsDeleteButton {
  width: 100%;
  height: 100%;
}
.image-trashcan {
    width: 40px;
}

.obsTimeCell {
  width: 15%;
  padding: 0px 0px !important;
}
.obsTimeText {
  width: 100%;
  height: 100%;
}

.obsLoonCountCell {
  width: 10%;
}
.obsLoonCountText {
  min-width: 50px;
  width: 100%;
  height: 100%;
}
.label-inside { /*div containing text-input and clipped inside label*/
  position: relative;
  vertical-align: bottom;
}
.leading-label {display: none;}


.obsPhotoCell {
  width: 10%;
  min-width: 50px;
  max-width: 100px;
  text-align: center;
  cursor: pointer;
}
.input--file { /* This needed to make input respond to clicks */
  position: relative;
  cursor: pointer;
}
.input--file input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.obsPhotoFile {
  border: 1px solid black;
  background-color: #f1f1f1;
  cursor: pointer;
}
.photo-icon {
  /*height: 100%;*/
  width: 100%;
  vertical-align: middle;
  cursor: pointer;
}
.thumb { /* constrain photo thumb to 100% of parent's size. w/o this, we get full-size image. */
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.obsNotesCell {
  width: 35%;
}
.obsNotesText {
  overflow: hidden; 
  text-overflow: ellipsis; 
  word-wrap: break-word;
  width: 100%;
  height: 100%;
}

.obsPositionText { /* Leftover from earlier display. This is now hidden. */
  min-width: 50px;
  width: 100%;
  height: 100%;
}

@media (max-width: 1000px) {
  .obsDeleteCell {
    width: 15%;
  }
  .obsTimeCell {
    width: 31%;
    padding: 0px 0px !important;
  }
  .obsLoonCountCell {
    width: 13%; /* x3 is 39px total */
  }
  .obsPhotoCell {
    width: 15%;
    max-width: revert;
  }
  .obsNotesCell {
    width: 100%;
  }
}

@media (max-width: 750px) {
  .obsHeader {
    display: none;
  }
  .leading-label { /*label clipped to text-input*/
    display: block;
    position: absolute;
    top: 8px;
    right: 25px;
    height: 100%;
  }
  .obsDeleteCell {
    width: 50%;
  }
  .obsTimeCell {
    width: 50%;
    padding: 0px 0px !important;
  }
  .obsLoonCountCell {
    width: 25%; /* x3 is 45px total */
  }
  .obsPhotoCell {
    width: 25%;
    max-width: revert;
  }
  .obsNotesCell {
    width: 100%;
  }
}

#obsTbl .obsPositionCell {
  display: none;
}