/*===========================
       22.SIGN IN css 
===========================*/



.sing-in-area{
    position: relative;
}


.sing-in-form-area{
    & .sing-in-title{
        font-size: 32px;
        font-weight: 700;
        font-family: $font-2;
        color: #000;
        
        & i{
            color: $theme-color-2;
            margin-right: 8px;
        }
        
        & span{
            font-weight: 400;
        }
    }
    & .text{
        font-size: 16px;
        margin-top: 25px;
    }
    
    & .sing-in-form-wrapper{
        padding-top: 10px;
        
        & .new-user{
            & .text{
                font-size: 18px;
                color: $theme-color-2;
                
                & a{
                    color: $heading-color;
                    @include transition(0.3s);
                
                    &:hover{
                        color: $theme-color;
                    }
                }
            }
        }
    }
    
    & .single-form{
        
        & label{
            margin-bottom: 25px;
            display: block;
            font-size: 18px;
            color: $heading-color;
        }
        & input{
            width: 100%;
            @include box-shadow ( 0px 7px 30px 0px rgba(0, 0, 0, 0.08));
            border-radius: 7px;
            background-color: $white;
            padding: 0 30px;
            height: 65px;
            border: 0;
            color: $heading-color;
            font-size: 18px;
        }
        
        & .form-checkbox{
            & span{
                font-size: 18px;
                color: $body-color;
            }
            
            & input[type="checkbox"]{
                display: none;
                
                &+label{
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    margin: -1px 15px 0 0;
                    vertical-align: middle;
                    cursor: pointer;
                    border-radius: 3px;
                    border: 1px solid $body-color;
                    position: relative;
                    @include transition(0.3s);
                    
                    &::before{
                        color: $white;
                        content: "\f00c";
                        font-family: "Font Awesome 5 Pro";
                        font-size: 16px;
                        position: absolute;
                        text-align: center;
                        left: 2px;
                        top: -4px;
                        @include transform(scale(0));
                        @include transition(0.3s);
                    }
                }
                
                &:checked{
                    &+label{
                        background: $theme-color-2;
                        border-color: $theme-color-2;
                        
                        &::before{
                            @include transform(scale(1));
                        }
                    }
                }
            }
        }
        
        & .form-forget{
            & a{
                font-size: 18px;
                color: $theme-color-2;
                @include transition(0.3s);
                
                &:hover{
                    color: $theme-color;
                }
            }
        }
        
        & .main-btn{
            width: 100%;
            border-radius: 7px;
            height: 65px;
            line-height: 61px;
            @include box-shadow (0px 7px 30px 0px rgba(0, 0, 0, 0.08));
            font-size: 18px;
            font-weight: 700;
            
            &:hover{
                background-color: $theme-color;
                color: $white;
                @include box-shadow (0px 7px 30px 0px rgba(0, 0, 0, 0.3));
            }
        }
        
        & .facebook-sing-up{
            & a{
                width: 100%;
                height: 65px;
                line-height: 65px;
                text-align: center;
                border-radius: 7px;
                background-color: #164aa9;
                color: $white;
                font-weight: 700;
                font-size: 18px;
            }
        }
        & .gooogle-sing-up{
            & a{
                width: 100%;
                height: 65px;
                line-height: 65px;
                text-align: center;
                border-radius: 7px;
                background-color: #df3527;
                color: $white;
                font-weight: 700;
                font-size: 18px;
            }
        }
    }
}


.sing-up-area{
    position: relative;
}

.sing-up-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    
    @media #{$md}{
        position: relative;
        width: 720px;
        margin: 0 auto;
        padding-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
    @media #{$xs}{
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
    @media #{$sm}{
        width: 540px;
    }
    
    & .image{
        padding-left: 70px;
        
        @media #{$md}{
            padding-left: 0;
        }
        @media #{$xs}{
            padding-left: 0;
        }
    }
}