body{background-color:#f4f4f4;}

#login_halo{width:58vw; height:100%; position:absolute; top:0; right:0; z-index:1; text-align:left; padding:5%;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0+39,1+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 39%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 39%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 39%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#login_halo h1{font-size:28px; color:white; opacity:0.9; margin-top:15px; text-shadow:1px 1px 5px #666;}
#login_halo p{font-size:20px; color:white; opacity:0.7; text-shadow:1px 1px 5px #666;}
#login_bg{background-repeat:no-repeat; background-size:cover; background-position:center; width:58vw; height:100%; position:absolute; top:0; right:0;}

#login{text-align:center; height:100vh; background-color:#f4f4f4; min-height:520px; position:relative; width:100%; min-width:800px;}
#login_form H1{display:inline-block; height:170px; width:170px; background:transparent url(../../media/interface/main_logo.png) center no-repeat; background-size:120px auto; text-indent:-9999px;}

#login FORM{width:42vw; display:table; table-layout:fixed; position:absolute; top:10px; left:0; height:calc(100vh - 200px);}
#login FORM INPUT,#login_google_auth{display:inline-block; margin-bottom:10px; outline:none;}
#login FORM INPUT.text, #login_google_auth{width:250px; padding:8px; border:2px solid #ccc; border-radius:5px; font-size:13px;}
#login FORM INPUT.text:hover, #login_google_auth:hover{border-color:#47D1FF; color:#47D1FF; background-color:#edfaff;}

#login FORM .login_form_wrap{display:table-cell; vertical-align:middle;}
#login FORM .login_form_wrap > DIV{text-align:left; width:246px; display:inline-block;}
#form_submit{font-size:14px; font-weight:400; border-radius:5px; line-height:35px; background-color:#47D1FF; color:#999; width:105px; float:right; text-align:center; color:white; transition:background-color .3s;}
#form_submit:hover{cursor:pointer; background-color:#34cbfd;}
#form_submit:active{background-color:#06bbf7;}
#login FORM .login_form_wrap > DIV > DIV:not(#form_submit){display:inline-block; font-size:12px; width:125px; margin:0;}
#login FORM .login_form_wrap > DIV > DIV > LABEL{margin-left:5px; color:#999; line-height:35px;}
#login FORM .login_form_wrap > DIV > DIV:hover > LABEL{color:#47D1FF;}

#login #menu_bottom{width:42vw; background:transparent; padding-bottom:30px;}
#login_google_auth{color:#666; background: white url(../../media/app-icons/Google__G__Logo.svg.png) 10px no-repeat; background-size:auto 20px; padding-left:38px; text-align:left; text-decoration:none;}
#login_separator{margin:8px 0 20px 0; font-size:13px; color:#999; position:relative; text-align:center !important; }
#login_separator::after{position:absolute; content:''; width: 100%; height:1px; background-color:#ccc; top:50%; left:0;}
#login_separator > span{background-color: #f4f4f4; position:relative; z-index:1;padding:0 5px;}

@media (max-width: 979px) 
{
    #login{min-width:320px; padding:0; min-height:0; height:100%;}
    #login FORM{width:100vw; height:450px;}
    #login_halo{display:none;}
    #login_bg{display:none;}
    #menu_bottom{width:100vw; position:fixed; bottom:0;}
}