@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/grid"; 
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "plugin/fontface";
@import "bootstrap/utilities";
@import "custom/messages"; 
@import "bootstrap/scaffolding";
body{
    margin: 0;
    padding: 0;
}
.popupSignupLogin{
    display: inline-block;
    height: 100%;
    position: fixed;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    z-index: 1000;
    &:before{
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle;
    }
    .quickpopup{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    } 
} 
.contentPanal{
    width:100%;
    margin:20px 0;
    text-align: center;
    height: 427px;
    overflow: auto;
    .logo-image{
        max-width:200px;
        width: 100%;
        margin: 0 auto 10px;
    }
    .loginpanel{
         padding-bottom: 0px;
        
    }
}
.loginSignupPanel{
    margin: 10px auto;
    font-family: $font-family-base;
    .newuser{
            padding: 0 0 10px;
        }
    #reset-password-div{
        margin: 0px auto;
        max-width: 360px;
        width: 100%;
        padding:10px 0;
        text-align: left;
        ul{
            margin: 0;
            padding: 0; 
            li{
                padding:10px 0;
                list-style: none; 
            }
        }
        .text{
            color: lighten($gray-base, 55%);
        }
        .back-to-login{
            padding-bottom:10px;
            float: right;
        }
        .reset-password{
            text-transform: uppercase;
            float: left;
            padding-bottom:10px;
        }
    }
   
} 
#forgot-password-block,.SignupPanel,.login-div{padding:0 10px;max-width: 500px;margin: 0 auto}
 .login-div{
        border-top: 2px solid lighten($gray-base, 95%); 
        padding:0 10px;
        #formLogin{
            max-width: 100%;
            width: 100%;
            margin:20px auto;
            .fr-pw{
                color:lighten($gray-base, 75%);
                padding:10px 0;
                display: block;
            }
            ul{
                margin:0;
                padding:0;
                li{
                    margin:0;
                    padding:11px 0;
                    list-style: none;
                }
            }
        }
    }
#forgot-password-block{
    border-top: 2px solid lighten($gray-base, 95%); 
}
.popupMainDiv{
    position: relative;
    border-top: 3px solid $brand-primary;
}
 #formUserSignup{
        padding:15px 0;
        margin:15px 0;
        border-top: 2px solid lighten($gray-base, 95%);
    }
.signup-form{
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    ul {
        padding: 0;
        marging: 0;
        li{
            list-style: none; 
            .signup-field{
                padding:5px;   
            }
        }
    }
}

.padding-bottom{
    padding-bottom: 10px;
}
.email-box{
    padding: 10px;
    .popup-head{
        margin:0;
        padding-bottom:10px; 
    }
    .form-field03{
        padding: 0px;
        margin: 0px;
        li{
        list-style: none; 
        padding-bottom: 8px;
            .dark {
                color: #000;
                float:left;
                padding-right: 10px;
                .mndty{
                    color:#ff0000;
                }
            }
        }
    }
}

#check-email-div{
    h3{
        font-size: 15px;
    } 
}
.email-box{
    .message_validation{
        &::before{
            content: "";
            display: inline-block;
            margin: 5px 0;
            position: absolute; 
        }
        span{
            line-height: 25px;
            padding-left: 20px;
            color: #d9534f;
        }
    }
}
.padding-bt-05{
    padding-bottom: 5px;
}
.close-icon{
    background: url(../images/close.png) no-repeat 0 0;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px; 
    right: 5px;
    cursor: pointer;
    &:hover{
        background-position: -24px 0;
    }
}
.message_validation {
    text-align: left;
}