.infoEx{
   display: flex;
    align-items: center;
  
    height: 2em; 
   background-color: white; 
   color: black;
   width: auto;
}

.viItem{
   text-align: center;
   height: 2em; 
   width: 2em; 
   background-color: lightgreen; 
      color: black;
      float: left; 
}

.mainLinks{
  color: red;
}



a.mainLinks:hover {

    color: green;
   
     
}



img{
    max-width: 100%;
    max-height: 100%;
    display: block; /* remove extra space below image */
}
.box{
    width: 200px;        
  
}    
.box.large{
    height: 300px;
}
.box.small{
    height: 100px;
}


.box.small{
    height: 100px;
}
.heading2{
     font-weight: 800;
     font-size: 1.2rem;
}
.testmenu{
    display: flex  ;
    flex-direction: row;
    margin-top: 1em;
    margin-bottom: 1em;
    
}
.testmenu button{
   background-color: #f44336;
  border: none;
  color: white;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  margin: 4px 2px;
  cursor: pointer;
}

.exmenu{
   
    margin: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    
}


.btn {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:focus,
.btn:hover {
  background-color: FireBrick;
  color: White;
}

.main-foot {
    background: #0081C4;
    height: 20px;

    color: white;
}

/* test */

#testCont{
    background-color: lightcyan;
}
/* ------------------ gap -------------*/

#gapCont{
    background-color: lightcyan;
}
.gap-li{
    color: black;
    background-color: #white;
    margin: 5px;
}

.gap-a{
    color: black;
    background-color: white;
    text-decoration: none;
    cursor: pointer;

}

.gap-a:hover{
    color: black;
    background-color: gainsboro;
}
#testtable{
    
}

#testtable td{
    height: 3em;
}