opensourcecode/Hyper-M_UserPortal/src/app/common/signup-modal/signup-modal.component.scss

.modal-dialog{
    max-width: 800px;
    .modal-content{
        .modal-header{
            
        }
        .modal-body{
            padding:0 !important;
            .form-group.box{
                background-color: transparent;
                width: 100%;
                height: 50px;
                cursor: pointer;
                webkit-box-shadow: none; 
                box-shadow: none; 
                padding: 0; 
                .form-control {
                    border: none;
                    border: 2px solid #00AFD7;
                    border-radius: 0;
                    -webkit-box-shadow: none;
                    height: 50px;
                    font-size: 16px;
                    color: #00AFD7 !important;
                    font-weight: bold;
                    padding: .375rem 0;
                    height: 50px;
                    border-radius: 0;
                    background-color: transparent;
                    padding-left: 70px;
                    padding-top: 20px;
                    background-size: 30px;
                    background-repeat: no-repeat;
                    background-position: 30px center;
                    width: 60px;
                    background-image: none !important;
                    padding: 0;
                    font-size: 24px;
                    /* line-height: 1; */
                    text-align: center;
                }
                input{
                    float: left;
                    margin: 5px;
                }
                input[type=number]::-webkit-inner-spin-button, 
                input[type=number]::-webkit-outer-spin-button { 
                -webkit-appearance: none; 
                margin: 0; 
                }
            }
            .row {
                height: 290px;
                .col{
                    height:100%;
                    float: left;
                }
                .logo{
                    border-right:1px solid #ccc;
                    padding: 25px 25px;
                    text-align: center;
                    img{
                        width:150px;
                    }
                }
                .main_content{
                    float: left;
                    max-width: 100%;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                    .content{
                        padding: 30px;
                        position: absolute;
                        width: 100%;
                        max-width: 100%;
                        h2{
                            color:#00AFD7;
                            font-size: 18px;
                            padding-left: 40px;
                        }
                        p{
                            font-size: 16px;
                            padding-left: 40px;
                        }
                        h6{
                            font-size: 16px;
                            padding-left: 40px;
                            color: #00AFD7;
                            // font-style: italic;
                        }
                        h5{
                            font-size: 28px;
                            padding-left: 40px;
                            color: #00AFD7;
                            // font-style: italic;
                        }
                        .input_left {
                            height: 90px;
                            width: 100%;
                            padding-left: 40px;
                            form{
                                width: 70%;
                                float: left;
                            }
                            .resent{
                                width:30%;
                                float: left;
                                text-align: center;
                                margin-top: 20px;
                                a{
                                    text-decoration: underline;
                                    cursor: pointer;
                                }
                            }
                        }
                        .btn_center {
                            width: 373px;
                           /* margin: auto;*/
                            padding-left: 32px;
                            margin-top: 28px;
                        }
                    }
                    .success{
                        text-align: center;
                        img{
                            width: 100px;
                            margin: 20px;
                        }
                        h2{
                            color:green;
                        }
                    }
                }
                .end_success{
                    padding: 30px;
                    .logo{
                        // padding: 75px 25px;
                    }
                }
                
                .section1{
                    left: 0;
                }
                .section2{
                    left: 100%;
                }
                .section3{
                    left: 100%;
                }
                .section1.section_close{
                    left:-100%;
                }
                .section2.section_open{
                    left:0;
                }
                .section3.section_open{
                    left:0;
                }

                .section_open {
                    /* for chrome and safari*/
                    -webkit-animation-duration: 1s;
                    -webkit-animation-name: sectionin;
                  
                    /*for firefox*/
                    -moz-animation-duration: 1s;
                    -moz-animation-name: sectionin;
                  
                      /* for opera*/
                    -o-animation-duration: 1s;
                    -o-animation-name: sectionin;
                  
                      /* Standard syntax*/
                    animation-duration: 1s;
                    animation-name: sectionin;
                  }
                
                
                  @-webkit-keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }
                  
                  @-moz-keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }
                  @-o-keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }
                  @keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }


                  .section_close {
                    /* for chrome and safari*/
                    -webkit-animation-duration: 1s;
                    -webkit-animation-name: sectionout;
                  
                    /*for firefox*/
                    -moz-animation-duration: 1s;
                    -moz-animation-name: sectionout;
                  
                      /* for opera*/
                    -o-animation-duration: 1s;
                    -o-animation-name: sectionout;
                  
                      /* Standard syntax*/
                    animation-duration: 1s;
                    animation-name: sectionout;
                  }
                
                
                  @-webkit-keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 80%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
                  
                  @-moz-keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 80%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
                  @-o-keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
                  @keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 80%;
                    }
                  
                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
            }
        }
    }
}
.left72{
    padding-left: 72px;
}
.mt34{
    margin-top: 34px;
}