html {
	height: 100%;
}
body {
	height: calc(100% - 55px);
	margin: 0px;
	padding: 0px;
  /*
	background: rgb(129,123,126);
	background: radial-gradient(circle, rgba(129,123,126,1) 0%, rgba(78,80,83,1) 100%);
  */
  background-color: white;
}
#main-bar {
	width: 100%;
	height: 55px;
	background-color: #24282e;
}
#logo {
	width: 125px;
}

#idBtnHome {
  position: absolute;
  right: 100px;
  top: 10px;
  color: white;
}

#idBtnAboutus {
  position: absolute;
  right: 20px;
  top: 10px;
  color: white;
}

/*--------------*/
input[type=text],[type=Email], [type=Password], select {
  width: 85%;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 2px;
}

input[type=submit] {
  width: 85%;
  background-color: #337ABC;
  color: white;
  padding: 12px 20px;
  margin-top: 2px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: navy;
}

.container {
	display: grid;
  height: 100%;
	grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
}
.form {
  /*box-shadow: 5px 10px; height: 70%;*/
  border-radius: 5px;
  /*background-color: #f2f2f2;*/
  background-color: white;
  /*margin: 0 20%;*/
  text-align: center;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  /*grid-row-end: 4;*/
}
.formDescription {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 2;
  text-align: center;
}
.description {
  color: rgb(44, 118, 153);
  padding-top: 40px;
}
#idFname {
  margin-top: 25px;
}
#divPhpMessage {
  font-family: Arial, Helvetica, sans-serif;
  color:rgb(180, 0, 0);
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
  text-align: center;
}


@media screen and (max-height: 3000px) {
  .form {
   height: 425px;
   } 
 }

 @media screen and (max-height: 550px) {
   html {
     height: 550px;
   }
 }

/*774*/
 @media screen and (max-width: 992px) {
  .form {
    grid-column-start: 2;
    grid-column-end: 6;
  }
}
@media screen and (max-width: 576px) {
  .form {
    grid-column-start: 1;
    grid-column-end: 7;
    margin-left: 40px;
    margin-right: 40px;
  }
}
/*---------------MEDIA QUERIES-------------*/

/*---------------HEIGHT-------------
@media screen and (max-height: 3000px) {
 .form {
  height: 415px;
  } 
}

@media screen and (max-height: 550px) {
  html {
    height: 550px;
  }
}


/*---------------WIDTH-------------
@media screen and (max-width: 991px) {
 .form {
  height: 400px;
  } 
}

@media screen and (max-width: 770px) {
 .form {
  height: 380px;
  } 
}

@media screen and (max-width: 500px) {
  .form {
    margin: 0
  }
  input[type=text],[type=Email], [type=Password], select {
  width: 80%;
  }
  input[type=submit] {
  width: 60%;
  }

  .formDescription {
    margin: 0
  }
}