body > .grid {position:absolute; top:0; left:0; height:100%; width:100%;}
body > .grid > .cell {text-align:center; vertical-align:middle;}

body > .grid > .cell > .inner {
    position:relative;
    display:inline-block; width:100%; max-width:320px; box-sizing:border-box; text-align:left;
    padding:30px; margin-bottom:100px;
}

header {margin-bottom:32px;}

#login-form {
    margin-bottom:40px;
}

#login-form .fieldset,
#login-form .errors {margin-bottom:8px;}
#login-form .errors .recover {text-decoration:underline; cursor:pointer;}


input[type=button],
input[type=submit] {-webkit-appearance:none !important; -webkit-border-radius:0; border-radius:0;}

.restore-backup-wrapper h2 {color:#3A3A3A; font-weight:500; font-size:20px; margin-bottom:6px;}
.restore-backup-wrapper .day-col {width:49px;}
.restore-backup-wrapper .month-col {width:49px;}
.restore-backup-wrapper .year-col {width:69px;}
.restore-backup-wrapper .btn.send-email {display:block; width:100%;}

.recover-password-wrapper p {}
.recover-password-wrapper .link-wrapper {text-align:right;}
.recover-password-wrapper .link {text-decoration:underline; cursor:pointer; font-weight:600; font-size:11px;}


@keyframes login_bounce {
    from {transform:scale(0.5); transform-origin: center center; opacity:0;}
    to {transform:scale(1); transform-origin: center center; opacity:1;}
}
body.login {
    background:white;
}
body.login > .grid {
    perspective:320px;
}
body.login > .grid > .cell > .inner {
    padding:0; margin-top:40px; margin-bottom:60px;
    animation: login_bounce .4s ease-out both;
}
body.login header {
    margin-bottom:0;
}
body.login .logo {
    display:flex; flex-direction:column; align-items:center;
}
body.login .logo img {
    margin:10px 0 20px;
}
body.login .logo h1 {
    text-align:center; color:#9D2776;
    font-size:14px; line-height:1.5em; font-weight:300; letter-spacing:-0.01em;
    margin-bottom:14px;
}
body.login .logo h1 strong {
    font-size:18px; font-weight:700; color:#9D2776;
}
.recover-password-form,
#login-form .form-body {
    position:relative;
    padding:0; margin:0; box-sizing:border-box;
}
.recover-password-form .fieldset,
#login-form .form-body .fieldset {
    background:white; padding:2px 10px; cursor:pointer; max-width:250px; margin-left:auto; margin-right:auto;
}
.recover-password-form .fieldset label,
#login-form .form-body .fieldset label {
    text-transform:uppercase; color:#F7931E;
    text-align:center; font-size:11px; font-weight:700; letter-spacing:0.12em;
    margin-bottom:3px;
    cursor:pointer;
}
.recover-password-form .fieldset .field,
#login-form .form-body .fieldset .field {
    text-align:center;
}

.recover-password-form .actions,
#login-form .form-body .actions {
    display:flex; justify-content:center; max-width:250px; padding:2px 10px; margin-left:auto; margin-right:auto;
}

.recover-password-form .errors,
#login-form .errors {
    color:#B00000; text-align:center;
    font-size:14px; font-weight:500; line-height:1.2em;
    padding:12px 0 0;
}
.form-body + .errors {
    margin:20px 0 -10px;
}
body.login .recover-password-wrapper {
    padding:12px 0;
    font-size:13px; font-weight:400; letter-spacing:-0.05em;
    text-align:center; color:#A0A0A0;
}
#login-form > p {
    padding:0 10px 8px; color:black;
    font-weight:400; line-height: 1.2em;
    text-align:center;
}
#login-form .link.purple {
    color:#404040;
}
#login-form .link.purple:hover {
    color:#F7931E;
}
.recover-password-form,
body.login .please-check-mailbox {
    font-weight:500 !important; font-size:15px; line-height:1.3em;
    padding:15px;
}
body.login .please-check-mailbox.purple {
    color:black;
}
body.login .please-check-mailbox .orange {
    color:black; font-weight:700 !important;
}
.recover-password-form label strong {
    text-transform:none; font-weight:500; color:#303030;
    letter-spacing:0; font-size:15px;;
}
.recover-password-form > .purple {
    font-weight:500 !important;
}
.recover-password-form > .purple a.orange {
    font-weight:600 !important;
}


@media screen and (max-width:1000px) {
    .popup .middle {
        width:100% !important;
    }
    .field {
        padding:12px 15px; font-size:16px;
    }
    .btn {
        font-size:16px; padding:10px 15px;
    }
    .popup .body {
        padding:70px 20px 24px; font-size:15px; line-height:1.2em;
        overflow-x:auto;
    }
    .popup .close-popup {
        top:0; right:0 !important;
        padding:12px; background:rgba(0,0,0,.1);
    }
}