﻿body {
    padding:0;
    margin:0;
    background:rgb(255, 216, 0);
    font-family:sans-serif;
}

.box {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90%;
    height:85%;
    padding :40px;
    background:#fff;
    box-sizing:border-box;
    box-shadow :0 15px 25px rgba(0,0,0,0.5);
    border-radius:10px;
    display:flex;
    }

    .box h2 {
    position:absolute;
    top:-5px;
    left:40%;
    }

    .box .profe-inputbox {
        position:relative;
        top:5px;
        background:rgba(196, 143, 239, 0.91);
        width :400px;
        height:600px;
        padding:10px 20px;
        border-radius:5px;
        box-sizing:border-box;
        /*box-shadow :0 10px 20px rgba(0,0,0,0.5);*/
        margin-right:40px;
         transition:1s;
    }
    
     .box .profe-inputbox:hover {
       
        /*box-sizing:border-box;*/
        box-shadow :0 10px 20px rgba(0,0,0,0.5);
        transition:1s;
     
    }
      
.user-img {
    position :absolute;
    top:1%;
    left:60%;
    width :140px;
    height :150px;
    background:rgb(102, 51, 153);
    border-radius:5px;
    border:5px solid rgba(0,0,0,0.5);
}

    .box .profe-inputbox .lbl-pro {
        position:relative;
        width :100%;
        height:20px;
        padding-bottom:70px;     
     }
      .box .profe-inputbox label {
        position:relative;
        top:0;
        left:0;
        width :100%;
        height:15px;
        display:block;
     }

     .box .profe-inputbox .txt {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:20px;
        border :none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;

    }

      .box .profe-inputbox .txt:focus {
                border:1px solid #fff;
                transition:.5s;
                background:rgb(102, 51, 153);
                color:#fff;
             }

/*-----------------------------------------------------------------------*/
      .box .pers-inputbox {
        position:relative;
        top:5px;
        background:rgba(143, 239, 229, 0.91);
        width :400px;
        height:600px;
        padding:10px 20px;
        border-radius:5px;
        box-sizing:border-box;
        /*box-shadow :0 10px 20px rgba(0,0,0,0.5);*/
        margin-right:40px;
        transition:1s;
    }

        .box .pers-inputbox:hover {
       
        /*box-sizing:border-box;*/
        box-shadow :0 10px 20px rgba(0,0,0,0.5);
        transition:1s;
     
    }


      .box .pers-inputbox .lbl-pro {
        position:relative;
        width :100%;
        height:20px;
        padding-bottom:10px;     
     }
      .box .pers-inputbox label {
        position:relative;
        top:0;
        left:0;
        width :100%;
        height:20px;
        display:block;
     }

     .box .pers-inputbox .txt {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:20px;
        border :none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;

    }

     
         .box .pers-inputbox .txt:focus {
                border:1px solid #fff;
                transition:.5s;
                background:rgb(51, 151, 153);
                color:#fff;
             }   

/*------------------------------------------------------------------*/
 .box .cont-inputbox {
        position:relative;
        top:5px;
        background:rgba(249, 184, 184, 0.91);
        width :400px;
        height:600px;
        padding:10px 20px;
        border-radius:5px;
        box-sizing:border-box;
        /*box-shadow :0 10px 20px rgba(0,0,0,0.5);*/
        margin-right:40px;
        transition:1s;
    }

     .box .cont-inputbox:hover {
       
        /*box-sizing:border-box;*/
        box-shadow :0 10px 20px rgba(0,0,0,0.5);
        transition:1s;
     
    }

      .box .cont-inputbox .lbl-pro {
        position:relative;
        width :100%;
        height:20px;
        padding-bottom:10px;     
     }
      .box .cont-inputbox label {
        position:relative;
        top:0;
        left:0;
        width :100%;
        height:20px;
        display:block;
     }

     .box .cont-inputbox .txt {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:20px;
        border :none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;

    }

     .box .cont-inputbox .txt:focus {
                border:1px solid #fff;
                transition:.5s;
                background:rgb(155, 8, 15);
                color:#fff;
             }   


.btn-box {
    position:fixed;
    left:0px;
    bottom:0px;
    height:50px;
    width:100%;
    background:#999;
}
    .btn-box .btnsubmit {
            position:absolute;
            top:10%;
            left:36%;
            background:transparent;
            border:none;
            outline:none;
            color:black;
            background:#03a9f4;
            padding:10px 20px;
            cursor:pointer;
            border-radius:5px;
            
    }

    .btn-box .btnreset {
            position:absolute;
            top:10%;
            left:42%;
            background:transparent;
            border:none;
            outline:none;
            color:black;
            background:#f00;
            padding:10px 20px;
            cursor:pointer;
            border-radius:5px;
            
    }

    .btn-box .btngohome {
            position:absolute;
            top:10%;
            left:48%;
            background:transparent;
            border:none;
            outline:none;
            color:black;
            background:#00ff90;
            padding:10px 20px;
            cursor:pointer;
            border-radius:5px;
            
    }

.ddlist {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:30px;
        border :none;
        border:1px solid #fff;
        outline:none;
        background:transparent;
}
    .box .cont-inputbox txt:focus {
         background:rgb(255, 216, 0);
    }


.custom-select {
    width: 100%;
    padding: 5px 5px;
    font-size: 16px;
    color: black;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: none;
    border: 1px solid #fff;
    outline: none;
    background: transparent;
}


    @media (max-width:991px) {

        body {
            margin:0;
            padding:0;
            background:#fff;
            font-family:sans-serif;
        
        }

    .box {
        position:absolute;
        width:100%;
        height:100%;
        background:transparent;
        box-shadow:none;
        border-radius:0;
        display:list-item;
               
}
        .box h2 {
        position:relative;
        top:0%;
        left:10%;
        padding:0;
        margin:0;
        }

     .box .profe-inputbox {
        position:relative;
        top:20px;
        width :100%;
        height:820px;
        padding:10px 20px;
        border-radius:5px;
        box-sizing:border-box;
        box-shadow :0 10px 20px rgba(0,0,0,0.5);
        margin-bottom:50px;
        
    }

     .user-img {
        position :absolute;
        top:1%;
        left:70%;
        width :140px;
        height :150px;
        background:rgb(102, 51, 153);
        border-radius:5px;
        border:5px solid rgba(0,0,0,0.5);
    }


      .box .profe-inputbox .lbl-pro {
        position:relative;
        width :100%;
        height:20px;
        padding-bottom:40px;  
        font-size:28px;
         
     }
      .box .profe-inputbox label {
        position:relative;
        top:0;
        left:0;
        width :100%;
        height:20px;
        display:block;
        font-size:24px;
        padding-bottom:20px;  
     }

     .box .profe-inputbox .txt {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:20px;
        border :none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;
        font-size:24px;

    }
/*'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''*/


     .box .pers-inputbox {
        position:relative;
        top:20px;
       
        width :100%;
        height:820px;
        padding:10px 20px;
        border-radius:5px;
        box-sizing:border-box;
        box-shadow :0 10px 20px rgba(0,0,0,0.5);
        margin-bottom:50px;
             
    }

      .box .pers-inputbox .lbl-pro {
        position:relative;
        width :100%;
        height:20px;
        padding-bottom:10px;     
        padding-bottom:40px;  
        font-size:28px;   
     }
      .box .pers-inputbox label {
        position:relative;
        top:0;
        left:0;
        width :100%;
        height:20px;
        display:block;
        font-size:24px;
        padding-bottom:20px;  
     }

     .box .pers-inputbox .txt {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:20px;
        border :none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;
        font-size:24px;

    }

/*.............................................................*/
     .box .cont-inputbox {
        position:relative;
        top:20px;
       
        width :100%;
        height:820px;
        padding:10px 20px;
        border-radius:5px;
        box-sizing:border-box;
        box-shadow :0 10px 20px rgba(0,0,0,0.5);
        margin-bottom:50px;
    }

      .box .cont-inputbox .lbl-pro {
        position:relative;
        width :100%;
        height:20px;
        padding-bottom:40px;  
        font-size:28px;    
     }
      .box .cont-inputbox label {
        position:relative;
        top:0;
        left:0;
        width :100%;
        height:20px;
        display:block;
        font-size:24px;
        padding-bottom:20px;  
     }

     .box .cont-inputbox .txt {
        width :100%;
        padding:5px 5px;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:20px;
        border :none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;
        font-size:24px;

    }


     
     .ddlist {
        width :100px;
        padding:5px 0;
        font-size :16px;
        color :black;
        letter-spacing :1px;
        margin-bottom:30px;
        border :none;
        border:1px solid #fff;
        outline:none;
        background:transparent;
        font-size:24px;
}

      .btn-box .btnsubmit {
            position:absolute;
            top:10%;
            left:25%;
            background:transparent;
            border:none;
            outline:none;
            color:black;
            background:#03a9f4;
            padding:10px 20px;
            cursor:pointer;
            border-radius:5px;
            
    }

    .btn-box .btnreset {
            position:absolute;
            top:10%;
            left:42%;
            background:transparent;
            border:none;
            outline:none;
            color:black;
            background:#f00;
            padding:10px 20px;
            cursor:pointer;
            border-radius:5px;
            
    }

    .btn-box .btngohome {
            position:absolute;
            top:10%;
            left:60%;
            background:transparent;
            border:none;
            outline:none;
            color:black;
            background:#00ff90;
            padding:10px 20px;
            cursor:pointer;
            border-radius:5px;
            
    }

}
