/* Style all input fields */
.p_input {
    width: 250px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 10px 0px 10px 25px;
}

/* Style the submit button */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0px 0px 10px 25px;

}

/* Style the container for inputs */
.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 30%;
  
  font-size: 20px;
/*  background-color: cyan;
  border: darkgreen 5px solid;
*/
  padding: 5px;
  z-index: 1;
}

/* The message box is shown when the user clicks on the password field */
#message {
    position: relative;
    padding: 5px;
    margin-top: 6px;
    margin-bottom: 6px;

 /*   margin-top: 5px;    display:none;    background: #f1f1f1;
    color: #000;

*/
}

#message p {
    padding: 0px 35px;
    font-size: 18px;
    margin: 10px 0 0 0;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -15px;
    content: "✔";
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -15px;
    content: "✖";
}
h4 {
 	margin: 6px 0px 15px 0px;
 	padding: 6px;
 	font-size:xx-large;
}