/* Size */

.divMainMinSizeLogin
{min-width:300px; min-height:calc(100vh - 100px);}


/* Container */

#divContainerLogin
{max-width:900px; min-height:calc(100vh - 100px); margin:0 auto;
 display:grid; grid-template-columns:1fr; justify-items:center; align-items:center;}


/* Top - Login */

#imgTopLogoLogin
{height:33px; margin-bottom:10px;}




/* Area */

#divForm
{max-width:400px; margin:0 auto;
 box-shadow:0 0 10px rgb(200,200,200);}

#divLoginTitle
{width:100%; height:70px; line-height:70px; cursor:pointer;
 font-size:20px; font-weight:bold;
 color:rgb(255,255,255); background-color:rgb(20,20,20);}

#divForgotTitle
{width:100%; height:50px; line-height:50px; cursor:pointer;
 font-size:15px; font-weight:bold;
 color:rgb(255,255,255); background-color:rgb(100,100,100);}



#divLoginMail, #divForgotMail
{height:80px; padding-top:50px;}

#divLoginPass
{height:100px; padding-top:20px;}




/* Text */

.divItemTitle
{margin-bottom:2px; text-align:left; font-size:14px; color:rgb(120,120,120);}



.divInput
{height:30px;}

.inptStyle
{width:calc(100% - 20px); height:100%; padding:0 10px; text-align:left; font-size:14px;}

.inptStyle
{background-color:rgb(240,240,240); border-bottom:2px solid rgb(200,200,200);}

.inptStyle:focus
{background-color:rgb(240,245,255); border-bottom:2px solid rgb(100,200,255);}



#divLoginPassView
{margin:7px 7px 0 auto; cursor:pointer;
 text-align:right; text-decoration:underline; font-size:14px;}




/* Button */

#divLoginBtn
{height:90px; padding-top:60px;}

#divForgotBtn
{height:100px; padding-top:40px;}

#btnLogin, #btnForgot
{width:180px; height:35px; font-size:15px;}




/* Login - Animation */

.divLoginArea
{width:calc(100% - 100px); height:400px; margin:0 auto;
 transition:height 300ms ease 0s;}

#divLoginMail
{visibility:visible;
 transition:height 300ms ease 20ms, padding-top 300ms ease 20ms, visibility 0s ease 30ms;}

#divLoginPass
{visibility:visible;
 transition:height 350ms ease 40ms, padding-top 350ms ease 40ms, visibility 0s ease 50ms;}

#divLoginBtn
{visibility:visible;
 transition:margin 400ms ease 60ms, visibility 0s ease 70ms;}



#divLogin.is_close
{height:0px;
 transition:height 300ms ease 0s;}

#divLoginMail.is_close
{height:0px; padding-top:0px; visibility:hidden;
 transition:height 0s ease 0s, padding-top 0s ease 0s, visibility 0s ease 0s;}

#divLoginPass.is_close
{height:0px; padding-top:0px; visibility:hidden;
 transition:height 0s ease 0s, padding-top 0s ease 0s, visibility 0s ease 0s;}

#divLoginBtn.is_close
{margin:0px auto; visibility:hidden;
 transition:margin 0s ease 0s, visibility 0s ease 0s;}




/* Forgot - Animation */

.divForgotArea
{width:calc(100% - 100px); height:270px; margin:0 auto;
 transition:height 300ms ease 0s;}

#divForgotMail
{visibility:visible;
 transition:height 270ms ease 60ms, padding-top 270ms ease 60ms, visibility 0s ease 50ms;}

#divForgotBtn
{visibility:visible;
 transition:margin 250ms ease 80ms, visibility 0s ease 80ms;}



#divForgot.is_close
{height:0px;
 transition:height 300ms ease 0s;}

#divForgotMail.is_close
{height:0px; padding-top:0px; visibility:hidden;
 transition:height 0s ease 0s, padding-top 0s ease 0s, visibility 0s ease 0s;}

#divForgotBtn.is_close
{margin:0px auto; visibility:hidden;
 transition:margin 0s ease 0s, visibility 0s ease 0s;}