/*
  HTML guide for sorting <th>

  <th class="sortable-th" id="thFirstName">First Name</th>
  <tbody id="manageUsersTbody">
    <tr id="manageUsersTR_@i">
      <td class="sortFirstName">Albert</td>
*/
@import url(https://cdn.jsdelivr.net/gh/Gabe-Fernandes/StyleDashRepo/dist/styleDash.css);
* {
  color: #263028;
}
* .input-wrap span {
  color: #f9f9f9;
}
* .err {
  color: #f9f9f9;
}
* #registerContent .confirmation-wrap span {
  color: #f9f9f9;
}

html body {
  background-color: #d3c6b5;
}
html body .title-wrap h1 {
  color: #263028;
}
html body .btn {
  background: #896c4a;
  color: #263028;
}
html body .text-btn {
  background: none !important;
}
html body .close-btn .close-btn-wrap {
  background-color: #896c4a;
}
html body .close-btn .close-btn-wrap div {
  background-color: #d3c6b5;
}
html body .screen-tint .modal {
  background-color: #263028;
}
@media (max-width: 768px) {
  html body .screen-tint .modal {
    width: 65vw;
  }
}
html body .screen-tint .modal h3 {
  color: #d3c6b5;
}
html body .cross-btn {
  width: 2rem;
  height: 2rem;
  margin: 1vh 0vw;
  background-color: #896c4a;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
html body .cross-btn div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #263028;
}
html body .cross-btn .vertical {
  width: 0.2rem;
  height: 1.2rem;
}
html body .cross-btn .horizontal {
  width: 1.2rem;
  height: 0.2rem;
}
html ::-webkit-scrollbar-thumb {
  background: #896c4a;
  border-radius: 0.5rem;
}

#registerContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100vw;
  height: 100vh;
}
#registerContent .title-wrap {
  padding: 15vh 0vw 0vh;
}
#registerContent .title-wrap h1 {
  color: black;
}
#registerContent .register-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20vw;
  height: 50vh;
  transition: width 0.3s;
  margin: 0 auto;
  padding-top: 5vh;
}
#registerContent .register-form .registration-page {
  width: 100%;
  height: 100%;
}
#registerContent .register-form .registration-page .input-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15%;
  position: relative;
}
#registerContent .register-form .registration-page .input-wrap input {
  width: 90%;
  height: 70%;
  border-radius: 0.3rem;
}
#registerContent .register-form .registration-page .input-wrap img {
  height: 2rem;
  width: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  right: 8%;
}
#registerContent .register-form .registration-page .input-wrap-date {
  color: black;
  text-align: center;
  margin-top: 1.5vh;
}
#registerContent .register-form .registration-page .btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15%;
}
#registerContent .register-form .registration-page .btn-wrap button {
  width: 90%;
  border-radius: 0.3rem;
}
#registerContent .register-form .registration-page .requirement-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 55%;
  border-radius: 0.5rem;
}
#registerContent .register-form .registration-page .requirement-wrap .requirements {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 20%;
  margin-left: 5%;
}
#registerContent .register-form .registration-page .requirement-wrap .requirements label {
  color: black;
}
#registerContent .register-form .registration-page .requirement-wrap .requirements .valid {
  height: 1.8rem;
  width: 1.8rem;
  min-height: 1.8rem;
  min-width: 1.8rem;
  border-radius: 50%;
  background-color: #17993c;
  position: relative;
  margin: 0 auto;
  margin: 0vh 1vw 0vh 0vw;
}
#registerContent .register-form .registration-page .requirement-wrap .requirements .valid div {
  background-color: #F9F9F9;
  border-radius: 0.4rem;
  position: absolute;
  width: 0.1494rem;
  height: 0.5994rem;
  top: 72%;
  left: 19%;
  transform: translate(-20%, -65%) rotate(-45deg);
}
#registerContent .register-form .registration-page .requirement-wrap .requirements .valid div + div {
  width: 0.1494rem;
  height: 1.35rem;
  top: 15%;
  left: 55%;
  transform: translate(-55%, 0%) rotate(45deg);
}
#registerContent .register-form .registration-page .requirement-wrap .requirements .invalid {
  height: 1.8rem;
  width: 1.8rem;
  min-height: 1.8rem;
  min-width: 1.8rem;
  border-radius: 50%;
  background-color: #781d1d;
  position: relative;
  box-shadow: inset 0 0 0.1rem 0.1rem #781d1d;
  margin: 0 auto;
  margin: 0vh 1vw 0vh 0vw;
}
#registerContent .register-form .registration-page .requirement-wrap .requirements .invalid div {
  width: 0.1494rem;
  height: 1.28574rem;
  background-color: #F9F9F9;
  border-radius: 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
#registerContent .register-form .registration-page .requirement-wrap .requirements .invalid div + div {
  transform: translate(-50%, -50%) rotate(45deg);
}
#registerContent .confirmation-wrap {
  background-image: linear-gradient(to top left, #212325, #2f3439);
}
#registerContent .confirmation-wrap .btn-wrap {
  margin: 2vh 0vw;
}
#registerContent .pagination-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: initial;
  height: initial;
}
#registerContent .pagination-btn-wrap img {
  height: 2.5rem;
  width: 2.5rem;
  min-height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  margin: 0vh 2vw;
}
#registerContent .cancelBtn {
  position: absolute;
  bottom: 7vh;
  right: 4vw;
}
@media (max-width: 768px) {
  #registerContent .register-form {
    width: 50vw;
  }
  #registerContent .register-form .registration-page .requirement-wrap .requirements {
    margin-left: 20%;
  }
  #registerContent .confirmation-wrap {
    width: 70vw;
  }
}

/*# sourceMappingURL=register.css.map */