body {
	font-family: 'Roboto Mono';
	background-color: #505050;
	color: black;
	margin: 0px;
}
@keyframes FadeIn {
	from{
		opacity: 0%;
	} to {
		opacity: 75%;
	}
	}

	@keyframes FadeIn {
		from{
			opacity: 0%;
		} to {
			opacity: 75%;
		}
		}	

@keyframes HoverH {
	from{
		height: 2em;
	} to {
		height: 6em;
	}
	}	


@keyframes changewidth {
	from{
		border-color: black;
	} to {
		border-color: #ff9900;
	}
	}

@keyframes CenterLine {
	from{
		border-color: #505050;

	} to {
		border-color: #ff9900;
		opacity: 0%;
	}
	}

@keyframes flake {
		from{
			left: calc(100% - 2em);
			top: 1em;
			position: absolute;
		} to {
			left: calc(100% - 2em);
			top: calc(100% - 2.0em);
			position: absolute;
		}
		}



		

@keyframes glow {
			from{
				text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 10px cornflowerblue;
			} to {
				text-shadow: 0 0 10px #fff, 0 0 15px #ff9900, 0 0 20px #ff9900;
			}
			}		

			
hr.CenterLine1{
	border: 1px solid;
	border-color: #505050;
	width: calc( 100% - 1.3em );
	left: 0%;
	top: 50%;
	height: 4px;
	position: absolute;
	animation-duration: 1.5s;
	animation-name: CenterLine;
	animation-iteration-count: 13;
	animation-direction: alternate;
	animation-delay: 3.5s;
}
			
hr.CenterLine2{
	border: 1px solid;
	border-color: #505050;
	width: calc( 100% - 1.3em );
	left: 0%;
	top: calc( 50% - 1em);
	height: 4px;
	position: absolute;
	animation-duration: 1.5s;
	animation-name: CenterLine;
	animation-iteration-count: 13;
	animation-direction: alternate;
	animation-delay: 3s;
}

hr.CenterLine3{
	border: 1px solid;
	border-color: #505050;
	width: calc( 100% - 1.3em );
	left: 0%;
	top: calc( 50% - 2em);
	height: 4px;
	position: absolute;
	animation-duration: 1.5s;
	animation-name: CenterLine;
	animation-iteration-count: 13;
	animation-direction: alternate;
	animation-delay: 2.5s;
}

hr.CenterLine4{
	border: 1px solid;
	border-color: #505050;
	width: calc( 100% - 1.3em );
	left: 0%;
	top: calc( 50% - 3em);
	height: 4px;
	position: absolute;
	animation-duration: 1.5s;
	animation-name: CenterLine;
	animation-iteration-count: 13;
	animation-direction: alternate;
	animation-delay: 2.0s;
}

hr.CenterLine5{
	border: 1px solid;
	border-color: #505050;
	width: calc( 100% - 1.3em );
	left: 0%;
	top: calc( 50% - 4em);
	height: 4px;
	position: absolute;
	animation-duration: 1.5s;
	animation-name: CenterLine;
	animation-iteration-count: 13;
	animation-direction: alternate;
	animation-delay: 1.5s;
}

h1.potter{
	color: black;
	animation-duration: 4.5s;
	animation-name: glow;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 4.5s;
}

hr.TopLine1{
	border: 1px solid;
	width: 8em;
	left: 0%;
	top: 2.2em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 3.5s;
}


hr.TopLine2{
	border: 1px solid;
	width: 6em;
	left: 0%;
	top: 2.7em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 3.0s;
}

hr.TopLine3{
	border: 1px solid;
	width: 4em;
	left: 0%;
	top: 3.2em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 2.5s;
}

hr.TopLine4{
	border: 1px solid;
	width: 3em;
	left: 0%;
	top: 3.7em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 2.0s;
}
hr.TopLine5{
	border: 1px solid;
	width: 2em;
	left: 0%;
	top: 4.2em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 1.5s;	
	
}
hr.TopLine6{
	border: 1px solid;
	width: 1em;
	left: 0%;
	top: 4.7em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 1.0s;	
}

hr.TopLine7{
	border: 1px solid;
	width: 0.5em;
	left: 0%;
	top: 5.2em;
	height: 1px;
	position: absolute;
	animation-duration: 2.5s;
	animation-name: changewidth;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 0.5s;	
}

h1{
	font-family: 'Roboto Mono';
	font-size: 22px;
	text-shadow: #ff9900 1px;
}

div.HeadLine{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 80%;
	height: 0.5em;
	background-color: #ff9900;
	margin: 0px;
}


div.HeadLine2{
	position: absolute;
	left: 0px;
	top: 0.5em;
	width: 80%;
	height: 0.5em;
	background-color:cornflowerblue;
	margin: 0px;
}

div.HeadLine3{
	position: absolute;
	font-family: 'Roboto Mono';
	font-style:oblique;
	font-size: 12px;
	text-align: center;
	left: 80%;
	width: 20%;
	top: 0px;
	background-color: cornflowerblue;
	height: 1.3em;
}

div.HeadLine4{
	position: absolute;
	left: calc(100% - 1em);
	height: 100%;
	top: 0px;
	background-color: cornflowerblue;
	width: 1em;
}


div.HeadLine5{
	position: absolute;
	font-family: 'Roboto Mono';
	font-style:oblique;
	font-size: 12px;
	text-align: center;
	left: 90%;
	width: 10%;
	top: calc(100% - 1.4em);
	background-color: cornflowerblue;
	height: 1.3em;

}

img.Vader{
	position: absolute;
	width: 549px;
	height: 538px;
	left: calc( 50% - 275px);
	top: calc(100% - 538px);
	opacity: 8%;
	z-index: 0;
}

img.Trooper{
	position: absolute;
	width: 250px;
	height: 350px;
	left: calc(100% - 250px);
	top: calc(100% - 350px);
	opacity: 8%;.
	z-index: 0;
}

img.Mandalorian{
	position: absolute;
	width: 250px;
	height: 350px;
	left: calc(0% - 40px);
	top: calc(100% - 350px);
	opacity: 15%;
	z-index: 0;
}

div.flake{
	width: 1em;
	height: 1em;
	background-color: cornflowerblue;
	animation-duration: 4.5s;
	animation-name: flake;
	animation-iteration-count:infinite;
	animation-direction: alternate-reverse;
	animation-delay: 0s;	
}

.FadeIn {
		animation-name: FadeIn;
		animation-duration: 1.5s;
		animation-iteration-count:1;
}

.FadeOut {
		animation-name: FadeOut;
		animation-duration: 1.5s;
		animation-iteration-count:1;
}

h1.pwmgr {
	position: absolute;
	
	text-align: center;
	width: 30%;
	top: 0.1em;
	left: 30%;
	align-self: center;
	background-color: cornflowerblue;
	font-family: 'Roboto Mono';
	font-style:oblique;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-bottom: #ff9900 1px solid;
	border-left: #ff9900 1px solid;
	border-right: #ff9900 1px solid;
	border-top: black 1px solid;
}

#PWMain {
	width: 80%;
	
	height: 80%;
	position: absolute;
	left: 10%;
	z-index: 1;
}

div.PWDIVCat {
	/*display: flex;*/
	
	/*flex-wrap: nowrap;*/
	/*flex-grow: 1;*/
	
	position: relative;
	border: #ff9900 1px solid;
	font-family: 'Roboto Mono';
	text-align: center;
	width: 100%;
	height: 3.5em;
	left: 0%;
	padding: 0.2em;
	border-radius: 0.3em;
	background-color: cornflowerblue;
	opacity: 70%;
	margin: 2em;
	animation: FadeIn 1.0s;
	transition: all 0.5s;
	
}



div.PWMGRShow {
	position: relative;
	height: auto;
	min-height: 15em;
	transition: all 0.5s;
	
}

div.PWDPWClassDefault {
	opacity: 0%;
	margin: 1em;
	flex: auto;
	background-color:deepskyblue;
	border-radius: 0.5em;
	z-index: -2;
}

div.PWDPWClassShow{
	position: relative;
	transition: 0.5s;
	transition-delay: 0.5s;
	opacity: 100%;
	z-index: 2;
}

div.Flexed {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

hr.PWLine {
	width: 100%;
	padding: 0%;
	margin: 0%;
	border-spacing: 0ch;
  	border: 1px solid #ff9900;
  	border-radius: 2px;
}

h1.PWTitel{
	background-color: burlywood;

}
h3{
	font-family: 'Roboto Mono';
	font-size: 1.1em;
	margin: 0%;
	text-shadow: #ff9900 1px;
}

ul.ulpw {
	column-fill: balance;
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 1;
  }

  td.FirstTD{
	text-align: left;
	border-bottom: black 1px solid;
	margin: 0%;
	padding: 0%;
  }

  td{
	text-align: left;
  }

  table {
	width: 90%;
  }

  input.PWMGRInput{
		font-family: 'Roboto Mono';
		font-size: 0.9em;
		width: 20em;
		height: 1.5em;
		background-color:cornflowerblue;
		border-radius: 0.2em;
		border: 0px;
		margin: 2px;
  }

  button.PWMGRButton{
		font-family: 'Roboto Mono';
		position: relative;
		width: 3em;
		height: 1.7em;
		top: 0.0em;
		background-color: chocolate;
		border:#fff 0px;
		border-radius: 0.5em;
		margin: 0%;
		padding: 0%;
		font-family: 'Roboto Mono';
		text-align: center;
		margin: 0.5em;
		transition: 0.5S;
		border: cornflowerblue 2px solid;
		outline: #ff9900 solid 1px;   
  }

	button.PWMGRButton:hover{
		cursor: pointer;
		background-color: bisque;
    	outline:black solid 1px;
    	border: cornflowerblue 2px solid;
    	outline: #ff9900 solid 2px; 
}

  button.PWMGRButtonGreen{
	background-color: forestgreen;
			font-family: 'Roboto Mono';
		position: relative;
		width: 3em;
		height: 1.7em;
		top: 0.0em;
		border:#fff 0px;
		border-radius: 0.5em;
		margin: 0%;
		padding: 0%;
		font-family: 'Roboto Mono';
		text-align: center;
		margin: 0.5em;
		transition: 0.5S;
		border: cornflowerblue 2px solid;
		outline: #ff9900 solid 1px;   
  }

    button.PWMGRButtonGreen:hover{
		cursor: pointer;
		background-color: bisque;
    	outline:black solid 1px;
    	border: cornflowerblue 2px solid;
    	outline: #ff9900 solid 2px; 
  }


  div.STDIV{
	text-align: center;
	position: relative;
	border-top: #ff9900 1px solid;
	border-right: #ff9900 1px solid;
	
	left: calc(100% - 0.8em);
	top: -0.8em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 2em;
	background-color: cornflowerblue;
  }

    div.STDIV:hover{
	background-color: whitesmoke;
	cursor: pointer;
	}

div.editDiv{
	width: 1.5em;
	height: 1.5em;
	background-color: forestgreen;
	border-radius: 1.5em;
	position: absolute;
	left: calc(100% - 3em);
	top: calc(0% - 0.75em);
	border-top: black 1px solid;
	border-right: black 1px solid;
}
div.editDiv:hover{
	background-color: whitesmoke;
	cursor: pointer;
}


div.DelDiv{
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	background-color: chocolate;
	border-radius: 1.5em;
	position: absolute;
	left: calc(100% - 0.75em);
	top: calc(0% - 0.75em);
	border-top: black 1px solid;
	border-right: black 1px solid;
}
div.DelDiv:hover{
	background-color: whitesmoke;
	cursor: pointer;
}

div.AddPW{
	align-items: center;
	vertical-align: middle;
	text-align: center;
	width: 1.5em;
	height: 1.5em;
	background-color:forestgreen;
	border-radius: 2.5em;
	position: absolute;
	left: calc(100% - 3.75em);
	top: 0.25em;
	border: black 1px solid;
	
}


div.AddPW:hover{
	background-color: whitesmoke;
}



div.AddEditEntry{
	position: relative;
	width: 36em;
	/*height: 30%;*/
	margin: 6em;
	padding: 6em;
	left: calc(50% - 18em);
	top: 10%;
	border-radius: 1em;
	border:black 1px solid;
	/*background-color: cornflowerblue;*/
	/*background-color: rgba(100,149,237,255);*/
	background-color: rgba(125,125,125,255);
	opacity: 100%;
	z-index: 89;
		

}

div.DisplayBlocker{
	position:absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	margin: 0%;
	background-color:rgba(245,245,245,0.5);
	z-index: 90;
}

div.submitNewEntry{
	width: 6em;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	height: 2em;
	border-radius: 2em;
	background-color:forestgreen;
	border: black 1px solid;
	

}

div.submitNewEntry:hover{
	background-color: whitesmoke;
}