@font-face {
    font-family: 'NunitoSans-Regular';
    src: url('../../fonts/NunitoSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NunitoSans-SemiBold';
    src: url('../../fonts/NunitoSans-SemiBold.ttf') format('truetype');
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #555;
    cursor: default;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom-color: transparent;
}

.nav-tabs > li > a:hover {
    border-color: transparent;
}

.ShowForBigScreen .nav > li > a {
    padding: 10px 15px 0px 15px !important;
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: transparent;
}

.InactiveCircle {
    border-radius: 50%;
    background-color: #babbbd;
    width: 16px;
    height: 16px;
    margin-top: 17px;
    display: inline-block;
}

.BorderBottom::after {
    content: "";
    height: 3px;
    background-color: #ddd;
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 84px;
}

.SvgOnboarding {
    width: 33px;
    height: 30px;
    fill: #9baece;
    margin-top: 3px;
    margin-bottom: -2px;
}

.nav-tabs li.active .SvgOnboarding {
    fill: #466cab;
}

.nav-tabs li.active .LiText {
    opacity: 1;
}

.nav-tabs li.active .InactiveCircle {
    border-style: solid;
    border-width: 3px;
    border-color: rgb( 70, 108, 171 );
    border-radius: 50%;
    background-color: rgb( 255, 255, 255 );
    width: 25px;
    height: 25px;
    margin-top: 12px;
}

.nav-tabs li.completedTab .InactiveCircle {
    border-style: solid;
    border-width: 3px;
    border-color: rgb( 70, 108, 171 );
    border-radius: 50%;
    background-color: rgb( 255, 255, 255 );
    width: 25px;
    height: 25px;
    margin-top: 12px;
    background-image: url(../Images/checked.png);
    background-repeat: no-repeat;
    background-size: 18px 18px;
}


.nav-tabs li.completedTab .BorderBottom::after {
    background-color: #466cab;
}

.HeaderOuter {
    height: 84px;
    width: 100%;
    display: inline-block;
    box-shadow: 0px 0px 7px 0px rgba(1, 1, 1, 0.35);
    z-index: 4;
    background-color: #fff;
}

.MainLogo {
    position: relative;
    height: 41px;
    top: 21px;
    left: 28px;
}

.TimelineOuter {
    height: 88px;
    width: 100%;
    display: inline-block;
    background-color: #f1f1f1;
    position: relative;
    top: 3px;
}


.OTPMessage {
    font-size: 13px;
    font-family: 'OpenSans-Semibold';
    color: #000;
}

.MaxFromHt {
    height: 340px;
}

.EnterOTPHere {
    font-size: 11px;
    font-family: 'OpenSans-Semibold';
    color: #575757;
    margin-bottom: 5px;
}

.OTPNotRcv {
    margin: 15px 0;
}

    .OTPNotRcv a {
        font-size: 13px;
        font-family: 'OpenSans-Semibold';
        color: #cd161e !important;
        cursor: pointer;
    }


.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    text-align: center;
    height: 88px;
    border-bottom: transparent;
}

    .demo li {
        float: left;
        width: 25%;
    }

        .demo li img {
            width: 25px;
            height: 25px;
        }

.OtherthanIndia {
    font-size: 11px;
    font-family: 'OpenSans-Semibold';
    color: #000 !important;
}

.LiText {
    font-size: 11px;
    font-family: 'OpenSans-Semibold';
    color: #000 !important;
    opacity: 0.6;
}

.MaxFormHt {
    margin: 30px 0 25px;
}

.GetOtpTop {
    margin-top: 20px;
}

.CustomModalDialog .modal-content {
    border-radius: 4px !important;
    border: none !important;
}

.CustomModalDialog {
    width: 500px !important;
    margin-top: 60px !important;
}

.CustomModalHeader {
    padding: 18px 25px 18px 40px !important;
    background-image: linear-gradient(to right,#ff3333, #ff6666);
    background-color: #ff3333;
    display: inline-block;
    width: 100%;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    margin-bottom: 0px !important;
}

    .CustomModalHeader h4 {
        color: #fff !important;
        font-size: 24px !important; /*Temp Added*/
        margin-bottom: 0px !important;
        font-family: 'NunitoSans-SemiBold';
    }

        .CustomModalHeader h4 span {
            font-family: 'NunitoSans-SemiBold';
        }

    .CustomModalHeader .close, .CustomModalHeader .close:hover {
        color: #fff !important;
        font-size: 30px !important;
        filter: alpha(opacity=100) !important;
        opacity: 1 !important;
        font-weight: normal !important;
        padding: 2px 8px 4px 9px;
        border-radius: 50%;
        outline: none !important;
        margin-top: -0.5px !important;
    }

        .CustomModalHeader .close:hover {
            background-color: rgba(255, 255, 255, 0.25) !important;
        }

.CustomModalBody {
    padding: 24px 40px 0 40px !important;
    color: #33475b !important;
    display: inline-block;
    width: 100%;
}
.CustomModalDialog .CustomModalBody{
    padding: 24px 25px 0 25px !important;
}
    .CustomModalBody p {
        margin-bottom: 10px !important;
    }

.CustomModalFooter {
    padding: 24px 40px !important;
    text-align: left !important;
    display: inline-block;
    width: 100%;
    border-top: none !important;
}

.CustomModalBody .alertModalMSGLbl {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.09px;
}

.commonBtnCls {
    border-radius: 4px !important;
    border-style: solid;
    border-width: 1px;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    font-smoothing: auto;
    text-shadow: 0 0 1px transparent;
    font-weight: 400;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all .15s ease-out;
    cursor: pointer;
    display: inline-block;
    max-width: 100%;
    min-width: 130px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    padding: 9px 9px;
    font-size: 13px;
    font-family: 'NunitoSans-Regular';
    transition: all .55s ease-out;
    text-decoration: none !important;
}

.BtnCommonActive, .BtnCommonActive:active, .BtnCommonActive:focus, .BtnCommonActive:hover {
    background-color: #ff3333;
    border-color: #ff3333;
    color: #fff !important;
    outline: none !important;
    margin-right: 10px;
}

input[type=submit].BtnCommonActive[disabled] {
    background-color: #ff3333;
    border-color: #ff3333;
}

input[type=submit].BtnCommonActive[disabled] {
    cursor: not-allowed !important;
}

@media only screen and (min-width:992px) {
    .disouter {
        width: 928px;
        margin: 0 auto;
    }

    .demo {
        width: 928px;
        margin: 0 auto;
    }
}

@media only screen and (min-width:768px) {
    .OtpInner {
        /*width: 315px;*/
        margin: 25px auto 0;
    }

    .ShowForBigScreen {
        display: block;
    }

    .ShowForMobileScreen {
        display: none;
    }
}

@media only screen and (max-width:767px) {
    .OtpInner {
        width: 320px;
        margin: 25px auto 0;
    }

    .ShowForBigScreen {
        display: none;
    }

    .ShowForMobileScreen {
        display: block;
    }

    .MobNavBg {
        background-color: #466cab;
        border-color: #466cab;
    }

    .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    .navbarCollapseBg {
        background-color: #fff !important;
    }

    .BorderBottom, .InactiveCircle {
        display: none;
    }

    .navbarCollapseBg li {
        display: inline-block;
        width: 100%;
    }

    .navbarCollapseBg .nav-tabs {
        border-bottom: none !important;
    }

    .navbarCollapseBg .navbar-nav {
        margin: 1px -15px !important;
    }

    .navbarCollapseBg .nav-tabs li .LiText {
        opacity: 1;
        position: absolute;
        left: 55px;
        bottom: 13px;
    }

    .HideOnMob {
        display: none !important;
    }
}

.UploadDocOuter .input-group {
    /*display: inline-block !important;*/
}

.FileUploadbtnColor {
    border-radius: 6px !important;
    /*margin-top: 10px;*/
    margin-left: 10px !important;
    padding: 4px 7px 5px 9px !important;
}

.UploadDocOuter .group-span-filestyle {
    text-align: right;
}

.UploadDocOuter .icon-span-filestyle {
    font-size: 18px !important;
}

.UploadDocOuter .buttonText {
    display: none;
}

.KnowMyIFSC {
    float: right;
    font-size: 11px;
    font-family: 'OpenSans-Semibold';
    color: #000 !important;
    text-decoration: underline;
    cursor: pointer;
}

.IfscLabel, .lblDailyMandateAmount {
    font-size: 11px;
    margin-bottom: 7px;
    color: #575757;
    font-family: 'OpenSans-Semibold';
}

.TxtEnterOtp {
    text-align: center;
    background-color: #f0f0f0 !important;
    letter-spacing: 20px;
    text-indent: 20px;
}

.OTPMessageOuter {
    margin-bottom: 17px;
}

.FaInfoAdj {
    margin-top: 4px;
    margin-left: 8px;
}

/*added by yogesh 07/07/2018*/
.NewOtpSent {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    opacity: 0;
    filter: alpha(opacity=0);
    margin-bottom: 10px;
    margin-top: -5px;
}

.NewOtpSentBtn {
    font-size: 13px;
    color: #cd161e;
    cursor: pointer;
    background-color: transparent;
}

ul.ShowForBigScreen > li > a {
    pointer-events: none;
    cursor: default;
}

ul.navbar-nav.nav-tabs > li > a {
    pointer-events: none;
    cursor: default;
}

.alert .close {
    color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
}

.clsSuccess {
    color: #000000 !important;
}

.clsError {
    color: #000000 !important;
}

.OtpLinkloader {
    border: 5px solid #f0f0f0;
    border-radius: 50%;
    border-top: 5px solid #3498db;
    width: 20px;
    height: 20px;
    -webkit-animation: Loaderspin 1s linear infinite; /* Safari */
    animation: Loaderspin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes Loaderspin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes Loaderspin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}