.login-wrapper {
    background-color: var(--blue-light);
    padding: 0 0.75rem;
}
input:focus,
.form-control:focus,
input[type=text]:focus {
    color: var(--secondary-black-333);   
    border: 1px solid #969696!important;
    outline: 0;
    box-shadow: none;
}
@media only screen and (max-width:992px) {
    .login-wrapper {
        background-color: var(--blue-light);
        padding: 0 7.5rem 0 7.5rem;

    }
    main {
        padding: 2rem 2rem 0
    }
}

@media only screen and (max-width:992px) {
    .login-wrapper {
        padding: 0 0.5rem 0 0.5rem;
        background-color: var(--blue-light);
        background-image: url(../img/calpia-login-page-banner.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
}

@media only screen and (max-width:768px) {
    .login-wrapper {
        padding: 1rem 1rem 0rem;
        background-color: var(--blue-light);
        background-image: url(../img/calpia-login-page-banner.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
    main{padding:0 1rem}
}

.form-col-bg {
    background-color: var(--white);
}

@media only screen and (max-width:992px) {
    .form-col-bg {
        background-color: var(--white);
        border-radius: 0.5rem;
    }
}

.login-form-wrapper {
    transition: all .3s ease;
}

@media only screen and (min-width:300px) {
    .login-form-wrapper {
        padding: 0 0.5rem;

    }
}

@media only screen and (min-width:768px) {
    .login-form-wrapper {
        padding: 0 1.25rem;

    }
}

@media only screen and (min-width:820px) {
    .login-form-wrapper {
        padding: 0 2.5rem;
    }
}

@media only screen and (min-width:1200px) {
    .login-form-wrapper {
        padding: 0 4.25rem;
        background-color: var(--white);
    }
}


.login-form-wrapper .brand-logo {
    text-align: center;
    padding: 2.5rem 0;
}

.login-form-wrapper .welcome-text-wrapper {
    padding-bottom: 1.5rem;
}

    .login-form-wrapper .welcome-text-wrapper h3 {
        font-family: var(--font-regular);
        color: var(--secondary-black-333);
        text-align: center;
        font-weight:600
    }

    .login-form-wrapper .welcome-text-wrapper p {
        font-size: var(--font-14);
        color: var(--secondary-black-333);
        text-align: center;
        font-family: var(--font-regular);
        line-height:20px;
    }

.login-form-wrapper .form-field-wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.login-form-wrapper .form-field-wrapper .form-group label {
    font-size: var(--font-12);
    font-family: var(--font-regular);
    font-weight:700;
    color:var(--secondary-black-333);
    line-height:20px;
    margin-bottom:.5rem;
}

    .login-form-wrapper .form-field-wrapper .form-group .form-control {
        height: 3rem;
        border-radius: 4px;
        border: 1px solid rgba(62, 72, 84, 0.30);
        background: #FFF;
    }
  
        .login-form-wrapper .form-field-wrapper .form-group .form-control::placeholder {
            font-size: var(--font-16);
            color: var(--placeholder-color);
            font-family: var(--font-regular);
            line-height: 20px
        }

.login-form-wrapper .form-field-wrapper .form-group .error-message {
    padding: 2px 0;
    font-size: 0.75rem;
    color: var(--primary-red);
    display: none;


}

.login-form-wrapper .form-field-wrapper .form-group .error-message.active {
    display: block;
}

.login-form-wrapper .form-field-wrapper .password-wrapper {
    position: relative;
}

.login-form-wrapper .form-field-wrapper .password-wrapper .btn-view-password {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    padding: 2px;
}

    .login-form-wrapper .form-field-wrapper .password-wrapper .btn-view-password i {
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
    }

.login-form-wrapper .form-field-wrapper .password-wrapper .btn-view-password i path,
.login-form-wrapper .form-field-wrapper .password-wrapper .btn-view-password i circle {
    stroke: #888888
}

.login-form-wrapper .form-field-wrapper .keep-signed-in-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    /*margin-bottom: 2rem;*/
}
.login-form-wrapper .captcha-wrapper {
    margin: 1rem 0;
}


.login-form-wrapper .form-field-wrapper .keep-signed-in-row .custom-checkbox {
    margin-bottom: 0px;
    padding-top: 0px;
    font-family: var(--font-regular);
    font-size: var(--font-14);
    color: var(--secondary-black-333);
    line-height: 16px;
}

.login-form-wrapper .form-field-wrapper .keep-signed-in-row a.forgot-passoword {
    color: var(--primary-red);
    font-family: var(--font-regular);
    font-size: var(--font-14);
    line-height: 16px;
    font-weight: 600;
}

.login-form-wrapper .form-field-wrapper .keep-signed-in-row a.forgot-passoword:hover {
    color: var(--primary-red-dark);
    text-decoration: underline;

}

.login-form-wrapper .form-field-wrapper .btn-login {
    width: 100%;
    height: 3rem;
    margin-bottom: 1.5rem;
}

    .login-form-wrapper .form-field-wrapper .dont-account-text {
        font-size: var(--font-14);
        text-align: center;
        margin-bottom: 3rem;
        color: var(--secondary-black-333);
        font-weight: 500
    }

.login-form-wrapper .form-field-wrapper .dont-account-text a {
    color: var(--primary-red);
    font-family: var(--font-bold);
    font-size: var(--font-14);
    line-height: 1;
}

.login-form-wrapper .form-field-wrapper .dont-account-text a:hover {
    color: var(--primary-red-dark);
    text-decoration: underline;

}

.loginform-btm-textwrapper h3 {
    font-size: var(--font-16);
    font-family: var(--font-regular);
    font-weight:600;
    color: var(--primary-black);
    display: flex;
    align-items: center;
}

.loginform-btm-textwrapper h3 i {
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    width: 1rem;
    height: 1rem;
}

.loginform-btm-textwrapper h3 i path {
    stroke: var(--primary-red);
}

.loginform-btm-textwrapper ul {
    padding-left: 1.375rem;
    margin-bottom: 1.5rem;
}

.loginform-btm-textwrapper ul li {
    font-size: var(--font-14);
    line-height: 1.4;
    list-style-type: decimal;
    margin-bottom: 0.5rem;
    color:var(--secondary-black-333)
}

.loginform-btm-textwrapper ul li.list-type-none {
    font-size: var(--font-14);
    line-height: 1.3;
    list-style-type: none;
    margin-bottom: 0.5rem;
}

.loginform-btm-textwrapper ul li a {
    color: var(--primary-red);
    font-family: var(--font-bold);
    font-size: var(--font-14);
    line-height: 1.3;
}

.loginform-btm-textwrapper ul li a:hover {
    color: var(--primary-red-dark);
    text-decoration: underline;

}

.login-page-banner {
    height: 534px;
    background: url(../img/calpia-login-page-banner.jpg);
    background-position: center right;
    background-size: cover;
}
@media only screen and (max-width:1366px){
    .login-page-banner {
        height: 529px;       
    }
}
@media only screen and (max-width:768px) {
    .login-page-banner {
        display: none;
    }
}

/* Site info */
.site-info {
    font-size: var(--font-14);
    line-height: 1.3;
    font-family: var(--font-regular);
    background: var(--site-info-bgColor);
    padding: 1.5rem 2rem 1rem;
    position: relative;
    margin-bottom:2rem;
}

.site-info .login-bottom-corner{
position: absolute; 
bottom: 0;
right: 0;
}

.site-info .login-bottom-corner img{
    width: auto;
    height: 236px;
}


.site-info .font-select-wrapper {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    z-index: 1;
}

    .site-info .font-select-wrapper .font-increase-btn {
        /* background-color: var(--white);
    width: 56px;
    color: var(--grey-6e6e71);
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    height: 30px;
    border: 1px solid var(--grey-c1c1c1);
    margin-bottom: 0px;*/
        background-color: var(--white);
        font-family: var(--font-regular);
        width: 3.5rem;
        color: var(--secondary-black-333);
        font-size: var(--font-18);
        font-weight: bold;
        line-height: 14px;
        height: 1.75rem;
        border: 1px solid var(--grey-c1c1c1);
        margin-bottom: 0px;
        padding: 0.375rem 0.25rem 0.375rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.site-info .font-select-wrapper .font-increase-btn:not(:disabled):not(.disabled):active,
.site-info .font-select-wrapper .font-increase-btn:not(:disabled):not(.disabled):focus {
    background-color: var(--grey-6e6e71);
    border: 1px solid var(--grey-6e6e71);
    color: var(--white);
}

.site-info .font-select-wrapper .font-increase-btn--menu {
    min-width: 3.5rem;
    box-shadow: none;
}

.site-info .font-select-wrapper .font-increase-btn--menu .dropdown-item {
    color: var(--grey-6e6e71);
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
}

.site-info .font-select-wrapper .font-increase-btn--menu .dropdown-item.dropdown-item-fontplus {
    font-size: 1.2rem;
}

.site-info .font-select-wrapper .font-increase-btn--menu .dropdown-item.dropdown-item-fontminus {
    font-size: 0.875rem;
}

.site-info .font-select-wrapper .font-increase-btn--menu .dropdown-item.active,
.site-info .font-select-wrapper .font-increase-btn--menu .dropdown-item:active {
    color: var(--white);
    background-color: var(--primary-red);
}
.site-info .font-select-wrapper .font-increase-btn--menu .font-green-arrow{
    display: none;
}
.site-info .font-select-wrapper .font-increase-btn--menu .font-green-arrow.active{
    display: block;
}
@media only screen and (max-width:768px) {
    .site-info .font-select-wrapper {
        right: 0rem;
    }
}

.site-info .latest-update-wrapper {
    box-shadow: none;
    width: 92%;
    margin-bottom: 1.25rem;
    border:0px
}

@media only screen and (max-width:768px) {
    .site-info .latest-update-wrapper {
        width: 88%;
    }
}

.site-info .latest-update-wrapper .card-body {
    padding: 1rem
}

.site-info .latest-update-wrapper .latest-update-title {
    font-size: var(--font-14);
    font-weight: 700;
    color: var(--secondary-black-333);
    margin-bottom: 12px;
}

.site-info .latest-update-wrapper .latest-update-textwrapper {
    display: flex;
    align-items: start;
}

.site-info .latest-update-wrapper .latest-update-textwrapper i.tv-icon {
    display: flex;
    width: 1rem;
    height: 1rem;
    margin-right: 8px;
}

.site-info .latest-update-wrapper .latest-update-textwrapper i.tv-icon rect,
.site-info .latest-update-wrapper .latest-update-textwrapper i.tv-icon polyline {
    stroke: var(--primary-red);
}

.site-info .latest-update-wrapper .latest-update-textwrapper .latest-update-textwrapper__textContent p {
    margin-bottom: 2px;
}

.site-info .latest-update-wrapper .latest-update-textwrapper .latest-update-textwrapper__textContent p.primary--text {
    color: var(--primary-black);
    font-size: var(--font-14);
    font-weight: 600;
    -moz-font-smoothing: antialiased;
}

.site-info .latest-update-wrapper .latest-update-textwrapper .latest-update-textwrapper__textContent p.secondary--text {
    color: var(--secondary-black-333);
    font-size: var(--font-12);
    line-height: 16px;
}

.site-info .pia-faq-text {
    font-size: var(--font-14);
    line-height: 1;
}

.site-info .pia-faq-text a {
    font-weight: 600;
    font-size: inherit;
    line-height: 1;
}

.site-info .pia-faq-text a:hover {
    text-decoration: underline;
    color: var(--primary-red-dark);
}

.site-info .pia-faq-text strong {
    font-weight: 700;
    font-size: inherit;
    line-height: 1;
}

.site-info p {
    margin-bottom: 1rem;
    font-size: var(--font-14);
    line-height: 1.4;
    color: var(--secondary-black-333)
}

.site-info p.rx-control-provider.last-row {
    margin-bottom: 1.25rem;
}

.site-info p.rx-control-provider {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;

}

.site-info p.rx-control-provider span.provider-name {
    width: 19.5rem;
}

.site-info p.rx-control-provider span.colon {
    width: 0.5rem
}

.site-info a {
    color: var(--primary-red);
    font-weight: 600;
}

.site-info a:hover {
    text-decoration: underline;
}

.site-info .font-increase-btn {
    background-color: var(--white);
    width: 3.5rem;
    color: var(--grey-6e6e71);
    font-size: 0.875rem;
    font-family: var(--font-bold);
    line-height: 1;
    height: 1.875rem;
    border: 0.0625rem solid var(--grey-c1c1c1);
    margin-bottom: 0rem;
}

    .site-info .font-increase-btn .a-small {
        font-size: var(--font-12);
        padding-top: 3px;
    }

@media only screen and (max-width:992px) {
    .site-info {
        padding: 1.5rem 3.5rem 5.75rem;
    }
    .login-page-banner{
        display:none
    }
}

@media only screen and (max-width:768px) {
    .site-info {
        padding: 1.5rem 0rem 5.75rem;
    }
}

/* login page footer */


/* .login-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: var(--font-12);
    font-family: var(--font-regular);
    font-weight: normal;
    color: var(--secondary-black-333);
    position: absolute;
    left: 3.5rem;
    bottom: 1.2rem;
    width: 85%;
    padding-top: 1.25rem;
    border-top: 1px solid var(--grey-cdd7e1)
} */

/*.login-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: var(--font-12);
    font-family: var(--font-regular);
    font-weight: normal;
    color: var(--secondary-black-333);
    position: sticky;
    left: 0;
    bottom: 0rem;*/
    /* width: 100%; */
    /*padding: .5rem;
    border-top: 1px solid #CDD7E1;
    background: #f7f7f7;
    margin: 0px -14px;
    z-index:1*/
    /*box-shadow: 0px -2px 10px var(--grey-cdd7e1);*/
/*}*/

.login-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: var(--font-12);
    font-family: var(--font-regular);
    font-weight: normal;
    color: var(--secondary-black-333);
    position: absolute;
    left: 0;
    bottom: 0rem;
    width: 100%;
    padding: .5rem;
    border-top: 1px solid #CDD7E1;
    background: #f7f7f7;
    /* margin: 0px -14px; */
    z-index: 1 /*box-shadow: 0px -2px 10px var(--grey-cdd7e1);*/;
}

.login-page-footer .nav .nav-item .nav-link {
    padding: 0rem 1rem;
    font-size: var(--font-12);
    font-family: var(--font-regular);
    font-weight: normal;
    color: var(--primary-black)
}

.login-page-footer .nav .nav-item .nav-link:hover {
    color: var(--primary-red-dark);
}

.login-page-footer .nav .nav-item:first-child .nav-link {
    padding-left: 0.5rem;
}

.login-page-footer .nav .nav-item:not(:last-child) {
    border-right: 0.0625rem solid #a1a3a4;
}

.login-page-footer .nav .nav-item .nav-link:hover {
    text-decoration: underline;
}

@media only screen and (max-width:1200px) {
    .login-page-footer .nav {
        margin-bottom: 0.5rem;
    }

    .login-page-footer .copyright-text {
        padding-left: 0.5rem;
    }
}

@media only screen and (max-width:768px) {
    .login-page-footer {
        left: 0px;
        width: 100%;
        margin: 0px -14px;
    }

    .login-page-footer .nav {
        margin-bottom: 0px;
    }
}

@media only screen and (max-width:420px) {
    .login-page-footer .nav {
        margin-bottom: 0.5rem;
    }

}

/* forgot password modal */
/* #forgotPasswordModal .modal-header{}
#forgotPasswordModal .modal-header h4{
    font-size: var(--font-18);
    color: var(--primary-red);
    font-family: var(--font-bold);
    font-weight: 400;
}
#forgotPasswordModal .modal-header .close-btn{
  
    border-radius: 0px 0px 0px 32px;
    color: var(--primary-red);
    font-weight: normal;
}

#forgotPasswordModal .modal-body{padding:8px 16px;}
#forgotPasswordModal .form-group .form-control {
    height: 3rem;
}


#forgotPasswordModal .form-group label {
    font-size: var(--font-12);
    font-family: var(--font-bold);
}

#forgotPasswordModal .form-group .form-control {
    height: 3rem;
}

#forgotPasswordModal .form-group .form-control::placeholder {
    font-size: var(--font-16);
    color: var(--grey-3e485480);
}

#forgotPasswordModal .form-group .error-message {
    padding: 2px 0;
    font-size: 0.75rem;
    color: var(--primary-red);
    font-size: var(--font-14);
    display: none;


}

#forgotPasswordModal .form-group .error-message.active {
    display: block;
}
#forgotPasswordModal .btn-red,
#forgotPasswordModal .btn-secondary{
    font-size: var(--font-14);

} */


/* *********************************************************************** */
/* Global Form Layout Start*/
/* *********************************************************************** */

.standard-form-layout {
    position: relative;
    width: 100%;
}

.standard-form-layout h3{
    color: var( --black-222);
    font-family: var(--font-regular);
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    line-height:1;
    margin-bottom: 1rem;
}

    .standard-form-layout .form-group {
        margin-bottom: 0.5rem;
    }

        .standard-form-layout .form-group label {
            color: var(--secondary-black-333);
            font-family: var(--font-regular);
            font-size: var(--font-12);
            font-style: normal;
            font-weight: 700;
            line-height: 1.4;
            
        }

        .standard-form-layout .form-group .form-control {
            padding: 10px 10px;
            color: var(--secondary-black-333);
            border-radius: 6px;
            border: 1px solid var(--grey-b2b2b2);
            height: 44px;
        }

            .standard-form-layout .form-group .form-control.custom-select {
                display: inline-block;
                width: 100%;
                /* height: calc(1.5em + .75rem + 2px);*/
                padding: .375rem 1.75rem .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                color: #6e707e;
                vertical-align: middle;
                background: #fff url(../img/svg/dropdown-arrow.svg) no-repeat;
                background-position: 97% 14px;
                border: 1px solid var(--grey-b2b2b2);
                border-radius: .35rem;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }
        /* .standard-form-layout .form-group  select option:hover{background-color:yellow;} */
        
        /* .standard-form-layout select option:hover{
            box-shadow: 0 0 10px 100px red inset !important;
            background-color: red;
            color:var(--white)
            } */
        .standard-form-layout .form-group select option:hover{
        box-shadow: 0 0 10px 100px var(--primary-red) inset !important;
        color:var(--white)
        }

        .standard-form-layout .form-group input.form-control::placeholder,
        .standard-form-layout .form-group textarea.form-control::placeholder {
            font-family: var(--font-regular);
            font-size: var(--font-14);
            font-style: normal;
            font-weight: 400;
            line-height: 1.4;
            color: var(--placeholder-color);
        }
      


    .standard-form-layout .error-message {
        padding: 2px 0;
        font-size: 0.75rem;
        color: var(--primary-red);
        font-size: var(--font-14);
        display: none;
    }

        .standard-form-layout .error-message.active {
            display: block;
        }

    .standard-form-layout .asterisk {
        color: var(--primary-red);
        font-size: var(--font-12);
        font-family: var(--font-regular);
    }
/* *********************************************************************** */
/* Global Form Layout End*/
/* *********************************************************************** */


/* Thankyou Message */
.thankyou-message-warapper{
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 3.375rem;
}
.thankyou-message-warapper .icon{
    display:flex;
   justify-content: center;
   margin-bottom: 10px;
}
.thankyou-message-warapper h1,
.thankyou-message-warapper p {
    color: var(--secondary-black-333);
    text-align: center;
}
.thankyou-message-warapper h1{
    font-size: var(--font-24);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
}
.thankyou-message-warapper p{
    font-size: var(--font-18);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0px;
}
.textarea-h-60 {
    height: 60px !important;
}
.textarea-h-88 {
    height: 88px !important;
}
.thankyou-modal-w {
    max-width: 500px;
}
}

/*#html_element {
    width: 304px;
    height: 78px;
    display: block;
    
}*/
/*    #html_element > div > div > iframe {
        width: 100%;
        height: auto;
        display:flex;
    }

#html_element_1 {
    width: 304px;
    height: 78px;
    display: block;
}*/
/*#html_element_1 {
    margin-bottom: 1rem!important;
}
#html_element_1 iframe {
    width: 100%;
    height: auto;
    display: flex;
}*/



.validation-summary-errors ul {
    margin-bottom: 0px
}
.validation-summary-errors ul li{
    padding-right: 35px;
}

/*animated success start*/
.animatedcheckmark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4bb71b;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4bb71b;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}

.animatedcheckmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4bb71b;
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.animatedcheckmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}

/*error animation*/
.checkmark-error {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #b51e3c;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #b51e3c;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

    .checkmark-error .checkmark_circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 2;
        stroke-miterlimit: 10;
        stroke: #b51e3c;
        fill: none;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }

    .checkmark-error .checkmark_check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    }

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        /*box-shadow: inset 0px 0px 0px 30px #b51e3c;*/
        box-shadow: inset 0px 0px 0px 1.875rem #fff;
    }
}

/*animated success end*/

.new-change-password-wrapper {
    padding: 2.5rem 2.5rem 2.5rem;
    margin:0;
    border-radius: .5rem;
    /* background-color: rgba(255, 255, 255, .87); */
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

    .new-change-password-wrapper .brand-logo {
        text-align: center;
        padding: 0rem 0 1rem 0;
    }

    .new-change-password-wrapper .welcome-text-wrapper {
        padding-bottom: 1.5rem;
    }

        .new-change-password-wrapper .welcome-text-wrapper h3 {
            color: var(--secondary-black-333);
            font-family: var(--font-regular);
            font-size: 24px;
            font-style: normal;
            font-weight: bold;
            line-height: 1;
            text-align: center;
        }


.change-password-inputwrapper {
    position: relative
}

    .change-password-inputwrapper .show-password {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
    }

        .change-password-inputwrapper .show-password i {
            display: flex;
            width: 20px;
            height: 20px;
            align-items: center;
        }