@font-face {
    font-family: 'CenturyGothic';
    src: url('../fonts/gothic.eot');
    src: url('../fonts/gothic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothic.woff') format('woff'),
         url('../fonts/gothic.ttf') format('truetype'),
         url('../fonts/gothic.svg#gothic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CenturyGothic-Bold';
    src: url('../fonts/gothicb.eot');
    src: url('../fonts/gothicb.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothicb.woff') format('woff'),
         url('../fonts/gothicb.ttf') format('truetype'),
         url('../fonts/gothicb.svg#gothicb') format('svg');
    font-weight: normal;
    font-style: normal;
}

*,html,body {margin:0; padding:0;}

body {
	overflow-y:scroll;
	font-size:14px;
	font-family: 'CenturyGothic';
	line-height:1.33em;
	color:#909090;
	background:white;
}

body > .overlay {
    position:fixed; z-index:99999;  background:rgba(0,0,0,.1) url(../img/loader.gif) no-repeat center center;
    top:0; left:0; width:100%; height:100%;
}

main {
    display:flex; justify-content:center; min-height:99vh; align-items:center;
}
main > .inner {
    width:400px; padding-bottom:10vh;
    position:relative; top:-200px; opacity:0; transform:rotateX(100deg) scale(.7);
    transition: all .5s ease-out;
}
body.ready main > .inner {
    top:0; opacity:1; transform:rotateX(0deg) scale(1);
}

.logo {
    display:block; width:100%; height:auto;
}

.soft-title {
    margin-left:168px; margin-top:-6px; color:#F79635;
    font-size:14px; line-height:1.33em;
}
.soft-title a {color:#F79635;}

.login-form,
.recover-form,
.renew-password {
    margin-top:24px;
    padding:0 0 24px 24px;
}

.renew-password-success {margin-top:45px; text-align:center;}
.renew-password-success a {color:#909090;}

.login-form .fieldset,
.recover-form .fieldset,
.renew-password .fieldset {margin-bottom:15px;}

.login-form .fieldset > label,
.renew-password .fieldset > label {display:block;}

.login-form input[type="text"],
.login-form input[type="password"],
.recover-form input[type="email"],
.renew-password input[type="password"],
.renew-password input[type="text"] {
	display:block; width:100%; box-sizing:border-box;
	-webkit-appearance: none;
	font-family: 'CenturyGothic'; font-size:18px; line-height:18px; font-weight:300; color:#606060;
	border:none; background:#F7F7F7; padding:8px 16px; text-align:center;
    box-shadow: -1px -1px 5px rgba(0,0,0,.05) inset;
}

.renew-password .fieldset.disabled {opacity:0.5;}

.login-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #F0F0F0 inset;
    -webkit-text-fill-color: #606060 !important;
}

.login-form .remember-wrapper {margin-top:10px;}
.login-form .remember-wrapper label {cursor:pointer;}

.login-form input[type="submit"],
.recover-form input[type="submit"],
.recover-form input[type="button"],
.renew-password input[type="submit"] {
	display:block; width:100%; box-sizing:border-box;
	-webkit-appearance: none; text-transform:uppercase;
	font-family: 'CenturyGothic'; font-size:20px; line-height:20px; font-weight:300; color:white; text-align:center;
	background:#469535; border:none; border-radius:20px; padding:8px 0; cursor:pointer;
}

.recover-form input[type="button"].cancel {margin-top:15px; background:#909090;}
.recover-form input[type="button"].cancel:hover {background:#707070;}

.login-form input[type="submit"]:hover,
.recover-form input[type="submit"]:hover,
.renew-password input[type="submit"]:hover {background:#61A532;}

.login-form .error,
.recover-form .error,
.renew-password .error {padding-bottom:15px; font-weight:bold; color:#BD222F; text-align:center;}
.renew-password .error a {color:#BD222F;}

.recover-form .success {
    background:#61A532; color:white; padding:.5em .9em; text-align:center; font-weight:bold;
}

.login-form .recover-link {
    margin-top:15px; font-size:.85em; text-align: center;
    cursor:pointer; text-decoration:underline;
}
.login-form .recover-link:hover {color:#202020;}


.recover-form .step1 p {margin-bottom:15px;}


.secours-menu {margin-top:30px;}
.secours-menu > p {color:black; text-align:center;}
.secours-menu .btn {
    -webkit-appearance: none; text-transform:uppercase; cursor:pointer; opacity:.9;
    font-family: 'CenturyGothic'; font-size:20px; line-height:22px; font-weight:300; width:100%;
    display:block; margin-top:20px; box-sizing:border-box; border:0; border-radius:20px; padding:10px 20px; text-align:center;
}
.secours-menu .btn.green {background:#469535; color:white;}
.secours-menu .btn:hover {opacity:1;}

.restore-backup-form {margin-top:30px;}
.backup-date {font-size:0;}
.backup-date > * {display:inline-block; width:23%; text-align:center; box-sizing:border-box; font-size:16px;}
.backup-date > input[type="number"] {background:#F0F0F0; border:1px solid #D0D0D0; border-radius:0; padding:5px 0;}
.backup-date > .submit {width:29%; margin-left:2%; cursor:pointer; background:#469535; color:white; border:0; padding:6px 0; border-radius:0;}
.restore-backup-form .fieldset {margin-top:30px;}
.restore-backup-form .fieldset select {
    display:block; width:100%; box-sizing:border-box; font-size:16px; background:#F0F0F0; border:1px solid #D0D0D0;
    border-radius:0; padding:5px 0;
}
.restore-backup-form .fieldset input[type="button"] {
    display:block; width:100%; cursor:pointer; box-sizing:border-box; background:#F28F14;
    color:white; border:0; padding:10px 0; font-size:20px; line-height:20px; text-transform:uppercase;
    font-family: 'CenturyGothic'; border-radius:20px; opacity:.9;
}
.restore-backup-form .fieldset input[type="button"]:hover {opacity:1;}