@font-face {
    font-family: 'redhatregular';
    src: url("RedHatDisplay-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'redhatsemibold';
    src: url("RedHatDisplay-SemiBold.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'redhatbold';
    src: url("RedHatDisplay-Bold.ttf");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'redhatregular', sans-serif !important;
}

#formPageID a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.left-side {
    background: #0332a2;
    padding: 50px !important;
}

    .left-side .content {
        padding: 50px 50px 0 50px;
    }

        .left-side .content .logo {
            margin: 0 auto 50px auto;
            text-align: center;
        }

            .left-side .content .logo img {
                max-width: 210px;
            }

        .left-side .content h1,
        .left-side .content h2,
        .left-side .content h3,
        .left-side .content h4,
        .left-side .content h5,
        .left-side .content h6 {
            color: #fff;
        }

        .left-side .content h2 {
            font-size: 2rem;
            text-align: center;
            font-family: 'redhatbold', sans-serif !important;
            margin-bottom: 30px;
        }

        .left-side .content h3 {
            font-size: 1.5rem;
            text-align: center;
            font-family: 'redhatregular', sans-serif !important;
            margin-bottom: 30px;
        }

        .left-side .content .stepper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 50%;
            margin: 0 auto 30px auto;
        }

            .left-side .content .stepper .step {
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

                .left-side .content .stepper .step .no {
                    width: 10px;
                    height: 10px;
                    border-radius: 50px;
                    background: #7a96d9;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    font-family: 'redhatbold', sans-serif !important;
                    -webkit-transition: all ease 0.3s;
                    transition: all ease 0.3s;
                }

                .left-side .content .stepper .step .line {
                    width: 100px;
                    height: 1px;
                    background: #7a96d9;
                    margin: 0 10px;
                    -webkit-transition: all ease 0.3s;
                    transition: all ease 0.3s;
                }

                .left-side .content .stepper .step.active .no {
                    background: #fff !important;
                    width: 30px;
                    height: 30px;
                    font-size: 14px;
                    color: #000;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                .left-side .content .stepper .step.disabled .no {
                    color: transparent;
                }

                .left-side .content .stepper .step.done .no {
                    color: transparent;
                    background: #23aac2 !important;
                }

                .left-side .content .stepper .step.done .line {
                    background: #23aac2 !important;
                }

                .left-side .content .stepper .step:last-child .line {
                    display: none;
                }

        .left-side .content .formy {
            background: #fff;
            border-radius: 15px;
            padding: 30px;
        }

            .left-side .content .formy input::placeholder {
                font-size: 18px;
                color: #626262;
                border-color: #bac9d5;
                font-family: 'redhatsemibold', sans-serif !important;
            }

            .left-side .content .formy input {
                font-size: 22px;
                color: black;
                font-family: 'redhatsemibold', sans-serif;
                font-weight: bold;
            }

            .left-side .content .formy select {
                font-size: 18px;
                padding: 15px 10px 10px 10px !important;
                color: black;
                border-color: #bac9d5;
                font-family: 'redhatsemibold', sans-serif !important;
            }

            .left-side .content .formy label {
                margin-bottom: 5px;
                font-family: 'redhatsemibold', sans-serif !important;
            }

                .left-side .content .formy label span {
                    font-size: 16px;
                    color: #626262;
                    font-family: 'redhatregular', sans-serif !important;
                }

            .left-side .content .formy input[type="checkbox"] {
                padding: 0 !important;
            }

            .left-side .content .formy a {
                color: #23aac2;
            }

            .left-side .content .formy button {
                color: white;
                font-size: xx-large;
            }

            .left-side .content .formy p {
                font-size: 17px;
                color: #626262;
                margin-bottom: 0px;
                font-family: 'redhatsemibold', sans-serif !important;
            }

        .left-side .content .was-validated .is-invalid input {
            border-color: #dc3545 !important;
            padding-right: calc(1.5em + 0.75rem) !important;
            color: #dc3545 !important;
        }

            .left-side .content .was-validated .is-invalid input ::-webkit-input-placeholder {
                color: #dc3545 !important;
                opacity: 1;
            }

            .left-side .content .was-validated .is-invalid input :-ms-input-placeholder {
                color: #dc3545 !important;
                opacity: 1;
            }

            .left-side .content .was-validated .is-invalid input ::-ms-input-placeholder {
                color: #dc3545 !important;
                opacity: 1;
            }

            .left-side .content .was-validated .is-invalid input ::placeholder {
                color: #dc3545 !important;
                opacity: 1;
            }

            .left-side .content .was-validated .is-invalid input :-ms-input-placeholder {
                color: #dc3545 !important;
                opacity: 1;
            }

            .left-side .content .was-validated .is-invalid input ::-ms-input-placeholder {
                color: #dc3545 !important;
                opacity: 1;
            }

        .left-side .content .was-validated .is-invalid label {
            color: #dc3545 !important;
        }

    .left-side .sms-container h3 {
        color: #000;
        font-size: 1.2rem;
        max-width: 70%;
        margin: 0 auto;
    }

        .left-side .sms-container h3 span {
            font-family: 'redhatbold', sans-serif !important;
        }

    .left-side .sms-container .smsinput {
        color: #23aac2 !important;
        font-size: 40px !important;
        letter-spacing: 20px;
        text-align: center;
        border-radius: 10px;
        border: 1px solid #bac9d5 !important;
        padding: 5px !important;
        margin: 25px auto 25px auto;
        width: 100%;
    }

        .left-side .sms-container .smsinput:focus {
            outline: none;
            text-align: center;
        }

    .left-side .sms-container .input-container {
        text-align: center;
    }

    .left-side .sms-container ::-webkit-input-placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #23aac2;
        opacity: 1;
        /* Firefox */
    }

    .left-side .sms-container :-ms-input-placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #23aac2;
        opacity: 1;
        /* Firefox */
    }

    .left-side .sms-container ::-ms-input-placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #23aac2;
        opacity: 1;
        /* Firefox */
    }

    .left-side .sms-container ::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #23aac2;
        opacity: 1;
        /* Firefox */
    }

    .left-side .sms-container :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #23aac2;
    }

    .left-side .sms-container ::-ms-input-placeholder {
        /* Microsoft Edge */
        color: #23aac2;
    }

    .left-side .counter {
        text-align: center;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        width: 123px;
        height: 124px;
        background-color: #fff;
        border-radius: 120px;
        margin: 0 auto 25px auto;
        padding: 1.7px;
    }

        .left-side .counter .counter-white {
            width: 120px;
            height: 120px;
            background-color: #fff;
            border-radius: 120px;
            padding: 5px;
        }

        .left-side .counter .countdown {
            width: 110px;
            height: 110px;
            font-size: 20px;
            font-weight: normal;
            color: #fff;
            border-radius: 100px;
            background: #0332a2;
            padding: 28px 20px;
            text-align: center;
            margin: 0px auto;
            position: relative;
        }

    .left-side .timeover {
        background: #d11241 !important;
    }

    .left-side .limit {
        padding: 20px;
        background: #23aac2;
        font-size: 50px;
        color: #fff;
        text-align: center;
        font-family: 'redhatsemibold', sans-serif !important;
        border-radius: 10px;
        margin-bottom: 50px;
    }

        .left-side .limit span {
            font-size: 64px;
        }

    .left-side .limit-details {
        background: #fff;
        border-radius: 15px;
        padding: 30px 30px;
    }

        .left-side .limit-details h2 {
            color: #23aac2;
            font-size: 28px;
        }

        .left-side .limit-details h3 {
            color: #0332a2;
            font-size: 22px;
            font-family: 'redhatsemibold', sans-serif !important;
            text-align: left;
        }

            .left-side .limit-details h3 span {
                font-family: 'redhatbold', sans-serif !important;
                text-decoration: underline;
            }

        .left-side .limit-details p {
            font-size: 18px;
            text-align: center;
        }

        .left-side .limit-details ul {
        }

            .left-side .limit-details ul li {
                font-size: 20px;
                font-family: 'redhatsemibold', sans-serif !important;
                color: #626262;
                list-style-type: none;
                background: url(../dist/assets/cashLoanImages/check-icon.svg) no-repeat;
                background-position: left 50%;
                padding-left: 1.7em;
                margin-bottom: 15px;
            }

                .left-side .limit-details ul li span {
                    font-family: 'redhatbold', sans-serif !important;
                }

        .left-side .limit-details.negative h2 {
            color: #0332a2;
            font-size: 22px;
        }

        .left-side .limit-details .description {
            color: #626262;
            font-size: 14px;
        }

        .left-side .limit-details .qr-area {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: start;
            margin-top: 30px;
        }

            .left-side .limit-details .qr-area .qr-img {
                padding: 10px;
                background: rgba(3, 50, 162, 0.1);
                border-radius: 10px;
                margin-right: 25px;
            }

                .left-side .limit-details .qr-area .qr-img img {
                    width: 100px;
                }

            .left-side .limit-details .qr-area .qr-content {
                text-align: left;
            }

                .left-side .limit-details .qr-area .qr-content h1 {
                    font-size: 26px;
                    font-family: 'redhatbold', sans-serif !important;
                    color: #0332a2;
                }

                .left-side .limit-details .qr-area .qr-content p {
                    text-align: left;
                    line-height: 21px;
                    color: #626262;
                }

.right-side {
    margin: 0 !important;
    padding: 0 !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b5dff7), color-stop(#e0f1f9), to(#d0dde6));
    background-image: linear-gradient(#b5dff7, #e0f1f9, #d0dde6);
}

    .right-side .right-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 0 0 0;
    }

        .right-side .right-content .splashtext {
            padding: 0 100px;
            color: #0332a2;
            text-align: center;
        }

            .right-side .right-content .splashtext h2 {
                font-size: 2rem;
                font-family: 'redhatbold', sans-serif !important;
                position: relative;
                padding-bottom: 20px;
                padding-top: 40px;
            }

                .right-side .right-content .splashtext h2:after {
                    position: absolute;
                    bottom: 0;
                    left: 10%;
                    right: 10%;
                    width: 80%;
                    height: 1px;
                    background: #0332a2;
                    content: "";
                }

            .right-side .right-content .splashtext h3 {
                padding-top: 10px;
                font-size: 1.5rem;
            }

        .right-side .right-content .image-area {
            position: fixed;
            top: 0;
            right: 0;
            left: 50%;
            text-align:center;
            bottom: 0;
        }

            .right-side .right-content .image-area img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

.for-desktop {
    display: block;
}

@media screen and (max-width: 1199px) {
    .for-desktop {
        display: none;
    }

    .left-side {
        height: 100%;
        padding: 0px !important;
        width: 100%;
    }

        .left-side .content {
            padding: 30px 10px !important;
        }
}

.cashloan-row {
    height:100%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.cashloan-container-fluid {
    height: 100%;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px) {
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1400px) {
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1800px) {
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 40%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 60%;
    }
}

.form-floating {
    position: relative;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}

.form-floating > label {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

.g-3, .gy-3 {
    --bs-gutter-y: 1rem;
}

.g-3, .gx-3 {
    --bs-gutter-x: 1rem;
}

.form-floating mb-4 {
    margin-bottom: 1.5rem !important;
}

.btn-submit, .btn-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    width: 100% !important;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family:;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    font-family: var(--bs-btn-font-family);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-color: #23aac2 !important;
    background-color: #23aac2 !important;
    border-radius: 0.375rem;
    color: white;
    font-size: xx-large;
}

    .btn-submit:hover, .btn-default:hover {
        background: transparent !important;
        color: #23aac2 !important;
    }

.btn-submit-darkblue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0332A2;
    --bs-btn-border-color: #0332A2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0332A2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    width: 100% !important;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family:;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    font-family: var(--bs-btn-font-family);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-color: #0332A2 !important;
    background-color: #0332A2 !important;
    border-radius: 0.375rem;
    height: 40px;
    color: white;
    font-size: xx-large;
}

    .btn-submit-darkblue:hover{
        background: transparent !important;
        color: #0332A2 !important;
    }

.input-error-label {
    top: 40px;
    color: red;
}

.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.downArrowContainer {
    position: relative;
}

    .downArrowContainer img {
        position: absolute;
        right: 0.8rem;
        bottom: 1rem;
        z-index: 1;
    }

.select {
    word-wrap: normal;
}

.error-dialog-console {
    background-color: white;
    padding: 20px;
    width: 50%;
}

.overlay {
    background: rgba(3, 50, 162, 0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .overlay .loading-content {
        background: #fff;
        border-radius: 20px;
        padding: 50px;
        text-align: center;
    }

        .overlay .loading-content h2 {
            text-align: center;
            color: #0332a2;
            font-family: 'redhatsemibold', sans-serif !important;
            font-size: x-large;
        }

.mb-5 {
    margin-bottom: 3rem !important;
}

.overlay .loading-content .loading-img {
    width: 50%;
}

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

.left-side .content .steps-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50%;
    margin: 0 auto 30px auto;
}

    .left-side .content .steps-form .step {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .left-side .content .steps-form .step .no {
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background: #7a96d9;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-family: 'redhatbold', sans-serif !important;
            -webkit-transition: all ease 0.3s;
            transition: all ease 0.3s;
        }

        .left-side .content .steps-form .step .line {
            width: 100px;
            height: 1px;
            background: #7a96d9;
            margin: 0 10px;
            -webkit-transition: all ease 0.3s;
            transition: all ease 0.3s;
        }

        .left-side .content .steps-form .step.active .no {
            background: #fff !important;
            width: 30px;
            height: 30px;
            font-size: 14px;
            color: #000;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .left-side .content .steps-form .step.disabled .no {
            color: transparent;
        }

        .left-side .content .steps-form .step.done .no {
            color: transparent;
            background: #23aac2 !important;
        }

        .left-side .content .steps-form .step.done .line {
            background: #23aac2 !important;
        }

        .left-side .content .steps-form .step:last-child .line {
            display: none;
        }

.form-control:invalid {
    /*border-color: #dc3545;*/
    /* padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);*/
}



.btn-default-btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    width: 100% !important;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family:;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    font-family: var(--bs-btn-font-family);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-color: #0332a2 !important;
    background-color: #0332a2 !important;
    border-radius: 0.375rem;
}
.dateInput .v-input__append-inner {
    display: none;
}

.inputField {
    border: 1px solid #ced4da;
    color: black;
    outline: none;
    padding-left:15px;
    font-family: 'redhatbold', sans-serif !important;
}

.inputField-invalid {
    border: 1px solid #dc3545;
    outline: none;
    color: #dc3545;
    font-family: 'redhatbold', sans-serif !important;
    padding-left:15px;
}

    .inputField-invalid:focus {
        outline: none;
        border: 1px solid #23AAC2 !important;
        color: black !important;
        padding-top:18px
    }

        .inputField-invalid:focus::-webkit-input-placeholder {
            color: grey !important;
        }

input.inputField-invalid::-webkit-input-placeholder {
    color: red !important;
}

input.inputField::-webkit-input-placeholder {
    color: grey !important;
}

.inputField:focus {
    outline: none;
    border: 1px solid #23AAC2 !important;
    color: black !important;
}
.countdown {
    font-family: 'redhatbold', sans-serif !important;
}
.spanText {
    color: #626262;
    top: 0.5rem;
    position: absolute;
    left: 1rem;
    animation-name: spanTextAnimation;
    animation-duration: 2s;
    font-size: 11px;
    letter-spacing:0.5px;
    font-family: 'redhatregular', sans-serif !important;
}
.captchaImage{
    height:100%;
    max-width:100px;
}
#captchaID {
    min-width:100px;
    height:58px;
}

@keyframes spanTextAnimation {
    from {
        opacity: 0
    }

    to {
        opacity: 1;
    }
}

@media screen and (min-device-width: 370px) and (max-device-width: 1024px) {
    .left-side .content h2 {
        font-size: 1.7rem;
        margin-bottom: 15px;
    }

    .left-side .content .logo {
        margin: 0 auto 30px auto;
    }

    .left-side .content h3 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    .left-side .content {
        padding: 20px 50px 0 50px;
    }

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

    .overlay {
        display:contents;
    }

    .left-side .limit {
        margin-bottom: 20px;
        padding: 0px;
    }

    .left-side .content .formy button {
        font-size: x-large;
    }

    .overlay .loading-content {
        width: 100%;
    }

        .overlay .loading-content .loading-img{
            width: 80%;
        }

    .btn-submit-darkblue, .btn-submit, .btn-default, .btn-default-btn-blue {
        font-size: x-large;
        height: 50px;
    }
}

#formPageID{
    height:100%;
}

/*#region DobRedirectInfoPage*/
.left-side .limit-details .limit-details-header h1 {
    font-size: 26px;
    font-family: 'redhatbold', sans-serif !important;
    color: #0332a2;
}
.left-side .limit-details .dob-sms-icon ul li {
    font-size: 20px;
    font-family: 'redhatsemibold', sans-serif !important;
    color: #626262;
    list-style-type: none;
    background: url(../dist/assets/DobRedirectInfoImages/Icon_SMS.svg) no-repeat;
    background-position: left 50%;
    padding-left: 3.7em;
    margin-bottom: 15px;
}
.left-side .limit-details .dob-customer-icon ul li {
    font-size: 20px;
    font-family: 'redhatsemibold', sans-serif !important;
    color: #626262;
    list-style-type: none;
    background: url(../dist/assets/DobRedirectInfoImages/Icon_Musteri.svg) no-repeat;
    background-position: left 50%;
    padding-left: 3.7em;
    margin-bottom: 15px;
}
.left-side .limit-details .counter-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

    .left-side .limit-details .counter-area .counter-img {
        border-radius: 10px;
        margin-right: 25px;
    }

        .left-side .limit-details .counter-area .counter-img img {
            width: 100px;
        }

    .left-side .limit-details .counter-area .counter-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }

        .left-side .limit-details .counter-area .counter-content h1 {
            font-size: 26px;
            font-family: 'redhatbold', sans-serif !important;
            color: #0332a2;
        }

        .left-side .limit-details .counter-area .counter-content p {
            text-align: left;
            line-height: 21px;
            color: #626262;
        }

.dobredirectinfo-row {
    height: 100%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.dobredirectinfo-container-fluid {
    height: 100%;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
/*#endregion */