#recordImageGridPage{
  #recordImageGrid{
    list-style-type: none;
    li{
      border: 1px solid red;
      padding: 0px;
      margin: 0px;
      height: 200px;
      width: 200px;
      display: inline-block;

      border: 1px solid gray;
      cursor: pointer;
      background-color: #eeeeee !important;
      opacity: .9;

      .fa{
        color: #444444;
        position: absolute;
      }
      h6{
        color: #444444;
        position: absolute;
        padding-top: 50%;
        text-align: center;
      }
      .protocolImage{
        object-fit: cover;
      }
    }
    li:hover{
      background-color: #dddddd !important;
      border: 1px solid maroon;
      opacity: 1;
    }
    .recordImage{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #addNewRecord{
      background: repeating-linear-gradient(
        135deg,
        #dddddd,
        #dddddd 10px,
        #eeeeee 10px,
        #eeeeee 20px
      );
    }
  }
  .addRecordIcon{
    text-align: center;
  }
}








// mobile phone layout
@media only screen and (max-width: 480px) {

}

// portrait orientation
@media only screen and (max-width: 768px) {

}

// landscape orientation
@media only screen and (min-width: 768px) {

}
