.vertical-align {
	max-width: 22em;
}
.div-center {
 	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	position:relative;
}
.container {
    display: flex;
    flex-direction: column;
    margin-top: 2vw;
    align-items: center;
    width: 100%
}

.div-header {
	font-weight: bold;
    font-family: sans-serif;
    font-size: 28px;
    padding-bottom: 1.2em;
}

.inputtag {
	font-weight: 600;
    font-size: 16px;
    font-family: sans-serif;
    padding-bottom: 3.5rem;
    color:#1C1C1E;
    display:contents;
    width:100%;
}

body {
	display: flex;
    justify-content: center;
    height: 100%;
    margin: 0;
}
html {
	height:100%;
}
.form_input, .form_input:focus{
	border-color: #D8D8D8;
	transition:border-color .3s ease-in-out;
	padding-bottom: .5rem;
	margin-bottom: 1.2rem;
	margin-top: 1rem;
	font-size: 1rem;  
	outline-style: auto;
  outline-color: #878791;
  height: 1.7em;
  width: 85vw;
  padding-right: .8em;
  padding-left: .8em;
  padding-top: .5em;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.btn, .btn:focus {
	background-color: #1C4BBE;
	color:#E1E7F6;
	padding: .5rem;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor:pointer;
	height: 3em;
  width:90vw;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-style:solid;
  border-color:#1C1C1E;
  outline-color:#1C1C1E;
}

#submitbtn {
	background-color:#002491;
	margin-top:1.2em;
	color:#FAFAFA;
}

#btncreate{
	background-color:#F0F0F0;
	color:#1C1C1E;
	max-width:22em;
	margin-top:1em;
}

#togglePassword, #togglePassword2{
	margin-top: 1.1em;
	margin-right:.5em;
	cursor: pointer;
}
.form_input:focus{
	outline-style:auto;
	border-color: #003CF7;
}
::placeholder{
	color: #ABABB2;
	font-size: .9em;

}

.field-icon{
	position: absolute;
  	top: 14px;
  	right: 16px;
}

.logo {
	max-width: 90%;
	margin-bottom:1.5em;
}

label {
	margin-bottom:1rem;	
}

.error {
	color:darkred;
  margin: 4vw 16vw;
  font-family: sans-serif;
  display:flex;
  max-width: 20em;
  text-align: center;

}
.info {
	color:darkblue;
	margin: 5vw;
  font-family: sans-serif;
  text-align: center;
  max-width: 20em;
}
.light-text {
	color: #868383;
	text-decoration: none
	margin: 4vw;
  font-family: sans-serif;
}

.link {
	margin:2vw;
	text-decoration: unset;
	font-size: 15px;
	color:#0036DB;
	margin-top:1.2em;
}

.pinContainer { padding: 40px 20px; 
  text-align:center;
  display:block;
}

.password-container {
	margin-right:-20%;
}

.pinBox {
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin-left: 5em;
}
.pinBox:before {
    content:'';
    pointer-events: none;
    display: block;
    height: 40px;
    position: absolute;
    width: 140px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMzUiCiAgIGhlaWdodD0iNTAiCiAgIHZpZXdCb3g9IjAgMCA5LjI2MDQxNjQgMTMuMjI5MTY4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjIgNWMzZTgwZCwgMjAxNy0wOC0wNiIKICAgc29kaXBvZGk6ZG9jbmFtZT0iYm94LnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjUuNiIKICAgICBpbmtzY2FwZTpjeD0iNzIuMjkxNjc5IgogICAgIGlua3NjYXBlOmN5PSI1My4yNjk3NzciCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgdW5pdHM9InB4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjU2MCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDM1IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTI4My43NzA4MikiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjAuMDIwMDAwMDI7c3Ryb2tlOiMwMDA2MDI7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzMzI7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0My4yMDAwMDA3NjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnMiCiAgICAgICBpZD0icmVjdDM5NDIiCiAgICAgICB3aWR0aD0iOC44MzU4NzY1IgogICAgICAgaGVpZ2h0PSIxMi43NTY2OTciCiAgICAgICB4PSIwLjIzNTU1MTc3IgogICAgICAgeT0iMjg0LjA1NDI5IgogICAgICAgcnk9IjAuMjExMzg4ODYiIC8+CiAgPC9nPgo8L3N2Zz4K'); 
    background-repeat: round;
  }

.pinBox:after {
    content: '';
    height: 3rem;
    width: 4rem;
    background-color: #ffffff;
    position: absolute;
    display: inline-block;
    right:0em;
}

.pinEntry {
  padding: 3px 8px;
  font-family: courier, monospaced;
  font-size:xx-large;
  border: none;
  outline: none;
  width: 6em;
  letter-spacing: 16px;
  background-color: transparent;
}

.mail-code{
	margin-top: 4vh;
	font-size:xx-large;
}

.bottom-div{
	background-color:#FAFAFA;
	margin-top:auto;
  width: 100%;
  height: 12.5%;
}