@import url('https://common.ace.aci.uk.net/assets/styles/base/?sv=1.0.0');

.modal_wrapper {
    position: absolute;
    z-index: 99999;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--default-trans);
    
}
.modal_wrapper.closed {
    visibility: hidden;
    opacity: 0;
}
.modal_wrapper.opened {
    visibility: visible;
    opacity: 1;
}

.modal_wrapper .modal_box {
    background-color: RGBA(255,255,255,0.9);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    border-radius: 2px;
}
.modal_wrapper .modal_box_contents {
    padding: 1vw;
}

.modal_wrapper .modal_box.auth_code {
    padding: var(--standard-page-padding) 0;
}
.auth_code h2 {
    font-family: var(--font-display-1);
    color: var(--main-colour-4);
}

.auth_code .row {
    padding: 0.5vw var(--standard-page-padding);
    text-align: center;
}

.auth_code .row label {
    font-family: var(--font-display-1);
    font-size: 20px;
}
.auth_code p span {
    font-weight: bold;
    color: var(--main-colour-4);
}

.loader_bar {
    /* background-color: var(--hha-main-col-2); */
    
	border: 5px solid var(--main-colour-2-shade-1);
	border-top: 5px solid var(--main-colour-4);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: Spin 4s linear infinite;
}

.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%;
    }
}