html {width:100%; height:100%;}

.overlay, .form-panel.one:before {position:absolute; top:0; left:0; display:none; background:#e7e7e7; width:100%; height:100%;}

.form {width:500px; z-index:15; position:relative; background:#fff; box-sizing:border-box; margin:10px auto 10px; overflow:hidden; box-shadow:0 0 30px rgba(0, 0, 0, 0.1); 
border:2px solid #222;}

.form-toggle {z-index:10; position:absolute; top:60px; right:60px; background:#FFFFFF; width:60px; height:60px; border-radius:100%;
 -webkit-transform-origin:center; transform-origin:center; -webkit-transform:translate(0, -25%) scale(0); transform:translate(0, -25%) scale(0); opacity:0;
 cursor:pointer; -webkit-transition:all .3s ease; transition:all .3s ease;}
 
.form-toggle:before, .form-toggle:after {content:''; display:block; position:absolute; top:50%; left:50%; width:30px; height:4px; background:#4285F4; 
-webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}

.form-toggle:before {-webkit-transform:translate(-50%, -50%) rotate(45deg); transform:translate(-50%, -50%) rotate(45deg);}
.form-toggle:after {-webkit-transform:translate(-50%, -50%) rotate(-45deg); transform:translate(-50%, -50%) rotate(-45deg);}
.form-toggle.visible {-webkit-transform:translate(0, -25%) scale(1); transform:translate(0, -25%) scale(1); opacity:1;}


/**/

.form-group {height:38px; margin:10px 0 10px;}
.form-group:last-child {margin:0;}

.form-group label {display:block; color:rgba(0, 0, 0, 0.6);}
.two .form-group, .add {display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between;}


/**/

.form-group input {width:100%; height:34px; display:block; background:#ddd; padding-left:10px; border:0; box-sizing:border-box; font-weight:500; 
-webkit-transition:.3s ease; transition:.3s ease; color:#000;}

.form-group button {width:100%; outline:none; background:#d53937; border:0; height:34px; color:#fff; font-size:16px; line-height:inherit; cursor:pointer;}

.two .form-group input {width:275px;}
.two .form-group button {background:#4285F4; margin-top:20px;}

/**/

.add {align-items:flex-start; margin-top:20px;}
.add .form-remember {font-weight:400; letter-spacing:0; text-transform:none; display:flex; align-items:center;}
.add .form-remember input[type="checkbox"] {width:20px; height:20px; margin:0 10px 0 0;}
.add .form-recovery {color:#000;/* font-size:14px; */text-decoration:underline;}

/**/


.form-panel {padding:30px calc(5% + 60px) 60px 60px; box-sizing:border-box;}
.form-panel.one:before {content:''; display:block; opacity:0; visibility:hidden; -webkit-transition:.3s ease; transition:.3s ease;}
.form-panel.one.hidden:before {display:block; opacity:1; visibility:visible;}

.form-panel.two a {color:#fff;}

.form-panel.two {padding:30px calc(10% + 60px) 60px 60px; z-index:5; position:absolute; top:0; left:95%; background:#555; width:100%; min-height:100%; -webkit-transition:.3s ease;
transition:.3s ease; cursor:pointer; color:#FFF;}

.form-panel.two:before, .form-panel.two:after {content:''; display:block; position:absolute; top:60px; left:1.5%; background:#fff; height:40px; width:2px; -webkit-transition:.3s ease;
 transition:.3s ease;}
 
.form-panel.two:after {left:3%;}
.form-panel.two:hover {left:93%; box-shadow:0 0 10px rgba(0, 0, 0, 0.2);}
.form-panel.two:hover:before, .form-panel.two:hover:after {opacity:0.6;}
.form-panel.two.active {left:10%; box-shadow:0 0 10px rgba(0, 0, 140, 0.2); cursor:default;}
.form-panel.two.active:before, .form-panel.two.active:after {opacity:0;}

.form-panel.two .form-group {display:flex;}


.form-header {margin:0 0 40px;}


.form-header h1 {padding: 4px 0; font-size:24px; font-weight:700; text-transform:uppercase; color:#d12222; font-family:Tahoma, Arial;}
.two .form-header h1 {position:relative; z-index:40; color:#FFF;}



.cp-fab {background:#FFFFFF !important; color:#4285F4 !important;}

#reg_result, #auth_result {text-align:center; margin:30px 0; color:#d53937; font-weight:600;}
#reg_result .green {color:#8cca62;}
#reg_result .usual {color:#000;}