*,
*:before,
*:after { padding: 0; margin: 0; box-sizing: border-box; }
html,
body { height: 100%; height: 100vh; margin: 0; font-family: 'Open Sans', Helvetica, Sans-serif; }
/*#container { min-height: 100%; background: linear-gradient(133deg, #FACE8D, #DE7B28); background-size: 300% 300%; -webkit-animation: GradientBG 60s ease infinite; -moz-animation: GradientBG 60s ease infinite; -o-animation: GradientBG 60s ease infinite; animation: GradientBG 6s ease infinite; }*/

@-webkit-keyframes GradientBG {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

@-moz-keyframes GradientBG {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

@keyframes GradientBG {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/*.login { width: 450px; height: 360px; background-color: rgba(0,0,0,0.25); position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding: 40px; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: 2px; font-size: 14px; }*/
.login h1 { color: white; margin: 0 0 2.5rem; font-size: 28px; }
/*input { display: block; margin: 2.15rem 0; border-radius: 2px; background: rgba(255,255,255, 0.5); border-style: none; padding: 0 10px; color: white; }
    input:last-of-type { margin: 1.5rem 0; }
    input[type=text]:focus, input[type=password]:focus, input[type=email]:focus { outline: none; }
        input[type=text]:focus::placeholder, input[type=password]:focus::placeholder, input[type=email]:focus::placeholder { color: rgba(255,255,255, 0.1); transform: translate(-10px, -160%); font-size: 1.25rem; }
    input::placeholder { color: rgba(0,0,0,0.5); -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
    input[type=text], input[type=password], input[type=email] { height: 40px; color: white; width: calc(100%); }
button { border: none; background-color: #03A9F4; color: white; width: 100%; height: 40px; font-size: 1rem; border-radius: 2px; text-transform: uppercase; }
a, a:hover, a:visited { color: #03A9F4; text-decoration: none; }

.form-login label { display: block !important; }*/

.form-validator-item { margin-bottom: 30px; }
.register-wrap { height: 500px; }


body { /*background-color: #080710;*/ background-color: rgba(0,0,0,0.9); }
.background { width: 500px; height: 460px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; }
    .background .shape { height: 200px; width: 200px; position: absolute; border-radius: 50%; }
.shape:first-child { background: linear-gradient( 35deg,#1845ad 25%,#23a2f6 90%); left: -100px; top: -100px; box-shadow: 5px 5px 10px rgba(8,7,16,0.05); }
.shape:last-child { background: linear-gradient(135deg,#f09819 20%, #ff512f 80%); right: -60px; bottom: -80px; height: 160px; width: 160px; box-shadow: 0 0 40px rgba(8,7,16,0.1); }
.login { height: 420px; width: 450px; }
form { padding: 30px 30px; color: #fff; background-color: rgba(255,255,255,0.13); position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 10px; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 0 40px rgba(8,7,16,0.6); }
    form * { letter-spacing: 0.5px; outline: none; border: none; }
label { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; }
input { display: block; height: 40px; width: 100%; background-color: rgba(255,255,255,0.08); border-radius: 3px; padding: 0 10px; margin-top: 8px; font-size: 14px; font-weight: 500; color: #fff !important; transition: font-size 0.2s; }
::placeholder { color: #879ABB; }
button.btn { width: 100%; padding: 8px 0; font-size: 16px; font-weight: 500; border-radius: 5px; cursor: pointer; }

form.form-login { height: 420px; width: 450px; }
.form-register .form-login { height: 520px; width: 450px; }
.form-register .form-validator-item { margin-bottom: 15px; }
.red { color: #ff512f; }
.color-success { color: green; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus { outline: none; font-size: 15px; }
    input[type=text]:focus::placeholder, input[type=password]:focus::placeholder, input[type=email]:focus::placeholder { color: rgba(255,255,255, 0.1); transform: translate(-20px, -180%); font-size: 1.1rem; }
input::placeholder { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.login-return-url { line-height: 12px; letter-spacing: normal; }
    .login-return-url a { color: #777; font-size: 11px; line-height: 12px; letter-spacing: normal; }