.LogonForm{
    border: 3px solid #f1f1f1; 
    background:white;
    border-radius:25px;
    box-shadow:5px 5px 5px #999;
	padding-bottom:5px;
	text-align: center;
	width:440px;
	margin: 0 auto;
}

.containerW {
    padding: 16px;
}

.containerG {
    padding: 16px;
    border-radius:0px 0px 25px 25px;
    background-color: #f1f1f1;
    text-align: right;
    width: 85%;
    margin: 0 auto;
}


/* Avatar image */
img.avatar {
  width: 111px;
  border-radius: 50%;
}


.LogonForm input[type="text"]:invalid:required {
    border: 2px solid red!Important;
    background:#edcfd4!Important;
    height: 41px!Important;
    border-radius: initial!Important;
}

/* Full-width inputs */
.LogonForm input[type=text], .LogonForm input[type=password] {
  width: 100%!Important;
  padding: 12px 20px!Important;
  margin: 8px 0!Important;
  display: inline-block!Important;
  border: 1px solid #ccc!Important;
  box-sizing: border-box!Important;
  border-radius: initial!Important;
  height: 41px!Important;
}

/* Set a style for all buttons */
.LogonForm button {
  background-color: #04AA6D!Important;
  color: white!Important;
  padding: 14px 20px!Important;
  margin: 8px 0!Important;
  border: none!Important;
  cursor: pointer!Important;
  width: 100%!Important;
  font-size:inherit!Important;
  font-family:inherit!Important;
  max-height:inherit!Important;
  border-radius:0px!Important;
}

/* Add a hover effect for buttons */
.LogonForm button:hover {
  opacity: 0.7!Important;
  color:Black!Important;
}


/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}




/* Change styles for span and cancel button on extra small screens */
@media (max-width: 600px) { /*(max-width:1280px) {*/
.LogonForm{
    width:96%;
}
  .cancelbtn {
    width: 100%;
  }
}