:root {
    --w-100: 100%;
    --w-50: 50%;
    --p-0: 0px;
    --p-10: 10px;
    --p-20: 20px;
    --p-25: 25px;
    --p-30: 30px;
    --pl-0: 0px;
    --pl-10: 10px;
    --pl-20: 20px;
    --pl-30: 30px;
    --pl-40: 40px;
    --pl-50: 50px;
    --pr-0: 0px;
    --pr-10: 10px;
    --pr-20: 20px;
    --pr-30: 30px;
    --pr-40: 40px;
    --pr-50: 50px;
    --pt-10: 10px;
    --pt-20: 20px;
    --pt-30: 30px;
    --pt-40: 40px;
    --pt-50: 50px;
    --pt-60: 60px;
    --pt-70: 70px;
    --pt-80: 80px;
    --pb-10: 10px;
    --pb-20: 20px;
    --pb-30: 30px;
    --pb-40: 40px;
    --pb-50: 50px;
    --pb-60: 60px;
    --pb-70: 70px;
    --pb-80: 80px;
    --black-color-222: #222;
    --white-color: #fff;
    --hdfc-color: #00409f;
    --dark-blue-color: #025296;
    --dark-blue-color-text: #025296;
    --dark-blue-bg-color: #025296;
    --dark-blue-border-color: #025296;
    --blue-color: #1D86FF;
    --blue-color-text: #1D86FF;
    --blue-bg-color: #1D86FF;
    --blue-border-color: #1D86FF;
    --gray-text-color-86: #868686;
    --gray-border-color-86: #868686;
    --light-gray-bg-color-f5: #F5F5F5;
    --black-text-color: #000;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-19: 19px;
    --font-size-20: 20px;
    --font-size-21: 21px;
    --font-size-22: 22px;
    --font-size-23: 23px;
    --font-size-24: 24px;
    --border-radius-0: 0;
    --button-bg: #1D86FF;
    --button-text-color: #1D86FF;
    --button-border-color: #1D86FF;
}

.form-check label {
    font-weight: normal;
}

.d-flex {
    display: flex;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mb-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.bg-gray {
    background-color: #F9F9F9;
}

body {
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 80px;
}

p {
    font-size: var(--font-size-14)
}

/* .container {
    padding-left: var(--pl-20);
    padding-right: var(--pr-20);
}

.container-fluid {
    max-width: 760px;
} */


/* header css start */

header {
    background-color: var(--hdfc-color);
    padding-top: 12px;
    padding-bottom: 12px;
    display: none;
}

header .logo-icon {
    max-width: 22px;
    max-height: 22px;
    margin-right: 10px;
}

.header_row {
    font-size: var(--font-size-16);
    color: var(--white-color);
    font-weight: var(--font-weight-600);
    display: flex;
    align-items: center;
}


/* header css End */


/* login screen css start */

.loginBanner__section__img img {
    width: var(--w-100);
}

.loginBanner__section__img {
    /* max-height: 198px; */
    overflow: hidden;
}

.hdfcBank_logo__section {
    padding-top: var(--pt-20);
    padding-bottom: var(--pb-20);
}

.hdfcBank_logo__row img {
    max-width: 150px;
}

.login_headingText {
    padding-bottom: var(--pb-20);
}

.headingText {
    font-size: var(--font-size-24);
    color: var(--dark-blue-color-text);
}

.form-label {
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--gray-text-color-86);
    margin-bottom: 0;
}

.form-control {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    border-radius: var(--border-radius-0);
    padding: 3px 0 3px;
    color: var(--black-text-color);
    font-weight: var(--font-weight-500);
    box-shadow: none;
    height: auto;
    border: none !important;
    border-bottom: 1px solid !important;
    border-color: #c5c4c4 !important;
}

.custom_input,
.tel-number-field {
    border: none !Important;
    border-bottom: 1px solid #8686863b !Important;
}

input#customerId:focus {
    border-color: #e90a0a !important;
}

.login_CustomerID__form .form-control {
    letter-spacing: 2.5px;
}

.login_CustomerID__form .form-control {
    margin-top: 2px;
    ;
}

.form-control:focus {
    border-color: #8686863b;
    outline: 0;
    box-shadow: none;
}

.text-pretty {
    text-wrap-style: pretty;
}

.modal-header {
    border-bottom: none;
}

/* login screen css end */

footer {
    position: unset !important;
}

button.btn-primary {
    width: 300px;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-600);
    background-color: var(--button-bg);
    border-color: var(--button-border-color) !important;
}

button.btn-primary :hover,
button.btn-primary :active,
button.btn-primary :focus {
    background-color: #00409f;
    border-color: var(--button-border-color);
    color: var(--white-color);
}


button:disabled,
button[disabled] {
    background-color: #D0D3DC;
    border-color: #D0D3DC !important
}


/* education-fee-payment page css start */

.education_details_section {
    padding-top: var(--pt-20);
    padding-bottom: var(--pb-20);
}

.education_details_section__row {
    background-color: #ffffff;
    /* padding: var(--p-20); */
    border-radius: 10px;
}

.education_details_section__row__list p {
    margin-bottom: 0;
    margin-top: 4px;
    color: var(--black-text-color);
    font-weight: var(--font-weight-400);
    font-size: var(--font-size-16);
}

.black_color {
    padding-bottom: var(--p-0);
}

.black_color .form-label {
    color: var(--black-text-color);
    font-weight: var(--font-weight-300);
    font-size: var(--font-size-12);
}

.font-12{
    font-size: 12px;
}
.cardSavings__heading__text {
    color: #222;
    font-size: var(--font-size-16);
    font-weight: 600;
}

.cardSavings__row__part {
    padding-top: 24px;
}

.cardSavings__row {
    margin-top: 15px;
}

.cardSavings__subheading__text {
    font-size: var(--font-size-14);
    color: var(--gray-text-color-86);
    font-weight: bolder;
}

.cardSavings__row__part .cardSavings {
    border: 1px solid #dcd5d5a8;
    display: flex;
    border-radius: 4px;
    width: 100%;
    justify-content: space-between;
    box-shadow: 0 0 5px 3px #dddddd47;
    margin-top: 16px;
    min-width: 320px;
}

.cardSavings__row__part .cardSavings label {
    padding: 16px;
    display: flex;
    width: var(--w-100);
    justify-content: space-between;
    text-decoration: none;
    font-size: var(--font-size-14);
    color: var(--black-color-222);
    margin-bottom: 0;
    font-weight: var(--font-weight-400);
    align-items: center;
    position: relative;
}

.amount {
    color: #008D00;
    font-weight: var(--font-weight-600);
}

.cardSavings span {
    font-size: var(--font-size-12);
    color: #E5801A;
    font-weight: var(--font-weight-600);
}

.Current__insufficient__funds span {
    font-size: var(--font-size-14);
    color: #E5801A;
    font-weight: var(--font-weight-400);
    padding-top: 6px;
}

/* file-upload css start */
.file-upload-row,
.file-upload-row1 {
    min-height: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EAEDF4;
}

.file-upload,
.file-upload1 {
    width: 171px;
}

.file-upload-content,
.file-upload-content1 {
    display: none;
    text-align: center;
    width: 100%;
    height: 99px;
}

.file-upload-input,
.file-upload-input1 {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap,
.image-upload-wrap1 {
    border: 2px dashed #C7CBD5;
    position: relative;
}

.image-dropping,
.image-upload-wrap:hover,
.image-dropping1,
.image-upload-wrap1:hover {
    background-color: #EAEDF4;
    border: 2px dashed #C7CBD5;
}

.image-title-wrap,
.image-title-wrap1 {
    padding: 15px;
    color: #222;
    background: #EAEDF4;
    border: 2px dashed #C7CBD5;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.file-upload-image,
.file-upload-image1 {
    max-height: 200px;
    max-width: 200px;
    margin: auto;
    background-color: #EAEDF4;
}

.remove-image {
    margin: 0;
    color: #fff;
    background: #cd4535;
    border: none;
    padding: 0px;
    border-radius: 50px;
    border-bottom: 4px solid #b02818;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

.remove-image img {
    width: 14px;
    height: 14px;
}

.remove-image:hover {
    background: #c13b2a;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all .2s ease;
}

/* file-upload css end */

/* education-fee-payment page css end */

/*terms and conditions otp page css start*/

.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (0.5rem * 2));

}

.modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2));
}

.termsandconditionsOTP_modal .modal-header {
    border: none;
    padding: 0;
    /* text-align: center; */
}

.termsandconditionsOTP_modal .modal-body {
    border: none;
    padding: 0;
}

.termsandconditionsOTP_modal .modal-footer {
    border: none;
    padding: 0;
}

.termsandconditionsOTP_modal button.btn-close {
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 1;
}

#termsandconditionsOTP .modal-dialog {
    margin: 20px auto;
    padding-right: 13px;
    max-width: 340px;
}

.termsandconditionsOTP_modal {
    padding: 30px 17px;
    width: 100%;
}

.termsandconditionsOTP_modal .modal-title {
    font-size: 16px;
    font-weight: var(--font-weight-300);
    color: var(--black-text-color);
}

.termsandconditionsOTP_modal .modal-header p {
    margin-bottom: 0;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-500);
    color: var(--black-text-color);
    margin-top: 8px;
}

#termsandconditionsOTP .form-control {
    max-width: 14%;
    font-size: 35px;
    font-weight: var(--font-weight-600);
    color: var(--black-text-color);
    border-color: rgba(134, 134, 134, 0.4);
    text-align: center;
}


.otp_input_part {
    display: flex;
    justify-content: space-between;
    margin-top: 30px
}

.resend_otp_part {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    margin: 15px 0 30px;

}

.confirm_button {
    font-weight: var(--font-weight-300);
}

/*terms and conditions otp page css End*/

/* terms And Conditions  page css End */

/*payment succesfully page css start*/

.payment__succesfully__section_row {
    border-radius: 6px
}

.payment__succesfully__section_box {
    padding: 40px 20px;
}

.payment__succesfully__section_box h2 {
    margin: 0;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    padding-top: var(--pt-20)
}

.payment__succesfully__section_box p {
    margin: 0;
    font-weight: var(--font-weight-400);
    padding-top: var(--pt-30)
}

.ReferenceNumber h3 {
    margin: 0;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-300);
}

.ReferenceNumber h4 {
    margin: 0;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-600);
    padding-top: var(--pt-10)
}

/*payment succesfully page css End*/

/*other payment details page css start*/

.border-top {
    border-top: 1px solid #8686863b;
}

.card-header .button-down {
    right: 0;
    top: -10px;
    position: absolute;
}



.other_details_section .card .panel-collapse .card-body {
    padding: 10px 0px 0 0px;
}

.other_details_section .card-title {
    font-size: var(--font-size-20);
    position: relative;
    font-weight: var(--font-weight-700)
}

.other_details_section .>.card-header {
    background-color: #fff;
}

.other_details_section . .card+.card {
    margin-top: 20px;
}

.other_details_section .>.card-header {
    border: none;
}

.other_details_section .card-body {
    padding: 18px 0;
}

.other_details_section .card-title a {
    text-decoration: none;
    display: block;
}

.button-up,
.button-down {
    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    transition: all 0.2s linear;
}

.button-up::after,
.button-down::after {
    content: "";
    position: absolute;
    left: 0px;
    z-index: 11;
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.button-up::after {
    top: 20px;
    transform: rotate(45deg);
}

.button-down::after {
    top: 10px;
    transform: rotate(225deg);
}

#accordion .>.card-header {
    color: #333;
    /*    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;*/
}

. .card-header .card-title a:before {
    width: 0px !important;
}

.add_more_button {
    color: #1D86FF;
    background: transparent;
    border: 1px solid #1D86FF;
    text-align: center;
    border-radius: 8px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
}

.add_more_button svg {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 5px;
}

.Info {
    color: #d11212;
    font-size: var(--font-size-10) !important;
}

.flywire_link__row {
    padding: 5px 10px;
    /* border: 1px solid #e90a0a; */
    text-decoration: underline;
    font-weight: 200;
}

.cardSavings__row__part .cardSavings input {
    margin: 20px 0 20px 20px;
}

.no-margin {
    margin: none !important;
}

.termsAndConditions ul {
    padding: 0 0 0 15px;
}

.termsAndConditions ul li {
    color: #666;
    line-height: 1.5;
    /* text-align: justify; */
}

.isDisabled {
    color: #666;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none !important;
}

a.isDisabled:hover {
    color: #666;
}

.w-12 {
    width: 2rem;
}

.text-center {
    text-align: center;
}

/* outline-black{
outline: #000 solid 2 px;
outline-offset: 2px;
} */
.m-2 {
    margin: 0.5rem;
}

.h-12 {
    height: 3rem;
}

.border-gray-100 {
    --border-opacity: 1;
    border-color: rgba(247, 250, 252, var(--border-opacity));
}

.border-gray-100 {
    border: none;
    border-bottom: 2px solid grey;
}

.focus\:border-blue-400:focus {
    --border-opacity: 1;
    border-color: rgba(99, 179, 237, var(--border-opacity));
}

.focus\:bg-gray-200:focus {
    --bg-opacity: 1;
    background-color: rgba(237, 242, 247, var(--bg-opacity));
}

.cardSavings__row__part .cardSavings.active {
    box-shadow: 0 0 5px 3px #1d86ff5c;
}

div#data3 {
    background-color: #f3f3f3;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

div#data2 {
    background-color: #00409f17;
    padding: 15px;
    margin-top: 20px;
}

div#data1 {
    background-color: #f3f3f3;
    padding: 15px;
    margin-top: 20px;
}

div#data1 .form-control,
div#data2 .form-control,
div#data3 .form-control {
    background-color: transparent;
}

.remove_button {
    color: #1D86FF;
    background: transparent;
    border: 1px solid #1D86FF;
    text-align: center;
    border-radius: 50px;
    padding: 8px;
    display: flex;
    align-items: center;
    position: absolute;
    right: -24px;
    background: #fff;
}

.removebtnclass {
    display: flex;
    justify-content: end;
    align-items: end;
    position: relative;
}


.card-header .accordion-toggle .button-up::after,
.card-header .accordion-toggle .button-down::after {
    content: "";
    position: absolute;
    left: 0px;
    z-index: 11;
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #888888;
    border-left: 2px solid #888888;
}



.card-header .accordion-toggle.collapsed .button-down::after {
    transform: rotate(225deg);
    top: 10px;



}

.card-header .accordion-toggle .button-down::after {
    top: 16px;
    transform: rotate(45deg);
}

.file-upload,
.file-upload1 {
    display: flex;
    width: 285px;
}

.image-upload-wrap,
.image-upload-wrap1 {
    min-width: 171px;
}

.file-upload-content span.image-title,
.file-upload-content1 span.image-title1 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: calc(100% - 50px);
    text-align: left;
}

.remove-image {
    padding: 6px;
    width: 32px;
    height: 32px;
}

.cardSavings.Current__insufficient__funds {
    border: 1px solid #e10000a8;
}

.error {
    color: Red;
    display: none;
    font-size: 12px;
}

.validation_error {
    color: Red;
}

.custom_input:focus {
    border-bottom: 1px solid #ff0000 !Important;
}





/* otp modal css start */

#termsandconditionsOTP .Enter_OTP_modal_box {
    width: 400px;
    margin: 0 auto;
    max-width: 400px !important;
}

.Enter_OTP_modal_box .modal-content {
    border-radius: 10px;
    padding: 30px 20px 43px;
    width: 100%;
}

.Enter_OTP_modal .modal-header {
    text-align: left;
}

.Enter_OTP_modal .modal-title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-600);
}

.Enter_OTP_modal .modal-header p {
    font-weight: var(--font-weight-300);
    font-size: var(--font-size-20);
}

.Enter_OTP_modal .modal-header {
    margin-bottom: 50px;
}

.Enter_OTP_modal button.btn-close {
    border: none;
    background: transparent;
    top: 17px;
    right: 17px;
    color: #959AAA;
    font-size: 27px;
}

.Enter_OTP_modal .resend_otp_part {
    text-align: left;
}

.Resend_text {
    font-size: var(--font-size-16);
    color: #868686;
    text-decoration: none !important;
    opacity: 1;
}

.Resend_text strong {
    color: #444444;
}

.Enter_OTP_modal .otp_input {
    font-size: 35px;
    border-bottom: 1px solid #868686;
    color: var(--black-color-222) !important;
    margin: 0;
    margin-right: 18px;
    height: 48px;
}

.Enter_OTP_modal .otp_input:focus-visible {
    outline: none;
}

.Enter_OTP_modal .otp_input:focus {
    background: transparent;
}

h3 .d-block {
    display: inline-block;
}

p .m-block {
    display: none;
}

/** Stylesheet For Small Loader Start */
.resend_otp_part {
    align-items: center;
}

.m-loader_wrap_row {
    display: none;
    padding-left: 10px;
    margin-top: 10px;
}

.m-loader_wrap {
    position: relative;
    width: 16px;
    height: 16px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.m-loader_wrap .m-item {
    width: 8px;
    height: 8px;
    position: absolute;
}

.m-loader_wrap .m-item-1 {
    background-color: #e63232;
    top: 0;
    left: 0;
    z-index: 1;
    animation: m-item-1_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

.m-loader_wrap .m-item-2 {
    background-color: #003397;
    top: 0;
    right: 0;
    animation: m-item-2_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

.m-loader_wrap .m-item-3 {
    background-color: #000;
    bottom: 0;
    right: 0;
    z-index: 1;
    animation: m-item-3_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

.m-loader_wrap .m-item-4 {
    background-color: #8888;
    bottom: 0;
    left: 0;
    animation: m-item-4_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite;
}

@keyframes m-item-1_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(0, 8px)
    }

    50% {
        transform: translate(8px, 8px)
    }

    75% {
        transform: translate(8px, 0)
    }
}

@keyframes m-item-2_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-8px, 0)
    }

    50% {
        transform: translate(-8px, 8px)
    }

    75% {
        transform: translate(0, 8px)
    }
}

@keyframes m-item-3_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(0, -8px)
    }

    50% {
        transform: translate(-8px, -8px)
    }

    75% {
        transform: translate(-8px, 0)
    }
}

@keyframes m-item-4_move {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(8px, 0)
    }

    50% {
        transform: translate(8px, -8px)
    }

    75% {
        transform: translate(0, -8px)
    }
}

/** Stylesheet For Small Loader End */

/* otp  modal css End */

input[type="date"]::-webkit-calendar-picker-indicator {
    //background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%231D86FF" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
    -webkit-appearance: unset !important;
    display: none !important;
    visibility: visible !important;
}

.btn:focus,
.btn.focus,
.btn:active:focus,
.btn:active.focus,
.btn.active:focus,
.btn.active.focus {
    outline: none;
    outline-offset: 0;
}

.tel-number-field {
    width: 47px;
    font-size: 16px;
}

.container {
    max-width: 800px;
}

/* 
.wrapper-body {
    padding-bottom: 20px;
} */

.cardSavings__row__part .cardSavings label small {
    position: absolute;
    bottom: 1px;
    font-size: 12px;
    color: #868686;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background: white;
}

.form-check_row .form-check input[type="radio"] {
    margin-top: auto;
    margin-bottom: auto;
}

/** 
* Responsive CSS start
*/

body {
    background-color: #F9FBFF;
}

/* .container {
    max-width: 1000px;
} */

/* .container_inner {
    padding: 40px;
} */

.hdfcBank_logo__section {
    padding-top: var(--pt-30);
    padding-bottom: var(--pb-50);
}

.hdfcBank_logo__row img {
    max-width: 180px;
}

.login_section {
    padding: 30px 0;
}

.login_section_box {
    background-color: #fff;
}

.loginBanner__section__img {
    height: 100%;
    max-height: inherit;
}

.loginBanner__section__img img {
    height: 100%;
    object-fit: cover;
}

.login_right_box {
    padding: 2px 30px 80px 0px;
}

.login_CustomerID__form .form-control {
    font-size: 16px;
    letter-spacing: 0;
    margin: 0;
}


/* .continue_button:hover {
    border-color: #00409f !important;
} */

/* .form-check label {
    font-size: 12px;
} */

.font_size_12 {
    font-size: 12px;
}

input[type="checkbox"].form-check-input {
    margin-right: 8px;
}

.form_button_box {
    padding-top: 45px;
}

.desktop_show {
    display: block;
}

.mobile_show {
    display: none;
}


/* fee payment page html start */

.button_container {
    max-width: 460px;
    margin: 0 auto;

}

#footer_div {
    padding: 16px 0;
    background-color: white;
    margin-top: 76px;
    box-shadow: 0px -4px 3px 0px #00000014;
}

.radius_6 {
    border-radius: 6px;
}

.box_shadow {
    box-shadow: 0px 4px 12px rgba(12, 39, 70, 0.04);
}

.current_cardSavings .cardSavings {
    box-shadow: none;
}

.education_details_section__row__list {
    padding-bottom: 16px;
}

/*termsAndConditions page css start  */
.termsAndConditions_content {
    border: 1px solid #DEDEDE;
    padding: 15px;
    margin-bottom: 26px;
    font-size: var(--font-size-14);
    color: var(--black-text-color);
}

.termsAndConditions .form-check label {
    font-size: 14px;
}

.termsAndConditions .form-check label a {
    color: #1D86FF;
    text-decoration: none;
}

/*termsAndConditions page css End  */
/*fund details page css start*/
.bank_full_value {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-300);
    padding: 3px 0
}

.bank_full_value_box p {
    font-size: var(--font-size-13);
    color: var(--black-text-color);
}

.funddetails_form__section .row {
    margin-bottom: 35px
}

/* .funddetails_form__section .form-control { font-size: var( --font-size-18)  } */
.file-upload_box .form-label {
    color: var(--black-color-222);
}

.Info_tcs {
    font-size: var(--font-size-14);
    color: var(--black-text-color);
}



/*fund details page css End*/

/*remittance scheme page css start*/
.liberalized__remittance__scheme_radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

input[type="radio"],
input[type="checkbox"] {
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
}

.form-check_row span {}

.form-check_row {
    min-width: 100px;
    margin-left: 20px;
}

.form-check_row .form-check {
    margin: 0;
    font-size: var(--font-size-16)
}

.form-check_row span {
    padding-left: 9px;
}

.liberalized__remittance__scheme__form .form-control {
    border: none;
    border-bottom: 1px solid #CED3DB;
    line-height: normal !important;
}

.liberalized__remittance__scheme__form .form-check-label {
    font-size: 13px;
}


/*remittance scheme page css End*/

.payment_succesfully_box_part h2 {
    margin: 0;
    font-size: var(--font-size-16);
    padding: 16px 0 8px;
}

.payment_succesfully_box_part p {
    font-size: 14px;
}

.payment_succesfully_id {
    margin: 43px 0 25px
}

.payment_succesfully_id h3 {
    margin: 0;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-400)
}

.payment_succesfully_id h4 {
    margin: 0;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-500);
    color: #444444;
    margin-top: 8px;
}

.payment-succesfully_text p {
    color: var(--black-text-color);
    font-size: var(--font-size-16);
    margin-bottom: 0;
}

.payment-succesfully_text {
    margin-bottom: 20px;
}

.return_to_lywire_section {
    min-height: 320px;
}

.return_to_lywire_section img {
    padding-bottom: 36px;
}

.return_to_lywire_section p {
    max-width: 80%;
    margin: 0 auto;
    font-size: var(--font-size-16);
    margin: 0 auto;
}

.hdfc_bank_mobile_show {
    display: none;
}

/*other details page css start*/

.accordion-button {
    font-size: 16px;
    font-weight: 700;
}

.accordion-button:focus {
    border-color: unset;
    outline: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--dark-blue-color-text);
    background-color: unset;
    box-shadow: none;
}
/* other details page css end  */

/*
.payment__details_section_list {
    margin-bottom: 24px;
}

.data_section hr {
    margin: 12px 0 36px
}

.data_section p {
    font-size: var(--font-size-18);
    padding-top: 3px;
    font-weight: var(--font-weight-500)
}

.other_details_section .card-header {
    padding: 0 0 14px;
}

.button-down {
    display: none
}

. .card-header .card-title a {
    color: var(--black-text-color)
}

. .card-header .card-title a:hover {
    color: var(--black-text-color)
}

. .card-header .card-title a:before {
    display: none
}

.other_details_section . {
    padding-bottom: 16px;
}

.other_details_section {
    background: #F9FBFF;
    padding: 20px;

}

.other_details_section .card {
    background-color: #fff;
    border: none;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08) !important
}

.other_details_section .card-header {
    padding: 18px 0;
    border-radius: 4px;
}

.button-down {
    display: block
}

.payment__details_section_list {
    margin-bottom: 20px;
}

.data_section hr {
    margin: 10px 0 30px;
}

.data_section p {
    font-size: var(--font-size-16);
    padding-top: 3px;
    font-weight: var(--font-weight-500)
}

.other_details_section .card-header {
    padding: 0;
}

.other_details_section .card-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
}

.other_details_section . {
    padding: 16px;
}

.other_details_section .card .panel-collapse .card-body {
    padding: 5px;
    border-top: 1px solid #EAEDF4;
    margin-top: 16px;
    padding-top: 20px;
    padding-bottom: 0;
}

@media(min-width: 768px) {
    button.web_close {
        top: 8px !important;
        right: 8px !important;
        border: none !important;
        font-size: 30px;
        font-weight: normal;
        font-family: auto;
        color: #868686 !important;
    }
} 
*/


@media (max-width:767px) {
    .form-check_row .form-check {
        margin: 0;
        font-size: var(--font-size-14)
    }

    .termsAndConditions ul li {
        margin-bottom: 8px;
        text-align: justify;
    }

    header .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* .container {
        padding: 0 !important;
    } */

    .desktop_show {
        display: none;
    }

    .mobile_show {
        display: block;
    }

    .login_section_box .row.d-flex {
        display: inherit;
    }

    .login_CustomerID__form {
        padding-bottom: 30px;
    }

    .login_section {
        height: 100%;
        padding: 0;
    }

    .login_right_box {
        padding: 0 5px;
    }

    .hdfcBank_logo__section {
        padding-top: var(--pt-20);
        padding-bottom: var(--pb-40);
    }

    .login_section .container {
        padding: 0;
    }

    .m_m_0 {
        margin: 0;
    }

    .m_p_0 {
        padding-left: 0;
        padding-right: 0;
    }

    .form_button_box {
        box-shadow: 0 2px 10px 8px #00000014;
        position: absolute;
        left: -5px;
        right: -5px;
        padding: 20px 20px 17px;
    }

    .loginBanner__section__img {
        max-height: 198px;
    }

    .login_CustomerID__form .form-control,
    .tel-number-field {
        font-size: 16px;
        letter-spacing: 2.5px;
    }

    .login_CustomerID__form .form-check.d-flex {
        margin-bottom: 20px;
    }

    /* fee payment page css start */
    .education_details_section {
        padding: 0;
    }

    .container_inner {
        padding: 20px;
    }

    .education_details_section__row_part {
        background-color: var(--light-gray-bg-color-f5);
        padding: var(--p-20);
        border-radius: 10px;
        padding-bottom: 6px;
    }

    .education_details_section__row__list p {
        margin-top: 0px;
    }

    .education_details_section__row__list {
        padding-bottom: 10px;
    }

    .cardSavings__section .container_inner {
        padding-top: 4px;
        padding-bottom: 50px;

    }

    .button_container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cardSavings__row {
        margin-top: 0;
    }


    #termsandconditionsOTP .Enter_OTP_modal_box {
        width: auto;
        margin: 0 auto;
        max-width: 328px !important;
    }

    .Enter_OTP_modal_box .modal-content {
        border-radius: 10px;
        padding: 30px 17px 35px;
        width: 100%;
    }

    .Enter_OTP_modal .otp_input:last-child {
        margin-right: 0;
    }

    .Enter_OTP_modal .modal-header {
        margin-bottom: 30px;
    }

    .Enter_OTP_modal .modal-title {
        font-size: 28px;
        font-weight: var(--font-weight-300);
    }

    .Enter_OTP_modal .modal-header p {
        font-size: var(--font-size-14);
    }

    .Enter_OTP_modal button.btn-close {
        position: absolute;
        top: -12px;
        right: -12px;
        opacity: 1;

        background: #fff;
        display: inline-block;
        color: #1D86FF;
        border: 1px solid #1D86FF;
        text-align: center;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        position: absolute;
        background: #fff;
        padding: 0;
        width: 35px;
        text-align: center;
        height: 35px;
    }

    #termsandconditionsOTP .modal-dialog {
        padding-right: 5px;
    }

    h3 .d-block {
        display: none;
    }

    p .m-block {
        display: inline-block;
    }

    .cardSavings__row__part .cardSavings {
        min-width: auto !important;
        width: 100%;
        /* max-width: 320px; */
    }

    .radius_6 {
        border-radius: 0;

    }

    .box_shadow {
        box-shadow: none;
    }



    .termsAndConditions_content {
        border: none;
        padding: 0;

    }

    .termsAndConditions {
        padding-bottom: 50px;
    }

    /*fund details page css start*/
    .bank_full_value {
        font-size: var(--font-size-16);
    }

    .bank_full_value_box p {
        font-size: var(--font-size-12);
    }

    .funddetails_form__section .row {
        margin-bottom: 20px
    }

    .funddetails_form__section .form-control {
        font-size: var(--font-size-16)
    }

    .file-upload_box .form-label {
        color: var(--gray-text-color-86);
    }

    .Info_tcs {
        font-size: var(--font-size-12);
    }

    .liberalized__remittance__scheme__form .form-check-label {
        font-size: 12px;
    }

    input[type="radio"],
    input[type="checkbox"] {
        min-width: 16px;
        min-height: 16px;

    }

    .payment_succesfully_mobile_p_0 {
        padding-left: 0;
        padding-right: 0px;
    }

    .payment_succesfully_row {
        background: #F9F9F9;
        padding: 40px 20px 30px;
        margin-top: 15px;
    }

    .payment_succesfully_id {
        margin: 30px 0;
        padding: 0 20px
    }

    .payment-succesfully_text {
        padding: 0 20px;
        margin-bottom: 15px;
    }

    .payment-succesfully_text p {
        font-size: var(--font-size-14);
    }

    .payment_succesfully_id h3 {
        color: #444444;
    }

    .return_to_lywire_section {
        min-height: 250px;
    }

    .return_to_lywire_section img {
        padding-bottom: 21px;
    }

    .return_to_lywire_section p {
        max-width: 90%;
        font-size: var(--font-size-18);
        font-weight: var(--font-weight-600);
    }

    .hdfc_bank_mobile_show {
        display: block;
    }

    .hdfc_bank_mobile_show img {
        max-width: 120px;
        max-height: 24px;
        margin-bottom: 30px;
    }

    .cardSavings__row__part .cardSavings label {
        padding: 16px 5px;
    }

    header .container,
    footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/**
* Responsive CSS End
*/

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.text-italic {
    font-style: italic;
}

.validation_error {
    font-size: 12px;
}