@media (min-width:320px) {
  #words_filter {
    display: none;
  }

  #words_length  {
    display: contents; 
    color: gray; 
  }
}

/* min-width: 320 */

@media (min-width:480px) {
    /* medium to big smartphones, Android phones, landscape iPhone, effect on my blu andriod  */
}

@media (min-width:600px) {
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
}

@media (min-width:801px) {
  #words_filter {
    display: inline;
  }
}

/* @media (min-width:801px) */

@media (min-width:1025px) {
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}



/************** for word entry form **************/

#divEnterWords, #LoginDiv {   /* the inner div, not outer, confused me */ 
    border: 3px solid rgb(10, 88, 202);
    padding: 1em 5px 1.5em 5px;
    margin: 1em 0px 1.4em 0px;
    width: 350px;
}

.label-login {
    /* can delete maybe 2025-2-9*/
    width: 5em;
    display: inline-block;
    text-align: left;
    margin-right: 0px;
    margin-top: 0.5em;
}

.narrow_col {
  max-width: 1px; 
}

.small-font {
  font-size: 60%;
  /* font-size: 10px;  */
  font-weight: normal;
}

.truncate {
  max-width: 65px;
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis;  this gives more padding*/
}

tr {
  cursor: pointer; 
}

#progress1 {
  display: none;
  /* display: ruby;  no wrap */ 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);  /* make perfect center, regardless of text length */ 
  max-width: 80%; 
  text-align: center; 
  font-size: 2em; 
  color: gold; 
  text-shadow: 1px 1px goldenrod; 
  
  
  animation: moveAndColor 2s alternate ease-in-out;

}

@keyframes moveAndColor {
  0% { background-color: #FFF; left: 45%; top: 30%; }
  50% { background-color: #F80; left: 50%; top: 28%; }
  100% { background-color: #FFF; left: 55%; top: 26%; }
  
  from {background-color: white;}
  to {background-color: yellow;}
}

body { 
  /* padding: 1em 0em 0em 0em;   */
  margin: 0 auto;
  width: 100%
}

/* for individual search boxes at the bottom of the table, spent 10 hours on this, with out 100% it will be too long exceed 10x of above cells */
.search1 {
  text-align: left;
  padding: 2px; 
  width: 100%; 
  font-weight: normal;
}

#div_site_title {
  color: gray; 
  /* display:ruby-text; */
  /* vertical-align: -1.4em; */
  /* padding-left: 2px;  */
}

.btn {
  margin-left:  0.5em; 
  margin-right: 0.5em; 
}

#diag_user_info {
  top: -40%;
}