body{
    height: 100%;
}

.citizen-registation-wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 319px;
    flex-wrap: nowrap;
}

.header{
    width: 100%;
    background-color:#fff;
    border-bottom: 1px solid #d9d9d9;
}

.header .container{
    display:flex;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.header-logo{
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.header h2{
    font-size:1.313rem;
    color:var(--violet);
    font-weight: 600;
}
.header .svg-icon{
    width: 1.35rem;
    height: 1.35rem;
    color: var(--light-text-color);
    margin-left: 0.35rem;
    transition: color 0.4s;
}
.header .svg-icon:hover{
    color:var(--normal-text-color);
}
.header .flex{
    justify-content: space-between;
}


.app-title{
    font-size: 1.75rem;
    line-height: 1.125;
    font-weight: 600;
    letter-spacing: .004em;
}


.citizen-registation-wrapper .logo{
    width: 2.35rem;
    object-fit: contain;
    flex:1;
}
.citizen-registation-wrapper .header-logo .logo-text h2{
    font-weight:600;
    font-size: 1.25rem;
    line-height:1;
    background-size: 200%,100%;
    background-repeat: no-repeat;
}

.main{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    width: auto;
    /* padding-top:48px; */
    display: flex;
    align-items: center;
    background-color:#f9f6fd;
}

.registation-container{
    display: grid;
    grid-template-columns: auto 40%;
    justify-content: space-between;
    gap: 2rem;
    background-color: #fcfcfc;
    border-radius: 1.625rem;
    border: 1px solid #d9d9d9;
    padding: 60px 72px 60px 72px;

    max-width: 840px;
    margin: 0 auto;

}

.registation-container .right-border{
    display: flex;
    gap: 2.5rem;
    flex-direction: column;
    justify-content: center;
    padding-right: 2rem;
    border-right: 1px dashed #d9d9d9;
    
}
.registation-container .right-border img{
    width: 18rem;
    /* align-self: center; */
}
.registation-container .right-border a{
    color:var(--violet);
    line-height: normal;
}
.registation-container .right-border a:hover{
    color:var(--secondary-color);
}
.registation-container .right-border a svg{
    width: 1.5rem; height: 1.5rem;
}

.user-pass-wrapper{
    position: relative;
    width: 100%
}
.user-pass-wrapper > button{
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
}
#toggle-pwd-btn:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(52, 58, 64)' viewBox='0 0 24 24'%3E%3Cpath d='M12 9a3.02 3.02 0 0 0-3 3c0 1.642 1.358 3 3 3 1.641 0 3-1.358 3-3 0-1.641-1.359-3-3-3z'/%3E%3Cpath d='M12 5c-7.633 0-9.927 6.617-9.948 6.684L1.946 12l.105.316C2.073 12.383 4.367 19 12 19s9.927-6.617 9.948-6.684l.106-.316-.105-.316C21.927 11.617 19.633 5 12 5zm0 12c-5.351 0-7.424-3.846-7.926-5C4.578 10.842 6.652 7 12 7c5.351 0 7.424 3.846 7.926 5-.504 1.158-2.578 5-7.926 5z'/%3E%3C/svg%3E") no-repeat center;
    width: 1.2rem; height: 1.2rem;
}
#toggle-pwd-btn.hide-pwd:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(82, 143, 240)' viewBox='0 0 24 24'%3E%3Cpath d='M12 19c.946 0 1.81-.103 2.598-.281l-1.757-1.757c-.273.021-.55.038-.841.038-5.351 0-7.424-3.846-7.926-5a8.642 8.642 0 0 1 1.508-2.297L4.184 8.305c-1.538 1.667-2.121 3.346-2.132 3.379a.994.994 0 0 0 0 .633C2.073 12.383 4.367 19 12 19zm0-14c-1.837 0-3.346.396-4.604.981L3.707 2.293 2.293 3.707l18 18 1.414-1.414-3.319-3.319c2.614-1.951 3.547-4.615 3.561-4.657a.994.994 0 0 0 0-.633C21.927 11.617 19.633 5 12 5zm4.972 10.558-2.28-2.28c.19-.39.308-.819.308-1.278 0-1.641-1.359-3-3-3-.459 0-.888.118-1.277.309L8.915 7.501A9.26 9.26 0 0 1 12 7c5.351 0 7.424 3.846 7.926 5-.302.692-1.166 2.342-2.954 3.558z'/%3E%3C/svg%3E") no-repeat center;
    width: 1.2rem; height: 1.2rem;
}

.form-group .wrapper{
    display: flex;
    align-items: flex-end;
    column-gap: 1rem;
    justify-content: space-between;
}


.full-width-btn{
    width: 100%;
    /* border-radius: 22px; */
}


.captcha-wrapper{    
	position: relative;
	padding: 0;
}
.gen-captch-code-btn{
    position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
}

#toggle-pwd-btn:focus,
.gen-captch-code-btn:focus{
    outline: 2px solid var(--outline-color);
    outline-offset: 2px;
    border-radius: .1rem;
}
#captchaImg{
    /* height: 40px;
     width:auto;
    margin:auto; */
    border-radius: 0.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}









@media (max-width: 768px) {

    .header .flex {flex-wrap: nowrap;}
    .citizen-registation-wrapper .container {width: 100%; height: 100%;}

    .registation-container {
        display: block;
        border:0;
        border-radius: 0;
        padding: 1.5rem 0;
        background: #f9f6fd;
    }

    .form .form-group.grid,
    .form .form-group > .grid{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .form .form-group .wrapper{
        width: 100%;
    }
    .registation-container .right-border{border:0; margin-bottom: 1.5rem; padding:0}
    .registation-container .right-border img{
        display: none;
    }

    #lodge-grievance-frm .step{
        border-radius: 0;
        border-width: 0px;
        padding: 0px;
        background: transparent;
    }


}