* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

textarea:focus, input:focus, button:focus {
    outline: none;
}

.qml-forgot-password-container {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: rgb(67, 133, 124);
}

    .qml-forgot-password-container::after {
        content: "";
        background: url(/content/images/background.svg) no-repeat center center fixed;
        background-size: cover;
        opacity: 0.25;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }

.qml-forgot-password-title {
    display: block;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0.8em;
    color: rgb(67, 133, 124);
}

.qml-forgot-password-box {
    width: 400px;
    padding: 35px 30px;
    background: rgb(255, 255, 255);
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.08);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.qml-forgot-password-group {
    position: relative;
    margin-bottom: 15px;
}

.qml-forgot-password-control {
    width: 100%;
    height: 45px;
    border: none;
    padding: 0px 40px 0px 15px;
    background: rgb(255, 255, 255);
    font-size: 16px;
    color: rgb(102, 102, 102);
    border: 1px solid rgb(221, 221, 221);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

	.qml-forgot-password-control::-ms-clear,
	.qml-forgot-password-control::-ms-reveal {
		display: none;
	}

    .qml-forgot-password-control:focus {
        border-width: 1px;
        border-color: rgb(67, 133, 124);
        color: rgb(102, 102, 102);
    }

        .qml-forgot-password-control:focus + .qml-forgot-password-icon {
            border-width: 1px;
            border-color: rgb(67, 133, 124);
            color: rgb(67, 133, 124);
        }

.qml-forgot-password-group .qml-forgot-password-icon {
    position: absolute;
    right: 15px;
    top: 17px;
    color: rgb(153, 153, 153);
}

.qml-forgot-password-status.invalid-login {
    -moz-animation: wrong-log 0.3s;
    -webkit-animation: wrong-log 0.3s;
    animation: wrong-log 0.3s;
}

    .qml-forgot-password-status.invalid-login .qml-forgot-password-control, .invalid-login .qml-forgot-password-control + .qml-forgot-password-icon {
        border-color: rgb(246,71,71);
        color: rgb(246,71,71);
    }

.qml-forgot-password-alert {
    display: none;
    font-size: 12px;
    color: rgb(255, 0, 0);
    float: left;
}

.qml-forgot-password-link {
    text-decoration: none;
    color: rgb(198,198,198);
    float: right;
    font-size: 12px;
    margin-bottom: 15px;
}

.qml-forgot-password-form-back {
    width: 100%;
    text-align: center;
    margin: 1em 0 0;
}

.qml-forgot-password-link:visited {
    color: rgb(198,198,198);
}

    .qml-forgot-password-link:hover {
        text-decoration: underline;
        color: rgb(140,145,143);
    }

.qml-forgot-password-button {
    background: rgb(67, 133, 124);
    display: inline-block;
    width: 100%;
    font-size: 16px;
    height: 45px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}

	.qml-forgot-password-button:active {
		background: rgba(67, 133, 124, 0.5);
	}

	.qml-forgot-password-button:disabled:not(.m-progress) {
		background: rgb(153, 153, 153);
		cursor: default;
	}

@-moz-keyframes invalid-login {
    0%, 100% { left: 0px; }
    20%, 60% { left: 15px; }
    40%, 80% { left: -15px; }
}

@-webkit-keyframes invalid-login {
    0%, 100% { left: 0px; }
    20%, 60% { left: 15px; }
    40%, 80% { left: -15px; }
}

@keyframes invalid-login {
    0%, 100% { left: 0px; }
    20%, 60% { left: 15px; }
    40%, 80% { left: -15px; }
}

/** Animate loading icon */
@-webkit-keyframes ld {
	0% { -webkit-transform: rotate(0deg) scale(1); }
	50% { -webkit-transform: rotate(180deg) scale(1.1);	}
	100% { -webkit-transform: rotate(360deg) scale(1); }
}

@-moz-keyframes ld {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.1);	}
	100% { transform: rotate(360deg) scale(1); }
}

@-o-keyframes ld {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.1); }
	100% { transform: rotate(360deg) scale(1); }
}

@keyframes ld {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(1.1);	}
	100% { transform: rotate(360deg) scale(1); }
}

.m-progress {
	position: relative;
	opacity: .8;
	color: transparent !important;
	text-shadow: none !important;
	cursor: default;
}

	.m-progress:hover,
	.m-progress:active,
	.m-progress:focus {
		cursor: default;
		color: transparent;
		outline: none !important;
		box-shadow: none;
	}

	.m-progress:before {
		content: '';
		display: inline-block;
		position: absolute;
		background: transparent;
		border: 2px solid #fff;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		top: 50%;
		left: 50%;
		margin-top: -12px;
		margin-left: -12px;
		width: 24px;
		height: 24px;
		-webkit-animation: ld 1s ease-in-out infinite;
		-moz-animation: ld 1s ease-in-out infinite;
		-o-animation: ld 1s ease-in-out infinite;
		animation: ld 1s ease-in-out infinite;
	}