html, body {
  overflow:hidden;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('../image/dejaflow-automatic-connector.jpg');
}

header {
/*  display:none; */
}

footer {
/*  display:none; */
}

.outer {
  display: table;
/*  position: absolute; */
  height: 100%;
  width: 100%;
}

#login-form-container {
  height: calc(100vh - 122px);
  display:table-row;
}

#login-form-container .alert {
  text-align: center;
  width: calc(100% - 40px);
  font-size: 14px;
  font-weight: 600;
  padding: unset;
  padding-left: 24px;
  margin: 1rem auto;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}


#login-box {
  margin-left: auto;
  margin-right: auto;
  position: relative;
/*  max-width: 440px; */
  width: calc(100% - 40px);
/*  padding: 44px; */
  margin-bottom: 28px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 20%);
  -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 3px 9px rgba(0,0,0,0.2);
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  box-shadow: 0 3px 9px rgb(0 0 0 / 20%);
  min-width: 320px;
  min-height: 338px;
  overflow: hidden;
  -webkit-animation: fadeIn .3s ease-in;
  border-radius: 4px;
  border:unset;
}

#login-box > .modal-header {
  background: hsl(0deg 0% 98%);
}

#login-box > .modal-footer {
  background: hsl(0deg 0% 98%);
  display:block;
  text-align: center;
}

#login-box > .modal-footer #btn-submit{
  color: #343a40;
  background-color: hsl(41deg 94% 56%);
  border-color: #fbc02d;
  font-weight: 600;
  text-transform: uppercase;
  font-size: large;
  letter-spacing: 1.5px;
  word-spacing: 4px;
  width:80%;
  margin: 0 auto;
  transition: all 0.2s ease-out;
}

#login-box > .modal-footer #btn-submit:hover{
  display:block;
  color: #343a40;
  background-color: hsl(43deg 98% 52%);
  border-color: #fbc02d;
  font-weight: 600;
  width: 96%;
  box-shadow: 1px 2px 4px lightgray;
}

#login-box > .modal-body .input-group {
  width: 80%;
  margin: 0 auto;
  margin-top: 1.66em;
}

#login-box > .modal-body .input-group:first-child {
  margin-top: 0.66em;
}

#login-box input:not([type="button"]) {
  width: 80%;
  border-top: 0px;
  border-left:0px;
  border-right: 0px;
  border-radius: 0px;
  letter-spacing: 1px;
  transition: all 0.05s ease-out;
}

#login-box input:not([type="button"])::placeholder {
  letter-spacing: 1px;
  font-size: normal;
  font-weight: 200;
}

#login-box input:not([type="button"]):focus {
  box-shadow: unset;
  outline: unset;
  border-top: 0px;
  border-left:0px;
  border-right: 0px;
  border-bottom: 1px solid;
  border-color: hsl(45deg 3% 27% 0.6);
  font-size: 1.1rem;
  font-weight: 500;
}

#login-box input:not([type="button"]):focus::placeholder {
  letter-spacing: 1px;
  font-size: normal;
  font-weight: 400;
}

#link-create-account {
  font-size: small;
  position: relative;
  top: 0.66rem;
  margin-bottom: 0px;
}

#link-create-account a {
  text-decoration: underline;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

span.error-message {
  font-size: 12px;
  line-height: normal;
  font-weight: 700;
  margin-left: 1em;
  margin-top: 0.33em;
  padding: unset;
}

.modal-dialog, .modal-content {
  transition: 0.3s linear;
}

.modal-body {
  top: 0;
  transition: 0.75s ease-out;
}