@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nova+Flat&display=swap');
.loginWrap{
    background-color: $st-third-bg;
    overflow: hidden;

    .logoWrap{
        display: inline-block;
        img {
            width: 148px;
            height: auto;
        }
    }
    .loginConnect {
        margin-top: 50px;
        small{
            font-size: 36px;
        }
        .form-wrap{
            width: 50%;
            margin: auto;
        .form{
            background: #FFFFFF;
            box-shadow: 0 3px 10px 0 rgba(189, 207, 212, 0.8);
            border-radius: 8px;
            padding: 20px 30px;
            .signbtn{
                .signup{
                    text-decoration: none;
                    
                        &:hover{
                            text-decoration: underline;
                        }
                    
                }
            }
            h3 {
                font-size: 20px;
                font-weight: 600;
                padding:10px 0;
                margin-bottom: 15px;
            }
            label{
                color: #000;
                font-size: $st-font16;
                font-weight: 500;
                padding: 0 0 5px;
            }
            .remember-me {
                label {
                    font-size: 14px;
                    cursor: pointer;
                    input[type="checkbox"] {
                        width: 15px;
                        height: 15px;
                        float: left;
                        margin: 3px 5px 0 0;
                    }
                }
            }
            input[type="text"], input[type="number"], input[type="password"] {
                line-height: 40px; 
                margin: 0px;
                height: 44px;
                padding: 0 10px;
                border-radius: 5px;
                border: 1px solid $st-border-primary;
                background: $st-fourth-bg;
                font-size: 14px;
                color: $st-text-secondary;
                width: 100%;
                text-align: left;
                -moz-appearance: textfield;
                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                } 
            }
            .userField {
                margin: 0 0 15px;
                .input-icon {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: relative;
                    width: 100%;
                    a {
                        align-items: center;
                        color: #667085;
                        display: inline-flex;
                        font-size: 20px;
                        font-weight: 400;
                        margin: 10px 0;
                        position: absolute;
                        right: 12px;
                    }
                }
            }
            .forgot-password {
                margin: 0;
                float: right;
                color: #000000;
                font-size: 14px;
                &:hover {
                    text-decoration: underline;
                }
            }
            .loginbtn{
                padding: 10px 0 0 0; 
            }
            button{
                background: #DADADA;
                color: #000000;
                border: 0;
                border-radius: 5px;
                width: 100%;
                font-size: 14px;
                font-weight: 600;
                text-transform: none;
                &:hover {
                    background: #cbc4c4;
                }
            }
     
        }
    }
 
    }
}
 
.MuiDialog-container {
    .popupheader{
        border-radius: 0!important;
    }
    .MuiPaper-root  {
        .forgotmodel {
            .modelform{
    .pwdwrap{
       .input-icon{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        width: 100%;
           a{
               position: relative;
               align-items: center;
                color: #667085;
                display: inline-flex;
                font-size: 20px;
                font-weight: 400;
                margin: 10px 0;
                position: absolute;
                // right: 12px;
                top: 6px;
                right: 0;
               svg{
                 position: absolute;
                 right: 20px;
                 bottom: 25px;
               }
           }
       }
    }
    .button-wrap{  
        display: flex;
        justify-content: center; 
        .ButtonComponent{
            margin: 20px 0 0 0;
            .btn {         
              min-width: 30%!important;
              display: inline!important;
              left: 0;
              position: relative!important;
              
            } 
        }
    }
}
        }
    }
}