.tablepopup {
    /*border: 1px solid #5fa2dd;
    border-top: 1px solid #5fa2dd;*/
    height:auto;
  /*  background-color: #FFF;*/
    color: #000;
}

.tablepopup th{
    /*  border: 1px solid #5fa2dd;*/
      width:150px;
      height:auto;
      background-color: #666;
      color: #fff;
}

.tablepopup tr td:first-child {
    width: 15%;
}

.tablepopup tr td:nth-child(2) {
    width: 60%;
}

.tablepopuptbody {
      height: 150px;
      display: inline-block;
      width: 100%;
      overflow: auto;
}


.tablepopup closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.tablepopup closer:after {
  content: "✖";
}

p{
    font-size: 13px;
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
    color: #000;
    font-weight: bold;

}

p1{
    font-size: 11px;
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
    color: #000;
    font-weight: lighter;
    textAlign: left;
  }


.tableFixHead {
   overflow: auto;
   height: 200px;
   color: #FFF;
  }

.tableFixHead thead th {
  //background-color: #666;
  background: rgba(102, 102, 102, 0.7);
  /*position: sticky;
  top: 0;
  z-index: 1;*/
}

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
table th, td { padding: 8px 16px; }
table th     { background:#eee; }



.box {
       width: 20%;
       margin: 0 auto;
       background: rgba(255, 255, 255, 0.2);
       padding: 35px;
       border: 2px solid #fff;
       border-radius: 20px/50px;
       background-clip: padding-box;
       text-align: center;
     }
     .button {
       font-size: 1em;
       padding: 10px;
       color: #fff;
       border: 2px solid orange;
       border-radius: 20px/50px;
       text-decoration: none;
       cursor: pointer;
       transition: all 0.3s ease-out;
     }
     .button:hover {
       background: orange;
     }
     .overlay {
       position: absolute;
       /*top: 0;*/
       bottom: 0;
       left: 300px;
       box-shadow: 0 1px 4px rgba(0,0,0,0.2);
       border-radius: 10px;
       border: 1px solid #cccccc;
       display: none;
       opacity: 1;
     }
     /*.overlay:target {
       visibility: hidden;
       opacity: 0;
       display:none
     }*/
     .popup { position: relative;
       /*margin: 70px auto;*/
       margin: 2px auto;
       padding: 10px;
       /*background: #fff;*/
       background: rgba(255, 255, 255, 0.8);
       /*border-radius: 20px;*/
       border-radius: 15px;
       width: 400px;
       transition: all 5s ease-in-out;
     }

    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      transition: all 200ms;
      font-size: 20px;
      font-weight: bold;
      text-decoration: none;
      color: #333; }
    .popup .close:hover { color: orange; }
    .popup .content     { max-height: 30%; overflow: auto; }

/*.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; }*/



#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}