html {
    height: 100%;
    
}

body
{
  margin:0 auto;
  padding:0;
  text-align:center;
  
}

.pdi {
    white-space: initial;
    width: 400px;
    display: inline;
}

.logo {
	
	margin: 1rem;
}

.inline {
	display: inline-block;
}

.form-header {
    margin-bottom: 5%;
}

.page-footer {
	height: 40px;
	position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #334146;
    color: white;
    text-align: center;
}

.page-footer p {
	
    text-align: center;
}




/*form styles*/

#localStorageForm  fieldset {
background: white;
border: 0 none;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/

.divs fieldset:not(:first-of-type) {
    display: none;
}

.divs {
    display: none;
    align-items: center;
}

.active {
    display: block;  
}

/*buttons*/
#localStorageForm  .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#localStorageForm  .action-button:hover, #localStorage  .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

#localStorageForm  .action-button:disabled {
    opacity: 0.2;
}