#maindiv {
    left: 0px;
    display: grid;
    grid-template-rows: 160px auto;
    background-color: #2196F3;
    /*
    background-color: #2196F3;
  */
    margin: 5px 0px 0px 0px;
    border: 0px;
    padding: 0px;
    height: 98vh;
    resize: both;
    width: 97vw;  
}

#mainDiv>gridItem {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 0px;
    font-size: 30px;
    text-align: center;
    height: inherit;
    resize: both;
  
}


   .screenFlex {
     border: 2px solid #2196F3;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     flex-flow: row;
     overflow-x: scroll;
     display: flex;
     min-width: 160px;
     min-height: 160px;
   }
 
 
 /*used for flow of thumb images */
   .flexDiv {
     border: 1px dotted black;
     padding: 0px;
     display: flex;
     flex-flow: wrap;
     /*
 20240630: changed to max width
     min-width: 160px;
 
     */
     width: 160px;
     height: 128px;
     text-align: center;
     align-content:center;
     align-items:center;
   }
 
   .photoTitle {
     font-family:arial;
     text-align: center;
     width: 160px;
     height: 16px;
     word-wrap: normal;
     align-content: center;
     font-size: x-small;
     border: none;
     margin: 0px 0px 0px 0px;
     padding: 0px;
   }
 
   .directoryTitle {
     font-family:arial;
     white-space: pre-line;
     text-align: center;
     width: 160px;
     height: 128px;
     word-wrap: normal;
     word-break: break-all;
     align-content: center;
     text-align: center;
     text-overflow: ellipsis;
     margin: 0px 0px 0px 0px;
     vertical-align: central;
   }
 
   .thumbImage {
     /*    border: 1px solid red; */
     width: 128px;
     height: 104px;
 /*
     border: 0px 0px 0px 0px;
 */
 
     margin-left:auto;
     margin-right:auto;
     object-position: center;
     object-fit: scale-down;
     padding: 0px;
   }
 
   
 #wrap {
     width: 95vw; /* Set your desired width */
     height: 80vh; /* Set your desired height */
     padding: 0;
     overflow: hidden;
 }
 

 
 .grid-container {
   left: 0px;
   display: grid;
   grid-template-columns: 10% auto 10%;
   background-color: #2196F3;
   /*
   background-color: #2196F3;
 */
   margin: 5px 0px 0px 0px;
   border: 0px;
   padding: 0px;
   height: inherit;
   resize: both;
   width: 97vw;
 }
 
 
 .grid-item {
   background-color: rgba(255, 255, 255, 0.8);
   border: 1px solid rgba(0, 0, 0, 0.8);
   padding: 0px;
   font-size: 30px;
   text-align: center;
   height: inherit;
   resize: both;
 
 }
 
 .localImage {
  height: 70vh;
  width: 100%;
  object-fit: scale-down;
  resize: both;
  margin: 5px 0px 0px 0px;
  border: 0px;
  padding: 0px;
}

.localImageText {
  font-size: x-large;
  margin: 0px 0px 0px 0px;
  border: 0px;
  padding: 0px;
}