/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 28, 2016, 11:51:02 AM
    Author     : Administrator
*/

.modal_content_login
{
    /*border:1px solid red;*/

    display: inline-block;
    /*box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);*/    
    border-radius: 5px;

}

.LoginDiv_Base
{
    position:relative;
    text-align: left;
    /*margin-left: calc((100vw - 27em)/2);*/
    margin-top: calc((100vh - 44em)/2);

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);

    border-radius: 7px;

    display:inline-block; /* this will fit the size to the inner */


}

.LoginDiv_Whole
{
    /*position: absolute;*/

    /*background-color: #EEEEEE;*/
    background: #E8D1DA;
    background: #F7EAF3;

    border:1px solid lightgrey;

    border-radius: inherit;

    /*top: 20em; */
    /* left: 35em; */
    /*
    width: 27.5em;
    height: 48em;
    */

    width: 27.5em;
    height: 44em;/*48em;*/

}

.LoginDiv_Whole_inner
{
    width:100%;
    height:100%;
}

.LoginDiv_Whole_inner div
{
    display: block;   
}

.LoginDiv_Title
{
    height: 6em;
    
}

.LoginDiv_Title_IconBase
{
    padding-top:0.5em;
}

.LoginDiv_Title_IconBase img
{
    width: 3em; 
    /*height: 3em; */
    padding-top: 1em; 

}

.LoginDiv_Title_TextBase
{
    vertical-align: top;

    padding-top: 2.7em;

    height:100%;

}

.LoginDiv_Title_TextBase label
{
    color:#484848;
    font-family: Gotham-Medium;

    font-size:2em;
    text-shadow: 3px 3px white;

    color:hsla( 338, 68%, 33%, 1);
    text-shadow: 2px 2px lightgrey;
      -webkit-text-stroke: 1px white;
    color:#C026D3;

}

.LoginDiv_Body
{
    /*background-color:  #4C205F ;*/
    /* background: linear-gradient(to bottom right, hsla( 338, 68%, 33%, 0.9), hsla( 338, 68%, 33%, 0.9), hsla( 338, 68%, 33%, 0.9)); */
    /*background-color:#7c4892;*/
    /*top: 20em; */
    /*
    height: 37em; 
    width: 27.5em; 
    */
    height: 37em; 
    width: 100%;

    color: #484848;

}

.LoginDiv_Body_inner
{
    position: relative;

    width:100%;
    height:100%;

    

    /*
    background: linear-gradient(to bottom right, hsla( 338, 68%, 33%, 0.9), hsla( 338, 68%, 33%, 0.9), hsla( 338, 68%, 33%, 0.9));
    
    background: rgba(240,240,240,1);
    */
    
    /*background: linear-gradient(to bottom right, #BD8499, #BD8499, #BD8499);*/
}

.LoginDiv_BodyLines
{
    display: block;
    padding-left: 1.5em;
    
    
}

.LoginDiv_BodyLines_Message1
{
    padding-top: 2em;
    padding-bottom: 1em;
    /*padding-left: 2em;*/
    
    font-family: OpenSans-Semibold;
}

.LoginDiv_BodyLines_Message1 b
{
    font-size: 2em; 
    color: inherit; 
}

.LoginDiv_BodyLines_InfoMessage
{
    padding-top: 2em;
    padding-bottom: 1em;
    /*padding-left: 2em;*/
}

.LoginDiv_BodyLines_InfoMessage b
{
    font-size: 2em; 
    color: white; 
    color: #484848;
}

.LoginDiv_BodyLines div
{
    display: inline-block;
}

.LoginDiv_BodyLines div div
{
    display: inline-block;
}

.LoginDiv_EmailContainer
{
    padding-top: 2em; 
    width:calc(100% - 1.5em);
    text-align: center;

}

.LoginDiv_PasswordContainer
{
    padding-top: 1.5em; 
    padding-bottom: 0.5em;
    width:calc(100% - 1.5em);

    text-align: center;

}

.LoginDiv_TxtEmail
{
    /*
    height: 4em; 
    width: 23em; 
    */
    height: 4em; 
    width: calc(100% - 1.5em);
    width:calc(100%);
    box-sizing: border-box;

    padding-left: 1em; 
    font-size: 1em;

    /*box-shadow: 0px 0px 2px 2px rgba(80, 147, 206, 1);*/
}

.LoginDiv_BodyLines input
{
    /*color: #A9A9A9;*/
    color: #A9A9A9;

    font-family: Opensans-Light;
    font-family: Gotham-Medium;
    /*font-weight: bold;*/
    
    border-radius: 3px;
    border-width: 1px;
    border-color: lightgray;

}

.LoginDiv_ChkRememberMe_Base
{
    /*padding-left: 1.7em;*/
}

.LoginDiv_ChkRememberMe
{
    text-align: left;
    
    
    padding-left:0.3em;
}

.LoginDiv_ChkRememberMe > div
{
    
    vertical-align:top;
    padding-top:0.65em;

    
}

.LoginDiv_ChkRememberMe label
{
    color:inherit;
    cursor:pointer;

    padding-left: 0.3em;

    
}

.LoginDiv_ChkRememberMe label:hover
{
    color:#337ab7;
    
}

.LoginDiv_ChkRememberMe input[type=checkbox]
{
    height:2em;
    width:2em;
    
    border-radius: 15px;
    
}

.LoginDiv_PwdMessage_Base
{
    padding-left: 1.8em;
    visibility: hidden;
}

.LoginDiv_PwdMessage
{

}

.LoginDiv_PwdMessage label
{
    color:#f24141;
    text-shadow:1px 0px #e69191;
}

.LoginDiv_BtnContinue_Base
{
    padding-top: 1.5em; 
    /*
    width:24em;
    height:4em;
    */
    
    width:calc(100% - 1.5em);
    height:4em;
    
    
}

.LoginDiv_BtnContinue
{
    
    background-color: #EABB4B;
    
    width:100%;
    height:100%;
    
    border-radius: 5px;
    
    
}

.LoginDiv_BtnContinue label
{
    cursor:pointer;
    font-size: 2em;
    font-family: Gotham-Medium;
    color:white;
}

.LoginDiv_BtnContinue span
{
    font-size:1.6em;
    padding-top:-2em;
    color:white;
}

.LoginDiv_BtnContinue:hover
{
    
    background-color: #FFC000;
    cursor:pointer;
    
}

.LoginDiv_Bottom
{
    font-size: 12px;
    color:#8A8A8A;
    
    
}

.LoginDiv_Bottom a
{
    
}

.LoginDiv_Bottom_Wrap
{
    padding-left: 2.2em;
    margin-right: 2em; 
    padding-top: 1em; 
    font-family: OpenSans-Regular;
    letter-spacing: 1px;
    text-align: left;
    font-size:1.1em;
    color:#666666;

}

.LoginDiv_ForgotPassword
{
    padding-top: 1.5em; 
    padding-bottom: 1.5em; 
    
    width: calc(100% - 9.5em);
    
    vertical-align: top;
    
}

.LoginDiv_ForgotPassword a
{
    height: 4em; 
    font-size: 1em;
    cursor: pointer;
    color:inherit;
    text-decoration: none;
}

.LoginDiv_ForgotPassword a:hover
{
    cursor:pointer;
    color:#337ab7;
}

.LoginDiv_NotMember
{
    padding-top: 1.5em; 
    padding-bottom: 1.5em; 
    width:7em;
    
}

.LoginDiv_NotMember label
{
    height: 4em; 
    /*margin-left: 3.5em; */
    float:right;
    
    vertical-align: top;
    
    font-size: 1em;
    color:inherit;
}

.LoginDiv_NotMember label:hover
{
    cursor:pointer;
    color:#337ab7;
}

.LoginDiv_NotMember a
{
    height: 4em; 
    margin-left: 3.5em; 
    font-size: 1em;
    color:white;
}

.LoginDiv_NotMember a:hover
{
    cursor:pointer;
}

.loginOptionsMain
{
    background: #E8D1DA;
    height:100%;
    
    background: #F7EAF3;
}

.loginOptionBase
{
    width:100%;
    height:4em;
    

}

.loginOptionSeperatorWhite
{
    margin-top:0.5em;
    border-right:1px solid white;
    height:75%;
    vertical-align: top;
    padding-left:1em;
}

.loginOptionSeperatorGrey
{
    margin-top:0.5em;
    border-right:1px solid rgba(200,200,200,1);
    height:75%;
    vertical-align: top;
}

.loginOptionBase_Facebook
{
    
}

.loginOptionBase_Google
{
    margin-top:1em;
}

.loginOptionBase_email
{
    margin-top:1em;
}

.loginOptionBase_OR
{
    width:100%;
    padding-top:1.5em;
    padding-bottom: 1.5em;
}

.loginOptionBase_OR div
{
    text-align: center;
    color:inherit;
    font-family: Gotham-Medium;
}

.loginOptionWrap
{
    overflow: hidden;
    padding-left: 1em;
    width:85%;
    height:100%;
    /*margin-left:calc(8%); */
    margin:auto;
    
    
    border:1px solid lightgrey;
    
    
    border-radius: 5px;
}

.loginOptionWrap:hover
{
    cursor:pointer;
    border:1px solid white;
}

.loginOptionWrap_Facebook
{
    background-color: #4864a4;
}

.loginOptionWrap_Google
{
    background-color: #db4a39;
    
}

.loginOptionWrap_Email
{
    background-color: rgba(250,250,250,1);
}

.loginOptionWrap_Email:hover
{
    border:1px solid grey;
}

.loginOptionWrap_Signup
{
    background-color: rgb(192 38 211);/* tailwind: bg-fuchsia-600 */

}

.loginOptionWrap_Signup:hover
{
    border:1px solid white;
}

.loginOptionIconBase
{
    vertical-align: top;
        
    
}

.loginOptionIcon
{
    overflow: hidden;
    width: 2em; 
    height: 2em;
    margin-top:1em; 
    /*border-radius: 25px; */
    
}

.loginOptionIcon_Email
{
    font-size:1.5em;
    color:grey;
}

.loginOptionIcon_Signup
{
    color:white;
}

.loginOptionTextBase
{
    height:100%;
    padding-left: 1em;
}

.loginOptionText
{
    color:white;
    font-family: OpenSans-Regular;
    cursor:pointer;
}

.loginOptionText_Email
{
    color:#484848;
}

.loginOptionText_Signup
{
    color:white;
}

/* ********************************************************************************
    MOBILE PHONE PORTRAIT
********************************************************************************  */
/*
@media only screen and (max-width: 667px),
       only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)
*/
@media only screen and (max-width: 480px) ,
       only screen and (max-device-width: 480px)
{

    .LoginDiv_Base
    {
        margin-top: 0;
        width:100vw;
        
        
    }

    .LoginDiv_Whole
    {
        width: 100%;
        height:100vh;
    }

    .LoginDiv_Body
    {
        height:72vh;
        width:100%;
    }

    .LoginDiv_Body_inner
    {
        width:100%;
        height:100%;
        font-size:0.8em;
    }

    .LoginDiv_EmailContainer
    { 
        padding-top: 2em; 
        width:calc(100% - 2em);
        text-align: center;
    }

    .LoginDiv_PasswordContainer
    {
        padding-top: 1.5em; 
        padding-bottom: 1.5em;
        width:calc(100% - 2em);

        text-align: center;

    }
    
    .LoginDiv_BtnContinue_Base
    {
        padding-top: 1.5em; 
        /*
        width:24em;
        height:4em;
        */

        width:calc(100% - 2em);
        height:4em;
    }
    
    .LoginDiv_ForgotPassword
    {
        padding-top: 1.5em; 
        padding-bottom: 1.5em; 

        width: calc(100% - 9.5em);

        vertical-align: top;
        
    }
    
    .LoginDiv_Bottom_Wrap
    {
        padding-left: 1.5em;
        margin-right: 2em; 
        padding-top: 1em; 
        font-family: OpenSans-Regular;
        letter-spacing: 1px;
        text-align: left;
        font-size:1.1em;
        color:#666666;

    }

}

/*@media only screen and (max-width: 667px),
       only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape)*/
@media only screen and (min-width: 480px) ,
       only screen and (min-device-width: 480px)
{
    .LoginDiv_Whole
    {
        overflow:auto;
    }

    .LoginDiv_Body
    {

        height:30em;
    }

    .LoginDiv_Bottom
    {
        height:6em;
        margin-bottom:1em;
    }
}

/* tablet - portrait (must be min width)*/
@media only screen and (min-width: 768px) ,
       only screen and (min-device-width: 768px)
{

}


/* tablet - landscape (must be min width)*/
@media only screen and (min-width: 992px) ,
       only screen and (min-device-width: 992px)
{

}