.generator {
	font-family: Consolas,monospace;
	font-size: 14px;
	line-height: 1;
}

.generator table {
	border: 0;
}

.generator td {
	min-width:50px;
	height:30px;
	text-align: center;
	padding: 0;
	font-weight: bold;
}

@-moz-document url-prefix() {
	.bigcell, .bigcell td {
		-moz-appearance : none;
		height: 100%;
	}
}

.generator, svg {
	width: 100%;
  height: 100%;
}
.generator, svg line {
  stroke: #000000;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray: 2px 10px;
  animation: animateline 5s linear both infinite;
}

@-moz-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@-webkit-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@-o-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}

.login {
	color:#FF8C00;
}

.domain {
	color:#1E90FF;
}

.plaintext {
	color:#8B0000;
}

.pt1, .k1, .ct1 {
	color:#696969;
}

.pt2, .k2, .ct2 {
	color:#D2691E;
}

.pt3, .k3, .ct3 {
	color:#8B008B;
}

.clientchallenge {
	color:#DAA520;
}

.serverchallenge {
	color:#00008B;
}

.finalchallenge {
	color:#228B22;
}

/*.generator input {
  border: 1px solid currentcolor;
}*/
#nthashinput:invalid, #clientchallengeinput:invalid, #serverchallengeinput:invalid, #inputk1:invalid, #inputk2:invalid  {
  border: 1px dashed red;
  background-image: linear-gradient(#FFB6C1, #F08080);
}
#nthashinput:invalid:focus, #clientchallengeinput:invalid:focus, #serverchallengeinput:invalid:focus, #inputk1:invalid:focus, #inputk2:invalid:focus {
  background-image: linear-gradient(#F08080, #FFB6C1);
}