* {
  padding: 0px;
  margin: 0px;
}
body {
  background-image: url(../rescources/bg11.jpg);

  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}
.container {
  height: 100vh;
}
.layout {
  border: 0px solid rgb(224, 224, 224);
  border-radius: 10px;
  /*box-shadow: -2px -2px 2px 2px; */
  background-color: rgba(224, 224, 224, 0.5);
}
.header {
  font-family: monospace;
  border: 0px solid rgb(51, 51, 255);
  border-radius: 5px;
}
.signUpText {
  font-size: 0.85rem;
}
#mail,
#pwd,
#Fname,
#Lname {
  height: 50px;
  border: 1px solid rgb(51, 51, 255);
  border-radius: 10px;
  background-color: rgb(204, 229, 255);
}
#mail:focus,
#pwd:focus,
#Fname:focus,
#Lname:focus {
  outline: none;
  border-color: rgb(51, 51, 255);
  box-shadow: 0 0 10px rgb(51, 51, 255);
  background-color: rgb(224, 224, 224);
}

.invalidText {
  border-color: red !important;
}
.invalidText:focus {
  box-shadow: 0 0 10px red !important;
}

#signUpBtn {
  height: 50px;
  font-family: monospace;
  background-color: rgb(51, 51, 255);
  border-color: rgb(0, 0, 153);
  border-radius: 10px;
  font-size: 2rem;
}
#signUpBtn:hover {
  background-color: rgb(0, 0, 153);
}
a {
  text-decoration-line: none;

  color: rgb(0, 0, 153);
}
a:hover {
  color: rgb(0, 0, 51);
}

.warning {
  font-size: 12px;
  color: red;
}

.accordion {
  color: rgb(51, 51, 255);
  /*padding: 18px;*/
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

#panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  visibility: hidden;
  background-color: rgb(204, 229, 255);
  border: 2px solid rgb(204, 229, 255);
  border-radius: 8px;
  margin-bottom: 8px;
}
.pwdText {
  color: rgb(51, 51, 255);
}