.password_reset {
    width: 400px;
}
.password_reset h2{
    font-family: var(--font-display-1);
    text-align: center;
    font-size: 30px;
    color: var(--main-colour-4);
    margin: 0;
    padding: 0;
}

.sliding_form .screens {
	width: 100%;
	overflow: hidden;
}
.sliding_form .screens .screen_wrap {
	display: flex;
	width: 400%;
	transition: all 0.5s;
}

.sliding_form .screens .screen {
	width: 100%;
	padding: 1vw;
}

.sliding_form .loader {
	width: 30px;
	height: 30px;
	margin: 5px;
	position: absolute;
}

.sliding_form .loader .loader_bar {
    /* background-color: var(--hha-main-col-2); */
    
	border: 2px dotted var(--main-colour-1);
	border-top: 2px dotted var(--main-colour-4);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: Spin 2s linear infinite;
}
.sliding_form .message {
	padding: 0 1vw;
}
.sliding_form .message p {
	background-color: rgba(var(--main-colour-4-rgb),0.25);
    background-color: #FFF;
    border: solid 1px var(--main-colour-4);
    padding: 5px;
    color: var(--main-colour-4);
    line-height: 24px;
    font-weight: bold;
    border-radius: 3px;

    animation-name: OpenVert;
	animation-duration: 2s;
	display: block;
}

.sliding_form .message i.material-icons{
    display: block;
    float: left;
	margin-right: 5px;
	color: var(--main-colour-4);
 
}

.sliding_form .control {
	padding: 0 1vw;
}
.sliding_form .control:first-child {
	margin-left: 0;
}
.sliding_form .control div {
	transition: all 0.5s;
}
.sliding_form .control .hidden {
	opacity: 0;
	visibility: hidden;

}
@media screen and (max-width: 460px) {
	.password_reset {
        width: 100%;
    }
}