/*styles the signin page*/
body {
  background-color: #2a4676;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}
@media (max-width: 767px) {
  .fullscreen-bg__video {
    object-fit: cover;
  }
}
.login-card {
  transition: all linear 0.4s;
  border-radius: 0;
  border-radius: 5px;
  /*summer*/
  /*box-shadow: 0 0 20px #2e448e;
  background-color: rgba(1, 42, 94, 0.83);*/
  /*autumn*/
  box-shadow: 0 0 20px #bec5a3;
  background-color: rgba(11, 13, 16, 0.46);
}
.login-card h1, .login-card h4 {
  font-size: 13pt;
  color: white;
  text-align: center;
}
.login-card h4 {
  font-size: 12pt;
}
.login-card label {
  color: white;
}
.login-card hr {
  display: none;
}

.login-card:hover {
  box-shadow: 0 0 40px #ababab;
  background-color: #012A5E;
}
.login-card:hover .card-title {
  transform: scale(1);
}

.login-card .card-title {
  color: white;
  transform: scale(0.9);
  transition: transform linear 0.3s;
  font-size: 2rem;
}

.login-card p.text-center {
  margin-bottom: 0;
}

.password-validate-live ul {
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 5px;
}
.password-validate-live li {
  margin-top: 4px;
  margin-bottom: 4px;
  list-style-type: none;
  color: red;
}
.password-validate-live li i {
  margin-right: 5px;
  width: 12px;
}
.password-validate-live li i.fa-check {
  display: none;
}
.password-validate-live li i.fa-times {
  display: inline-block;
}
.password-validate-live li.valid {
  color: green;
}
.password-validate-live li.valid i.fa-check {
  display: inline-block;
}
.password-validate-live li.valid i.fa-times {
  display: none;
}

.btn-bg-changer {
  opacity: 0.7;
  transition: opacity linear 0.2s;
  cursor: pointer;
}
.btn-bg-changer:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
    max-width: 1200px;
  }
}
.vidPreviewWrapper {
  width: 100%;
  height: 147px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 2px 6px 1px #b1b1b1;
}
.vidPreviewWrapper video {
  width: 100%;
}