
.UserGrid
{   
    height: 300px;
    width: 600px;
    display: grid; 
    grid-template-columns: repeat(2, 0.5fr) 1fr; 
    grid-template-rows: repeat(6, 1fr); 
    grid-column-gap: 10px;
    grid-row-gap: 10px; 
    text-align: left;
    margin-bottom: 20px;

}

.UserGridIban { grid-area: 4 / 1 / 5 / 4; } 
.UserGridZipCode { grid-area: 3 / 1 / 4 / 2; } 
.UserGridCity { grid-area: 3 / 2 / 4 / 3; } 
.UserGridCountry { grid-area: 3 / 3 / 4 / 4; } 
.UserGridAddress { grid-area: 2 / 1 / 3 / 4; } 
.UserGridName { grid-area: 1 / 1 / 2 / 4; } 

.UserGridEdit
{
    grid-area: 5/1/6/4;
    display: grid;
    justify-content: center;
}

.HorziontalLine 
{ 
    grid-area: 6 / 1 / 7 / 4;
    width: 100%;
    height: 1px;
    background-color: black;
}
.GirdTextField
{
    width: 100%;
    height: 50%;
}

.UserGidLbl
{
    font-size: 15px;
}

.SaveButton
{
  height: 40px;
  width: 120px;
  font-size: 20px;
  border-style: solid;
  background-color: #2196F3;
  color: #FFFFFF;
  border-color: transparent;
  border-radius: 2px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  margin-left: 10px;
  margin-right: 10px;
}

.SaveButton:hover
{
    box-shadow: 0px 15px 20px rgba(33, 150, 243, 0.4);
    transform: translateY(-2px);
}

.SaveButton::after
{
    background-color: #51f59b;
}

.DeleteButton
{
  height: 40px;
  width: 120px;
  font-size: 20px;
  border-style: solid;
  background-color: #F56451;
  color: #FFFFFF;
  border-color: transparent;
  border-radius: 2px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  margin-left: 10px;
  margin-right: 10px;
}

.DeleteButton:hover
{
    box-shadow: 0px 15px 20px rgba(245, 100, 81, 0.4);
    transform: translateY(-2px);
}

.ErrorTextUserGird
{
    color: #F56451;
    font-size: 15px;
    font-weight: bold;
}