/*************************/
/**        HE-IL        **/
/*************************/

/** Instructions:                     **/
/** 1. Mobile and above style         **/
/** 2. Tablet and above style         **/
/**    Use @media (min-width: 768px)  **/
/** 3. Desktop and above style        **/
/**    Use @media (min-width: 992px)  **/


.tnaLogin { min-height: 300px; text-align: center; }
.tnaLogin .styledInput input { font: 20px/24px "AlmoniDLAAA400", Arial, Helvetica, sans-serif; color: #444; width: 300px; padding: 5px 0;     border-bottom: 1px solid #444;text-align:right;}
    .tnaLogin .stepPlaceHolder .description {
        font-family: "PoetiAAA700", Arial, Helvetica, sans-serif;
       
    }    

.tnaLogin .connectForm { padding: 46px 25px 10px; position: relative; }
.tnaLogin h1 { color: #444444; font: 32px/36px "PoetiAAA700", Arial, Helvetica, sans-serif; margin: 0 0 5px; margin-top:44px; }

.tnaLogin .connectForm h2 { color: #444444; font: 18px/26px "PoetiAAA700", Arial, Helvetica, sans-serif; margin: 0 0 5px; text-align:right; }
.tnaLogin .userImg { display: inline-block; position: absolute; right: calc(50% - 40px); top: -187px; width: 80px; }
.tnaLogin .userImg img { width: 100%; }
.tnaLogin .usernameField, .tnaLogin .passwordField { margin-top: 40px; position: relative; }
.tnaLogin .forgatPassword { margin-top: 5px; text-align: right; }
.tnaLogin .forgatPassword a { font: 18px/22px "AlmoniDLAAA700",Arial,Helvetica,sans-serif; color: #707070; }
.tnaLogin .forgatPassword a:hover, .tnaLogin .forgatPassword a:hover:visited, .tnaLogin .forgatPassword a:focus, .tnaLogin .forgatPassword a:focus:visited { text-decoration: underline; }
.tnaLogin .captchaField { margin-top: 25px;position:relative; }

.tnaLogin .loginBtnHide {display:none;}
.tnaLogin .loginBtn { text-align: center; margin-top: 45px; }
.tnaLogin .loginBtn input { background: none #bf8b30; border: 0 none; border-radius: 4px; color: #fff; display: inline-block; font: 24px "AlmoniDLAAA700", Arial, Helvetica, sans-serif; height: 50px; min-width: 173px; margin: 0; width: 300px; }
.tnaLogin .loginBtnFinish { margin-top: 20px; padding-top: 20px; margin-right: -30px; width: 120%; height: 90px; background-color: rgba(0,0,0,0.1);}
.tnaLogin .loginBtnFinish input {width: 180px;}
.tnaLogin .loginBtn input:hover, .tnaLogin .loginBtn input:hover:visited, .tnaLogin .loginBtn input:focus, .tnaLogin .loginBtn input:focus:visited { background: none #B0802C; }

.tnaLogin .joinSite { padding: 20px 0 40px; font: 20px/24px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif; color: #707070; }
.tnaLogin .joinSite a { color: #bf8b30; }
.tnaLogin .joinSite a:hover, .tnaLogin .joinSite a:hover:visited, .tnaLogin .joinSite a:focus, .tnaLogin .joinSite a:focus:visited { text-decoration: underline; }

.tnaLogin .info { display: none; }

.tnaLogin .errorMsg ul { color: #ca0101; font: 16px/14px "AlmoniDLAAA400",Arial,Helvetica,sans-serif; list-style: none; margin: 0; padding: 0; position: relative;}
.tnaLogin #home .errorMsg ul {top:30px;text-align:right;}
.tnaLogin #home .stepPlaceHolder .connectFormStep2 .errorMsg ul{top:95px;}
.tnaLogin .errorMsg li { position: absolute; }
.tnaLogin .loginErrorMsgWrapper { top: -10px; font-size: 12px; line-height: 10px; }
.tnaLogin .error:before { content: '!'; position: absolute; left: 11%; top: 3px; margin: 0 0 0 4px; font-size: 25px; line-height: 30px; color: #ca0101; text-align: center; width: 30px; height: 30px; border: 2px solid #ca0101; border-radius: 50%; font-family: "AlmoniDLAAA700", Arial, sans-serif; }

.tnaLogin #home .error:before{top:0px;}
.tnaLogin #home .stepPlaceHolder .connectFormStep2 .error:before{left:0%;} 

.tnaLogin .valid:after { content: ''; position: absolute; top: 14px; left: 50px; width: 15px; height: 12px; background: url(/Style%20Library/boj/images/Loans/ico-checked-blue-001.svg) no-repeat; -webkit-background-size: 15px auto; background-size: 15px auto; }
.tnaLogin #home .connectFormStep2 .valid:after{left:0px;} 
.tnaLogin .captchaField.error:before{left:1%}
 .tnaLogin .captchaField.valid:after{left:0px}
.tnaLogin .fade{
     opacity:0;
     transition:opacity .15s linear;
 }
.tnaLogin .fade.in, .fade.showTab{
     opacity:1;
 }
.tnaLogin .tab-content>.tab-pane{
     display:none;
 }
.tnaLogin  .tab-content>.active{
     display:block;
 }
.tnaLogin  .tab-content{
   display:inline-block;
}
.tnaLogin  .in
{
    display:block !important;
}

.tnaLogin  .nav-tabs .nav-item.in .nav-link,.nav-tabs .nav-link.active
{
    color:#495057;
    background-color:#fff;
    border-color:#dee2e6 #dee2e6 #fff;
}

.tnaLogin  .nav{
    list-style:none;
}


.IdRadioButtons .RadioDot2 {
    right: 67px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    background-color: #bf8b30;
    left: initial;
    top: 8px;
    display: none;
}

 .tnaLogin .nav > li > a
{
  background: #e6e9ee;
}
 .tnaLogin .nav-tabs
 {
     border-bottom:0px;
 }
  .tnaLogin .nav-tabs > li.active > a,.tnaLogin .nav-tabs > li.active > a:hover,.tnaLogin .nav-tabs > li.active > a:focus 
  {
      color:#c29628;
       font:20px/20px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
       border:0px;
       border-bottom:#bf8b30 3px solid;
  }
.tnaLogin .nav-tabs > li > a
{
    font-size:18px; font-weight:bold; color:#707070; font: 18px/20px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif; height: 60px;
}

.tnaLogin .nav-tabs > li
{
    margin-bottom:0px;
}
.tnaLogin .lblIdmodeRadioButtons,.tnaLogin .lblForm{
    font:18px/20px 'AlmoniDLAAA400', Arial, Helvetica, sans-serif;
    color:#444;
}
.tnaLogin .IdRadioButtons{
    margin-top:40px;
}
.tnaLogin .idmodeRadioButtons {
    padding: 0;
}
.radioSpacingElements.lblForm {
    padding-left: 12px;
}
.tnaLogin .idmodeRadioButtons label{
    margin-right:8px;
    margin-bottom:0px;
}


.tnaLogin .CancelStep2 a,.tnaLogin .CancelStep2 a:hover, .tnaLogin .CancelStep2 a:focus, .tnaLogin .CancelStep2 a:visited:hover, .tnaLogin .CancelStep2 a:visited:focus
{
     outline:0 none;
    text-decoration:none;
    display:inline-block;
    color:#a97822 !important;
    font: 24px/26px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
    
}
.tnaLogin .CancelStep2 .btnPreviousStepIcon { text-decoration: none; display: inline-block; color: #a97822 !important; font: 24px/26px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif; padding-left: 5px; }

.tnaLogin .stepPlaceHolder .connectForm h2.NoMarginTop{
    margin-top:0px;
}
.tnaLogin .loginBtnSendCode{ display: block;}
.tnaLogin .CancelStep2 {margin-left:45px;display:inline-block}

 .tnaLogin .styledInput input:focus { outline: none;     border-bottom: 1px solid #000 !important;}
.bg-login .TopStrip .bojDownloadAppSymbol {
    background: url(/Style%20Library/boj/images/tna/bojSymbolApp.png) no-repeat;
    display: inline-block;
    background-size: 42px 42px;
    width:42px;
    height:42px;
}
.bg-login .TopStrip .bojCloseButton {
    display: inline-block;
    background: url(/Style%20Library/boj/images/tna/bojCloseApp.png) no-repeat;
    background-size: 13px 13px;
    width: 13px;
    height: 13px;
    position:absolute;
    left:10px;
    top:10px;
}
.bg-login .TopStrip .loginAppStrip {
    background-color: #bf8b30;
    height: 80px;
    width: 100%;
    padding: 16px 11px 16px 14px;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    position: fixed;
    font: 17px/17px "AlmoniDLAAA700", Arial, Helvetica, sans-serif;
    z-index:999;
   
}
.bg-login .TopStrip .bojDownloadDescription {
    display: inline-block;
    color:#fff;
    width:50%;
    vertical-align:top;
    margin-right:10px;
    margin-left:5px;
    margin-top:5px;
    font-size:14px;
}
@media (max-width: 321px) {
    .bg-login .TopStrip .bojDownloadDescription {
        width: 47%;
    }
}

    .bg-login .TopStrip .bojDownloadAppButton {
        width: 85px;
        height: 42px;
        padding: 12px 18px 11px;
        border-radius: 26px;
        background-color: #fff;
        display: inline-block;
        vertical-align: top;
        color: #bf8b30;
    }

        .bg-login .TopStrip .bojDownloadAppButton a, .bg-login .TopStrip .bojDownloadAppButton a:hover, .bg-login .TopStrip .bojDownloadAppButton a:visited, .bg-login .TopStrip .bojDownloadAppButton a:visited:focus, .bg-login .TopStrip .bojDownloadAppButton a:visited:hover {
            color: #bf8b30;
            opacity:1;
        }

    .bg-login .TopStrip .closeAppStrip {
        width:100%;
        height:100%;
        display:block;
    }
    /*modal styles*/
    .modal {
        outline: none;
        overflow-y: auto;
        text-align: center;
        padding: 0 !important;
    }

        .modal .angularWithNewLines {
            white-space: pre-line;
        }

        .modal:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -4px;
        }

    .modal-backdrop {
        background: #000;
    }

        .modal-backdrop.in {
            opacity: 0.3;
        }

    .modal-dialog {
        max-width: 600px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: right;
    }

    .modal-content {
        width: 100%;
        border: 0;
        border-radius: 2px;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding: 20px;
        background: #fff;
        min-height: 100px;
    }

        .modal-content .inner-wrapper {
            max-width: 549px;
            margin: 0 auto;
            padding: 0;
            position: relative;
            font: 22px/25px "AlmoniDLAAA400",Arial,Helvetica,sans-serif;
        }

            .modal-content .inner-wrapper label {
                display: block;
                color: #707070;
                margin: 0 0 36px;
                font: 28px/30px 'AlmoniDLAAA400', sans-serif;
            }

            .modal-content .inner-wrapper h3 {
                color: #0185b6;
                margin: 0 70px 5px -20px;
                font: 27px/27px 'AlmoniDLAAA700', sans-serif;
            }

            .modal-content .inner-wrapper footer {
                padding: 29px 0 0;
                text-align: left;
            }

            .modal-content .inner-wrapper .btn {
                vertical-align: top;
                border: 0;
                font: 21px/25px 'AlmoniDLAAA700', sans-serif;
                padding: 9px 18px;
                border-radius: 2px;
                outline: 0 !important;
                white-space: normal;
                text-align: center;
                position: relative;
            }

            .modal-content .inner-wrapper .btn-primary {
                background: #bf8b30;
                color: #fff;
                border-radius: 5px;
                font: 28px/32px 'AlmoniDLAAA700', sans-serif;
                padding: 12px 20px;
                min-width: 206px;
            }

                .modal-content .inner-wrapper .btn-primary:hover, .modal-content .inner-wrapper .btn-primary:hover:visited,
                .modal-content .inner-wrapper .btn-primary:focus, .modal-content .inner-wrapper .btn-primary:focus:visited {
                    background: #b3812d;
                    color: #fff;
                }

            .modal-content .inner-wrapper .ico {
                position: absolute;
                z-index: 20;
                top: 9px;
                right: -26px;
                width: 92px;
            }

                .modal-content .inner-wrapper .ico.error {
                    width: 110px;
                    height: 45px;
                }

        .modal-content .btn-close {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 17px;
            right: auto;
            left: -10px;
            background: none;
            border: 0;
            direction: ltr;
            text-align: left;
            cursor: pointer;
            z-index: 30;
            overflow: hidden;
            text-indent: -9999px;
        }

            .modal-content .btn-close:focus {
                outline: none;
                opacity: 0.5;
            }

            .modal-content .btn-close:before, .modal-content .btn-close:after {
                width: 20px;
                height: 20px;
                margin: -10px 0 0 -10px;
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                background-repeat: no-repeat;
                background-position: 0 0;
                background-size: 20px 20px;
                z-index: 20;
                -webkit-transition: all .3s;
                transition: all .3s;
            }

            .modal-content .btn-close:before {
                background-image: url(/Style%20Library/boj/images/tna/ico-close-blue-01.svg);
            }

            .modal-content .btn-close:after {
                opacity: 0;
                background-image: url(/Style%20Library/boj/images/tna/ico-close-gold-01.svg);
            }

            .modal-content .btn-close:hover:before {
                opacity: 0;
            }

            .modal-content .btn-close:hover:after {
                opacity: 1;
            }

        .modal-content .inner-wrapper p {
            width: 80%;
            margin-right: 74px;
            font-size: 18px;
        }

    #ServiceErrorModal .errorCode {
        direction: ltr;
        text-align: left;
        position: absolute;
        top: 260px;
        left: 0px;
        color: #c9c9c9;
        font-size: 14px;
    }

    @media (min-width: 768px) {
        /*modals*/
        .modal-content .inner-wrapper p {
            font-size: 22px;
            margin-right: 0px;
            width: 100%;
        }

        .modal-content .inner-wrapper h3 {
            margin: 0 0px 5px -20px;
            font: 50px/54px 'AlmoniDLAAA700', sans-serif
        }

        .modal-content .inner-wrapper .ico.error {
            height: auto;
        }

        #ServiceErrorModal .errorCode {
            top: 300px;
            left: -60px;
        }

        .modal-dialog {
            max-width: 749px;
            width: 749px;
        }

        .modal-content {
            padding: 40px;
        }

            .modal-content .inner-wrapper .ico {
                right: 17px;
                top: 63px
            }

            .modal-content .inner-wrapper {
                padding: 52px 135px 62px 50px;
            }

            .modal-content .btn-close {
                left: 15px;
            }

        #s4-bodyContainer.bg-login {
            background: url("/Style%20Library/boj/images/tna/bg-login2.jpg") no-repeat scroll left -226px / cover transparent;
        }

            #s4-bodyContainer.bg-login .MainContent {
                position: relative;
            }

        .tnaLogin {
            min-height: 600px;
            text-align: right;
        }

            .tnaLogin .styledInput input {
                font-size: 22px;
                line-height: 27px;
                width: 230px;
                height: 38px;
                width: 180px;
            }

            .tnaLogin .styledInput.captchaField input {
                width: 100%;
            }

            .tnaLogin .outerWrapper {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 560px;
            }

            .tnaLogin .form {
                width: 430px;
                display: inline-block;
                background: none #fff;
                vertical-align: top;
            }

            .tnaLogin .connectForm {
                padding: 30px 75px;
            }

                .tnaLogin .connectForm h1 {
                    font-size: 36px;
                    line-height: 40px;
                    margin: 0;
                }

            .tnaLogin .userImg {
                top: 44px;
                right: -50px;
                width: 101px;
            }

            .tnaLogin .forgatPassword {
                margin-top: 10px;
            }

                .tnaLogin .forgatPassword a {
                    font-size: 18px;
                    line-height: 22px;
                }

            .tnaLogin .captchaField {
                margin-top: 0px;
            }

            .tnaLogin .nav-tabs > li.active > a, .tnaLogin .nav-tabs > li.active > a:hover, .tnaLogin .nav-tabs > li.active > a:focus {
                font: 16px/16px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
            }

            .tnaLogin .loginBtn {
                text-align: left;
            }

                .tnaLogin .loginBtn input {
                    font-size: 26px;
                    line-height: 26px;
                    height: 50px;
                    width: auto;
                }

            .tnaLogin .loginBtnFinish {
                background-color: transparent;
                padding-top: 0px;
                margin-right: 0px;
            }

                .tnaLogin .loginBtnFinish input {
                    width: auto;
                }

            .tnaLogin .joinSite {
                background: none #ffffff;
                padding: 15px;
                text-align: center;
                font-size: 21px;
                line-height: 26px;
            }

            .tnaLogin .loginBtnSendCode {
                margin-left: 90px;
            }

        #pnlCaptcha + .loginBtn {
            margin-top: 5px
        }

            #pnlCaptcha + .loginBtn input {
                height: 38px;
                padding: 4px 10px
            }


        .tnaLogin .info {
            background: none #30302e;
            width: 300px;
            height: 424px;
            display: inline-block;
            vertical-align: top;
            opacity: 0.9;
            color: #fff;
            padding: 30px;
        }

            .tnaLogin .info .title {
                font: 36px/32px 'PoetiAAA700', Arial, Helvetica, sans-serif;
                margin: 0 0 30px;
            }

            .tnaLogin .info .desc {
                font: 22px/24px 'AlmoniDLAAA400', Arial, Helvetica, sans-serif;
                margin: 0 0 30px;
            }

            .tnaLogin .info .link {
                font: 20px/24px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
                text-align: left;
            }

                .tnaLogin .info .link a {
                    color: #bf8b30;
                }


        .tnaLogin .errorMsg ul {
            font-size: 18px;
            line-height: 42px;
        }

        .tnaLogin #home .errorMsg ul, .tnaLogin #home .stepPlaceHolder .connectFormStep2 .errorMsg ul {
            top: 0px;
        }

        .tnaLogin .loginErrorMsgWrapper {
            top: -5px;
            font-size: 13px;
            line-height: 14px;
        }

        .tnaLogin .error:before {
            left: 18%;
        }

        .tnaLogin #home .error:before {
            top: 11px;
        }

        .tnaLogin #home .connectFormStep2 .valid:after {
            left: 65px;
        }

        .tnaLogin .nav-item {
            width: 50%;
        }

        .tnaLogin .nav-tabs {
            width: 582px;
            border: none;
        }

            .tnaLogin .nav-tabs > li.active > a, .tnaLogin .nav-tabs > li.active > a:hover, .tnaLogin .nav-tabs > li.active > a:focus {
                background: #fff;
                color: #a97822;
                border-top: 7px solid #bf8b30;
                border-bottom: 0px;
            }

            .tnaLogin .nav-tabs > li > a {
                border-radius: 0px;
                margin-right: 0px;
                border-top: 7px solid #e6e9ee;
                padding: 15px 30px 0 0;
                border-right: 1px solid #b5b7b9;
                border-bottom: 1px solid #b5b7b9;
            }

        .tnaLogin .stepPlaceHolder .connectForm h2 {
            margin-top: 0px;
        }

        .tnaLogin .loginBtnFinish .CancelStep2 {
            display: inline-block;
            margin-left: 186px;
            margin-right: 90px;
            margin-top:15px;
        }

        .tnaLogin .loginBtnStep .CancelStep2
        {
            margin-right:90px;
        }

        .tnaLogin h2.bigMarginBottom {
            margin-bottom: 123px;
        }
    }



    @media (min-width: 992px) {

        .tnaLogin {
            min-height: 774px;
        }

            .tnaLogin .styledInput input {
                font-size: 20px;
                line-height: 26px;
                width: 370px;
                padding: 10px 0;
                height: 47px;
                color: #908f8f;
            }

                .tnaLogin .styledInput input:focus {
                    outline: none;
                    border-bottom: 1px solid #000 !important;
                }

            .tnaLogin .styledInput.captchaField input {
                width: 370px;
            }

            .tnaLogin .form {
                width: 582px;
                height: 500px;
            }

            .tnaLogin .outerWrapper > .form:first-child {
                height: 500px;
            }

            .tnaLogin .connectForm {
                padding: 50px 75px 29px;
            }

        .connectForm.childForm {
            padding: 47px 75px 11px 75px;
        }

        .tnaLogin .connectForm h1 {
            font-size: 34px;
            line-height: 45px;
            margin: 0;
        }

        .tnaLogin .usernameField {
            margin-top: 30px;
        }

        .tnaLogin .passwordField {
            margin-top: 20px;
        }

        .tnaLogin .forgatPassword {
            margin-top: 20px;
        }

            .tnaLogin .forgatPassword a {
                font-size: 22px;
                line-height: 26px;
            }

        .tnaLogin .captchaField {
            margin-top: 0px;
        }

        .tnaLogin .navPlaceHolder {
        }

        .tnaLogin .stepPlaceHolder .description {
            line-height: 25px;
            color: #444444;
            font: 20px "PoetiAAA700", Arial, Helvetica, sans-serif;
            margin: 67px 0 49px;
        }

        .tnaLogin .description.approveNumber {
            margin-bottom: 125px;
        }

        .tnaLogin .loginBtn {
            margin-top: 46px;
        }

            .tnaLogin .loginBtn input {
                font-size: 24px;
                line-height: 34px;
                height: 60px;
                float: left;
                margin-left: 10px;
            }

        .tnaLogin .joinSite {
            font-size: 22px;
            line-height: 30px;
            color: #444;
            position: absolute;
            bottom: 0;
            width: 582px;
            border-top: 1px solid #e8eaed;
        }

        #LowerSitePanel {
            position: absolute;
            bottom: 0;
            width: 580px;
            border-top: 1px solid #e8eaed;
        }

        .tnaLogin .loginBtnSendCode {
            margin-top: 0px;
            margin-bottom: 0px;
        }

        .tnaLogin .loginBtn.loginBtnStep input {
            margin-left: 85px;
        }

        .tnaLogin .loginBtn.loginBtnFinish input {
            margin-left:205px;
        }

        .tnaLogin .loginBtnStep {
            width: 100%
        }

        .tnaLogin .connectForm.legalTerms h2 {
            margin-top: 5px;
        }

        .tnaLogin .connectForm.legalTerms {
            padding-bottom: 5px;
        }

        .tnaLogin .info {
            width: 388px;
            height: 560px;
            padding: 75px 50px;
            margin-right: -4px;
        }

            .tnaLogin .info .title {
                font-size: 45px;
                line-height: 40px;
                margin: 0 0 50px;
            }

            .tnaLogin .info .desc {
                font-size: 26px;
                line-height: 28px;
                margin: 0 0 50px;
            }

            .tnaLogin .info .link {
                font-size: 22px;
                line-height: 26px;
            }

        .tnaLogin .errorMsg ul {
            font-size: 18px;
        }

        .tnaLogin .loginErrorMsgWrapper {
            font-size: 18px;
            line-height: 20px;
        }

        .tnaLogin .error:before, .tnaLogin #home .stepPlaceHolder .connectFormStep2 .error:before {
            left: 14%;
            top: 11px;
        }

        .tnaLogin .captchaField.error:before {
            left: 14%
        }

        .tnaLogin .valid:after {
            top: 20px;
            left: 65px;
        }

        .tnaLogin .captchaField.valid:after {
            left: 65px
        }

        .LegalTermsContent {
            border: 1px solid #ced0d2;
            border-radius: 5px;
            min-height: 160px;
            margin-bottom: 30px;
            padding: 4px 15px;
            overflow: auto;
            max-height: 160px;
            margin-top: 30px;
        }

        .tnaLogin .nav-tabs > li.active > a, .tnaLogin .nav-tabs > li.active > a:hover, .tnaLogin .nav-tabs > li.active > a:focus {
            font: 18px/20px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
        }
    }

    @media (max-width:992px) {
        .tnaLogin .info {
            background: none #30302e;
            width: 300px;
            height: 557px;
            display: inline-block;
            vertical-align: top;
            opacity: 0.9;
            color: #fff;
            padding: 30px;
        }

        .tnaLogin .form {
            height: 497px;
        }

        .IdRadioButtons .RadioDot2 {
            right: 66px;
        }

        .tnaLogin .lblIdmodeRadioButtons, .tnaLogin .lblForm {
            width: auto;
        }

        .tnaLogin .idmodeRadioButtons {
            width: auto;
        }

        .description {
            font-size: 16px;
        }

        .tnaLogin .styledInput input {
            width: 100%;
        }

        .tnaLogin .info {
            margin-right: -4px;
        }

        .tnaLogin .joinSite {
            position: absolute;
            bottom: 0;
            width: 59%;
            padding: 30px 0 40px;
        }

        .btn-question {
            left: -48px;
        }

        .tnaLogin .CancelStep2 {
            margin-left: 55px;
        }

        .tnaLogin .info {
            height: 557px;
        }

        .tnaLogin .nav-tabs {
            width: 430px;
            border: none;
        }

        .LegalTermsContent {
            min-height: 160px;
            margin-bottom: 30px;
            padding: 4px 15px;
            overflow: auto;
            max-height: 160px;
        }

        .tnaLogin .styledInput input:focus {
            outline: none;
            border-bottom: 1px solid #000 !important;
        }
    }

    @media (max-width:768px) {
        #s4-bodyContainer.bg-login {
            min-height: 100vh;
        }

        .tnaLogin .form {
            height: auto;
        }

        .tnaLogin .nav-tabs {
            width: 82%;
            margin: 0 auto;
        }

            .tnaLogin .nav-tabs > li {
                width: 50%;
            }

        .tnaLogin .nav > li > a {
            background: transparent;
        }

        .tnaLogin .info {
            display: none;
        }

        .tnaLogin .tab-content {
            display: inline-block;
            width: 90%;
        }

        .tnaLogin .joinSite {
            position: initial;
            width: 100%;
        }

        .tnaLogin .nav-tabs > li.active > a, .tnaLogin .nav-tabs > li.active > a:hover, .tnaLogin .nav-tabs > li.active > a:focus {
            height: 38px;
        }

        .tnaLogin .loginBtn input {
            width: 88%;
        }

        .tnaLogin .IdRadioButtons {
            margin-top: 0px;
        }

        .btn-question {
            left: 0px;
        }

        .tnaLogin .description {
            text-align: right;
        }

        .tnaLogin .loginBtnFinish input {
            width: auto;
        }

        .tnaLogin .loginBtnSendCode {
            margin-bottom: 25px;
        }

        .tnaLogin .loginBtnFinish {
            margin-bottom: 0px;
        }

        .LegalTermsContent {
            min-height: 160px;
            margin-bottom: 0px;
            padding: 4px 15px;
            overflow: auto;
            max-height: 160px;
            text-align: right;
            margin-top: 25px;
        }

        .tnaLogin .CancelStep2 a {
            font: 21px/24px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
        }
    }

    @media (max-width: 450px) {
        .tnaLogin .loginBtn input {
            width: 90%;
        }

        .tnaLogin .nav-tabs > li.active > a, .tnaLogin .nav-tabs > li.active > a:hover, .tnaLogin .nav-tabs > li.active > a:focus {
            padding-right: 5px;
            padding-left: 5px;
        }

        .tnaLogin .connectForm {
            padding: 3px 10px 10px;
        }

        .tnaLogin .nav > li > a {
            padding-right: 5px;
            padding-left: 5px;
        }

        .tnaLogin .nav-tabs {
            width: 90%;
        }

        .tnaLogin .loginBtnFinish input {
            width: auto;
        }

        #ServiceErrorModal .errorCode {
            top: 82px;
        }

        .modal-content .inner-wrapper footer {
            position: relative;
        }
    }

    @media (max-width: 400px) {
        .TopStrip {
            padding: 5px 10px;
        }

        .tnaLogin h1 {
            font: 30px/34px "PoetiAAA700", Arial, Helvetica, sans-serif;
        }

        .tnaLogin .nav-tabs > li.active > a, .tnaLogin .nav-tabs > li.active > a:hover, .tnaLogin .nav-tabs > li.active > a:focus {
            font: 18px/20px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
        }

        .tnaLogin .nav-tabs > li > a {
            font: 18px/20px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
        }

        .tnaLogin .styledInput input {
            font: 18px/22px "AlmoniDLAAA400", Arial, Helvetica, sans-serif;
        }

        .tnaLogin .loginBtn input {
            font: 22px "AlmoniDLAAA700", Arial, Helvetica, sans-serif;
        }

        .tnaLogin .joinSite {
            font: 18px/22px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;
        }

        .tnaLogin .loginBtnFinish input {
            width: auto;
        }
    }

    @media (max-width: 370px) {
        .tnaLogin .forgatPassword a {
            font: 16px/20px "AlmoniDLAAA700",Arial,Helvetica,sans-serif;
        }

        .tnaLogin .loginBtnFinish input {
            width: auto;
        }

        .tnaLogin .CancelStep2 {
            margin-left: 30px;
        }
    }

    input[type="radio"]:checked:after {
        /* background-color: red; */
        border-radius: 50%;
        /* position: absolute; */
        width: 10px;
        height: 10px;
        background-color: #bf8b30;
        position: absolute;
        right: -2px;
        top: 8px;
    }

    input[type="radio"] {
        width: 17px;
        height: 17px;
    }

    .IdRadioButtons .RadioDot1 {
        width: 8px;
        height: 8px;
        border: 1px solid #000;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        background-color: #bf8b30;
        right: 5px;
        top: 8px;
    }

    .IdRadioButtons .RadioDot2 {
        width: 8px;
        height: 8px;
        border: 1px solid #000;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        background-color: #bf8b30;
        left: 45px;
        top: 8px;
        display: none;
    }

    .noSiteOB, .tnaLogin ul.nav.nav-tabs {
        display: none
    }

input#Button1 {
    visibility: hidden;
}

#hide-password-chars {
    background: white;
    position: absolute;
    height: 30px;
    width: 100px;
    right: 0;
    z-index: -10;
}

.pointer-events-none {
    pointer-events: none;
}