/* label color */
.input-field label {
  color: #FFF;
}
/* label focus color */
.input-field input[type=text]:focus + label {
  color: #FFF;
}
/* label underline focus color */
.input-field input[type=text]:focus {
  border-bottom: 1px solid #FFF;
  box-shadow: 0 1px 0 0 #FFF;
}
/* valid color */
.input-field input[type=text].valid {
  border-bottom: 1px solid #FFF;
  box-shadow: 0 1px 0 0 #FFF;
}
/* invalid color */
.input-field input[type=text].invalid {
  border-bottom: 1px solid #FFF;
  box-shadow: 0 1px 0 0 #FFF;
}
/* icon prefix focus color */
.input-field .prefix.active {
  color: #FFF;
}

body {
  color: #202020;
}

#registerNewDomainWrapper {
  height: 100vh;
}

#domainListWrapper {
  display: none;
  height: 100vh;
}

#codeModal {
  border-radius: 20px;
}
#domainName {
  color: white;
  border-bottom: 1px solid white;
  font-size: 2.5em;
}
#doneButton {
  border: none;
}
#generateKeyBtn {
  font-size: 1.8em;
}
#loginModal, #signUpModal {
  top: 5%;
  bottom: 5%; 
}
#logoutButton {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: white;
  cursor: pointer;
}
#howToButton {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  cursor: pointer;
}
#scrollDownButton {
  position: absolute;
  bottom: 0;
  left: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
#arrow {
  font-size: 5em;
  color: white;
}

.dark-field input[type=text], 
.dark-field input[type=password] {
  color: #202020;
  border-bottom: 1px solid #202020;
}
/* label color */
.dark-field label {
  color: #202020;
}
/* label focus color */
.dark-field input[type=text]:focus + label,
.dark-field input[type=password]:focus + label {
  color: #202020;
}
/* label underline focus color */
.dark-field input[type=text]:focus,
.dark-field input[type=password]:focus {
  border-bottom: 1px solid #202020;
  box-shadow: 0 1px 0 0 #202020;
}
.dark-field input[type=text].valid,
.dark-field input[type=password].valid {
  border-bottom: 1px solid #202020;
  box-shadow: 0 1px 0 0 #202020;
}
/* invalid color */
.dark-field input[type=text].invalid,
.dark-field input[type=password].invalid {
  border-bottom: 1px solid #202020;
  box-shadow: 0 1px 0 0 #202020;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
}