.topnav{
    background-color: black;
    overflow: hidden;
    border-radius: 10px;
}



.topnav a{
    float: right;
    color: white;
    text-align : center;
    padding: 16px 16px;
    text-decoration: none;
    font-size: 17px;
    margin-top: 5px;
    margin-right: 30px;
    
    
}

.topnav a:hover{
    background-color: aquamarine;
    color: brown;
    border-radius: 10px;

}

.topnav a.active{
    background-color: aquamarine;
    color: brown;
    border-radius: 10px;

}

.topnav img{
    width: 90px;
    height: 60px;
    border-radius: 5px;
    float: left;
    margin: 2px;
    
}
.logo{
  width: 70px;
  border-radius: 10px;
  float: left;
  margin: 2px;
}

.topnav h3,h6{
    color: aquamarine;
    float: left;
    margin-left: 20px;
}


.welcome h1, h3, h6{
font-family: Verdana, Geneva, Tahoma, sans-serif ;
text-align: center;
}
 
.btnprimary{
    background-color:blueviolet;
    border-radius: 10px;
    float: left;
    padding: 55px;
}


.add-user-form{
    width: 50%;
    margin-left: 25%;
     text-align: center;
     align-items: center;
     background-color: #7bed9f;
}

 .invoice-view{
  width: 50%;
  margin-left: 25%;
   text-align: center;
   background-color: #1e90ff;
   border-radius: 10px;
}
.form-input{
     width: 600px;
     padding: 10px;
     border-radius: 5px;
   }
   .form-input-detail{
    width: 45%;
    padding: 40px;
    border-radius: 5px;
  }
   .btn-submit{
     background-color: #eccc68;
     color: black;
     padding: 5px;
     border-radius: 5px;
     font-weight: bold;
     font-family:  sans-serif;
   }
   .btn-go{
    background-color: #2ed573;
    color: black;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-family:  sans-serif;
  }
  .btn-add{
    background-color: #e056fd;
    color: black;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-family:  sans-serif;
  }
  .btn-danger{
    background-color: #ff4757;
    color: black;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-family:  sans-serif;
  }
  .btn-view{
    background-color: #eccc68;
    color: black;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-family:  sans-serif;
    margin: 5px;
  }
  .btn-update{
    background-color: #1e90ff;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-family:  sans-serif;
  }
.btn-img{
  width: 300px;
  height: 300px;
  border-radius: 5px;
}




.grid-container {
  display: grid;
  grid-template-columns: repeat(2,50% 50%);

}
.grid-item {
  background-color: #eccc68;
  border-radius: 15px;
  font-size: 12px;
  text-align: center;
}

.grid-container2 {
  display: grid;
  grid-template-columns: repeat(3);

}
.grid-item2 {
  background-color: #eccc68;
  border-radius: 15px;
  font-size: 12px;
  text-align: center;
}

/* Tables CSS*/
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 90%;
  border-radius: 10px;
}

#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;
  
}

.allcop tr{
 column-gap: 20px;
}