#chioverlay {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    overflow-y: scroll;
}



.chiselectedavatar {
    border:thick;
    border-color: red;
    float: left;
}

.chiunselectedavatar {
    border:thick;
    border-color: blue;
    float: left;
}

.chiavatar50 {
    height: 50px;
    width: 50px;
}

.classChiBlinking{
    animation:chiBlinkingText 2.0s infinite;
}
@keyframes chiBlinkingText{
    0%{     color: red;    }
    49%{    color: transparent; }
    50%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: red;    }
}

.chiSoiSpinCent {
  background-image:url("chiSoiSpinner.png");
  background-size: 100px 100px;
  border-radius: 50%;
  border-top: 8px solid #0b0a7b;
  border-right: 8px solid #fffb16;
  border-bottom: 8px solid #0b0a7b;
  border-left: 8px solid #fffb16;
  position: fixed;
  width: 100px; 
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  z-index:100;
  opacity: 0.8;
  animation: chiSoiLogo 1.5s linear infinite normal;
}

@keyframes chiSoiLogo {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}