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

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

input[type=button]: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%;
  width: 100%;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  /*grid-row-end: 3;
}*/
.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;
}
#divPhpMessage {
  font-family: Arial, Helvetica, sans-serif;
  color:rgb(197, 0, 0);
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
  text-align: center;
}
#idUsername {
  margin-top: 25px;
}
/*
@media screen and (max-height: 592px) {
input[type=text],[type=Email], [type=Password], select {
  width: 70%;
  height: 30%;
  }
  input[type=submit] {
  width: 50%;
  height: 30%;
  }
}
*/
/*
@media screen and (max-height: 3000px) {
  .form {
   height: 210px;
   } 
 }

 @media screen and (max-height: 550px) {
   html {
     height: 550px;
   }
 }
/*@media screen and (max-height: 350px) {
  .form {
    grid-row-start: 2;
    grid-row-end: 6;
  }
}*/
/*
@media screen and (max-width: 770px) {
  .form {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  input[type=text],[type=Email], [type=Password], select {
  width: 60%;
  }
  input[type=submit] {
  width: 60%;
  }
}*/
/*
@media screen and (max-width: 550px) {
  .form {
    grid-column-start: 2;
    grid-column-end: 6;
  }
}
@media screen and (max-width: 400px) {
  .form {
    grid-column-start: 1;
    grid-column-end: 7;
  }
}*/

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

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


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