@import url('https://fonts.cdnfonts.com/css/red-hat-display');
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    
}
.container {
    padding: 20px;
}

body {
    background-color: #052f58 !important;
    margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            font-family: 'Red Hat Display', sans-serif !important;
                font-family: 'Red Hat Text', sans-serif !important;
            color: rgb(237, 237, 237) !important;
     
}
 .centerContent{
        align-content: center;
    }
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Add any other necessary styling for the logo container */
}

.logo-container img {
    /* Add any specific styling for the logo */
    max-width: 100%;
    height: auto;
}

.fetch_your_kyc_form {
    margin-top: 20px; /* Adjust the margin as needed to create space between logo and form */
    /* Other styles for the container after the logo go here */
}

.cif-form {
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 400 !important;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    color: white;
    border-radius: 10px;
  
}
div#otpModal {
    color: black;
    font-size: 15px;
    padding: 29px;
}
.identifier {
    position: relative;
    text-align: center;
    margin-bottom: -8%;
   color: #000000;
}
p.serach {
    position: relative;
    text-align: end;
    margin-top: -6%;
    color: #d16161;
}
a:link{
    color: #d16161;
}
.mContainer{
  display: flex;
        justify-content: center;
}
.radio-btn{
     display: flex;
        align-items: top;
}
.rLable{
}
p.identifier_c {
   color: #000000;
    font-size: 10px;
    text-align:left;
}
input[type=radio] {
    accent-color: black;
}
@media (min-width: 280px) and (max-width: 653px) {
    .logo-container {
        width: 100%;
        margin-top: 0px;
        top: 6%;
    }
    .identifier {
        position: relative;
        text-align: center;
        margin-bottom: auto;
       color: #000000;
    }
    p.serach {
        position: relative;
        text-align: end;
        margin-top: auto;
        color: red;
    }
    .proceed {
        width: 95%;
        margin: auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Assuming you want the content inside to be centered vertically */
        justify-content: center;
        align-items: center;
        padding: 30px;
     
      
        border-radius: 15px;
        border: 2px solid black;
    }
    .button {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center !important;
    padding: 10px 25px 10px 25px;
    border-radius: 4px;
    background-color: #fe5606;

    font-size: 15px !important;
    color: white !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px #fe5606;
    width: 170px;
    }
    .fetch_button button.btn {
        font-weight: 200 !important;
        font-size: 15px !important;
        color: white !important;
       
    }
    
    .cif-form {
        max-width: 60%; /* Adjust the maximum width for larger screens */
    }

.cif-form h1 {
    font-weight: 400 !important;

    font-size: 54px !important;
    
}
.custom-list {
    list-style-type: none;
    padding: 53px;
    height: 50%;
    width: auto;
    text-wrap: nowrap;
}
}

.cif-form h1 {
    font-weight: 600;

    font-size: 84px;
}
.button {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center !important;
    padding: 10px 25px 10px 25px;
    border-radius: 4px;
    background-color: #fe5606;
    font-weight: 500px !important;
    font-size: large !important;
 
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px  gray;
}

.button:hover {

   /* transform: translateZ(1px);*/
    background-color: #bf7451;
    cursor: pointer;
    transition: transform 0.3s ease;
    
   

    outline: none;
    
   
    box-shadow: 0 5px #bf7451;
}
button.btn {
    color: white !important;
}
button.btn:hover {
    color: white !important;
}
.custom-list {
    list-style-type: none;
    padding: 53px;
    height: 50%;
    width: 25%;
    margin-top: 40px;
    text-wrap: nowrap;
    pointer-events: none;
}

.custom-list-item {
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    columns: #052f58;
    font-size: 16px;
    font-weight: 550;
    color: #000000;
}

.fetch_your_kyc_form {
   
    width: 70%;
    margin: auto; /* Center horizontally */
    display: flex;
    flex-direction: column; /* Assuming you want the content inside to be centered vertically */
    justify-content: center;
    align-items: center;
   
}

.header h3 {
    font-size: 26px; /* Adjust font size for the header */
    color: #000000;
}


.logo-container img {
    /* Add any specific styling for the logo */
    max-width: 100%;
    height: auto;
}

p.text-md-start.form-text.text-muted.otp {
    text-align: justify;
}



@media (min-width:280px) and (max-width: 932px) {
    .fetch_button button.btn {
        /* position: absolute; */
        /* transform: translateX(-50%); */
        text-align: center !important;
        padding: 10px 25px 10px 25px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fe5606;
        font-weight: 500px;
        font-size: large;
        color: white;
        cursor: pointer;
        transition: transform 0.3s ease;
        outline: none;
        box-shadow: 3px 3px #cccccc !important;
    }
    .text_area_from {
        width: 95%;
        margin: auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Assuming you want the content inside to be centered vertically */
        justify-content: center;
        align-items: center;
        padding: 40px !important;
        
        background-color: white !important;
        color: #052f58 !important;
        border: 2px solid black !important;
        border-radius: 15px !important;
    }
    
    .fetch_your_kyc_form {
        width: 95%;
        margin: auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Assuming you want the content inside to be centered vertically */
        justify-content: center;
        align-items: center;
    }
    .identifier {
        position: relative;
        text-align: center;
        margin-bottom:auto;
       color: #000000;
    }
    p.serach {
        position: relative;
        text-align: end;
        margin-top: auto;
        color: red;
    }

}

.custom-list-item.active .orange-marker {
    width: 10px;
    height: 45px;
    background-color: #fe5606;
    margin-right: 10px;
    position: absolute;
    left: -65px;
    transition: left 0.3s ease;
}

.fetch_your_kyc_form .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
    padding: 50px;
}
.fetch_your_kyc_form .form-group input {
    padding: 7px;
    margin-top: 43px;
    margin-bottom: 33px;
    font-size: 10px;
    /*font-weight: 600;*/
   
    border-radius: 0px;
   color: #000000;
    width: 100%;
}

.erroMsg{
    margin-left: 17px;
    margin-top: 7px;
}
.fetch_your_kyc_form label.form-check-label {
    padding: 8px;
    
    text-align: start;
    /*font-weight: 600;*/
       color: #000000;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    
   
    }

    
  
.fetch_your_kyc_form input.form-check-input {
    margin-top: 12px;
    color: #000000;
  
    border: 2px solid #000000;
}
.fetch_button {
    .fetch_button {
    position: absolute;
    /* cursor: pointer; */
    transition: transform 0.3s ease;
    }
;
    text-align: center !important;
}


  
.fetch_button button.btn:hover {
    color: white !important;
    /* transform: translateZ(1px);*/
    background-color: #bf7451;
    border: 1px solid #856f6f91;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;/
}


/* .col-sm-4.mt-5 {
    background-color: white;
    border-radius: 10px 0 0 10px;
}*/
/* .col-sm-9{
    background-color: white;
    border-radius: 10px;
 }*/

 .bkgWhiteRadius10{
    background-color: white;
    border-radius: 10px 0 0 10px;
 }
 .blckFont{
    color: #000000;
 }
 /***********/

 .sign_kyc_form {
        width: 70%; /* Adjust the width for smaller screens */
        position: absolute;
        top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    }


.custom-list-item.active .orange-marker {
    width: 10px;
    height: 45px;
    background-color: #fe5606;
    margin-right: 10px;
    position: absolute;
    left: -65px;
    transition: left 0.3s ease;
}

.sign_kyc_form .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
    padding: 50px;
}
.sign_kyc_form .form-group input {
    padding: 7px;
    margin-top: 43px;
    margin-bottom: 33px;
    font-size: 18px;
    font-weight: 600;
    columns: #052f58;
    border-radius: 0px;
    color: #000000;
    width: 100%;
}
.sign_kyc_form label.form-check-label {
    padding: 8px;
    color: black;
    font-size: 18px;
    text-align: start;
    font-weight: 600;
    color: #000000;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    font-size: 20px;
    font-weight: 700;
    font-family: italic;
    color: #000000;
    
    }

    
  
.sign_kyc_form input.form-check-input {
    margin-top: 12px;
    border-radius: 0px !important;
}
.text_area_from {
    width: 60%;
    margin: auto; /* Center horizontally */
    display: flex;
    flex-direction: column; /* Assuming you want the content inside to be centered vertically */
    justify-content: center;
    align-items: center;
  
    background-color: white;
    color: #000000;
    border: 2px solid black;
    border-radius: 15px;
    
      
}
.sign_kyc_form .button_otp {
    text-align: center !important;
    border: 1px solid #dccece;
    background-color: #fe5606;
    font-weight: 500px !important;
    font-size: large !important;
    color: white !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px #fe5606;
}
.col-sm-4.mt-4.p-3 {
    text-align: left;
}
.fetch_button {
    .fetch_button {
    position: absolute;
    /* cursor: pointer; */
    transition: transform 0.3s ease;
    }
;
    text-align: center !important;
}


    .fetch_button button.btn {
        /* position: absolute; */
        /* transform: translateX(-50%); */
        text-align: center !important;
        padding: 10px 25px 10px 25px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fe5606;
        font-weight: 500px;
        font-size: large ;
        color: white ;
        cursor: pointer;
        transition: transform 0.3s ease;
        outline: none;
        box-shadow: 5px 5px #cccccc;
      
}




 .col-sm-4.mt-5 {
    background-color: white;
    border-radius: 10px 0 0 10px;
    /* BORDER: 2PX SOLID BLACK; */
}
 .col-sm-9{
    background-color: white;
    border-radius: 10px;
 }
 @media (min-width: 380px) and (max-width: 520px) {
    .text_area_from {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 40px;
        width: 89%;
        background-color: white;
        color: #000000;
        border: 2px solid black;
        border-radius: 15px;
    }
    .sign_kyc_form {
        width: 95%; /* Further adjust the width for even smaller screens */
        position: absolute;
        top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    }
    .col-sm-4.mt-4.p-3 {
        text-align: right;
    }
    .col-sm-4.mt-4.p-3 {
        text-align: right;
        padding-top: 0px !important;
        margin-top: 1px !important;
    }
}
 @media (min-width:878px) and (max-width:1024px) 
 {   
    .text_area_from {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 40px;
        width: 89%;
        background-color: white;
        color: #000000;
        border: 2px solid black;
        border-radius: 15px;
    }
    .aadhar_form {
        position: absolute;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 40px;
        width: 91%;
        background-color: white;
        border-radius: 15px;
       
    }
    .sign_kyc_form {
        width: 90%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 20px;
    }
 
h4.mt-5 {
    font-size: 31px;
}
.custom-list-item {
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    columns: #052f58;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}
.sign_kyc_form .form-group input {
    padding: 7px;
    margin-top: 43px;
    margin-bottom: 33px;
    font-size: 30px;
    font-weight: 600;
    columns: #052f58;
    border-radius: 0px;
    color: #000000;
    width: 100%;
}
.sign_kyc_form .button_otp {
    text-align: center !important;
    border: 1px solid #dccece;
    background-color: #fe5606;
    font-weight: 500px !important;
    font-size: 30px;
    color: white !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px #fe5606;
}

}
    @media (max-width:375px) {
        .sign_kyc_form{ width: 90%;
            position: absolute;
            top: 76%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 20px;
    }
 }
 @media (min-width:530px) and (max-width:800px) {
    .sign_kyc_form{ width: 90%;
        position: absolute;
        top: 68%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 20px;
}
}

.document-form.form-control {
    padding: 4px;
    font-size: 16px;
}
span.select {
  
    position: relative;
    left: -32%;
    font-size: 100%;
}
.document-form {
    position: relative;
    margin: auto;
    max-width: 700px;
 
    margin-top: 50px;
    color: #000000;
    border-radius: 10px;
    background-color: white;
}
.document-form  form {
    padding: 75px;
}
.document-form .header.mt-2{
    text-align: center;
    color: #000000;
    margin-top: 20px !important;
}
.document-form select.form-select.form-select-sm {
    padding: 8px;
}
@media (min-width: 280px) and (max-width: 653px) {
    h3 {
        font-size: 20px !important;
        font-weight: 500;
    }
    .document-form select.form-select.form-select-sm {
        padding: 6px !important;
    }
    .document-form form {
        padding: 5px;
    }
}

.aadhar_form .fetch_button {
    text-align: center;
}
.aadhar_form .form-control {
    padding: 4px;
    font-size: 20px;
    
}
.aadhar_form {
    width: 40%;
    margin: auto; /* Center horizontally */
    display: flex;
    flex-direction: column; /* Assuming you want the content inside to be centered vertically */
    justify-content: center;
    align-items: center;
    padding: 40px;
    
    background-color: white;
    border-radius: 15px;
    border: 2px solid black;
}
.aadhar_form .col-sm-12 {
        TEXT-ALIGN: left;
    font-size: 20px;
}
.aadhar_form select.form-select.form-select-sm{
    font-size: 20px;
    font-weight: 400;
    color: #5f6163;
}
.aadhar_form span.otp {
    font-size: 13px;
    text-align: inherit;
    text-align: justify;
  
}
span.doc {
    font-size: 26px;
    text-align: inherit;
   
}

/**proceed css start **/
.proceed {
 
    margin: auto; /* Center horizontally */
     color: #000000;
    background-color: white;
    border: 2px solid black;
    border-radius: 15px;
    font-size: 37px !important;
   
   
}
.proceed p.top{
    color: #000000;
}
/** proceed css end **/
/**steps css start **/
.steps {
   
    align-items: left;
    padding: 30px;
    color: #000000;
    background-color: white;
    border-radius: 15px;
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.proceed p.top{
    color: #000000;
}
/** steps css end **/

/* Center the h5 and fetch_button within .document-form */
.aadhar_form h5,
.aadhar_form .fetch_button {
    text-align: center;
}
.document-form {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    padding: 40px;
    width: 60%;
    background-color: white;
}
/* Media query for screens wider than 576px (sm) */
@media (min-width: 280px) and (max-width: 653px){
   
    .document-form {
        position: relative;
    margin: auto;
   
    padding: 20px;
    margin-top: 50px;
    color: #000000;
    border-radius: 10px;
    background-color: white;
        max-width: 90%; /* Adjust the maximum width for tablet screens */
    }
    .document-form input.form-control {
        margin-left: 0px !important;
    }
    .fetch_button {
        text-align: center !important;
    }
  

.fetch_button button.btn:hover {
    color: white !important;
   /* transform: translateZ(1px);*/
    background-color: #bf7451;
    cursor: pointer;
    transition: transform 0.3s ease;
    
   

    outline: none;
    
   
    box-shadow: 0 5px #bf7451;
}



    
}
/***/
/* Media query for screens wider than 576px (sm) */
@media (min-width: 280px) and (max-width: 820px){
    
   
    .proceed {
      
        margin: auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Assuming you want the content inside to be centered vertically */
        justify-content: center;
        align-items: center;
        padding: 30px;
        width: 90%;
        background-color: white;
        border-radius: 15px;
        border: 2px solid black;
    }
 
       
       
    .aadhar_form input.form-control {
        margin-left: 0px !important;
        
    }
    
}
/***/

@media (min-width: 280px) and (max-width: 653px) {

       html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #052f58 !important;
    margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
}
.logo-container {
    padding: 10px;
    text-align: center;
}

.logo-container img {
    max-width: 100%; /* Ensure the logo doesn't exceed its original size */
    height: auto;  Maintain the aspect ratio 
}
.cif-form {
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 400 !important;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    color: white;
    border-radius: 10px;
  
}
/* @media (min-width: 280px) and (max-width: 653px) {
.fetch_button {
    padding-bottom: 21px;
}
    .logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Add any other necessary styling for the logo container
    }
    
    .logo-container img {
        /* Add any specific styling for the logo */
        /* max-width: 100%;
        height: auto;
    }
    
    
    
  
    button.btn {
        font-weight: 600 !important;
        font-size: 25px !important;
       
    } */
    /* .cif-form {
        max-width: 60%; /* Adjust the maximum width for larger screens */
    /* }

.cif-form h1 {
    font-weight: 400 !important;

    font-size: 54px !important;
} */ */
 */ */



.cif-form h1 {
    font-weight: 600;

    font-size: 84px;
}



.custom-list {
    list-style-type: none;
    padding: 10;
    height: 50%;
    text-wrap: nowrap;
}

.custom-list-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}


.custom-list-item.active .orange-marker {
    width: 10px;
    height: 45px;
    background-color: #fe5606;
    
    margin-right: 10px;
    position: absolute;
    left: -65px; /* Initial position off the list item */
    transition: left 0.3s ease; 
}


.fetch_your_kyc_form label.form-check-label {
    padding: 8px;
    color: black;
    font-size: 22px;
    text-align: start;
    color: #000000;
}

.fetch_your_kyc_form input.form-check-input {
    margin-top: 6px;
    border-radius: 10px !important;
    border:2px solid gray;
}

     .col-sm-4.mt-5 {
    background-color: white;
    border-radius: 10px 0 0 10px;
}
 .col-sm-9{
    background-color: white;
    border-radius: 10px;
 }




.document-form {

    text-align: left;
    color: #000000;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    padding: 40px;
    width: 60%;
   
}
input.form-control {
    padding: 6px 1px 5px 16px !important;
    width: 104% !important;
    margin-left: 4px !important;
    font-size: 13px !important;
}
select.form-select.form-select-sm {

    width: 90% !important;
    margin-left: 18px !important;
    font-size: 13px !important;
}
/* Center the h5 and fetch_button within .document-form */
.document-form h5,
.document-form .fetch_button {
    text-align: center;
}
@media (min-width: 280px) and (max-width: 768px) {
    .document-form{
    color: #000000;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
   
    width: 100%;
}
}

@media (min-width: 280px) and (max-width: 768px) {
    
        .col {
          display: contents;
         
        }
     .form-control {
           
            margin: 13px !important;
          }
          h5 {
                text-align: center !important;
          }
      }


.col {
          display: contents;
         
        }
     .form-control {
           
            margin: 10px !important;
          }
          h5 {
                text-align: center !important;
          }
          
      }


.radio_btn{
    margin-top: 50;
}
.radio_btn input{
   display: inline-block !important;
  margin-left: 30px;

}



.fetch_your_kyc_form .button-sign{
   
    color: white;

    background-color: #000000;
    border-radius: 50px;
    font-weight: 500px !important;
    font-size: 14PX !important;
   
    text-align: center !important;
    WIDTH: 100px;
    padding: 5px;
}
.sign_in input[type="text"] {
    width: 100%;
}

 /*   a.resend-otp {
        position: relative;
        float: right;
        font-weight: 500;
        color: #ff9933 !important;
    
    }*/

@media (min-width: 280px) and (max-width: 768px) {
button.button-sign {
    float: right;
}

.fetch_button.sign_in {
    text-align: left !important;
    padding: 0px;
    margin: 0px;
}
}
@media (min-width: 280px) and (max-width: 768px) {
    
    .radio_btn input {
        display: inline-block !important;
         margin-left: 0px; 
    }
}

.proceed_form{
    position: relative; 
    margin: auto; 
     max-width: 700PX;
    padding: 50px;
    margin-top: 50px;
    color: #000000;
    border-radius: 10px;
    background-color: white;
    text-align: center !important;
}
.proceed_form .fetch_button.btn {
        color: white;
        margin-top: 40px;
        background-color: #000000;
        border-radius: 50px;
        font-weight: 500px !important;
        font-size: large !important;
        text-align: center !important;
  
}
.proceed_form   .fetch_button{
    text-align: center !important;
}

@media (min-width: 280px) and (max-width: 768px){
    .col-sm-6 {
        width: 100%;
        margin: 10px 0; /* Add margin for smaller screens */
    }
    h4.mb-4 {
        font-size: 16px;
    }
}
.col-sm-6{
    background-color: white;
    border-radius: 15px;
}
h3.mb-5 {
    text-align: center;
    margin-top: 5px;
}

h4.mb-5 {
    margin: 10px;
    font-size: 20px;
    /* padding: 0px !important; */
}

@media (min-width: 280px) and (max-width: 768px){
    .aadhar_form select.form-select.form-select-sm {
        font-size: 20px;
        font-weight: 400;
        color: #5f6163;
        padding: 6px 1px 5px 16px !important;
        width: 104% !important;
        /* margin-left: 4px !important; */
        font-size: 13px !important;
    }
    .submit h3.mb-5 {
        margin-top: inherit;
        font-size: 16;
    }
}
/*.col-sm-8{
    background-color: white;
    border-radius: 15px;
   
    border-left: 1px;
    color: #000000;
      
}*/
.submit h3.mb-5{
    margin-top: inherit;
    font-size: 16px;
}
.welcome h2.mb-5 {
    margin-top: 50px;
    font-size: large;
}
.welcome button.btn {
    width: 160px !important;
    padding: 9px;
}
.welcome .col-sm-9 {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}
.pan{
    color: #000000;;
    font-size: 18px;
    font-weight: 600px;
}
.doc {
    color: #000000;
    font-size: 17px;
    font-weight: 500;
    text-align: justify;
    padding: 0px 1px 0px 2px !important;
    width: 90% !important;
    margin-left: 18px !important;
    font-size: 17px !important;
}
#selectop {
    /* padding: 6px 1px 5px 16px !important; */
    width: 90% !important;
    margin-left: 18px !important;
    font-size: 13px !important;
}
input.form-control {
    /* padding: 6px 1px 5px 16px !important; */
    width: 90% !important;
    margin-left: 18px !important;
    font-size: 13px !important;
}
/*********/
.applicant {
    width: 100%;
    margin: auto; /* Center horizontally */
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: white;
    color: #2f4870 !important;
    font-family: 'Red Hat Display';
    border-radius: 15px;
    border: 2px solid black;
}
.applicant .col-sm-12 {
    display: flex;
}
.applicant .button_otp{
   
    margin-top: 9px !important;
        text-align: center !important;
       width: 130% !important;
        border: 1px solid #dccece;
        padding: 2px;
        background-color: #fe5606;
        font-weight: 500px !important;
        font-size: 14px !important;
        color: white !important;
        cursor: pointer;
        transition: transform 0.3s ease;
        outline: none;
        box-shadow: 5px 5px #cccccc;
    
}
button.button_otp:hover {
    color: white !important;
    transform: translateZ(1px);
    background-color: #bf7451;
    border: 1px solid #856f6f91;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.button_otp {
    margin-top: 14px;
    text-align: center !important;

    border: 1px solid #dccece;
    padding: 5px;
    background-color: #fe5606;
    font-weight: 500px !important;
    font-size: 14px !important;
    color: white !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px #cccccc;
}
.button_otp:hover {
    color: white !important;
    transform: translateZ(1px);
    background-color: #bf7451;
    border: 1px solid #856f6f91;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.applicant .row.mt-3 {
    font-size: 16px;
}


.applicant span.label.label-primary {
    text-align: left;
    font-size: 17px;
    font-weight: 500;
    margin-left: 15px;
}
.applicant select.form-select.form-select-sm {
    padding: 6px 6px 8px 15px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    width: 87%;
    margin-left: 17px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.applicant span.otp {
    font-size: 10px;
}
.applicant .under_line {
    border: 1px solid #100f0f;
}
@media (min-width: 280px) and (max-width: 882px){
    /*.applicant h5 {
        font-size: 15px;
    }*/
    .applicant .button_otp {
        
       
        font-size: 12px !important;
        
        margin-top: 11px !important;
    }
    .applicant button.button_otp {
        margin: 10px 33px;
       /* padding: 10px 20px;*/
        font-size: 16px;
        left: 50% !important;
        width: 70% !important;
    border-radius: 0px;
    }
    .applicant .form-check {
        text-align: left;
        font-size: 16px;
        margin-top: 15px;
    }
     /* .applicant .col-sm-12 {
        display: contents;
    } */
  /*  .applicant .col-sm-4 {        
        display: contents;
    } */
    /* .applicant {
        width: 100%;
        margin-left: 21px; 
        display: flex;
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        padding: 28px;
        background: white;
    } */
    .applicant span.label.label-primary {
        text-align: left;
        font-size: 16px;
        font-weight: 500;
    }

        .applicant select.form-select.form-select-sm {
            padding: 8px 0px 7px 7px;
            font-size: 13px;
            font-weight: 400;
            color: #000000;
            margin-left: 6px !important;
            width: 97% !important;
            /* padding: 2px 0px 1px 7px !important; */
            width: 290px !important;
            padding: 6px 1px 5px 16px !important;
        }
  
    .applicant .col-sm-9 {
        background-color: white;
        width: 100%;
        border-radius: 10px;
        /* padding: 3px; */
    }
    .applicant input.form-control {
        margin-left: 4px !important;
        font-size: 13px;
        width: 104% !important;
    }
    
}


.text_area_from textarea{
    resize: none;
}
.text_area_from .col-sm-12 {
    display: grid;
    padding: 5px;
   
}
.text_area_from textarea {
    margin: 10px;
    border: 1px solid black;
}
.text_area_from .form-check {
    text-align: left;
}
@media (min-width: 1024px) and (max-width: 1366px){

     .text_area_from {
        width: 80%;
        margin: auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Assuming you want the content inside to be centered vertically */
        justify-content: center;
        align-items: center;
        padding: 40px;
      background-color: white;
        font-size: 17;
    }  
    .fetch_your_kyc_form {        
        padding: 40px;
        width: 80%;
    }
    
 
    .header h3 {
        font-size: 26px;
        color: #000000;
    }

    .form-check-input[type=checkbox] {
        border-radius: 0.25em;
        border: 1px solid black;
        /* padding: 7px; */
        /* margin: -3px; */
    }
    }
    @media (min-width: 820px) and (max-width: 1023px){
      
        .proceed {
            position: absolute;
            top: 56%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 30px;
            width: 94%;
            background-color: white;
            border-radius: 15px;
            
        }
        .aadhar_form {
            width: 95%;
            margin: auto; /* Center horizontally */
            display: flex;
            flex-direction: column; /* Assuming you want the content inside to be centered vertically */
            justify-content: center;
            align-items: center;
            padding: 40px;
          
            background-color: white;
            border-radius: 15px;
            
        }
    .fetch_your_kyc_form.welcome {
        position: absolute;
        top: 51%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 40px;
        width: 97%;
        font-family: 'Red Hat Display';
        color: #000000;
        font-size: 34px !important;
     }
     .text_area_from {
        width: 95%;
        margin: auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Assuming you want the content inside to be centered vertically */
        justify-content: center;
        align-items: center;
        padding: 40px;
     
        background-color: white;
        font-size: 23px;
    } 
}

@media (min-width:768px) and (max-width:819px)
{
  
    .proceed {
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 30px;
        width: 96%;
        
        border-radius: 15px;
        border: 2px solid black;
    }
    
}
    @media (min-width: 280px) and (max-width: 768px){
	
       .text_area_from {
            width: 95%;
            margin: auto; /* Center horizontally */
            display: flex;
            flex-direction: column; /* Assuming you want the content inside to be centered vertically */
            justify-content: center;
            align-items: center;
            padding: 40px;
        
            
            color: #000000;
	    border-radius: 15px;
            
              
        } 
       
  /*  .custom-list-item {
        margin-bottom: 45px;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        columns: #052f58;
        font-size: 19px;
        font-weight: 700;
        /* margin-top: 8px; */
        color: #000000;
    }*/
    .fetch_your_kyc_form .form-group input {
        padding: 7px;
        margin-top: 43px;
        margin-bottom: 33px;
        font-size: 23px;
        font-weight: 600;
        columns: #052f58;
        border-radius: 0px;
        color: #000000;
        width: 100%;
    }
    .header h3 {
       
        /* font-size: 26px !important;
        margin-top: 10px; */
        color: #000000;
    }
    .fetch_your_kyc_form .form-group input {
        padding: 7px;
        margin-top: 43px;
        margin-bottom: 33px;
        font-size: 23px;
/*        font-weight: 600;*/
        columns: #052f58;
        border-radius: 0px;
        color: #000000;
        width: 100%;
    }
    a.resend-otp{
        text-decoration: none;
        font-size: 14px;
        font-weight: 200;
        color: #ff9933 !important;
    }


@media (min-width: 280px) and (max-width: 932px){
table {
    width: 90%;
}
form#docFetch {
    margin-left: 10px;
}
    .classToRemove {
        display: none;
    }
        a.resend-otp {
        text-align: end;
        position: relative;

        color: #fe5606;
        }
        .view_kyc_details .col-sm-12 {
            display: block !important;
        }
    }
}
select.form-control.form-select.form-select-sm.pan_text {
    width: 93%;
}

input.form-control.text {
    width: 97%;
    font-size: 17px;
    /* margin-top: 8px; */
    /* margin-bottom: 8px; */
}
input.form-control.text {
    width: 97%;
    font-size: 17px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
select.form-control.form-select.form-select-sm.text {
    width: 91%;
    margin-bottom: 8px;
    margin-top: 8px;
}
.text-center {
    text-align: center!important;
}
.ckyc_fetch_detail{
    display: flex;
    padding: 5px;
}
.ckyc_fetch_detail {
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 40px;
}
label.form-check-label {
   color: #000000;
    /* padding: 2px; */
}
.ckyc_fetch_detail .col-sm-12 {
    display: flex;
}
.ckyc_fetch_detail span.label.label-default {
    font-size: 13px;
   color: #000000;
    padding: 6px;
}
.ckyc_fetch_detail input.form-control {
    width: 60%;
}
.ckyc_fetch_detail .row {
    background-color: #dcd9d9;
    padding: 15px;
}
.radio_ckyc_fetch_detail.mt-5 {
    text-align: center;
}
.view_kyc_details .col-sm-12 {
    display: flex;
}
.view_kyc_details {
    background-color: white;
   color: #000000;
   
}

.view_kyc_details .col-sm-4 {
    padding: 40px;
    display: grid;
}

.view_kyc_details textarea#textarea {
    border: 1px solid #9b969659;
}
.view_kyc_details img {
    border: 28px solid gray;
}
.view_kyc_details img {
    border: 28px solid gray;
    width: 185px;
}
.view_kyc_details .fetch_button.mt-3 {
    padding: 40px;
}
.row {
    width: 100%;
}
.col-md-12 .form-group {
    margin-top: 10px;
}
.text-md-start {
    text-align: left !important;
    font-size: 18px;
    padding: 2px;
    margin-left: 10px;
}
select#gender {
    
    margin-left: 18px;
    font-size: 13px !important;
    width: 90%;
}
.upload_button{
    text-align: center !important;
    border: 1px solid #dccece;
    padding: 5px;
    background-color: #fe5606;
    font-weight: 500px !important;
    font-size: 14px !important;
    color: white !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px #cccccc;
}
.upload_button:hover {
    color: white !important;
    transform: translateZ(1px);
    background-color: #bf7451;
    border: 1px solid #856f6f91;
    cursor: pointer;
    transition: transform 0.3s ease;
}
button#proceed {
    text-align: center !important;
    padding: 10px 25px 10px 25px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fe5606;
    font-weight: 500px;
    font-size: large;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
    outline: none;
    box-shadow: 5px 5px #cccccc;
}
.proceedbutton.mt-5 {
    display: flex;
    justify-content: center;
}
button#proceed:hover {
    color: white !important;
   /* transform: translateZ(1px);*/
    background-color: #bf7451;
    cursor: pointer;
    transition: transform 0.3s ease;
}